fix review comments

apps/design-system/src/pages/view-preview/view-preview.tsx

@@ -16,6 +16,7 @@ import PipelineGraphMinimalWrapper from '@subjects/views/pipeline-graph/pipeline
 import PipelineListWrapper from '@subjects/views/pipeline-list/pipeline-list'
 import { ProfileSettingsView } from '@subjects/views/profile-settings'
 import { ProfileSettingsKeysView } from '@subjects/views/profile-settings-keys'
+import { ProjectSettingsView } from '@subjects/views/project-settings/project-settings'
 import PullRequestCompareWrapper from '@subjects/views/pull-request-compare/pull-request-compare'
 import PullRequestChangesWrapper from '@subjects/views/pull-request-conversation/pull-request-changes-wrapper'
 import PullRequestCommits from '@subjects/views/pull-request-conversation/pull-request-commits'
@@ -234,6 +235,11 @@ export const viewPreviews: Record<string, ReactNode> = {
       <SpaceSettingsMembers />
     </ProjectSettingsWrapper>
   ),
+  'project-settings': (
+    <ProjectSettingsWrapper>
+      <ProjectSettingsView />
+    </ProjectSettingsWrapper>
+  ),
   'profile-settings': (
     <RootViewWrapper>
       <ProfileSettingsViewWrapper>

apps/design-system/src/subjects/views/execution-details/index.tsx

@@ -11,7 +11,7 @@ import { elements, logs, stages } from './mocks/mock-data'
 
 export const ExecutionDetailsView = () => {
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full flex-col">
       <ExecutionTabs />
       <ExecutionHeader
         commitName="8fbru3ix"
@@ -24,7 +24,7 @@ export const ExecutionDetailsView = () => {
         dataTransfer="4.21 kB/5 GB"
       />
       <div className="grid h-[inherit]" style={{ gridTemplateColumns: '1fr 3fr' }}>
-        <div className="flex flex-col gap-4 border border-white/10 border-r-0 border-t-0">
+        <div className="flex flex-col gap-4 border border-r-0 border-t-0 border-white/10">
           <PipelineStatus status={ExecutionState.RUNNING} buildTime="1h 30m" createdTime="10 mins ago" />
           <ExecutionTree
             defaultSelectedId="initialize"
@@ -34,7 +34,7 @@ export const ExecutionDetailsView = () => {
             }}
           />
         </div>
-        <div className="flex flex-col gap-4 border border-white/10 border-t-0">
+        <div className="flex flex-col gap-4 border border-t-0 border-white/10">
           <ExecutionInfo
             logs={logs}
             onCopy={() => {}}

apps/design-system/src/subjects/views/project-settings/project-settings.tsx

@@ -0,0 +1,24 @@
+import { noop, useTranslationStore } from '@utils/viewUtils'
+
+import { ISpaceStore, ProjectSettingsGeneralPage } from '@harnessio/ui/views'
+
+const useSpaceStore = (): ISpaceStore => ({
+  space: null,
+  isLoading: false,
+  setSpace: noop,
+  setIsLoading: noop
+})
+
+export const ProjectSettingsView = () => {
+  return (
+    <ProjectSettingsGeneralPage
+      useSpaceStore={useSpaceStore}
+      onFormSubmit={() => {}}
+      isUpdating={false}
+      isUpdateSuccess={false}
+      updateError={null}
+      setOpenDeleteDialog={() => {}}
+      useTranslationStore={useTranslationStore}
+    />
+  )
+}

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx

@@ -244,8 +244,6 @@ const PullRequestConversation: FC<PullRequestConversationProps> = ({ state }) =>
               setSearchLabelQuery={noop}
               addLabel={noop}
               removeLabel={noop}
-              addLabelError={undefined}
-              removeLabelError={undefined}
               useTranslationStore={useTranslationStore}
             />
           </SandboxLayout.Content>

apps/gitness/src/framework/context/AppContext.tsx

@@ -50,7 +50,7 @@ const AppContext = createContext<AppContextType>({
 export const AppProvider: FC<{ children: ReactNode }> = ({ children }) => {
   usePageTitle()
   const [spaces, setSpaces] = useState<TypesSpace[]>([])
-  const [isSpacesLoading, setSpacesIsLoading] = useState<boolean>(false)
+  const [isSpacesLoading, setSpacesIsLoading] = useState(false)
   const [currentUser, setCurrentUser] = useLocalStorage<TypesUser>('currentUser', {})
   const [isLoadingUser, setIsLoadingUser] = useState(false)
   const [isUpdatingUser, setIsUpdatingUser] = useState(false)
@@ -106,12 +106,14 @@ export const AppProvider: FC<{ children: ReactNode }> = ({ children }) => {
 
         if (membershipResult.status === 'fulfilled') {
           setSpaces(membershipResult.value.body.filter(item => item?.space).map(item => item.space as TypesSpace))
-          setSpacesIsLoading(false)
         }
       })
       .catch(() => {
         // Optionally handle error or show toast
       })
+      .finally(() => {
+        setSpacesIsLoading(false)
+      })
   }, [])
 
   const addSpaces = (newSpaces: TypesSpace[]): void => {

apps/gitness/src/pages-v2/project/project-general-settings-container.tsx

@@ -42,8 +42,8 @@ export const ProjectGeneralSettingsPageContainer = () => {
     }
   )
 
-  const handleFormSubmit = (formdata: ProjectSettingsGeneralFields) => {
-    updateDescription.mutate({ space_ref: space?.path, body: { description: formdata?.description } })
+  const handleFormSubmit = (formData: ProjectSettingsGeneralFields) => {
+    updateDescription.mutate({ space_ref: space?.path, body: { description: formData?.description } })
   }
 
   // delete API call here

apps/gitness/src/pages-v2/project/project-settings-layout.tsx

@@ -7,7 +7,7 @@ import { useTranslationStore } from '../../i18n/stores/i18n-store'
 export const ProjectSettingsLayout = () => {
   return (
     <>
-      <div className="bg-background-1 sticky top-[55px] z-40">
+      <div className="sticky top-[55px] z-40 bg-background-1">
         <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />

packages/canary/src/components/button.tsx

@@ -6,15 +6,15 @@ import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
-  'focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-[4px] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-[4px] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
-        outline: 'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
-        tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         split: 'flex items-center gap-1.5 border p-0',
@@ -35,9 +35,9 @@ const buttonVariants = cva(
       },
       theme: {
         default: '',
-        error: 'text-error border-[hsla(var(--error),0.3)] bg-[hsla(var(--error),0.1)]',
-        warning: 'text-warning border-[hsla(var(--warning),0.3)] bg-[hsla(var(--warning),0.1)]',
-        success: 'text-success border-[hsla(var(--success),0.3)] bg-[hsla(var(--success),0.1)]',
+        error: 'border-[hsla(var(--error),0.3)] bg-[hsla(var(--error),0.1)] text-error',
+        warning: 'border-[hsla(var(--warning),0.3)] bg-[hsla(var(--warning),0.1)] text-warning',
+        success: 'border-[hsla(var(--success),0.3)] bg-[hsla(var(--success),0.1)] text-success',
         muted: 'border-tertiary-background/20 bg-tertiary-background/10 text-tertiary-background',
         primary: 'border-primary-foreground/20 bg-primary text-primary-foreground'
       },

packages/canary/src/components/tabs.tsx

@@ -5,12 +5,12 @@ import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '../lib/utils'
 
-const tabsListVariants = cva('text-muted-foreground inline-flex items-center', {
+const tabsListVariants = cva('inline-flex items-center text-muted-foreground', {
   variants: {
     variant: {
-      default: 'bg-muted h-9 justify-center rounded-lg p-1',
+      default: 'h-9 justify-center rounded-lg bg-muted p-1',
       underline: 'h-11 justify-center gap-4',
-      navigation: 'border-border-background h-[44px] w-full justify-start gap-6 border-b px-8',
+      navigation: 'h-[44px] w-full justify-start gap-6 border-b border-border-background px-8',
       tabnav: 'h-[36px] w-full justify-start gap-0'
     }
   },
@@ -20,18 +20,18 @@ const tabsListVariants = cva('text-muted-foreground inline-flex items-center', {
 })
 
 const tabsTriggerVariants = cva(
-  'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
         default:
-          'data-[state=active]:bg-background data-[state=active]:text-foreground rounded-md data-[state=active]:shadow',
+          'rounded-md data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
         underline:
-          'data-[state=active]:border-primary data-[state=active]:text-primary m-0 h-11 border-b-2 border-solid border-b-transparent px-0 font-normal',
+          'm-0 h-11 border-b-2 border-solid border-b-transparent px-0 font-normal data-[state=active]:border-primary data-[state=active]:text-primary',
         navigation:
-          'text-tertiary-background hover:text-primary data-[state=active]:border-tertiary-background data-[state=active]:text-primary m-0 h-[44px] border-b border-solid border-b-transparent px-0 text-xs font-normal duration-150 ease-in-out',
+          'm-0 h-[44px] border-b border-solid border-b-transparent px-0 text-xs font-normal text-tertiary-background duration-150 ease-in-out hover:text-primary data-[state=active]:border-tertiary-background data-[state=active]:text-primary',
         tabnav:
-          'bg-background text-tertiary-background tabnav-inactive hover:text-primary data-[state=active]:text-primary data-[state=active]:tabnav-active [&svg]:data-[state=active]:text-primary m-0 h-[36px] items-center gap-2 rounded-t-md px-4 text-sm font-normal duration-150 ease-in-out'
+          'm-0 h-[36px] items-center gap-2 rounded-t-md bg-background px-4 text-sm font-normal text-tertiary-background duration-150 ease-in-out tabnav-inactive hover:text-primary data-[state=active]:text-primary data-[state=active]:tabnav-active [&svg]:data-[state=active]:text-primary'
       }
     },
     defaultVariants: {
@@ -41,7 +41,7 @@ const tabsTriggerVariants = cva(
 )
 
 const tabsContentVariants = cva(
-  'ring-offset-background focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+  'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
   {
     variants: {
       variant: {
@@ -72,9 +72,9 @@ const Tabs = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsP
         {variant === 'tabnav' ? (
           <div className="relative grid w-full grid-flow-col grid-cols-[auto_1fr] items-end">
             {children}
-            <div className="border-border-background h-[36px] border-b" />
-            <div className="border-border-background absolute right-full h-[36px] w-[9999px] border-b" />
-            <div className="border-border-background absolute left-full h-[36px] w-[9999px] border-b" />
+            <div className="h-[36px] border-b border-border-background" />
+            <div className="absolute right-full h-[36px] w-[9999px] border-b border-border-background" />
+            <div className="absolute left-full h-[36px] w-[9999px] border-b border-border-background" />
           </div>
         ) : (
           children

packages/ui/src/components/alert/AlertContainer.tsx

@@ -48,7 +48,7 @@ export const AlertContainer = forwardRef<HTMLDivElement, AlertContainerProps>(
         {closable && (
           <button
             type="button"
-            className="absolute top-2 right-2 text-gray-400 hover:text-gray-500"
+            className="absolute right-2 top-2 text-gray-400 hover:text-gray-500"
             onClick={() => setIsVisible(false)}
           >
             <Icon name="close" size={16} />

packages/ui/src/components/form-primitives/legend.tsx

@@ -24,9 +24,9 @@ interface LegendProps {
 export function Legend({ title, description, className, children }: PropsWithChildren<LegendProps>) {
   return (
     <section className={cn('grid gap-y-2.5', className)}>
-      <h6 className="text-foreground-1 text-18 font-medium leading-tight">{title}</h6>
+      <h6 className="text-18 font-medium leading-tight text-foreground-1">{title}</h6>
 
-      {description && <p className="text-foreground-2 text-sm">{description}</p>}
+      {description && <p className="text-sm text-foreground-2">{description}</p>}
 
       {children}
     </section>

packages/ui/src/views/execution/console-logs.tsx

@@ -63,14 +63,14 @@ const ConsoleLogs: FC<ConsoleLogsProps> = ({ logs, query }) => {
           <div className="mb-2 flex items-baseline justify-between leading-[21px]" key={index}>
             <div className="flex items-baseline gap-2">
               {pos !== undefined && !isNaN(pos) && pos >= 0 && (
-                <Text className="flex min-w-5 justify-end text-log">{pos}</Text>
+                <Text className="text-log flex min-w-5 justify-end">{pos}</Text>
               )}
               {time ? (
-                <Text className="flex text-sm font-normal text-log">[{formatTimestamp(time * 1_000)}]</Text>
+                <Text className="text-log flex text-sm font-normal">[{formatTimestamp(time * 1_000)}]</Text>
               ) : null}
               {out ? logText(out) : null}
             </div>
-            <Text className="mr-2 text-sm font-normal text-log">
+            <Text className="text-log mr-2 text-sm font-normal">
               {formatDuration(duration && duration > 0 ? duration * 1_000 : 0)}
             </Text>
           </div>

packages/ui/src/views/execution/execution-header.tsx

@@ -46,7 +46,7 @@ export const ExecutionHeader: React.FC<ExecutionHeaderProps> = ({
           <span className="text-primary">{title.title}</span>
         </Text>
       </div>
-      <div className="flex items-end gap-12 h-full">
+      <div className="flex h-full items-end gap-12">
         <div className="flex flex-col">
           <span className="text-foreground-5">Storage</span>
           <span className="text-primary">{storage}</span>

packages/ui/src/views/execution/execution-status.tsx

@@ -26,7 +26,7 @@ const Badge: React.FC<ExecutionStatusProps & BadgeProps> = props => {
     case ExecutionState.RUNNING:
       return minimal ? (
         <div className="flex items-center gap-1">
-          <div className="size-2 rounded-full bg-studio-3" />
+          <div className="bg-studio-3 size-2 rounded-full" />
           <span className="text-studio-3">Running</span>
         </div>
       ) : (

packages/ui/src/views/execution/key-value-table.tsx

@@ -20,12 +20,12 @@ export const KeyValueTable: React.FC<KeyValueTableProps> = ({
       if (typeof item.value === 'string') {
         return (
           <ul className="flex flex-row border-b align-middle" key={index}>
-            <li className="w-1/2 py-2.5 pr-2.5 text-studio-7" style={{ paddingLeft: `${level + 1}rem` }}>
+            <li className="text-studio-7 w-1/2 py-2.5 pr-2.5" style={{ paddingLeft: `${level + 1}rem` }}>
               <Text size={2} weight="normal">
                 {item.name}
               </Text>
             </li>
-            <li className="w-1/2 py-2.5 pl-1.5 pr-2.5 text-studio-7">
+            <li className="text-studio-7 w-1/2 py-2.5 pl-1.5 pr-2.5">
               <Text size={2} weight="normal">
                 {item.value}
               </Text>

packages/ui/src/views/execution/pipeline-status.tsx

@@ -14,7 +14,7 @@ export const PipelineStatus = ({
   createdTime: string
 }) => {
   return (
-    <div className="flex justify-between pl-6 pr-6 pt-3 pb-4 border-b">
+    <div className="flex justify-between border-b px-6 pb-4 pt-3">
       <div className="flex flex-col">
         <span className="text-foreground-5">Status</span>
         <ExecutionStatus.Badge status={status} />

packages/ui/src/views/execution/step-execution.tsx

@@ -69,7 +69,7 @@ export const StepExecution: React.FC<StepExecutionProps> = ({ step, logs, onEdit
           />
         </Layout.Horizontal>
         <TabsContent value={StepExecutionTab.LOG}>
-          <ScrollArea className="h-[calc(100vh-23rem)] border-t pt-4 px-2">
+          <ScrollArea className="h-[calc(100vh-23rem)] border-t px-2 pt-4">
             <ConsoleLogs logs={logs} query={query} />
           </ScrollArea>
         </TabsContent>

packages/ui/src/views/project/project-general/project-general-page.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
 import {
+  Alert,
   Button,
   ButtonGroup,
   ControlGroup,
@@ -11,8 +12,6 @@ import {
   Icon,
   Input,
   Legend,
-  Message,
-  MessageTheme,
   SkeletonForm,
   Textarea
 } from '@/components'
@@ -21,18 +20,14 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
 interface ProjectSettingsGeneralPageProps {
-  onFormSubmit: (formData: InputProps) => void
+  onFormSubmit: (formData: ProjectSettingsGeneralFields) => void
   isUpdating: boolean
   isUpdateSuccess: boolean
   updateError: string | null
   useSpaceStore: () => ISpaceStore
   setOpenDeleteDialog: () => void
   useTranslationStore: () => TranslationStore
 }
-interface InputProps {
-  identifier: string
-  description: string
-}
 
 const projectSettingsSchema = z.object({
   identifier: z.string().min(1, { message: 'Please provide a project name' }),
@@ -64,7 +59,7 @@ export const ProjectSettingsGeneralPage = ({
     mode: 'onSubmit',
     defaultValues: {
       identifier: spaceData?.identifier ?? '', //project name
-      description: spaceData?.description
+      description: spaceData?.description ?? ''
     }
   })
 
@@ -86,8 +81,8 @@ export const ProjectSettingsGeneralPage = ({
       }, 1000)
 
       reset({
-        identifier: spaceData?.identifier,
-        description: spaceData?.description
+        identifier: spaceData?.identifier ?? '',
+        description: spaceData?.description ?? ''
       })
 
       return () => clearTimeout(timer)
@@ -104,8 +99,8 @@ export const ProjectSettingsGeneralPage = ({
 
   useEffect(() => {
     reset({
-      identifier: spaceData?.identifier,
-      description: spaceData?.description
+      identifier: spaceData?.identifier ?? '',
+      description: spaceData?.description ?? ''
     })
   }, [spaceData, reset])
 
@@ -147,9 +142,14 @@ export const ProjectSettingsGeneralPage = ({
                     label={t('views:projectSettings.general.projectDescriptionLabel', 'Description')}
                     error={errors?.description?.message?.toString()}
                   />
-                  {updateError && <Message theme={MessageTheme.ERROR}>{updateError}</Message>}
                 </ControlGroup>
 
+                {updateError && (
+                  <Alert.Container variant="destructive">
+                    <Alert.Title>{updateError}</Alert.Title>
+                  </Alert.Container>
+                )}
+
                 {/*BUTTON CONTROL: SAVE & CANCEL*/}
                 <ControlGroup type="button">
                   <ButtonGroup spacing="3">