Fix files tab after design review (harness#814)

* fix: fix Files tab after design review
pixel-point · Jan 24, 2025 · 6c69d1f · 6c69d1f
1 parent 4dc7839
commit 6c69d1f
Show file tree

Hide file tree

Showing 31 changed files with 231 additions and 162 deletions.
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
@@ -3,15 +3,23 @@ import { Route } from 'react-router-dom'
 
 import { useTranslationsStore } from '@utils/viewUtils'
 
-import { RepoLayout } from '@harnessio/ui/views'
+import { RepoSubheader } from '@harnessio/ui/components'
 
 import RootViewWrapper from './root-view-wrapper'
 
 const RepoViewWrapper: FC<PropsWithChildren<unknown>> = ({ children }) => (
   <RootViewWrapper asChild>
-    <Route path="*" element={<RepoLayout useTranslationStore={useTranslationsStore} />}>
-      <Route path="*" element={children} />
-    </Route>
+    <Route
+      path="*"
+      element={
+        <>
+          <div className="layer-high sticky top-[55px] bg-background-1">
+            <RepoSubheader useTranslationStore={useTranslationsStore} />
+          </div>
+          {children}
+        </>
+      }
+    />
   </RootViewWrapper>
 )
 

diff --git a/apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx b/apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx
@@ -67,6 +67,7 @@ export const RepoFilesWrapper: FC<RepoFilesWrapperProps> = ({ codeMode, isDir, i
       useRepoBranchesStore={useRepoBranchesStore}
       defaultBranchName={repoFilesStore.repository.default_branch}
       currentBranchDivergence={{ behind: 0, ahead: 0 }}
+      isLoadingRepoDetails={false}
     >
       {renderCodeView}
     </RepoFiles>

diff --git a/apps/gitness/src/components-v2/file-content-viewer.tsx b/apps/gitness/src/components-v2/file-content-viewer.tsx
@@ -139,11 +139,16 @@ export default function FileContentViewer({ repoContent }: FileContentViewerProp
       case 'preview':
         // For Markdown 'preview'
         if (getIsMarkdown(language)) {
-          return <MarkdownViewer source={fileContent} withBorderWrapper />
+          return (
+            <div className="pb-11">
+              <MarkdownViewer source={fileContent} withBorderWrapper />
+            </div>
+          )
         }
         // If a non-markdown file somehow has 'preview', we could fallback to 'code'
         return (
           <CodeEditor
+            height="100%"
             language={language}
             codeRevision={{ code: fileContent }}
             onCodeRevisionChange={() => undefined}
@@ -157,6 +162,7 @@ export default function FileContentViewer({ repoContent }: FileContentViewerProp
       case 'code':
         return (
           <CodeEditor
+            height="100%"
             language={language}
             codeRevision={{ code: fileContent }}
             onCodeRevisionChange={() => undefined}
@@ -168,15 +174,16 @@ export default function FileContentViewer({ repoContent }: FileContentViewerProp
         )
 
       case 'blame':
-        return <GitBlame themeConfig={themeConfig} codeContent={fileContent} language={language} />
+        return <GitBlame height="100%" themeConfig={themeConfig} codeContent={fileContent} language={language} />
 
       case 'history':
         if (isFetchingCommits) {
           return <SkeletonList />
         }
         return (
-          <div className="rounded-b-md border-x border-b bg-background-1 p-6">
+          <div className="pb-11">
             <CommitsList
+              className="rounded-b-md border-x border-b bg-background-1 p-6"
               toCommitDetails={({ sha }: { sha: string }) =>
                 routes.toRepoCommitDetails({ spaceId, repoId, commitSHA: sha })
               }
@@ -191,7 +198,6 @@ export default function FileContentViewer({ repoContent }: FileContentViewerProp
               }))}
             />
             <PaginationComponent
-              className="pl-[26px]"
               nextPage={xNextPage}
               previousPage={xPrevPage}
               currentPage={page}

diff --git a/apps/gitness/src/components-v2/file-editor.tsx b/apps/gitness/src/components-v2/file-editor.tsx
@@ -131,7 +131,7 @@ export const FileEditor: FC<FileEditorProps> = ({ repoDetails, defaultBranch })
   const onExitConfirm = useCallback(() => {
     const navigateTo = `${routes.toRepoFiles({ spaceId, repoId })}/${fullGitRef}/${fullResourcePath ? `~/${fullResourcePath}` : ''}`
     navigate(navigateTo)
-  }, [fullGitRef, fullResourcePath, navigate, repoId, spaceId])
+  }, [fullGitRef, fullResourcePath, navigate, repoId, spaceId, routes])
 
   /**
    * Cancel edit handler
@@ -194,6 +194,7 @@ export const FileEditor: FC<FileEditorProps> = ({ repoDetails, defaultBranch })
 
       {view === 'edit' ? (
         <CodeEditor
+          height="100%"
           language={language}
           codeRevision={contentRevision}
           onCodeRevisionChange={valueRevision => setContentRevision(valueRevision ?? { code: '' })}
@@ -205,6 +206,7 @@ export const FileEditor: FC<FileEditorProps> = ({ repoDetails, defaultBranch })
         />
       ) : (
         <CodeDiffEditor
+          height="100%"
           language={language}
           original={originalFileContent}
           modified={contentRevision.code}

diff --git a/apps/gitness/src/components/GitBlame.tsx b/apps/gitness/src/components/GitBlame.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 
 import { useGetBlameQuery } from '@harnessio/code-service-client'
 import { getInitials } from '@harnessio/views'
-import { BlameEditor, ThemeDefinition } from '@harnessio/yaml-editor'
+import { BlameEditor, BlameEditorProps, ThemeDefinition } from '@harnessio/yaml-editor'
 import { BlameItem } from '@harnessio/yaml-editor/dist/types/blame'
 
 import { useGetRepoRef } from '../framework/hooks/useGetRepoPath'
@@ -14,9 +14,10 @@ interface GitBlameProps {
   themeConfig: { rootElementSelector?: string; defaultTheme?: string; themes?: ThemeDefinition[] }
   codeContent: string
   language: string
+  height?: BlameEditorProps['height']
 }
 
-export default function GitBlame({ themeConfig, codeContent, language }: GitBlameProps) {
+export default function GitBlame({ themeConfig, codeContent, language, height }: GitBlameProps) {
   const repoRef = useGetRepoRef()
   const { fullGitRef, fullResourcePath } = useCodePathDetails()
   const [blameBlocks, setBlameBlocks] = useState<BlameItem[]>([])
@@ -67,6 +68,7 @@ export default function GitBlame({ themeConfig, codeContent, language }: GitBlam
       themeConfig={themeConfig}
       lineNumbersPosition="center"
       blameData={blameBlocks}
+      height={height ? height : undefined}
     />
   ) : (
     <></>

diff --git a/apps/gitness/src/pages-v2/repo/repo-code.tsx b/apps/gitness/src/pages-v2/repo/repo-code.tsx
@@ -56,16 +56,19 @@ export const RepoCode = () => {
   const [selectedBranch, setSelectedBranch] = useState(gitRefName || '')
   const [currBranchDivergence, setCurrBranchDivergence] = useState<CommitDivergenceType>({ ahead: 0, behind: 0 })
 
-  const { data: { body: repoDetails } = {}, refetch: refetchRepoContent } = useGetContentQuery({
+  const {
+    data: { body: repoDetails } = {},
+    refetch: refetchRepoContent,
+    isLoading: isLoadingRepoDetails
+  } = useGetContentQuery({
     path: fullResourcePath || '',
     repo_ref: repoRef,
     queryParams: { include_commit: true, git_ref: normalizeGitRef(fullGitRef || '') }
   })
+
   const { data: { body: repository } = {} } = useFindRepositoryQuery({ repo_ref: repoRef })
   const { data: { body: branchDivergence = [] } = {}, mutate: calculateDivergence } =
-    useCalculateCommitDivergenceMutation({
-      repo_ref: repoRef
-    })
+    useCalculateCommitDivergenceMutation({ repo_ref: repoRef })
 
   useEffect(() => {
     if (repository && !fullGitRef) {
@@ -166,18 +169,18 @@ export const RepoCode = () => {
   }, [fullGitRef, fullResourcePath, repoDetails, selectedBranchTag.name])
 
   useEffect(() => {
-    if (fullGitRef) {
+    if (selectedBranchTag.name && repository?.default_branch) {
       calculateDivergence({
         body: {
           requests: [{ from: selectedBranchTag.name, to: repository?.default_branch }]
         }
       })
     }
-  }, [fullGitRef])
+  }, [selectedBranchTag.name, repository?.default_branch, calculateDivergence])
 
   useEffect(() => {
     refetchRepoContent()
-  }, [codeMode])
+  }, [codeMode, refetchRepoContent])
 
   /**
    * Render File content view or Edit file view
@@ -214,6 +217,7 @@ export const RepoCode = () => {
       useRepoBranchesStore={useRepoBranchesStore}
       defaultBranchName={repository?.default_branch}
       currentBranchDivergence={currBranchDivergence}
+      isLoadingRepoDetails={isLoadingRepoDetails}
     >
       {renderCodeView}
     </RepoFiles>

diff --git a/apps/gitness/src/pages-v2/repo/repo-sidebar.tsx b/apps/gitness/src/pages-v2/repo/repo-sidebar.tsx
@@ -229,7 +229,7 @@ export const RepoSidebar = () => {
         )}
         {/* 100vh = screen height - (55px Breadcrumbs Height + 45px SubHeader Height = 100px) */}
         {/* Total height of both the divs should be 100vh */}
-        <div className="min-h-[calc(100vh-100px)]">
+        <div className="h-[calc(100vh-100px)]">
           <Outlet />
         </div>
       </div>

diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json
@@ -224,9 +224,6 @@
     "compareChangesFormDescriptionLabel": "Description",
     "compareChanges": "Comparing changes",
     "compareChangesDescription": "Choose two branches to see what’s changed or to start a new pull request.",
-    "compareChangesForkLink": "compare across forks",
-    "compareChangesOr": "or",
-    "compareChangesDiffLink": "learn more about diff comparisons",
     "compareChangesAbleToMerge": "Able to merge.",
     "compareChangesAbleToMergeDescription": "These branches can be automatically merged.",
     "compareChangesApiError": "Head branch doesn’t contain any new commits.",
@@ -252,6 +249,9 @@
     "split": "Split",
     "unified": "Unified",
     "viewed": "Viewed",
+    "compareChangesForkLink": "compare across forks",
+    "compareChangesOr": "or",
+    "compareChangesDiffLink": "learn more about diff comparisons",
     "compareChangesFormTitle": "Add a title",
     "compareChangesFormDescription": "Add a description",
     "compareChangesCreateButton": "Create pull request",

diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json
@@ -224,9 +224,6 @@
     "compareChangesFormDescriptionLabel": "Description",
     "compareChanges": "Compare y revise prácticamente cualquier cosa",
     "compareChangesDescription": "Ramas, etiquetas, rangos de commits y rangos de tiempo. En el mismo repositorio y entre bifurcaciones.",
-    "compareChangesForkLink": "comparar entre bifurcaciones",
-    "compareChangesOr": "o",
-    "compareChangesDiffLink": "aprender más sobre las comparaciones de diferencias",
     "compareChangesAbleToMerge": "Se puede fusionar.",
     "compareChangesAbleToMergeDescription": "Estas ramas se pueden fusionar automáticamente.",
     "compareChangesApiError": "La rama principal no contiene nuevos commits.",
@@ -252,6 +249,9 @@
     "split": "",
     "unified": "",
     "viewed": "",
+    "compareChangesForkLink": "comparar entre bifurcaciones",
+    "compareChangesOr": "o",
+    "compareChangesDiffLink": "aprender más sobre las comparaciones de diferencias",
     "compareChangesFormTitle": "Agregar un título",
     "compareChangesFormDescription": "Agregar una descripción",
     "replyHere": "",

diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json
@@ -224,9 +224,6 @@
     "compareChangesFormDescriptionLabel": "Description",
     "compareChanges": "Comparaison des modifications",
     "compareChangesDescription": "Choisissez deux branches pour voir les modifications ou pour créer une nouvelle pull request. Si nécessaire, vous pouvez aussi",
-    "compareChangesForkLink": "comparer entre les forks",
-    "compareChangesOr": "ou",
-    "compareChangesDiffLink": "en savoir plus sur les comparaisons diff",
     "compareChangesAbleToMerge": "Fusion possible.",
     "compareChangesAbleToMergeDescription": "Ces branches peuvent être fusionnées automatiquement.",
     "compareChangesApiError": "La branche principale ne contient pas de nouveaux commits.",
@@ -252,6 +249,9 @@
     "split": "Diviser",
     "unified": "Unifié",
     "viewed": "Vu",
+    "compareChangesForkLink": "comparer entre les forks",
+    "compareChangesOr": "ou",
+    "compareChangesDiffLink": "en savoir plus sur les comparaisons diff",
     "compareChangesFormTitle": "Ajouter un titre",
     "compareChangesFormDescription": "Ajouter une description",
     "replyHere": "Repondre ici",

diff --git a/packages/ui/src/components/badge.tsx b/packages/ui/src/components/badge.tsx
@@ -29,12 +29,12 @@ const badgeVariants = cva(
         outline: 'text-foreground'
       },
       size: {
-        default: 'px-2.5 py-0.5 text-xs font-semibold leading-none',
-        xl: 'h-[18px] px-2 text-12 leading-none',
-        lg: 'px-3 py-1 text-xs font-normal leading-none',
-        md: 'h-6 px-2.5 leading-none',
-        sm: 'h-5 px-1 text-12 leading-none',
-        xs: 'px-1.5 py-0 text-11 font-light leading-none'
+        default: 'px-2.5 py-0.5 text-xs font-semibold',
+        xl: 'h-[18px] px-2 text-12',
+        lg: 'px-3 py-1 text-xs font-normal',
+        md: 'h-6 px-2.5',
+        sm: 'h-5 px-1 text-12',
+        xs: 'px-1.5 py-0 text-11 font-light'
       },
       borderRadius: {
         default: 'rounded-md',

diff --git a/packages/ui/src/components/breadcrumb.tsx b/packages/ui/src/components/breadcrumb.tsx
@@ -18,10 +18,7 @@ type BreadcrumbListProps = ComponentPropsWithoutRef<'ol'>
 const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(({ className, ...props }, ref) => (
   <ol
     ref={ref}
-    className={cn(
-      'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
-      className
-    )}
+    className={cn('text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm', className)}
     {...props}
   />
 ))

diff --git a/packages/ui/src/components/file-explorer.tsx b/packages/ui/src/components/file-explorer.tsx
@@ -27,12 +27,12 @@ function FolderItem({ children, value = '', isActive, content, chevronClassName,
         leftChevron
         rotateChevron
         chevronClassName={
-          chevronClassName || 'text-icons-7 group-hover:text-icons-2 group-data-[state=open]:text-icons-2'
+          chevronClassName || 'text-icons-9 group-hover:text-icons-2 group-data-[state=open]:text-icons-2'
         }
       >
         <div
           className={cn(
-            `flex w-full justify-start overflow-hidden transition-colors duration-200 text-foreground-3
+            `flex w-full justify-start overflow-hidden transition-colors duration-200 text-foreground-2
             group-hover:text-foreground-1
             group-data-[state=open]:text-foreground-1`,
             {
@@ -43,7 +43,7 @@ function FolderItem({ children, value = '', isActive, content, chevronClassName,
           <div className="flex w-full items-center gap-1.5 py-1.5">
             <Icon
               className={cn(
-                'min-w-4 text-icons-7 duration-100 ease-in-out group-hover:text-icons-2 group-data-[state=open]:text-icons-2',
+                'min-w-4 text-icons-9 duration-100 ease-in-out group-hover:text-icons-2 group-data-[state=open]:text-icons-2',
                 { 'text-icons-2': isActive }
               )}
               name="folder"
@@ -74,7 +74,7 @@ function FileItem({ children, isActive, link }: FileItemProps) {
   const comp = (
     <div
       className={cn(
-        `relative group flex items-center justify-start gap-1.5 py-1.5 pr-1.5 pl-4 text-foreground-3
+        `relative group flex items-center justify-start gap-1.5 py-1.5 pr-1.5 pl-4 text-foreground-2
         hover:text-foreground-1
         before:absolute before:z-[-1] before:top-0 before:left-2.5 before:right-0 before:h-full before:rounded`,
         {
@@ -83,7 +83,7 @@ function FileItem({ children, isActive, link }: FileItemProps) {
       )}
     >
       <Icon
-        className={cn('min-w-4 text-icons-7 duration-100 ease-in-out group-hover:text-icons-2', {
+        className={cn('min-w-4 text-icons-9 duration-100 ease-in-out group-hover:text-icons-2', {
           'text-icons-2': isActive
         })}
         name="file"

diff --git a/packages/ui/src/components/markdown-viewer/index.tsx b/packages/ui/src/components/markdown-viewer/index.tsx
@@ -151,7 +151,7 @@ export function MarkdownViewer({
 
   return (
     <Wrapper>
-      <div ref={ref} style={styles}>
+      <div className="m-auto max-w-[836px]" ref={ref} style={styles}>
         <MarkdownPreview
           source={source}
           className="prose prose-invert"

diff --git a/packages/ui/src/components/markdown-viewer/style.css b/packages/ui/src/components/markdown-viewer/style.css
@@ -201,7 +201,7 @@
   }
 
   code {
-    @apply bg-background-9 border-borders-2 font-code text-foreground-2 text-15 rounded border px-1 py-0.5 font-normal tracking-normal before:hidden after:hidden;
+    @apply bg-background-9 border-borders-2 font-code text-foreground-2 text-15 rounded border px-1 py-px font-normal tracking-normal before:hidden after:hidden;
   }
 
   strong {

diff --git a/packages/ui/src/icons/plus.svg b/packages/ui/src/icons/plus.svg
diff --git a/packages/ui/src/shared-style-variables.css b/packages/ui/src/shared-style-variables.css
@@ -35,6 +35,10 @@
   --canary-green: 150 75% 65%;
   --canary-red: 0 80% 65%;
   --canary-orange: 35 74% 54%;
+
+  --vscode-scrollbarSlider-background: hsl(240 6% 15%);
+  /*--vscode-scrollbarSlider-hoverBackground: #00ff00;*/
+  /*--vscode-scrollbarSlider-activeBackground: #0000ff;*/
 }
 
 @layer themes {

diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
@@ -1158,3 +1158,12 @@ mark {
 .layer-low {
   @apply z-10;
 }
+
+/*  MONACO EDITOR  */
+.monaco-scrollable-element > .scrollbar > .slider {
+  @apply rounded;
+}
+
+.monaco-diff-editor.side-by-side .editor.modified {
+  @apply !border-borders-1 !border-l !border-solid !shadow-none;
+}
diff --git a/packages/ui/src/utils/stringUtils.ts b/packages/ui/src/utils/stringUtils.ts
@@ -1,4 +1,4 @@
-export const getInitials = (name: string, length?: number) => {
+export const getInitials = (name: string, length = 2) => {
   // Split the name into an array of words, ignoring empty strings
   const words = name.split(' ').filter(Boolean)
-Original file line number
+Diff line change
@@ Expand Up / @@ -201,7 +201,7 @@ @@
       }
       code {
-        @apply bg-background-9 border-borders-2 font-code text-foreground-2 text-15 rounded border px-1 py-0.5 font-normal tracking-normal before:hidden after:hidden;
+        @apply bg-background-9 border-borders-2 font-code text-foreground-2 text-15 rounded border px-1 py-px font-normal tracking-normal before:hidden after:hidden;
       }
       strong {
@@ Expand Down @@