refactor: project settings page

pixel-point · Jan 28, 2025 · 6397abd · 6397abd
1 parent ee7a1da
commit 6397abd
Show file tree

Hide file tree

Showing 58 changed files with 414 additions and 292 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -37,7 +37,7 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "tailwindcss", "react", "react-hooks", "import", "prettier"],
+  "plugins": ["@typescript-eslint", "tailwindcss", "react", "react-hooks", "import", "prettier", "unused-imports"],
   "rules": {
     "tailwindcss/no-contradicting-classname": "error",
     "import/no-unresolved": "off",
@@ -47,11 +47,15 @@
     "jsx-a11y/click-events-have-key-events": "warn",
     "jsx-a11y/no-autofocus": "off",
 
-    "@typescript-eslint/no-unused-vars": [
-      "error",
+    "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
       {
-        "argsIgnorePattern": "^_",
+        "vars": "all",
+        "args": "after-used",
         "varsIgnorePattern": "^_",
+        "argsIgnorePattern": "^_",
         "caughtErrorsIgnorePattern": "^_"
       }
     ],

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,5 +9,10 @@
   "[ignore]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
   },
-  "prettier.trailingComma": "none"
+  "prettier.trailingComma": "none",
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always",
+    "source.fixAll.eslint": "always"
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
 }
diff --git a/apps/design-system/src/pages/view-preview/commit-details-diff-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/commit-details-diff-view-wrapper.tsx
@@ -3,7 +3,7 @@ import { FC, useCallback } from 'react'
 import { commitDetailsStore } from '@subjects/views/commit-details/commit-details-store'
 import { repoFilesStore } from '@subjects/views/repo-files/components/repo-files-store'
 import { renderEntries } from '@utils/fileViewUtils'
-import { noop, useTranslationsStore } from '@utils/viewUtils'
+import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { FileExplorer } from '@harnessio/ui/components'
 import { CommitDiff, CommitSidebar, ICommitDetailsStore } from '@harnessio/ui/views'
@@ -14,15 +14,15 @@ export const CommitDetailsDiffViewWrapper: FC = () => {
   return (
     <>
       <CommitSidebar
-        useTranslationStore={useTranslationsStore}
+        useTranslationStore={useTranslationStore}
         navigateToFile={() => {}}
         filesList={repoFilesStore.filesList}
       >
         <FileExplorer.Root onValueChange={noop} value={[]}>
           {renderEntries(repoFilesStore.filesTreeData, '')}
         </FileExplorer.Root>
       </CommitSidebar>
-      <CommitDiff useCommitDetailsStore={useCommitDetailsStore} useTranslationStore={useTranslationsStore} />
+      <CommitDiff useCommitDetailsStore={useCommitDetailsStore} useTranslationStore={useTranslationStore} />
     </>
   )
 }
diff --git a/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx b/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx
@@ -1,14 +1,16 @@
 import { FC, PropsWithChildren } from 'react'
 import { Route } from 'react-router-dom'
 
-import { ProjectSettingsPage } from '@harnessio/ui/views'
+import { useTranslationStore } from '@utils/viewUtils'
+
+import { ProjectSettingsTabNav } from '@harnessio/ui/views'
 
 import RootViewWrapper from './root-view-wrapper'
 
 const Layout = () => {
   return (
     <div className="bg-background-1 sticky top-[55px] z-40">
-      <ProjectSettingsPage />
+      <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
     </div>
   )
 }

diff --git a/apps/design-system/src/pages/view-preview/pull-request-layout-wrapper.tsx b/apps/design-system/src/pages/view-preview/pull-request-layout-wrapper.tsx
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useCallback } from 'react'
 import { Route } from 'react-router-dom'
 
 import { pullRequestStore } from '@subjects/views/pull-request-conversation/pull-request-store'
-import { useTranslationsStore } from '@utils/viewUtils'
+import { useTranslationStore } from '@utils/viewUtils'
 
 import { PullRequestLayout } from '@harnessio/ui/views'
 
@@ -21,7 +21,7 @@ const PullRequestLayoutWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLEl
         path="*"
         element={
           <PullRequestLayout
-            useTranslationStore={useTranslationsStore}
+            useTranslationStore={useTranslationStore}
             usePullRequestStore={usePullRequestStore}
             spaceId={''}
             repoId={''}

diff --git a/apps/design-system/src/pages/view-preview/repo-files-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-files-view-wrapper.tsx
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useCallback } from 'react'
 
 import { repoFilesStore } from '@subjects/views/repo-files/components/repo-files-store'
 import { renderEntries } from '@utils/fileViewUtils'
