refactor: tabs navigation

pixel-point · Feb 20, 2025 · a81abb0 · a81abb0
1 parent d9af599
commit a81abb0
Show file tree

Hide file tree

Showing 26 changed files with 209 additions and 178 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,5 +9,6 @@
   "[ignore]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
   },
-  "prettier.trailingComma": "none"
+  "prettier.trailingComma": "none",
+  "eslint.workingDirectories": [{ "pattern": "./apps/*/" }, { "pattern": "./packages/*/" }]
 }
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
@@ -3,14 +3,14 @@ import { Route } from 'react-router-dom'
 
 import { useTranslationStore } from '@utils/viewUtils'
 
-import { ProjectSettingsPage } from '@harnessio/ui/views'
+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 useTranslationStore={useTranslationStore} />
+    <div className="bg-background-1 top-14.5 sticky z-40">
+      <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
     </div>
   )
 }

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
@@ -13,7 +13,7 @@ const RepoViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>>
       path="*"
       element={
         <>
-          <div className="layer-high bg-background-1 sticky top-[55px]">
+          <div className="layer-high bg-background-1 top-14.5 sticky">
             <RepoSubheader useTranslationStore={useTranslationStore} />
           </div>
           {children}

diff --git a/apps/gitness/src/pages-v2/project/project-settings-layout.tsx b/apps/gitness/src/pages-v2/project/project-settings-layout.tsx
@@ -1,14 +1,14 @@
 import { Outlet } from 'react-router-dom'
 
-import { ProjectSettingsPage } from '@harnessio/ui/views'
+import { ProjectSettingsTabNav } from '@harnessio/ui/views'
 
 import { useTranslationStore } from '../../i18n/stores/i18n-store'
 
 export const ProjectSettingsLayout = () => {
   return (
     <>
-      <div className="sticky top-[55px] z-40 bg-background-1">
-        <ProjectSettingsPage useTranslationStore={useTranslationStore} />
+      <div className="sticky top-14.5 z-40 bg-background-1">
+        <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />
     </>

diff --git a/apps/gitness/src/pages-v2/repo/repo-layout.tsx b/apps/gitness/src/pages-v2/repo/repo-layout.tsx
@@ -10,7 +10,7 @@ const RepoLayout = () => {
 
   return (
     <>
-      <div className="layer-high sticky top-[55px] bg-background-1">
+      <div className="layer-high sticky top-14.5 bg-background-1">
         <RepoSubheader showPipelinesTab={!isMFE} useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />

diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx
@@ -36,7 +36,7 @@ import PullRequestConversationPage from './pages-v2/pull-request/pull-request-co
 import PullRequestDataProvider from './pages-v2/pull-request/pull-request-data-provider'
 import PullRequestLayout from './pages-v2/pull-request/pull-request-layout'
 import PullRequestListPage from './pages-v2/pull-request/pull-request-list'
-import { RepoLabelFormContainer } from './pages-v2/repo/labels/label-form-container.tsx'
+import { RepoLabelFormContainer } from './pages-v2/repo/labels/label-form-container'
 import { RepoLabelsList } from './pages-v2/repo/labels/labels-list-container'
 import { RepoBranchesListPage } from './pages-v2/repo/repo-branch-list'
 import { RepoBranchSettingsRulesPageContainer } from './pages-v2/repo/repo-branch-rules-container'

diff --git a/packages/pipeline-graph/src/pipeline-graph-internal.tsx b/packages/pipeline-graph/src/pipeline-graph-internal.tsx
@@ -74,7 +74,7 @@ export function PipelineGraphInternal(props: PipelineGraphInternalProps) {
 
       // draw lines
       if (svgGroupRef.current) {
-        let allPaths: { level1: string[]; level2: string[] } = { level1: [], level2: [] }
+        const allPaths: { level1: string[]; level2: string[] } = { level1: [], level2: [] }
         connections.map(portPair => {
           const levelPaths = getPortsConnectionPath({
             pipelineGraphRoot: rootContainerEl,

diff --git a/packages/pipeline-graph/src/pipeline-graph.tsx b/packages/pipeline-graph/src/pipeline-graph.tsx
@@ -8,13 +8,13 @@ import './pipeline-graph.css'
 import ContainerNodeProvider, { ContainerNodeProviderProps } from './context/container-node-provider'
 import { ParallelContainerConfig, SerialContainerConfig } from './types/container-node'
 
-export interface PipelineGraphProps extends
-    PipelineGraphInternalProps,
+export interface PipelineGraphProps
+  extends PipelineGraphInternalProps,
     Pick<ContainerNodeProviderProps, 'portComponent' | 'collapseButtonComponent'> {
-      nodes: NodeContent[]
-      serialContainerConfig?: Partial<SerialContainerConfig>
-      parallelContainerConfig?: Partial<ParallelContainerConfig>
-  }
+  nodes: NodeContent[]
+  serialContainerConfig?: Partial<SerialContainerConfig>
+  parallelContainerConfig?: Partial<ParallelContainerConfig>
+}
 
 export function PipelineGraph(props: PipelineGraphProps) {
   const {

diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json
@@ -283,6 +283,7 @@
   },
   "pullRequests": {
     "conversation": "Conversation",
+    "commits": "Commits",
     "changes": "Changes",
     "noCommitsYet": "No commits yet",
     "noCommitDataDescription": "There are no commits yet.",
@@ -335,7 +336,6 @@
     "compareChangesDraftButton": "Draft pull request",
     "compareChangesDraftButtonLoading": "Drafting pull request...",
     "replyHere": "Reply here",
-    "commits": "Commits",
     "noUsers": "No users found.",
     "showDiff": "Show Diff",
     "deletedFileDiff": "This file was deleted.",
@@ -402,6 +402,8 @@
     "sshKeys": "My SSH keys",
     "addSshKeyDescription": "SSH keys allow you to establish a secure connection to your code repository.",
     "addSshKey": "Add new SSH key",
+    "generalTab": "General",
+    "keysTab": "Keys and Tokens",
     "saving": "Saving...",
     "generalTab": "General",
     "keysTab": "Keys and Tokens"
@@ -463,4 +465,4 @@
     "edit": "Edit webhook",
     "delete": "Delete webhook"
   }
-}
+}
diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json
@@ -283,6 +283,7 @@
   },
   "pullRequests": {
     "conversation": "",
+    "commits": "",
     "changes": "",
     "noCommitsYet": "",
     "noCommitDataDescription": "",
@@ -330,8 +331,7 @@
     "compareChangesDiffLink": "aprender más sobre las comparaciones de diferencias",
     "compareChangesFormTitle": "Agregar un título",
     "compareChangesFormDescription": "Agregar una descripción",
-    "replyHere": "",
-    "commits": ""
+    "replyHere": ""
   },
   "notFound": {
     "title": "Algo salió mal…",
@@ -392,6 +392,8 @@
     "sshKeys": "My SSH keys",
     "addSshKeyDescription": "SSH keys allow you to establish a secure connection to your code repository.",
     "addSshKey": "Add new SSH key",
+    "generalTab": "General",
+    "keysTab": "Keys and Tokens",
     "saving": "Saving...",
     "generalTab": "General",
     "keysTab": "Keys and Tokens"
@@ -455,4 +457,4 @@
     "token": "Token",
     "status": "Status"
   }
-}
+}
diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json
@@ -283,6 +283,7 @@
   },
   "pullRequests": {
     "conversation": "Conversation",
+    "commits": "Commets",
     "changes": "Changements",
     "noCommitsYet": "",
     "noCommitDataDescription": "",
@@ -331,7 +332,6 @@
     "compareChangesFormTitle": "Ajouter un titre",
     "compareChangesFormDescription": "Ajouter une description",
     "replyHere": "Repondre ici",
-    "commits": "Commets",
     "noUsers": "Aucun utilisateur trouvé.",
     "showDiff": "Afficher la différence",
     "deletedFileDiff": "Ce fichier a été supprimé.",
@@ -398,6 +398,8 @@
     "sshKeys": "Mes clés SSH",
     "addSshKeyDescription": "Les clés SSH vous permettent d'établir une connexion sécurisée avec votre dépôt de code.",
     "addSshKey": "Ajouter une nouvelle clé SSH",
+    "generalTab": "General",
+    "keysTab": "Keys and Tokens",
     "saving": "Enregistrement...",
     "generalTab": "Général",
     "keysTab": "Clés et Jetons"
@@ -457,4 +459,4 @@
     "edit": "Edit webhook",
     "delete": "Delete webhook"
   }
-}
+}
diff --git a/packages/ui/src/components/repo-subheader.tsx b/packages/ui/src/components/repo-subheader.tsx
@@ -23,7 +23,7 @@ export const RepoSubheader = ({
   const { t } = useTranslationStore()
 
   return (
-    <SandboxLayout.SubHeader className="h-[45px] overflow-hidden">
+    <SandboxLayout.SubHeader className="top-14.5 h-11 overflow-hidden">
       <TabNav.Root>
         <TabNav.Item to="summary">{t('views:repos.summary', 'Summary')}</TabNav.Item>
         <TabNav.Item to="code">{t('views:repos.files', 'Files')}</TabNav.Item>

diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
@@ -33,9 +33,9 @@ const tabsTriggerVariants = cva(
         underline:
           'm-0 h-11 border-b-2 border-solid border-b-transparent px-0 font-normal data-[state=active]:border-primary',
         navigation:
-          'm-0 -mb-px h-[44px] border-b-2 border-solid border-b-transparent px-0 font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',
+          'm-0 my-1 h-9 px-0 text-14 font-normal leading-none text-foreground-2 duration-150 ease-in-out after:absolute after:inset-[-0.25rem_0] after:block after:border-b after:border-solid after:border-b-transparent hover:text-foreground-1 data-[state=active]:after:border-borders-9',
         tabnav:
-          'h-[36px] rounded-t-md border-x border-t border-transparent px-3.5 font-normal text-foreground-2 hover:text-foreground-1 data-[state=active]:border-borders-1 data-[state=active]:bg-background-1 data-[state=active]:text-foreground-1'
+          'h-9 rounded-t-md border-x border-t border-transparent px-3.5 font-normal text-foreground-2 hover:text-foreground-1 data-[state=active]:border-borders-1 data-[state=active]:bg-background-1 data-[state=active]:text-foreground-1'
       }
     },
     defaultVariants: {
@@ -118,7 +118,7 @@ const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigg
       >
         {/* Active tab Radial background - removed till we add different style */}
         {/* {context.variant === 'navigation' && (
-          <span className="bg-tab-gradient-radial absolute left-1/2 top-1/2 -z-10 hidden h-[calc(100%+40px)] w-[calc(100%+60px)] -translate-x-1/2 -translate-y-1/2 group-data-[state=active]:block" />
+          <span className="bg-tab-gradient-radial absolute left-1/2 top-1/2 -z-10 hidden h-[calc(100%+3rem)] w-[calc(100%+4.25rem)] -translate-x-1/2 -translate-y-1/2 group-data-[state=active]:block" />
         )} */}
         {children}
       </TabsPrimitive.Trigger>

diff --git a/packages/ui/src/components/topbar.tsx b/packages/ui/src/components/topbar.tsx
@@ -18,7 +18,7 @@ const Topbar = {
     return (
       <div
         className={cx(
-          `grid w-full ${gridCols} font-regular h-[55px] items-center gap-6 border-b border-borders-5 px-5 text-sm`,
+          `grid w-full ${gridCols} font-regular h-14.5 items-center gap-6 border-b border-borders-5 px-5 text-sm`,
           className
         )}
       >