refactor: tabs navigation

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} />
+      <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
     </div>
   )
 }

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

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

apps/design-system/src/subjects/views/commit-details/commit-details-store.ts

@@ -3649,7 +3649,7 @@ export const commitDetailsStore: ICommitDetailsStore = {
               newNumber: 11
             },
             {
-              content: "       navigation: 'h-[44px] w-full justify-start gap-6 border-b border-borders-5 px-6',",
+              content: "       navigation: 'h-11 w-full justify-start gap-6 border-b border-borders-5 px-6',",
               type: 'context',
               oldNumber: 12,
               newNumber: 12
@@ -3706,7 +3706,7 @@ export const commitDetailsStore: ICommitDetailsStore = {
             },
             {
               content:
-                "           'm-0 -mb-px h-[44px] border-b border-solid border-b-transparent px-0 text-xs font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',",
+                "           'm-0 -mb-px h-11 border-b border-solid border-b-transparent px-0 text-xs font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',",
               type: 'context',
               oldNumber: 31,
               newNumber: 31
@@ -3768,7 +3768,7 @@ export const commitDetailsStore: ICommitDetailsStore = {
       contentId: 'content-packages/ui/src/components/tabs.tsx::::packages/ui/src/components/tabs.tsx',
       fileId: 'packages/ui/src/components/tabs.tsx::::packages/ui/src/components/tabs.tsx',
       filePath: 'packages/ui/src/components/tabs.tsx',
-      raw: "diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx\nindex 5cbae7da53b01c1fdcd7d7e940e0c2c6c10dfce4..631a8515f53931f3a9ec94f17fb4c3499bef513d 100644\n--- a/packages/ui/src/components/tabs.tsx\n+++ b/packages/ui/src/components/tabs.tsx\n@@ -11,7 +11,7 @@ const tabsListVariants = cva('inline-flex items-center text-foreground-4', {\n       underline: 'h-11 justify-center gap-4',\n       navigation: 'h-[44px] w-full justify-start gap-6 border-b border-borders-5 px-6',\n       tabnav:\n-        'relative flex w-full before:absolute before:left-0 before:h-px before:w-full before:bg-borders-1 before:bottom-0'\n+        'relative flex w-full before:absolute before:bottom-0 before:left-0 before:h-px before:w-full before:bg-borders-1'\n     }\n   },\n   defaultVariants: {\n@@ -30,7 +30,7 @@ const tabsTriggerVariants = cva(\n         navigation:\n           'm-0 -mb-px h-[44px] border-b border-solid border-b-transparent px-0 text-xs font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',\n         tabnav:\n-          '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]:text-foreground-1 data-[state=active]:bg-background-1'\n+          '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'\n       }\n     },\n     defaultVariants: {\n"
+      raw: "diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx\nindex 5cbae7da53b01c1fdcd7d7e940e0c2c6c10dfce4..631a8515f53931f3a9ec94f17fb4c3499bef513d 100644\n--- a/packages/ui/src/components/tabs.tsx\n+++ b/packages/ui/src/components/tabs.tsx\n@@ -11,7 +11,7 @@ const tabsListVariants = cva('inline-flex items-center text-foreground-4', {\n       underline: 'h-11 justify-center gap-4',\n       navigation: 'h-11 w-full justify-start gap-6 border-b border-borders-5 px-6',\n       tabnav:\n-        'relative flex w-full before:absolute before:left-0 before:h-px before:w-full before:bg-borders-1 before:bottom-0'\n+        'relative flex w-full before:absolute before:bottom-0 before:left-0 before:h-px before:w-full before:bg-borders-1'\n     }\n   },\n   defaultVariants: {\n@@ -30,7 +30,7 @@ const tabsTriggerVariants = cva(\n         navigation:\n           'm-0 -mb-px h-11 border-b border-solid border-b-transparent px-0 text-xs font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',\n         tabnav:\n-          '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]:text-foreground-1 data-[state=active]:bg-background-1'\n+          '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'\n       }\n     },\n     defaultVariants: {\n"
     },
     {
       blocks: [

apps/design-system/src/subjects/views/execution/execution-graph.tsx

@@ -1,11 +1,13 @@
+import { useTranslationStore } from '@utils/viewUtils'
+
 import { ExecutionHeader, ExecutionState, ExecutionTabs } from '@harnessio/ui/views'
 
 import PipelineExecutionGraph from './pipeline-execution-graph'
 
 export const ExecutionGraphView = () => {
   return (
     <div className="flex h-full flex-col">
-      <ExecutionTabs />
+      <ExecutionTabs useTranslationStore={useTranslationStore} />
       <ExecutionHeader
         className="border-borders-4 border-b"
         commitName="8fbru3ix"

apps/design-system/src/subjects/views/execution/execution-logs.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useAnimateTree } from '@/hooks/useAnimateTree'
 import { useLogs } from '@/hooks/useLogs'
+import { useTranslationStore } from '@utils/viewUtils'
 
 import { TreeViewElement } from '@harnessio/ui/components'
 import {
@@ -106,7 +107,7 @@ export const ExecutionLogsView = () => {
 
   return (
     <div className="flex h-full flex-col">
-      <ExecutionTabs />
+      <ExecutionTabs useTranslationStore={useTranslationStore} />
       <ExecutionHeader
         commitName="8fbru3ix"
         branchName="master"

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} />
+        <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />
     </>

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'

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,

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 {

packages/ui/locales/en/component.json

@@ -53,10 +53,12 @@
     "remove": "Remove",
     "reorder": "Reorder",
     "unpin": "Unpin",
+    "appearence": "Appearance",
+    "language": "Language",
+    "logout": "Log out",
     "profile": "Profile",
     "theme": "Theme",
     "customNav": "Customize navigation",
-    "logout": "Log out",
     "devops": "Devops",
     "repositories": "Repositories",
     "pipelines": "Pipelines",

packages/ui/locales/en/views.json

@@ -143,7 +143,7 @@
     "editReadme": "Edit README.md",
     "openPullReq": "Open pull requests",
     "createTagTitle": "Create a tag",
-    "repoTagDescriptionPlaceholder": "Enter a description of this tag...",
+    "repoTagDescriptionPlaceholder": "Enter tag description here",
     "creatingTagButton": "Creating tag...",
     "createTagButton": "Create tag",
     "tag": "Tag",
@@ -171,6 +171,28 @@
     "updateWebhook": "Update webhook",
     "createWebhook": "Create webhook",
     "tagger": "Tagger",
+    "creationDate": "Creation date",
+    "createBranchDialog": {
+      "validation": {
+        "name": "Branch name is required",
+        "nameRegex": "Name must contain only letters, numbers, and the characters: - _ .",
+        "noSpaces": "Name cannot contain spaces",
+        "target": "Base branch is required"
+      }
+    },
+    "createTagDialog": {
+      "validation": {
+        "name": "Tag name is required",
+        "nameMax": "Name must be no longer than 40 characters",
+        "nameRegex": "Name must contain only letters, numbers, and the characters: - _ .",
+        "noSpaces": "Name cannot contain spaces",
+        "target": "Base branch is required",
+        "message": "Description is required"
+      },
+      "name": "Name",
+      "target": "Target",
+      "message": "Message"
+    },
     "renameBranch": "Rename Branch",
     "add": "Add",
     "users": "Users",
@@ -207,16 +229,28 @@
     "noRepos": "No repositories yet",
     "noReposProject": "There are no repositories in this project yet.",
     "createOrImportRepos": "Create new or import an existing repository.",
-    "noTags": "There are no tags in this project yet.",
-    "createNewTag": "Create a new Tag.",
+    "noTags": "No tags yet",
+    "createNewTag": "Create new tag",
     "noWebhookExecution": "No webhook executions yet",
     "noWebhookExecutionsDescription": "Your webhook executions will appear here once they're completed. Trigger your webhook to see the results.",
     "noWebhooks": "No webhooks yet",
     "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.",
+    "noTagsDescription": "Your tags will appear here once they're created. Start creating tags to see your work organized.",
     "commit": "Commit",
     "noLabels": "No labels yet",
     "noLabelsDescription": "Use labels to organize, prioritize, and categorize tasks efficiently."
   },
+  "execution": {
+    "summary": "Summary",
+    "logs": "Logs",
+    "graph": "Graph",
+    "inputs": "Inputs",
+    "opa": "Policy evaluations",
+    "artifacts": "Artifacts",
+    "tests": "Tests",
+    "sto": "Security tests",
+    "secrets": "Secrets"
+  },
   "labelData": {
     "form": {
       "colorValuePlaceholder": "Enter value name",
@@ -287,6 +321,7 @@
   },
   "pullRequests": {
     "conversation": "Conversation",
+    "commits": "Commits",
     "changes": "Changes",
     "noCommitsYet": "No commits yet",
     "noCommitDataDescription": "There are no commits yet.",
@@ -340,7 +375,6 @@
     "compareChangesDraftButton": "Draft pull request",
     "compareChangesDraftButtonLoading": "Drafting pull request...",
     "replyHere": "Reply here",
-    "commits": "Commits",
     "showDiff": "Show Diff",
     "deletedFileDiff": "This file was deleted.",
     "largeDiff": "Large diffs are not rendered by default.",
@@ -438,7 +472,9 @@
     "selectRole": "Select role",
     "enterBranchName": "Enter branch name",
     "createBranchError": "Branch name is required",
-    "enterTagName": "Enter tag name",
+    "enterTagName": "Enter a tag name here",
+    "tagName": "Name",
+    "basedOn": "Based on",
     "select": "Select",
     "baseBranch": "Base branch",
     "selectBranchError": "Base branch is required",

packages/ui/locales/fr/component.json

@@ -53,10 +53,12 @@
     "remove": "Supprimer",
     "reorder": "Réorganiser",
     "unpin": "Désépingler",
+    "appearence": "Appearance",
+    "language": "Language",
+    "logout": "Se déconnecter",
     "profile": "Profile",
     "theme": "Thème",
     "customNav": "Personnaliser la navigation",
-    "logout": "Se déconnecter",
     "devops": "Devops",
     "repositories": "Dépôts",
     "pipelines": "Pipelines",

packages/ui/locales/fr/views.json

@@ -217,6 +217,17 @@
     "noLabels": "No labels yet",
     "noLabelsDescription": "Use labels to organize, prioritize, and categorize tasks efficiently."
   },
+  "execution": {
+    "summary": "Résumé",
+    "logs": "Journaux",
+    "graph": "Graphique",
+    "inputs": "Entrées",
+    "opa": "Évaluations de politique",
+    "artifacts": "Artéfacts",
+    "tests": "Tests",
+    "sto": "Tests de sécurité",
+    "secrets": "Secrets"
+  },
   "labelData": {
     "form": {
       "colorValuePlaceholder": "Enter value name",
@@ -287,6 +298,7 @@
   },
   "pullRequests": {
     "conversation": "Conversation",
+    "commits": "Commets",
     "changes": "Changements",
     "noCommitsYet": "",
     "noCommitDataDescription": "",
@@ -336,7 +348,6 @@
     "compareChangesFormTitle": "Ajouter un titre",
     "compareChangesFormDescription": "Ajouter une description",
     "replyHere": "Repondre ici",
-    "commits": "Commets",
     "showDiff": "Afficher la différence",
     "deletedFileDiff": "Ce fichier a été supprimé.",
     "largeDiff": "Les différences de grande taille ne sont pas affichées par défaut.",
@@ -402,9 +413,9 @@
     "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",
-    "saving": "Enregistrement...",
     "generalTab": "Général",
-    "keysTab": "Clés et Jetons"
+    "keysTab": "Clés et Jetons",
+    "saving": "Enregistrement..."
   },
   "createProject": {
     "validation": {

packages/ui/src/components/filters/filter-box-wrapper.tsx

@@ -47,7 +47,7 @@ const FilterBoxWrapper = ({
     >
       {/* className="flex h-8 items-center gap-x-3 whitespace-nowrap rounded bg-background-3 pl-2.5 pr-2 transition-colors duration-200 hover:bg-background-8" */}
       <DropdownMenu.Trigger asChild>
-        <Button className="bg-background-3 hover:bg-background-8 gap-x-3 pl-2.5 pr-2">
+        <Button className="gap-x-3 bg-background-3 pl-2.5 pr-2 hover:bg-background-8">
           <div className="flex items-center gap-x-1.5 text-13">
             <span className="text-foreground-1">
               {filterLabel}
@@ -61,7 +61,7 @@ const FilterBoxWrapper = ({
 
       <DropdownMenu.Content className={cn('w-[276px] p-0', contentClassName)} align="start">
         <div className="flex items-center justify-between px-3 py-2.5">
-          <div className="text-foreground-4 flex items-center gap-x-2">{filterLabel}</div>
+          <div className="flex items-center gap-x-2 text-foreground-4">{filterLabel}</div>
 
           <DropdownMenu.Root>
             <DropdownMenu.Trigger className="group flex h-[18px] items-center px-1">
@@ -76,7 +76,7 @@ const FilterBoxWrapper = ({
                 <Button
                   size="xs"
                   variant="custom"
-                  className="data-[highlighted]:text-foreground-danger data-[highlighted]:bg-background-transparent gap-x-1.5"
+                  className="data-[highlighted]:bg-background-transparent gap-x-1.5 data-[highlighted]:text-foreground-danger"
                 >
                   <Icon name="trash" size={12} />
                   {t('component:filter.delete', 'Delete filter')}

packages/ui/src/components/filters/filter-select.tsx

@@ -37,7 +37,7 @@ const FilterSelect = <FilterKey extends string>({
         align={dropdownAlign}
         onCloseAutoFocus={e => e.preventDefault()}
       >
-        <div className="border-borders-4 relative flex items-center border-b px-3 py-2.5">
+        <div className="relative flex items-center border-b border-borders-4 px-3 py-2.5">
           <Input
             type="text"
             placeholder={inputPlaceholder}
@@ -103,10 +103,10 @@ const FilterSelectLabel = ({
 }) => {
   return (
     <>
-      <Button size="xs" variant="ghost" className="hover:text-foreground-1 gap-x-1 px-0 hover:bg-transparent">
+      <Button size="xs" variant="ghost" className="gap-x-1 px-0 hover:bg-transparent hover:text-foreground-1">
         {displayLabel}
         {selectedFilters > 0 && (
-          <span className="border-tag-border-blue-1 bg-tag-background-blue-1 text-11 text-tag-foreground-blue-1 flex h-[18px] min-w-[17px] items-center justify-center rounded border px-1">
+          <span className="flex h-[18px] min-w-[17px] items-center justify-center rounded border border-tag-border-blue-1 bg-tag-background-blue-1 px-1 text-11 text-tag-foreground-blue-1">
             {selectedFilters}
           </span>
         )}
@@ -118,7 +118,7 @@ const FilterSelectLabel = ({
 
 const FilterSelectAddIconLabel = ({ displayLabel }: { displayLabel: React.ReactNode }) => {
   return (
-    <Button size="xs" variant="ghost" className="hover:text-foreground-1 gap-x-1.5 hover:bg-transparent">
+    <Button size="xs" variant="ghost" className="gap-x-1.5 hover:bg-transparent hover:text-foreground-1">
       <Icon name="plus" size={10} />
       <span>{displayLabel}</span>
     </Button>

packages/ui/src/components/filters/filters-bar/actions/variants/combo-box.tsx

@@ -33,7 +33,7 @@ export default function ComboBox({
 
   const renderConent = () => {
     if (isLoading) {
-      return <Command.Loading className="text-foreground-5 px-2 py-4 text-sm">Loading Authors...</Command.Loading>
+      return <Command.Loading className="px-2 py-4 text-sm text-foreground-5">Loading Authors...</Command.Loading>
     }
 
     if (options.length === 0) {