-import { noop, useTranslationsStore } from '@utils/viewUtils'
+import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { FileExplorer } from '@harnessio/ui/components'
 import { BranchSelectorTab, IBranchSelectorStore, RepoSidebar as RepoSidebarView } from '@harnessio/ui/views'
@@ -34,7 +34,7 @@ export const RepoFilesViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTM
       <RepoSidebarView
         selectBranchOrTag={noop}
         useRepoBranchesStore={useRepoBranchesStore}
-        useTranslationStore={useTranslationsStore}
+        useTranslationStore={useTranslationStore}
         navigateToNewFile={noop}
         navigateToFile={noop}
         filesList={repoFilesStore.filesList}

diff --git a/apps/design-system/src/pages/view-preview/repo-settings-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-settings-view-wrapper.tsx
@@ -1,14 +1,14 @@
 import { FC, PropsWithChildren } from 'react'
 import { Route, Routes } from 'react-router-dom'
 
-import { useTranslationsStore } from '@utils/viewUtils'
+import { useTranslationStore } from '@utils/viewUtils'
 
 import { RepoSettingsLayout } from '@harnessio/ui/views'
 
 export const RepoSettingsViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return (
     <Routes>
-      <Route path="*" element={<RepoSettingsLayout useTranslationStore={useTranslationsStore} />}>
+      <Route path="*" element={<RepoSettingsLayout useTranslationStore={useTranslationStore} />}>
         <Route path="*" element={children} />
       </Route>
     </Routes>

diff --git a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx
@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren } from 'react'
 import { Route } from 'react-router-dom'
 
-import { useTranslationsStore } from '@utils/viewUtils'
+import { useTranslationStore } from '@utils/viewUtils'
 
 import { RepoSubheader } from '@harnessio/ui/components'
 
@@ -14,7 +14,7 @@ const RepoViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>>
       element={
         <>
           <div className="layer-high sticky top-[55px] bg-background-1">
-            <RepoSubheader useTranslationStore={useTranslationsStore} />
+            <RepoSubheader useTranslationStore={useTranslationStore} />
           </div>
           {children}
         </>

diff --git a/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx
@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, useCallback, useState } from 'react'
 import { Outlet, Route, Routes } from 'react-router-dom'
 
-import { noop, useThemeStore, useTranslationsStore } from '@utils/viewUtils'
+import { noop, useThemeStore, useTranslationStore } from '@utils/viewUtils'
 
 import { Breadcrumb, MoreSubmenu, Navbar, NavbarItemType, SettingsMenu, Topbar } from '@harnessio/ui/components'
 import { SandboxLayout } from '@harnessio/ui/views'
