DRAFT PR : Testing Big PR - 480 files changed

apps/design-system/src/AppRouterProvider.tsx

@@ -10,7 +10,8 @@ import {
   useSearchParams
 } from 'react-router-dom'
 
-import { RouterContextProvider } from '@harnessio/ui/context'
+import { Button, SplitButton } from '@harnessio/ui/components'
+import { ComponentProvider, RouterContextProvider } from '@harnessio/ui/context'
 
 const AppRouterProvider: FC = () => {
   const navigate = useNavigate()
@@ -27,7 +28,9 @@ const AppRouterProvider: FC = () => {
       useMatches={useMatches}
       useParams={useParams}
     >
-      <Outlet />
+      <ComponentProvider components={{ RbacButton: Button, RbacSplitButton: SplitButton }}>
+        <Outlet />
+      </ComponentProvider>
     </RouterContextProvider>
   )
 }

apps/design-system/src/pages/view-preview/commit-details-diff-view-wrapper.tsx

@@ -1,24 +1,33 @@
-import { FC, useCallback } from 'react'
+import { FC, useCallback, useRef, useState } from 'react'
 
 import { commitDetailsStore } from '@subjects/views/commit-details/commit-details-store'
 import { repoFilesStore } from '@subjects/views/repo-files/components/repo-files-store'
 import { renderEntries } from '@utils/fileViewUtils'
 import { noop } from '@utils/viewUtils'
 
-import { FileExplorer } from '@harnessio/ui/components'
-import { CommitDiff, CommitSidebar, ICommitDetailsStore } from '@harnessio/ui/views'
+import { FileExplorer, Layout } from '@harnessio/ui/components'
+import {
+  CommitDiff,
+  CommitSidebar,
+  DraggableSidebarDivider,
+  ICommitDetailsStore,
+  SIDEBAR_MIN_WIDTH
+} from '@harnessio/ui/views'
 
 export const CommitDetailsDiffViewWrapper: FC = () => {
   const useCommitDetailsStore = useCallback((): ICommitDetailsStore => commitDetailsStore, [])
+  const [sidebarWidth, setSidebarWidth] = useState(SIDEBAR_MIN_WIDTH)
+  const containerRef = useRef<HTMLDivElement>(null)
 
   return (
-    <>
-      <CommitSidebar navigateToFile={() => {}} filesList={repoFilesStore.filesList}>
+    <Layout.Flex gapX="lg" ref={containerRef}>
+      <CommitSidebar navigateToFile={() => {}} filesList={repoFilesStore.filesList} sidebarWidth={sidebarWidth}>
         <FileExplorer.Root onValueChange={noop} value={[]}>
           {renderEntries(repoFilesStore.filesTreeData, '')}
         </FileExplorer.Root>
       </CommitSidebar>
+      <DraggableSidebarDivider width={sidebarWidth} setWidth={setSidebarWidth} containerRef={containerRef} />
       <CommitDiff useCommitDetailsStore={useCommitDetailsStore} />
-    </>
+    </Layout.Flex>
   )
 }

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

@@ -1,39 +1,59 @@
-import { FC, HTMLAttributes, PropsWithChildren } from 'react'
+import { FC, HTMLAttributes, PropsWithChildren, useRef, useState } from 'react'
 
 import { repoFilesStore } from '@subjects/views/repo-files/components/repo-files-store'
 import { renderEntries } from '@utils/fileViewUtils'
 import { noop } from '@utils/viewUtils'
 
-import { FileExplorer } from '@harnessio/ui/components'
-import { BranchSelectorV2, RepoSidebar as RepoSidebarView } from '@harnessio/ui/views'
+import { FileExplorer, Layout } from '@harnessio/ui/components'
+import {
+  BranchSelectorV2,
+  DraggableSidebarDivider,
+  RepoSidebar as RepoSidebarView,
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_MIN_WIDTH
+} from '@harnessio/ui/views'
 
 export const RepoFilesViewWrapper: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
