fix active tab lightning

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

@@ -1,12 +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 SettingsLayout = () => {
   return (
     <>
-      <div className="sticky top-[55px] z-40 bg-background-1">
-        <ProjectSettingsPage />
+      <div className="bg-background-1 sticky top-[55px] z-40">
+        <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />
     </>

apps/gitness/src/routes.tsx

@@ -22,7 +22,7 @@ import { ProjectLabelsList } from './pages-v2/project/labels/project-labels-list
 import { ProjectGeneralSettingsPageContainer } from './pages-v2/project/project-general-settings-container'
 import { ImportProjectContainer } from './pages-v2/project/project-import-container'
 import { ProjectMemberListPage } from './pages-v2/project/project-member-list'
-import { SettingsLayout as ProjectSettingsLayout } from './pages-v2/project/settings-layout'
+import { ProjectSettingsLayout } from './pages-v2/project/project-settings-layout.tsx'
 import PullRequestChanges from './pages-v2/pull-request/pull-request-changes'
 import { PullRequestCommitPage } from './pages-v2/pull-request/pull-request-commits'
 import { CreatePullRequest } from './pages-v2/pull-request/pull-request-compare'

packages/pipeline-graph/src/pipeline-graph-internal.tsx

@@ -66,7 +66,7 @@ export function PipelineGraphInternal(props: PipelineGraphInternalProps) {
 
       // draw lines
       if (svgGroupRef.current) {
-        let allPaths: string[] = []
+        const allPaths: string[] = []
         connections.map(portPair => {
           const path = getPortsConnectionPath(rootContainerEl, portPair, config.edgeClassName)
           allPaths.push(path)
@@ -181,5 +181,3 @@ export function PipelineGraphInternal(props: PipelineGraphInternalProps) {
     </div>
   )
 }
-
-export default PipelineGraphInternal

packages/pipeline-graph/src/pipeline-graph.tsx

@@ -1,6 +1,6 @@
 import { Canvas } from './components/canvas/canvas'
 import GraphProvider from './context/graph-provider'
-import PipelineGraphInternal, { PipelineGraphInternalProps } from './pipeline-graph-internal'
+import { PipelineGraphInternal, PipelineGraphInternalProps } from './pipeline-graph-internal'
 import { NodeContent } from './types/node-content'
 
 import './pipeline-graph.css'

packages/ui/locales/en/views.json

@@ -263,6 +263,7 @@
   },
   "pullRequests": {
     "conversation": "Conversation",
+    "commits": "Commits",
     "changes": "Changes",
     "noCommitsYet": "No commits yet",
     "noCommitDataDescription": "There are no commits yet.",
@@ -312,7 +313,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.",
@@ -379,6 +379,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"

packages/ui/locales/es/views.json

@@ -263,6 +263,7 @@
   },
   "pullRequests": {
     "conversation": "",
+    "commits": "",
     "changes": "",
     "noCommitsYet": "",
     "noCommitDataDescription": "",
@@ -307,8 +308,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…",
@@ -369,6 +369,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"

packages/ui/locales/fr/views.json

@@ -263,6 +263,7 @@
   },
   "pullRequests": {
     "conversation": "Conversation",
+    "commits": "Commets",
     "changes": "Changements",
     "noCommitsYet": "",
     "noCommitDataDescription": "",
@@ -308,7 +309,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é.",
@@ -375,6 +375,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"

packages/ui/src/components/repo-subheader.tsx

@@ -39,7 +39,7 @@ export const RepoSubheader = ({
   }, [location.pathname])
 
   return (
-    <SandboxLayout.SubHeader className="top-14.5 h-11">
+    <SandboxLayout.SubHeader className="top-14.5 h-11 overflow-hidden">
       <Tabs variant="navigation" value={activeTab}>
         <TabsList>
           <TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>

packages/ui/src/components/tabs.tsx

@@ -33,7 +33,7 @@ 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 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 font-normal 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-9 rounded-t-md border-x border-t border-transparent px-4 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'
       }
@@ -116,7 +116,7 @@ const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigg
         {...props}
       >
         {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>

packages/ui/src/views/layouts/PullRequestLayout.tsx

@@ -1,14 +1,28 @@
 import { useCallback } from 'react'
 import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 
-import { Badge, Icon, Spacer, Tabs, TabsList, TabsTrigger } from '@components/index'
+import { Badge, BadgeProps, Icon, IconProps, 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'
 
 import { SandboxLayout } from '..'
 
+const TabTitleWithIcon = ({ icon, title }: { icon: IconProps['name']; title: string }) => (
+  <div className="flex items-center gap-x-1">
+    <Icon className="text-icons-1 group-data-[state=active]:text-icons-2" size={14} name={icon} />
+    {title}
+  </div>
+)
+
+const badgeCommonProps: BadgeProps = {
+  className: 'font-normal text-foreground-2',
+  variant: 'quaternary',
+  size: 'xs',
+  borderRadius: 'base'
+}
+
 interface PullRequestLayoutProps {
   usePullRequestStore: () => IPullRequestStore
   spaceId?: string
@@ -78,33 +92,18 @@ const PullRequestLayout: React.FC<PullRequestLayoutProps> = ({
         <Tabs variant="tabnav">
           <TabsList className="before:left-1/2 before:w-screen before:-translate-x-1/2">
             <TabsTrigger {...getTabProps(PullRequestTabsKeys.CONVERSATION)}>
-              <div className="flex items-center gap-x-1">
-                <Icon className="text-icons-1 group-data-[state=active]:text-icons-2" size={14} name="comments" />
-                {t('views:pullRequests.conversation')}
-              </div>
+              <TabTitleWithIcon icon="comments" title={t('views:pullRequests.conversation', 'Conversation')} />
               {pullRequest?.stats?.conversations && (
-                <Badge className="text-foreground-2 font-normal" variant="quaternary" size="xs" borderRadius="base">
-                  {pullRequest.stats.conversations}
-                </Badge>
+                <Badge {...badgeCommonProps}>{pullRequest.stats.conversations}</Badge>
               )}
             </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 className="text-foreground-2 font-normal" variant="quaternary" size="xs" borderRadius="base">
-                {pullRequest?.stats?.commits}
-              </Badge>
+              <TabTitleWithIcon icon="tube-sign" title={t('views:pullRequests.commits', 'Commits')} />
+              <Badge {...badgeCommonProps}>{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 className="text-foreground-2 font-normal" variant="quaternary" size="xs" borderRadius="base">
-                {pullRequest?.stats?.files_changed}
-              </Badge>
+              <TabTitleWithIcon icon="changes" title={t('views:pullRequests.changes', 'Changes')} />
+              <Badge {...badgeCommonProps}>{pullRequest?.stats?.files_changed}</Badge>
             </TabsTrigger>
           </TabsList>
         </Tabs>

packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx

@@ -18,7 +18,7 @@ function ProfileSettingsTabNav({
 
   return (
     <>
-      <SandboxLayout.SubHeader className="h-11">
+      <SandboxLayout.SubHeader className="h-11 overflow-hidden">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList fontSize="xs">
             <TabsTrigger role="link" value="general" onClick={makeHandleTabChange('general')}>

packages/ui/src/views/repo/repo-layout/index.tsx

@@ -35,7 +35,7 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () =>
 
   return (
     <>
-      <SandboxLayout.SubHeader className="h-11 ">
+      <SandboxLayout.SubHeader className="h-11 overflow-hidden">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList>
             <TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>

packages/ui/src/views/tailwind-values-exporter.tsx

@@ -1 +1 @@
-export const TailwindValuesExporter = () => <div className="top-14.5 h-14.5 sr-only" />
+export const TailwindValuesExporter = () => <div className="sr-only top-14.5 h-14.5 pt-14.5" />

packages/views/src/layouts/SandboxLayout.tsx

@@ -67,7 +67,7 @@ function Header({ children, className }: { children: React.ReactNode; className?
 function SubHeader({ children, className }: { children: React.ReactNode; className?: string }) {
   return (
     <header
-      className={cn('bg-background fixed left-[220px] right-0 top-3.625rem z-40 h-[2.75rem]', className)}
+      className={cn('bg-background fixed left-[220px] right-0 top-14.5 z-40 h-[2.75rem]', className)}
       role="banner"
     >
       {children}
@@ -93,7 +93,7 @@ function Main({
   hasLeftSubPanel?: boolean
 }) {
   const paddingTopClass =
-    hasHeader && hasSubHeader ? `pt-[calc(55px+45px)]` : hasHeader ? 'pt-[55px]' : hasSubHeader ? 'pt-[2.75rem]' : ''
+    hasHeader && hasSubHeader ? `pt-[calc(14.5rem+45px)]` : hasHeader ? 'pt-14.5' : hasSubHeader ? 'pt-[2.75rem]' : ''
 
   const paddingLeftClass =
     hasLeftPanel && hasLeftSubPanel