@@ -50,7 +50,7 @@ const RootViewWrapper: FC<PropsWithChildren<{ asChild?: boolean }>> = ({ childre
                 handleChangePinnedMenuItem={setPinned}
                 handleRemoveRecentMenuItem={noop}
                 useThemeStore={useThemeStore}
-                useTranslationStore={useTranslationsStore}
+                useTranslationStore={useTranslationStore}
               />
               <MoreSubmenu showMoreMenu={showMoreMenu} handleMoreMenu={onToggleMoreMenu} items={moreMenu} />
               <SettingsMenu

diff --git a/apps/design-system/src/pages/view-preview/view-preview.tsx b/apps/design-system/src/pages/view-preview/view-preview.tsx
@@ -31,7 +31,7 @@ import { RepoWebhooksList } from '@subjects/views/repo-webhooks-list/repo-webhoo
 import { SignInView } from '@subjects/views/signin'
 import { SignUpView } from '@subjects/views/signup'
 import { SpaceSettingsMembers } from '@subjects/views/space-settings-members/space-settings-members'
-import { useTranslationsStore } from '@utils/viewUtils'
+import { useTranslationStore } from '@utils/viewUtils'
 
 import { NotFoundPage } from '@harnessio/ui/views'
 
@@ -188,7 +188,7 @@ export const viewPreviews: Record<string, ReactNode> = {
   'rule-not-found': (
     <RepoViewWrapper>
       <RepoSettingsViewWrapper>
-        <NotFoundPage useTranslationStore={useTranslationsStore} pageTypeText="rules" />
+        <NotFoundPage useTranslationStore={useTranslationStore} pageTypeText="rules" />
       </RepoSettingsViewWrapper>
     </RepoViewWrapper>
   ),

diff --git a/apps/design-system/src/subjects/views/commit-details/commit-details-store.ts b/apps/design-system/src/subjects/views/commit-details/commit-details-store.ts
@@ -812,7 +812,7 @@ export const commitDetailsStore: ICommitDetailsStore = {
               newNumber: 3
             },
             {
-              content: " import { noop, useThemeStore, useTranslationsStore } from '@utils/viewUtils'",
+              content: " import { noop, useThemeStore, useTranslationStore } from '@utils/viewUtils'",
               type: 'context',
               oldNumber: 4,
               newNumber: 4
@@ -1095,7 +1095,7 @@ export const commitDetailsStore: ICommitDetailsStore = {
       fileId:
         'apps/design-system/src/pages/view-preview/root-view-wrapper.tsx::::apps/design-system/src/pages/view-preview/root-view-wrapper.tsx',
       filePath: 'apps/design-system/src/pages/view-preview/root-view-wrapper.tsx',
-      raw: 'diff --git a/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx\nindex 31551abd93ce31e564e2304d83638dca29b302f2..57549ac177fdd0b5197f562edb3983a2f0197a1f 100644\n--- a/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx\n+++ b/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx\n@@ -3,16 +3,7 @@ import { Outlet, Route, Routes } from \'react-router-dom\'\n \n import { noop, useThemeStore, useTranslationsStore } from \'@utils/viewUtils\'\n \n-import {\n-  Breadcrumb,\n-  BreadcrumbItem,\n-  BreadcrumbLink,\n-  BreadcrumbList,\n-  BreadcrumbSeparator,\n-  Navbar,\n-  NavbarItemType,\n-  Topbar\n-} from \'@harnessio/ui/components\'\n+import { Breadcrumb, Navbar, NavbarItemType, Topbar } from \'@harnessio/ui/components\'\n import { SandboxLayout } from \'@harnessio/ui/views\'\n \n const RootViewWrapper: FC<PropsWithChildren<{ asChild?: boolean }>> = ({ children, asChild = false }) => {\n@@ -62,19 +53,19 @@ const RootViewWrapper: FC<PropsWithChildren<{ asChild?: boolean }>> = ({ childre\n               <div className="bg-background-1 sticky top-0 z-40">\n                 <Topbar.Root>\n                   <Topbar.Left>\n-                    <Breadcrumb className="select-none">\n-                      <BreadcrumbList>\n-                        <BreadcrumbItem>\n-                          <BreadcrumbLink href="#">Lorem</BreadcrumbLink>\n-                        </BreadcrumbItem>\n-                        <BreadcrumbSeparator />\n-                        <BreadcrumbItem>\n-                          <BreadcrumbLink href="#">Ipsum</BreadcrumbLink>\n-                        </BreadcrumbItem>\n-                        <BreadcrumbSeparator />\n-                        <BreadcrumbItem>Dolor</BreadcrumbItem>\n-                      </BreadcrumbList>\n-                    </Breadcrumb>\n+                    <Breadcrumb.Root className="select-none">\n+                      <Breadcrumb.List>\n+                        <Breadcrumb.Item>\n+                          <Breadcrumb.Link href="#">Lorem</Breadcrumb.Link>\n+                        </Breadcrumb.Item>\n+                        <Breadcrumb.Separator />\n+                        <Breadcrumb.Item>\n+                          <Breadcrumb.Link href="#">Ipsum</Breadcrumb.Link>\n+                        </Breadcrumb.Item>\n+                        <Breadcrumb.Separator />\n+                        <Breadcrumb.Item>Dolor</Breadcrumb.Item>\n+                      </Breadcrumb.List>\n+                    </Breadcrumb.Root>\n                   </Topbar.Left>\n                 </Topbar.Root>\n               </div>\n'
+      raw: 'diff --git a/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx\nindex 31551abd93ce31e564e2304d83638dca29b302f2..57549ac177fdd0b5197f562edb3983a2f0197a1f 100644\n--- a/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx\n+++ b/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx\n@@ -3,16 +3,7 @@ import { Outlet, Route, Routes } from \'react-router-dom\'\n \n import { noop, useThemeStore, useTranslationStore } from \'@utils/viewUtils\'\n \n-import {\n-  Breadcrumb,\n-  BreadcrumbItem,\n-  BreadcrumbLink,\n-  BreadcrumbList,\n-  BreadcrumbSeparator,\n-  Navbar,\n-  NavbarItemType,\n-  Topbar\n-} from \'@harnessio/ui/components\'\n+import { Breadcrumb, Navbar, NavbarItemType, Topbar } from \'@harnessio/ui/components\'\n import { SandboxLayout } from \'@harnessio/ui/views\'\n \n const RootViewWrapper: FC<PropsWithChildren<{ asChild?: boolean }>> = ({ children, asChild = false }) => {\n@@ -62,19 +53,19 @@ const RootViewWrapper: FC<PropsWithChildren<{ asChild?: boolean }>> = ({ childre\n               <div className="bg-background-1 sticky top-0 z-40">\n                 <Topbar.Root>\n                   <Topbar.Left>\n-                    <Breadcrumb className="select-none">\n-                      <BreadcrumbList>\n-                        <BreadcrumbItem>\n-                          <BreadcrumbLink href="#">Lorem</BreadcrumbLink>\n-                        </BreadcrumbItem>\n-                        <BreadcrumbSeparator />\n-                        <BreadcrumbItem>\n-                          <BreadcrumbLink href="#">Ipsum</BreadcrumbLink>\n-                        </BreadcrumbItem>\n-                        <BreadcrumbSeparator />\n-                        <BreadcrumbItem>Dolor</BreadcrumbItem>\n-                      </BreadcrumbList>\n-                    </Breadcrumb>\n+                    <Breadcrumb.Root className="select-none">\n+                      <Breadcrumb.List>\n+                        <Breadcrumb.Item>\n+                          <Breadcrumb.Link href="#">Lorem</Breadcrumb.Link>\n+                        </Breadcrumb.Item>\n+                        <Breadcrumb.Separator />\n+                        <Breadcrumb.Item>\n+                          <Breadcrumb.Link href="#">Ipsum</Breadcrumb.Link>\n+                        </Breadcrumb.Item>\n+                        <Breadcrumb.Separator />\n+                        <Breadcrumb.Item>Dolor</Breadcrumb.Item>\n+                      </Breadcrumb.List>\n+                    </Breadcrumb.Root>\n                   </Topbar.Left>\n                 </Topbar.Root>\n               </div>\n'
     },
     {
       blocks: [

diff --git a/apps/design-system/src/subjects/views/commit-details/index.tsx b/apps/design-system/src/subjects/views/commit-details/index.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { useTranslationsStore } from '@utils/viewUtils'
+import { useTranslationStore } from '@utils/viewUtils'
 
 import { ICommitDetailsStore, RepoCommitDetailsView } from '@harnessio/ui/views'
 
@@ -10,6 +10,6 @@ export const CommitDetailsView = () => {
   const useCommitDetailsStore = useCallback((): ICommitDetailsStore => commitDetailsStore, [])
 
   return (
-    <RepoCommitDetailsView useCommitDetailsStore={useCommitDetailsStore} useTranslationStore={useTranslationsStore} />
+    <RepoCommitDetailsView useCommitDetailsStore={useCommitDetailsStore} useTranslationStore={useTranslationStore} />
   )
 }
diff --git a/apps/design-system/src/subjects/views/execution-list/execution-list.tsx b/apps/design-system/src/subjects/views/execution-list/execution-list.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { Link } from 'react-router-dom'
 
-import { noop, useTranslationsStore } from '@utils/viewUtils'
+import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { ExecutionListPage, RepoSummaryViewProps, TLinkComponent } from '@harnessio/ui/views'
 
@@ -13,7 +13,7 @@ const ExecutionListWrapper: FC<Partial<RepoSummaryViewProps>> = () => {
   return (
     <ExecutionListPage
       useExecutionListStore={useExecutionListStore}
-      useTranslationStore={useTranslationsStore}
+      useTranslationStore={useTranslationStore}
       setSearchQuery={noop}
       isLoading={false}
       isError={false}

diff --git a/apps/design-system/src/subjects/views/labels/project-labels-list.tsx b/apps/design-system/src/subjects/views/labels/project-labels-list.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { noop, useTranslationsStore } from '@utils/viewUtils'
+import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { DeleteAlertDialog } from '@harnessio/ui/components'
 import { CreateLabelDialog, ProjectLabelsListView } from '@harnessio/ui/views'
@@ -15,7 +15,7 @@ export const ProjectLabelsList = () => {
     <>
       <ProjectLabelsListView
         useLabelsStore={RepoLabelsListStore.useLabelsStore}
-        useTranslationStore={useTranslationsStore}
+        useTranslationStore={useTranslationStore}
         handleDeleteLabel={() => setOpenAlertDeleteDialog(true)}
         handleEditLabel={() => setOpenCreateLabelDialog(true)}
         openCreateLabelDialog={() => setOpenCreateLabelDialog(true)}
@@ -27,7 +27,7 @@ export const ProjectLabelsList = () => {
         open={openCreateLabelDialog}
         onClose={() => setOpenCreateLabelDialog(false)}
         onSubmit={noop}
-        useTranslationStore={useTranslationsStore}
+        useTranslationStore={useTranslationStore}
         isCreatingLabel={false}
         error={''}
         useLabelsStore={RepoLabelsListStore.useLabelsStore}
@@ -39,7 +39,7 @@ export const ProjectLabelsList = () => {
         type="label"
         deleteFn={noop}
         isLoading={false}
-        useTranslationStore={useTranslationsStore}
+        useTranslationStore={useTranslationStore}
       />
     </>
   )

diff --git a/apps/design-system/src/subjects/views/labels/repo-labels-list.tsx b/apps/design-system/src/subjects/views/labels/repo-labels-list.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { noop, useTranslationsStore } from '@utils/viewUtils'
+import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { DeleteAlertDialog } from '@harnessio/ui/components'
 import { CreateLabelDialog, RepoLabelsListView } from '@harnessio/ui/views'
@@ -15,7 +15,7 @@ export const RepoLabelsList = () => {
     <>
       <RepoLabelsListView
         useLabelsStore={RepoLabelsListStore.useLabelsStore}
-        useTranslationStore={useTranslationsStore}
+        useTranslationStore={useTranslationStore}
         handleDeleteLabel={() => setOpenAlertDeleteDialog(true)}
         handleEditLabel={() => setOpenCreateLabelDialog(true)}
         openCreateLabelDialog={() => setOpenCreateLabelDialog(true)}
@@ -27,7 +27,7 @@ export const RepoLabelsList = () => {
         open={openCreateLabelDialog}
         onClose={() => setOpenCreateLabelDialog(false)}
         onSubmit={noop}
-        useTranslationStore={useTranslationsStore}
+        useTranslationStore={useTranslationStore}
         isCreatingLabel={false}
         error={''}
         useLabelsStore={RepoLabelsListStore.useLabelsStore}
@@ -39,7 +39,7 @@ export const RepoLabelsList = () => {
         type="label"
         deleteFn={noop}
         isLoading={false}
-        useTranslationStore={useTranslationsStore}
+        useTranslationStore={useTranslationStore}
       />
     </>
   )

diff --git a/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx b/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { Link } from 'react-router-dom'
 
-import { noop, useTranslationsStore } from '@utils/viewUtils'
+import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { CreatePipelineDialog, PipelineListPage, RepoSummaryViewProps, TLinkComponent } from '@harnessio/ui/views'
 
@@ -15,7 +15,7 @@ const PipelineListWrapper: FC<Partial<RepoSummaryViewProps>> = () => {
     <>
       <PipelineListPage
         usePipelineListStore={usePipelineListStore}
-        useTranslationStore={useTranslationsStore}
+        useTranslationStore={useTranslationStore}
         setSearchQuery={noop}
         isLoading={false}
         isError={false}

diff --git a/apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx b/apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback } from 'react'
 
-import { noop, useTranslationsStore } from '@utils/viewUtils'
+import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { PullRequestComparePage, PullRequestComparePageProps } from '@harnessio/ui/views'
 
@@ -59,7 +59,7 @@ const PullRequestCompareWrapper: FC<Partial<PullRequestComparePageProps>> = prop
       useRepoCommitsStore={useRepoCommitsListStore}
       searchCommitQuery={null}
       setSearchCommitQuery={noop}
-      useTranslationStore={useTranslationsStore}
+      useTranslationStore={useTranslationStore}
       isLoading={false}
       searchSourceQuery=""
       setSearchSourceQuery={noop}