+  const [sidebarWidth, setSidebarWidth] = useState(SIDEBAR_MIN_WIDTH)
+  const containerRef = useRef<HTMLDivElement>(null)
+
   return (
-    <div className="flex flex-1">
-      <RepoSidebarView
-        navigateToNewFile={noop}
-        navigateToFile={noop}
-        filesList={repoFilesStore.filesList}
-        branchSelectorRenderer={() => (
-          <BranchSelectorV2
-            repoId="canary"
-            spaceId="org"
-            branchList={[]}
-            tagList={[]}
-            selectedBranchorTag={{ name: 'main', sha: 'sha' }}
-            selectedBranch={{ name: 'main', sha: 'sha' }}
-            onSelectBranch={noop}
-            isBranchOnly={false}
-            dynamicWidth={false}
-            setSearchQuery={noop}
-          />
-        )}
+    <Layout.Flex className="flex-1" ref={containerRef}>
+      <div
+        className="shrink-0 overflow-hidden"
+        style={{
+          width: `${sidebarWidth}px`,
+          minWidth: `${SIDEBAR_MIN_WIDTH}px`,
+          maxWidth: `${SIDEBAR_MAX_WIDTH}px`
+        }}
       >
-        <FileExplorer.Root onValueChange={noop} value={[]}>
-          {renderEntries(repoFilesStore.filesTreeData, '')}
-        </FileExplorer.Root>
-      </RepoSidebarView>
-      <div className="min-h-[calc(100vh-var(--cn-page-nav-height))]">{children}</div>
-    </div>
+        <RepoSidebarView
+          navigateToNewFile={noop}
+          navigateToFile={noop}
+          filesList={repoFilesStore.filesList}
+          branchSelectorRenderer={() => (
+            <BranchSelectorV2
+              repoId="canary"
+              spaceId="org"
+              branchList={[]}
+              tagList={[]}
+              selectedBranchorTag={{ name: 'main', sha: 'sha' }}
+              selectedBranch={{ name: 'main', sha: 'sha' }}
+              onSelectBranch={noop}
+              isBranchOnly={false}
+              dynamicWidth={false}
+              setSearchQuery={noop}
+            />
+          )}
+        >
+          <FileExplorer.Root onValueChange={noop} value={[]}>
+            {renderEntries(repoFilesStore.filesTreeData, '')}
+          </FileExplorer.Root>
+        </RepoSidebarView>
+      </div>
+      <DraggableSidebarDivider width={sidebarWidth} setWidth={setSidebarWidth} containerRef={containerRef} />
+
+      {children}
+    </Layout.Flex>
   )
 }

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

