refactor: tabs navigation

pixel-point · Jan 30, 2025 · 81bb55e · 81bb55e
1 parent 89713dc
commit 81bb55e
Show file tree

Hide file tree

Showing 15 changed files with 130 additions and 119 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
@@ -9,7 +9,7 @@ import RootViewWrapper from './root-view-wrapper'
 
 const Layout = () => {
   return (
-    <div className="bg-background-1 sticky top-[55px] z-40">
+    <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/profile-settings/profile-settings-layout.tsx b/apps/gitness/src/pages-v2/profile-settings/profile-settings-layout.tsx
@@ -10,7 +10,7 @@ export const ProfileSettingsLayout = () => {
 
   return (
     <>
-      <div className="bg-background-1 sticky top-[55px] z-40">
+      <div className="bg-background-1 sticky top-14.5 z-40">
         <ProfileSettingsTabNav activeTab={activeTab} useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />

diff --git a/apps/gitness/src/pages-v2/project/project-settings-layout.tsx b/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="bg-background-1 sticky top-14.5 z-40">
         <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 bg-background-1 top-14.5 sticky">
         <RepoSubheader showPipelinesTab={!isMFE} useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />

diff --git a/packages/ui/src/components/repo-subheader.tsx b/packages/ui/src/components/repo-subheader.tsx
@@ -1,5 +1,5 @@
-import { useMemo } from 'react'
-import { NavLink, useLocation } from 'react-router-dom'
+import { useCallback, useMemo } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import { Tabs, TabsList, TabsTrigger } from '@/components'
 import { SandboxLayout, TranslationStore } from '@/views'
@@ -23,9 +23,12 @@ export const RepoSubheader = ({
   useTranslationStore: () => TranslationStore
   showPipelinesTab?: boolean
 }) => {
+  const navigate = useNavigate()
   const location = useLocation()
   const { t } = useTranslationStore()
 
+  const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate])
+
   const activeTab = useMemo(() => {
     // Prioritize 'pulls' over 'commits' if both are present in the pathname
     if (location.pathname.includes(RepoTabsKeys.PULLS)) {
@@ -36,32 +39,32 @@ export const RepoSubheader = ({
   }, [location.pathname])
 
   return (
-    <SandboxLayout.SubHeader className="h-[45px] overflow-hidden">
+    <SandboxLayout.SubHeader className="top-14.5 h-11">
       <Tabs variant="navigation" value={activeTab}>
         <TabsList>
-          <NavLink to={RepoTabsKeys.SUMMARY}>
-            <TabsTrigger value="summary">{t('views:repos.summary', 'Summary')}</TabsTrigger>
-          </NavLink>
-          <NavLink to={RepoTabsKeys.CODE}>
-            <TabsTrigger value="code">{t('views:repos.files', 'Files')}</TabsTrigger>
-          </NavLink>
+          <TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>
+            {t('views:repos.summary', 'Summary')}
+          </TabsTrigger>
+          <TabsTrigger role="link" value="code" onClick={makeHandleTabChange(RepoTabsKeys.CODE)}>
+            {t('views:repos.files', 'Files')}
+          </TabsTrigger>
           {showPipelinesTab && (
-            <NavLink to={RepoTabsKeys.PIPELINES}>
-              <TabsTrigger value="pipelines">{t('views:repos.pipelines', 'Pipelines')}</TabsTrigger>
-            </NavLink>
+            <TabsTrigger role="link" value="pipelines" onClick={makeHandleTabChange(RepoTabsKeys.PIPELINES)}>
+              {t('views:repos.pipelines', 'Pipelines')}
+            </TabsTrigger>
           )}
-          <NavLink to={RepoTabsKeys.COMMITS}>
-            <TabsTrigger value="commits">{t('views:repos.commits', 'Commits')}</TabsTrigger>
-          </NavLink>
-          <NavLink to={RepoTabsKeys.PULLS}>
-            <TabsTrigger value="pulls">{t('views:repos.pull-requests', 'Pull Requests')}</TabsTrigger>
-          </NavLink>
-          <NavLink to={RepoTabsKeys.BRANCHES}>
-            <TabsTrigger value="branches">{t('views:repos.branches', 'Branches')}</TabsTrigger>
-          </NavLink>
-          <NavLink to={RepoTabsKeys.SETTINGS}>
-            <TabsTrigger value="settings">{t('views:repos.settings', 'Settings')}</TabsTrigger>
-          </NavLink>
+          <TabsTrigger role="link" value="commits" onClick={makeHandleTabChange(RepoTabsKeys.COMMITS)}>
+            {t('views:repos.commits', 'Commits')}
+          </TabsTrigger>
+          <TabsTrigger role="link" value="pulls" onClick={makeHandleTabChange(RepoTabsKeys.PULLS)}>
+            {t('views:repos.pull-requests', 'Pull Requests')}
+          </TabsTrigger>
+          <TabsTrigger role="link" value="branches" onClick={makeHandleTabChange(RepoTabsKeys.BRANCHES)}>
+            {t('views:repos.branches', 'Branches')}
+          </TabsTrigger>
+          <TabsTrigger role="link" value="settings" onClick={makeHandleTabChange(RepoTabsKeys.SETTINGS)}>
+            {t('views:repos.settings', 'Settings')}
+          </TabsTrigger>
         </TabsList>
       </Tabs>
     </SandboxLayout.SubHeader>

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
         )}
       >

diff --git a/packages/ui/src/views/layouts/PullRequestLayout.tsx b/packages/ui/src/views/layouts/PullRequestLayout.tsx
@@ -1,6 +1,8 @@
-import { NavLink, Outlet } from 'react-router-dom'
+import { useCallback } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 
 import { Badge, Icon, Spacer, Tabs, TabsList, TabsTrigger } from '@components/index'
+import { TabsTriggerProps } from '@radix-ui/react-tabs'
 import { TranslationStore } from '@views/repo'
 import { PullRequestHeader } from '@views/repo/pull-request/components/pull-request-header'
 import { IPullRequestStore } from '@views/repo/pull-request/pull-request.types'
@@ -30,10 +32,26 @@ const PullRequestLayout: React.FC<PullRequestLayoutProps> = ({
 }) => {
   const { pullRequest } = usePullRequestStore()
   const { t } = useTranslationStore()
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const getIsActiveTab = useCallback(
+    (tab: string) => (location.pathname.endsWith(tab) ? 'active' : 'inactive'),
+    [location.pathname]
+  )
+  const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate])
+
+  const getTabProps = (tab: PullRequestTabsKeys): TabsTriggerProps => ({
+    value: tab,
+    ...{ 'data-state': getIsActiveTab(tab) },
+    onClick: makeHandleTabChange(tab),
+    className: 'gap-x-1.5',
+    role: 'link'
+  })
 
   return (
     <SandboxLayout.Main fullWidth>
-      <SandboxLayout.Content className="px-6 max-w-[1500px]">
+      <SandboxLayout.Content className="max-w-[1500px] px-6">
         {pullRequest && (
           <>
             <PullRequestHeader
@@ -59,54 +77,30 @@ const PullRequestLayout: React.FC<PullRequestLayoutProps> = ({
         )}
         <Tabs variant="tabnav">
           <TabsList className="left-1/2 w-[calc(100%+48px)] -translate-x-1/2 px-6">
-            <NavLink to={PullRequestTabsKeys.CONVERSATION}>
-              {({ isActive }) => (
-                <TabsTrigger
-                  className="gap-x-1.5"
-                  value={PullRequestTabsKeys.CONVERSATION}
-                  data-state={isActive ? 'active' : 'inactive'}
-                >
-                  <div className="flex items-center gap-x-1">
-                    <Icon size={14} name="comments" />
-                    {t('views:pullRequests.conversation')}
-                  </div>
-                </TabsTrigger>
-              )}
-            </NavLink>
-            <NavLink to={PullRequestTabsKeys.COMMITS}>
-              {({ isActive }) => (
-                <TabsTrigger
-                  className="gap-x-1.5"
-                  value={PullRequestTabsKeys.COMMITS}
-                  data-state={isActive ? 'active' : 'inactive'}
-                >
-                  <div className="flex items-center gap-x-1">
-                    <Icon size={14} name="tube-sign" />
-                    {t('views:repos.commits')}
-                  </div>
-                  <Badge variant="outline" size="xs" borderRadius="base">
-                    {pullRequest?.stats?.commits}
-                  </Badge>
-                </TabsTrigger>
-              )}
-            </NavLink>
-            <NavLink to={PullRequestTabsKeys.CHANGES}>
-              {({ isActive }) => (
-                <TabsTrigger
-                  className="gap-x-1.5"
-                  value={PullRequestTabsKeys.CHANGES}
-                  data-state={isActive ? 'active' : 'inactive'}
-                >
-                  <div className="flex items-center gap-x-1">
-                    <Icon size={14} name="changes" />
-                    {t('views:pullRequests.changes')}
-                  </div>
-                  <Badge variant="outline" size="xs" borderRadius="base">
-                    {pullRequest?.stats?.files_changed}
-                  </Badge>
-                </TabsTrigger>
-              )}
-            </NavLink>
+            <TabsTrigger {...getTabProps(PullRequestTabsKeys.CONVERSATION)}>
+              <div className="flex items-center gap-x-1">
+                <Icon size={14} name="comments" />
+                {t('views:pullRequests.conversation')}
+              </div>
+            </TabsTrigger>
+            <TabsTrigger {...getTabProps(PullRequestTabsKeys.COMMITS)}>
+              <div className="flex items-center gap-x-1">
+                <Icon size={14} name="tube-sign" />
+                {t('views:repos.commits')}
+              </div>
+              <Badge variant="outline" size="xs" borderRadius="base">
+                {pullRequest?.stats?.commits}
+              </Badge>
+            </TabsTrigger>
+            <TabsTrigger {...getTabProps(PullRequestTabsKeys.CHANGES)}>
+              <div className="flex items-center gap-x-1">
+                <Icon size={14} name="changes" />
+                {t('views:pullRequests.changes')}
+              </div>
+              <Badge variant="outline" size="xs" borderRadius="base">
+                {pullRequest?.stats?.files_changed}
+              </Badge>
+            </TabsTrigger>
           </TabsList>
         </Tabs>
         <Spacer size={7} />

diff --git a/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx b/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx
@@ -1,4 +1,5 @@
-import { NavLink } from 'react-router-dom'
+import { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 import { Tabs, TabsList, TabsTrigger } from '@/components'
 import { SandboxLayout, TranslationStore } from '@/views'
@@ -11,17 +12,21 @@ function ProfileSettingsTabNav({
   useTranslationStore: () => TranslationStore
 }) {
   const { t } = useTranslationStore()
+  const navigate = useNavigate()
+
+  const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate])
+
   return (
     <>
-      <SandboxLayout.SubHeader className="h-[45px] overflow-hidden">
+      <SandboxLayout.SubHeader className="h-11">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList fontSize="xs">
-            <NavLink to={`general`}>
-              <TabsTrigger value="general">{t('views:profileSettings.GeneralTab', 'General')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={`keys`}>
-              <TabsTrigger value="keys">{t('views:profileSettings.KeysTab', 'Keys and Tokens')}</TabsTrigger>
-            </NavLink>
+            <TabsTrigger role="link" value="general" onClick={makeHandleTabChange('general')}>
+              {t('views:profileSettings.GeneralTab', 'General')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="keys" onClick={makeHandleTabChange('keys')}>
+              {t('views:profileSettings.KeysTab', 'Keys and Tokens')}
+            </TabsTrigger>
           </TabsList>
         </Tabs>
       </SandboxLayout.SubHeader>

diff --git a/packages/ui/src/views/project/project-settings-tab-nav.tsx b/packages/ui/src/views/project/project-settings-tab-nav.tsx
@@ -21,13 +21,13 @@ const ProjectSettingsTabNav: FC<ProjectSettingsTabNavProps> = ({ useTranslationS
       <SandboxLayout.SubHeader className="h-11">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList fontSize="xs">
-            <TabsTrigger value="general" onClick={makeHandleTabChange('general')}>
+            <TabsTrigger role="link" value="general" onClick={makeHandleTabChange('general')}>
               {t('views:projectSettings.tabs.general', 'General')}
             </TabsTrigger>
-            <TabsTrigger value="members" onClick={makeHandleTabChange('members')}>
+            <TabsTrigger role="link" value="members" onClick={makeHandleTabChange('members')}>
               {t('views:projectSettings.tabs.members', 'Members')}
             </TabsTrigger>
-            <TabsTrigger value="labels" onClick={makeHandleTabChange('labels')}>
+            <TabsTrigger role="link" value="labels" onClick={makeHandleTabChange('labels')}>
               {t('views:projectSettings.tabs.labels', 'Labels')}
             </TabsTrigger>
           </TabsList>

diff --git a/packages/ui/src/views/repo/repo-layout/index.tsx b/packages/ui/src/views/repo/repo-layout/index.tsx
@@ -1,5 +1,5 @@
-import { useMemo } from 'react'
-import { NavLink, Outlet, useLocation } from 'react-router-dom'
+import { useCallback, useMemo } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 
 import { Tabs, TabsList, TabsTrigger } from '@/components'
 import { SandboxLayout, TranslationStore } from '@/views'
@@ -20,6 +20,10 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () =>
   const location = useLocation()
   const { t } = useTranslationStore()
 
+  const navigate = useNavigate()
+
+  const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate])
+
   const activeTab = useMemo(() => {
     // Prioritize 'pulls' over 'commits' if both are present in the pathname
     if (location.pathname.includes(RepoTabsKeys.PULLS)) {
@@ -31,30 +35,30 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () =>
 
   return (
     <>
-      <SandboxLayout.SubHeader className="h-[45px] overflow-hidden">
+      <SandboxLayout.SubHeader className="h-11 ">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList>
-            <NavLink to={RepoTabsKeys.SUMMARY}>
-              <TabsTrigger value="summary">{t('views:repos.summary', 'Summary')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.CODE}>
-              <TabsTrigger value="code">{t('views:repos.files', 'Files')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.PIPELINES}>
-              <TabsTrigger value="pipelines">{t('views:repos.pipelines', 'Pipelines')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.COMMITS}>
-              <TabsTrigger value="commits">{t('views:repos.commits', 'Commits')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.PULLS}>
-              <TabsTrigger value="pulls">{t('views:repos.pull-requests', 'Pull Requests')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.BRANCHES}>
-              <TabsTrigger value="branches">{t('views:repos.branches', 'Branches')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.SETTINGS}>
-              <TabsTrigger value="settings">{t('views:repos.settings', 'Settings')}</TabsTrigger>
-            </NavLink>
+            <TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>
+              {t('views:repos.summary', 'Summary')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="code" onClick={makeHandleTabChange(RepoTabsKeys.CODE)}>
+              {t('views:repos.files', 'Files')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="pipelines" onClick={makeHandleTabChange(RepoTabsKeys.PIPELINES)}>
+              {t('views:repos.pipelines', 'Pipelines')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="commits" onClick={makeHandleTabChange(RepoTabsKeys.COMMITS)}>
+              {t('views:repos.commits', 'Commits')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="pulls" onClick={makeHandleTabChange(RepoTabsKeys.PULLS)}>
+              {t('views:repos.pull-requests', 'Pull Requests')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="branches" onClick={makeHandleTabChange(RepoTabsKeys.BRANCHES)}>
+              {t('views:repos.branches', 'Branches')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="settings" onClick={makeHandleTabChange(RepoTabsKeys.SETTINGS)}>
+              {t('views:repos.settings', 'Settings')}
+            </TabsTrigger>
           </TabsList>
         </Tabs>
       </SandboxLayout.SubHeader>

diff --git a/packages/ui/src/views/tailwind-values-exporter.tsx b/packages/ui/src/views/tailwind-values-exporter.tsx
@@ -0,0 +1 @@
+export const TailwindValuesExporter = () => <div className="top-14.5 h-14.5 sr-only" />
diff --git a/packages/ui/tailwind.ts b/packages/ui/tailwind.ts
@@ -339,6 +339,9 @@ export default {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out'
+      },
+      spacing: {
+        '14.5': '3.625rem'
       }
     }
   },
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const TailwindValuesExporter = () => <div className="top-14.5 h-14.5 sr-only" />