From 0eb786d58d2145244a44584389e6c9dd32952181 Mon Sep 17 00:00:00 2001 From: Andrew Koreykin Date: Fri, 31 Jan 2025 13:24:13 +0400 Subject: [PATCH] fix active tab lightning --- .../profile-settings/settings-layout.tsx | 19 -------- .../src/pages-v2/project/settings-layout.tsx | 8 ++-- apps/gitness/src/routes.tsx | 2 +- .../src/pipeline-graph-internal.tsx | 4 +- .../pipeline-graph/src/pipeline-graph.tsx | 2 +- packages/ui/locales/en/views.json | 4 +- packages/ui/locales/es/views.json | 6 ++- packages/ui/locales/fr/views.json | 4 +- packages/ui/src/components/repo-subheader.tsx | 2 +- packages/ui/src/components/tabs.tsx | 4 +- .../src/views/layouts/PullRequestLayout.tsx | 43 +++++++++---------- .../profile-settings-tab-nav.tsx | 2 +- .../ui/src/views/repo/repo-layout/index.tsx | 2 +- .../ui/src/views/tailwind-values-exporter.tsx | 2 +- packages/views/src/layouts/SandboxLayout.tsx | 4 +- 15 files changed, 47 insertions(+), 61 deletions(-) delete mode 100644 apps/gitness/src/pages-v2/profile-settings/settings-layout.tsx diff --git a/apps/gitness/src/pages-v2/profile-settings/settings-layout.tsx b/apps/gitness/src/pages-v2/profile-settings/settings-layout.tsx deleted file mode 100644 index 75f0c2a57b..0000000000 --- a/apps/gitness/src/pages-v2/profile-settings/settings-layout.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Outlet, useLocation } from 'react-router-dom' - -import { ProfileSettingsTabNav } from '@harnessio/ui/views' - -import { useTranslationStore } from '../../i18n/stores/i18n-store' - -export const SettingsLayout = () => { - const location = useLocation() - const activeTab = location.pathname.split('/').pop() || 'general' - - return ( - <> -
- -
- - - ) -} diff --git a/apps/gitness/src/pages-v2/project/settings-layout.tsx b/apps/gitness/src/pages-v2/project/settings-layout.tsx index 55327b8f38..904a8a9f51 100644 --- a/apps/gitness/src/pages-v2/project/settings-layout.tsx +++ b/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 ( <> -
- +
+
diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx index 8d3861ff52..f2fd72dee0 100644 --- a/apps/gitness/src/routes.tsx +++ b/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' diff --git a/packages/pipeline-graph/src/pipeline-graph-internal.tsx b/packages/pipeline-graph/src/pipeline-graph-internal.tsx index 2a9963f959..a016d58d0f 100644 --- a/packages/pipeline-graph/src/pipeline-graph-internal.tsx +++ b/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) {
) } - -export default PipelineGraphInternal diff --git a/packages/pipeline-graph/src/pipeline-graph.tsx b/packages/pipeline-graph/src/pipeline-graph.tsx index 1f5ee78f7b..ea1d8e51e0 100644 --- a/packages/pipeline-graph/src/pipeline-graph.tsx +++ b/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' diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json index 83e349b4fb..52b505db6a 100644 --- a/packages/ui/locales/en/views.json +++ b/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" diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json index a604d3fa79..5a52851711 100644 --- a/packages/ui/locales/es/views.json +++ b/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" diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json index b99b9ae100..b1b545c82e 100644 --- a/packages/ui/locales/fr/views.json +++ b/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" diff --git a/packages/ui/src/components/repo-subheader.tsx b/packages/ui/src/components/repo-subheader.tsx index 93d9e6c828..e0169bb8fe 100644 --- a/packages/ui/src/components/repo-subheader.tsx +++ b/packages/ui/src/components/repo-subheader.tsx @@ -39,7 +39,7 @@ export const RepoSubheader = ({ }, [location.pathname]) return ( - + diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx index cfc9d1cb56..c8ec8e38f9 100644 --- a/packages/ui/src/components/tabs.tsx +++ b/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 {context.variant === 'navigation' && ( - + )} {children} diff --git a/packages/ui/src/views/layouts/PullRequestLayout.tsx b/packages/ui/src/views/layouts/PullRequestLayout.tsx index 7758f6a036..2e0c10a254 100644 --- a/packages/ui/src/views/layouts/PullRequestLayout.tsx +++ b/packages/ui/src/views/layouts/PullRequestLayout.tsx @@ -1,7 +1,7 @@ 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' @@ -9,6 +9,20 @@ import { IPullRequestStore } from '@views/repo/pull-request/pull-request.types' import { SandboxLayout } from '..' +const TabTitleWithIcon = ({ icon, title }: { icon: IconProps['name']; title: string }) => ( +
+ + {title} +
+) + +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 = ({ -
- - {t('views:pullRequests.conversation')} -
+ {pullRequest?.stats?.conversations && ( - - {pullRequest.stats.conversations} - + {pullRequest.stats.conversations} )} -
- - {t('views:repos.commits')} -
- - {pullRequest?.stats?.commits} - + + {pullRequest?.stats?.commits} -
- - {t('views:pullRequests.changes')} -
- - {pullRequest?.stats?.files_changed} - + + {pullRequest?.stats?.files_changed} 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 index d035e5d5b5..5541768b53 100644 --- a/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx +++ b/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx @@ -18,7 +18,7 @@ function ProfileSettingsTabNav({ return ( <> - + diff --git a/packages/ui/src/views/repo/repo-layout/index.tsx b/packages/ui/src/views/repo/repo-layout/index.tsx index f4addf2253..a33863f6a1 100644 --- a/packages/ui/src/views/repo/repo-layout/index.tsx +++ b/packages/ui/src/views/repo/repo-layout/index.tsx @@ -35,7 +35,7 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () => return ( <> - + diff --git a/packages/ui/src/views/tailwind-values-exporter.tsx b/packages/ui/src/views/tailwind-values-exporter.tsx index 4a5f58b821..2ef69992d5 100644 --- a/packages/ui/src/views/tailwind-values-exporter.tsx +++ b/packages/ui/src/views/tailwind-values-exporter.tsx @@ -1 +1 @@ -export const TailwindValuesExporter = () =>
+export const TailwindValuesExporter = () =>
diff --git a/packages/views/src/layouts/SandboxLayout.tsx b/packages/views/src/layouts/SandboxLayout.tsx index ffe6b6db0f..51468ef722 100644 --- a/packages/views/src/layouts/SandboxLayout.tsx +++ b/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 (
{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