@@ -3,6 +3,8 @@ import { noop } from '@utils/viewUtils'
 import { DiffFileEntry, ICommitDetailsStore } from '@harnessio/ui/views'
 
 export const commitDetailsStore: ICommitDetailsStore = {
+  commitSHA: '',
+  setCommitSHA: noop,
   diffs: [
     {
       blocks: [

apps/design-system/src/subjects/views/labels/project-labels-list.tsx

@@ -4,16 +4,15 @@ import { LabelsListStore } from '@subjects/stores/labels-store'
 import { noop } from '@utils/viewUtils'
 
 import { DeleteAlertDialog } from '@harnessio/ui/components'
-import { LabelsListPage } from '@harnessio/ui/views'
+import { LabelsListPage, SandboxLayout } from '@harnessio/ui/views'
 
 export const ProjectLabelsList = () => {
   const [openAlertDeleteDialog, setOpenAlertDeleteDialog] = useState(false)
 
   return (
-    <>
+    <SandboxLayout.Content>
       <LabelsListPage
         useLabelsStore={LabelsListStore.useLabelsStore}
-        createdIn={''}
         searchQuery={''}
         setSearchQuery={noop}
         labelsListViewProps={{ handleEditLabel: noop, handleDeleteLabel: () => setOpenAlertDeleteDialog(true) }}
@@ -26,6 +25,6 @@ export const ProjectLabelsList = () => {
         deleteFn={noop}
         isLoading={false}
       />
-    </>
+    </SandboxLayout.Content>
   )
 }

apps/design-system/src/subjects/views/labels/repo-labels-list.tsx

@@ -13,7 +13,6 @@ export const RepoLabelsList = () => {
     <>
       <LabelsListPage
         useLabelsStore={LabelsListStore.useLabelsStore}
-        createdIn={''}
         searchQuery={''}
         setSearchQuery={noop}
         isRepository

apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx

@@ -40,7 +40,6 @@ const PullRequestCompareWrapper: FC<Partial<PullRequestComparePageProps>> = prop
           isDeleted: false,
           filePath: 'bot.txt',
           diffData: {
-            fileId: 'some-id',
             containerId: 'some-container-id',
             contentId: 'some-content-id',
             isCombined: false,
@@ -52,7 +51,8 @@ const PullRequestCompareWrapper: FC<Partial<PullRequestComparePageProps>> = prop
             language: 'txt',
             blocks: [],
             oldName: 'bot.txt',
-            newName: 'bot.txt'
+            newName: 'bot.txt',
+            isRename: false
           }
         }
       ]}

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx

@@ -98,6 +98,7 @@ const PullRequestConversation: FC<PullRequestConversationProps> = ({ state }) =>
         panelProps={{
           handleRebaseBranch,
           handlePrState,
+          handleViewUnresolvedComments: noop,
           changesInfo: {
             header: changesInfo.title,
             content: changesInfo.statusMessage,

apps/design-system/src/subjects/views/pull-request-list/pull-request-list-store.ts

@@ -36,6 +36,7 @@ export const pullRequestListStore: PullRequestListStore = {
   page: 1,
   openPullReqs: 1,
   closedPullReqs: 0,
+  mergedPullReqs: 0,
   setPage: noop,
   setLabelsQuery: noop,
   prState: ['open'],

apps/design-system/src/subjects/views/repo-branches/index.tsx

@@ -7,25 +7,20 @@ import { IBranchSelectorStore, RepoBranchListView } from '@harnessio/ui/views'
 import { repoBranchesStore } from './repo-branches-store'
 
 export function RepoBranchesView() {
-  const [isCreateBranchDialogOpen, setCreateBranchDialogOpen] = useState(false)
+  const [_isCreateBranchDialogOpen, setCreateBranchDialogOpen] = useState(false)
   const useRepoBranchesStore = useCallback((): IBranchSelectorStore => repoBranchesStore, [])
 
   return (
     <RepoBranchListView
       isLoading={false}
-      isCreatingBranch={false}
-      onSubmit={async () => {}}
       useRepoBranchesStore={useRepoBranchesStore}
-      isCreateBranchDialogOpen={isCreateBranchDialogOpen}
       setCreateBranchDialogOpen={setCreateBranchDialogOpen}
       searchQuery={''}
       setSearchQuery={noop}
-      createBranchError={undefined}
       toPullRequest={() => ''}
       toBranchRules={() => ''}
       toPullRequestCompare={() => ''}
       onDeleteBranch={noop}
-      setCreateBranchSearchQuery={noop}
     />
   )
 }

apps/design-system/src/subjects/views/repo-branches/repo-branches-store.ts

@@ -73,7 +73,19 @@ export const repoBranchesStore: IBranchSelectorStore = {
           running: 1,
           success: 1
         }
-      }
+      },
+      pullRequests: [
+        {
+          number: 3,
+          updated: 1737045212396,
+          state: 'merged',
+          is_draft: false,
+          merged: 1737045212397,
+          timestamp: 'Jan 13, 2025',
+          reviewRequired: false,
+          labels: []
+        }
+      ]
     },
     {
       id: 2,

apps/design-system/src/subjects/views/repo-create-rule.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 
 import { useRepoRulesStore } from '@subjects/views/repo-general-settings/use-repo-rules-store'
 
-import { SkeletonForm } from '@harnessio/ui/components'
+import { Skeleton } from '@harnessio/ui/components'
 import { RepoBranchSettingsRulesPage } from '@harnessio/ui/views'
 
 const errors = {
@@ -36,7 +36,7 @@ export const RepoCreateRule = () => {
   }, [])
 
   if (!loaded) {
-    return <SkeletonForm className="mt-7" />
+    return <Skeleton.Form className="mt-7" />
   }
 
   return (

apps/design-system/src/subjects/views/repo-files/components/repo-file-edit.tsx

@@ -73,7 +73,7 @@ export const RepoFileEdit = () => {
       />
 
       <Tabs.Root
-        className="flex flex-col h-full"
+        className="flex h-full flex-col"
         value={view as string}
         onValueChange={val => onChangeView(val as EditViewTypeValue)}
       >

apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx

@@ -38,7 +38,6 @@ export const RepoFilesWrapper: FC<RepoFilesWrapperProps> = ({ codeMode, isDir, i
     <RepoFiles
       isRepoEmpty={repoFilesStore.repository.is_empty}
       pathParts={repoFilesStore.pathParts}
-      loading={false}
       files={repoFilesStore.files}
       isDir={isDir}
       isShowSummary={true}

apps/design-system/src/subjects/views/repo-tags/repo-tags-list.tsx

@@ -17,7 +17,7 @@ import { tagsStore } from './repo-tags-store'
 export const RepoTagsList = () => {
   const [openCreateTagDialog, setOpenCreateTagDialog] = useState(false)
   const [openCreateBranchDialog, setOpenCreateBranchDialog] = useState(false)
-  const [selectedTagInList, setSelectedTagInList] = useState<BranchSelectorListItem | null>(null)
+  const [selectedTagInList, setSelectedTagInList] = useState<BranchSelectorListItem>()
   const [preSelectedTab, setPreSelectedTab] = useState<BranchSelectorTab>(BranchSelectorTab.BRANCHES)
 
   const [openDeleteTagDialog, setOpenDeleteTagDialog] = useState(false)
@@ -60,7 +60,9 @@ export const RepoTagsList = () => {
         onSubmit={noop}
         isLoading={false}
         error=""
-        selectedBranchOrTag={null}
+        violation={false}
+        bypassable={false}
+        resetViolation={noop}
         branchSelectorRenderer={() => (
           <BranchSelectorV2
             branchList={branches}
@@ -98,6 +100,9 @@ export const RepoTagsList = () => {
             preSelectedTab={preSelectedTab}
           />
         )}
+        violation={false}
+        bypassable={false}
+        resetViolation={noop}
       />
       <DeleteAlertDialog
         open={openDeleteTagDialog}

apps/design-system/src/subjects/views/search-page/search-page-preview.tsx

@@ -13,6 +13,7 @@ export const SearchPagePreview = () => {
   return (
     <SearchPageView
       isLoading={false}
+      toRepo={() => '#'}
       searchQuery={searchQuery}
       regexEnabled={regexEnabled}
       setRegexEnabled={setRegexEnabled}
@@ -25,6 +26,8 @@ export const SearchPagePreview = () => {
       onLanguageSelect={() => {}}
       onClearFilters={() => {}}
       isRepoScope={true}
+      onRecursiveToggle={() => {}}
+      scope={{ accountId: '1', orgIdentifier: '2', projectIdentifier: '3' }}
     />
   )
 }

apps/design-system/src/subjects/views/templates/view-only.tsx

@@ -72,10 +72,10 @@ const dataMock: ViewOnlyProps[] = [
         value: (
           <div className="flex flex-wrap items-center gap-4">
             <div className="inline-flex items-center gap-1">
-              <LogoV2 size="sm" name="app-dynamics" /> delegate-1
+              <LogoV2 size="xs" name="app-dynamics" /> delegate-1
             </div>
             <div className="inline-flex items-center gap-1">
-              <LogoV2 size="sm" name="katalon" /> delegate-2
+              <LogoV2 size="xs" name="katalon" /> delegate-2
             </div>
           </div>
         )

apps/gitness/package.json

@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
-    "@git-diff-view/react": "^0.0.16",
+    "@git-diff-view/react": "^0.0.30",
     "@swc/core": "^1.12.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^12.1.5",