harness · hiderr · Feb 24, 2025
diff --git a/apps/design-system/src/subjects/views/repo-branches/index.tsx b/apps/design-system/src/subjects/views/repo-branches/index.tsx
@@ -14,7 +14,7 @@ export function RepoBranchesView() {
     <RepoBranchListView
       isLoading={false}
       isCreatingBranch={false}
-      onSubmit={noop}
+      onSubmit={async () => {}}
       useRepoBranchesStore={useRepoBranchesStore}
       useTranslationStore={useTranslationStore}
       isCreateBranchDialogOpen={isCreateBranchDialogOpen}

diff --git a/apps/design-system/src/subjects/views/repo-tags/repo-tags-list.tsx b/apps/design-system/src/subjects/views/repo-tags/repo-tags-list.tsx
@@ -2,38 +2,117 @@ import { useCallback, useState } from 'react'
 
 import { noop, useTranslationStore } from '@utils/viewUtils.ts'
 
-import { CreateTagDialog, IBranchSelectorStore, RepoTagsListView } from '@harnessio/ui/views'
+import { DeleteAlertDialog } from '@harnessio/ui/components'
+import {
+  BranchSelectorListItem,
+  BranchSelectorTab,
+  BranchSelectorV2,
+  CreateBranchDialog,
+  CreateTagDialog,
+  RepoTagsListView
+} from '@harnessio/ui/views'
 
-import { repoBranchesStore } from '../repo-branches/repo-branches-store'
 import { tagsStore } from './repo-tags-store'
 
 export const RepoTagsList = () => {
   const [openCreateTagDialog, setOpenCreateTagDialog] = useState(false)
-  const useRepoBranchesStore = useCallback((): IBranchSelectorStore => repoBranchesStore, [])
+  const [openCreateBranchDialog, setOpenCreateBranchDialog] = useState(false)
+  const [selectedTagInList, setSelectedTagInList] = useState<BranchSelectorListItem | null>(null)
+  const [preSelectedTab, setPreSelectedTab] = useState<BranchSelectorTab>(BranchSelectorTab.BRANCHES)
+
+  const [openDeleteTagDialog, setOpenDeleteTagDialog] = useState(false)
+
+  const tags = tagsStore.tags
+  const branches = [
+    {
+      id: 0,
+      name: 'branch',
+      sha: 'sha',
+      default: false,
+      timestamp: '',
+      user: {
+        name: '',
+        avatarUrl: ''
+      }
+    }
+  ]
   const useRepoTagsStore = useCallback(() => tagsStore, [])
 
   return (
     <>
       <RepoTagsListView
         useTranslationStore={useTranslationStore}
         isLoading={false}
-        openCreateBranchDialog={() => setOpenCreateTagDialog(true)}
+        openCreateBranchDialog={(selectedTagInList: BranchSelectorListItem) => {
+          setOpenCreateBranchDialog(true)
+          setSelectedTagInList(selectedTagInList)
+          setPreSelectedTab(BranchSelectorTab.TAGS)
+        }}
         searchQuery={''}
         setSearchQuery={noop}
-        onDeleteTag={noop}
+        onDeleteTag={() => setOpenDeleteTagDialog(true)}
         useRepoTagsStore={useRepoTagsStore}
         toCommitDetails={() => ''}
-        openCreateTagDialog={noop}
+        openCreateTagDialog={() => setOpenCreateTagDialog(true)}
       />
       <CreateTagDialog
         useTranslationStore={useTranslationStore}
         open={openCreateTagDialog}
         onClose={() => setOpenCreateTagDialog(false)}
         onSubmit={noop}
-        branchQuery={''}
-        setBranchQuery={noop}
-        useRepoBranchesStore={useRepoBranchesStore}
         isLoading={false}
+        error={''}
+        selectedBranchOrTag={null}
+        renderProp={() => (
+          <BranchSelectorV2
+            useTranslationStore={useTranslationStore}
+            branchList={branches}
+            tagList={tags}
+            selectedBranchorTag={branches[0]}
+            repoId={'repoId'}
+            spaceId={'spaceId'}
+            searchQuery={''}
+            setSearchQuery={noop}
+            onSelectBranch={noop}
+            isBranchOnly={false}
+            dynamicWidth={false}
+          />
+        )}
+      />
+      <CreateBranchDialog
+        useTranslationStore={useTranslationStore}
+        open={openCreateBranchDialog}
+        onClose={() => setOpenCreateBranchDialog(false)}
+        selectedBranchOrTag={selectedTagInList}
+        onSubmit={async () => {}}
+        isCreatingBranch={false}
+        error={''}
+        renderProp={() => (
+          <BranchSelectorV2
+            useTranslationStore={useTranslationStore}
+            branchList={branches}
+            tagList={tags}
+            selectedBranchorTag={selectedTagInList ?? { name: '', sha: '', default: false }}
+            repoId={'repoId'}
+            spaceId={'spaceId'}
+            searchQuery={''}
+            setSearchQuery={noop}
+            onSelectBranch={noop}
+            isBranchOnly={false}
+            dynamicWidth={false}
+            preSelectedTab={preSelectedTab}
+          />
+        )}
+      />
+      <DeleteAlertDialog
+        open={openDeleteTagDialog}
+        onClose={() => setOpenDeleteTagDialog(false)}
+        deleteFn={noop}
+        error={null}
+        type="tag"
+        identifier={undefined}
+        isLoading={false}
+        useTranslationStore={useTranslationStore}
       />
     </>
   )

diff --git a/apps/design-system/src/subjects/views/repo-tags/repo-tags-store.ts b/apps/design-system/src/subjects/views/repo-tags/repo-tags-store.ts
@@ -4,23 +4,31 @@ export const tagsStore: RepoTagsStore = {
   tags: [
     {
       name: 'v2.4.0',
-      sha: '947bcbe92a5d40aacf861269b6605226adda0daf',
-      is_annotated: false
-    },
-    {
-      name: 'v2.3.1',
-      sha: '794bdb1c56d885ae02f799c6cce13942e8614516',
-      is_annotated: false
+      sha: 'dd6135add66c91c74b21aa7514a57fdc8d5dc320',
+      is_annotated: true,
+      title: 'v2.4.0',
+      message: 'v2.4.0',
+      tagger: {
+        identity: {
+          name: 'user',
+          email: '[email protected]'
+        },
+        when: '2025-04-07T10:08:00Z'
+      }
     },
     {
       name: 'v2.3.0',
-      sha: '87f1c74cd8a14ea90635c56a627d5e99a4950c73',
-      is_annotated: false
-    },
-    {
-      name: 'v2.25.1-debug',
-      sha: '3e7ecf16153e88919951725c3ecc69ff076c00b9',
-      is_annotated: false
+      sha: 'f067dc95f956b2b195f30635e6d6e74e774d2108',
+      is_annotated: true,
+      title: 'v2.3.0',
+      message: 'v2.3.0',
+      tagger: {
+        identity: {
+          name: 'user',
+          email: '[email protected]'
+        },
+        when: '2025-04-07T09:04:05Z'
+      }
     }
   ],
   page: 1,

diff --git a/apps/design-system/src/subjects/views/secrets/secret-input.tsx b/apps/design-system/src/subjects/views/secrets/secret-input.tsx
@@ -24,7 +24,7 @@ export const SecretInputExample = () => {
         }}
         onClear={() => setSelectedSecret(null)}
         renderValue={secret => secret.name}
-        className="max-w-xs mb-8"
+        className="mb-8 max-w-xs"
       />
       <SecretsPage
         isDrawerOpen={isDrawerOpen}

diff --git a/apps/gitness/src/components-v2/branch-selector-container.tsx b/apps/gitness/src/components-v2/branch-selector-container.tsx
@@ -15,12 +15,14 @@ interface BranchSelectorContainerProps {
   onSelectBranchorTag: (branchTag: BranchSelectorListItem, type: BranchSelectorTab) => void
   isBranchOnly?: boolean
   dynamicWidth?: boolean
+  preSelectedTab?: BranchSelectorTab
 }
 export const BranchSelectorContainer: React.FC<BranchSelectorContainerProps> = ({
   selectedBranch,
   onSelectBranchorTag,
   isBranchOnly = false,
-  dynamicWidth = false
+  dynamicWidth = false,
+  preSelectedTab
 }) => {
   const repoRef = useGetRepoRef()
   const { spaceId, repoId } = useParams<PathParams>()
@@ -95,6 +97,7 @@ export const BranchSelectorContainer: React.FC<BranchSelectorContainerProps> = (
       onSelectBranch={onSelectBranchorTag}
       isBranchOnly={isBranchOnly}
       dynamicWidth={dynamicWidth}
+      preSelectedTab={preSelectedTab}
     />
   )
 }
diff --git a/apps/gitness/src/components-v2/create-branch-dialog.tsx b/apps/gitness/src/components-v2/create-branch-dialog.tsx
@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { useCreateBranchMutation } from '@harnessio/code-service-client'
+import { useToastNotification } from '@harnessio/ui/components'
+import {
+  BranchSelectorListItem,
+  BranchSelectorTab,
+  CreateBranchDialog as CreateBranchDialogComp,
+  CreateBranchFormFields
+} from '@harnessio/ui/views'
+
+import { useGetRepoRef } from '../framework/hooks/useGetRepoPath'
+import { useTranslationStore } from '../i18n/stores/i18n-store'
+import { BranchSelectorContainer } from './branch-selector-container'
+
+interface CreateBranchDialogProps {
+  open: boolean
+  onClose: () => void
+  onSuccess?: () => void
+  preselectedBranchOrTag?: BranchSelectorListItem | null
+  preselectedTab?: BranchSelectorTab
+}
+
+export const CreateBranchDialog = ({
+  open,
+  onClose,
+  onSuccess,
+  preselectedBranchOrTag,
+  preselectedTab
+}: CreateBranchDialogProps) => {
+  const repo_ref = useGetRepoRef()
+
+  const { t } = useTranslationStore()
+  const [selectedBranchOrTag, setSelectedBranchOrTag] = useState<BranchSelectorListItem | null>(null)
+
+  const [createdBranchName, setCreatedBranchName] = useState('')
+
+  const selectBranchOrTag = useCallback((branchTagName: BranchSelectorListItem) => {
+    setSelectedBranchOrTag(branchTagName)
+  }, [])
+
+  const { showToast } = useToastNotification({
+    title: t('views:repos.branchCreated'),
+    description: t('views:repos.branchCreatedDescription', { name: createdBranchName })
+  })
+
+  const {
+    mutateAsync: createBranch,
+    error: createBranchError,
+    isLoading: isCreatingBranch,
+    reset: resetBranchMutation
+  } = useCreateBranchMutation(
+    {},
+    {
+      onSuccess: data => {
+        onClose()
+        setCreatedBranchName(data.body.name ?? '')
+        showToast()
+        onSuccess?.()
+      }
+    }
+  )
+
+  const handleCreateBranch = async (data: CreateBranchFormFields) => {
+    await createBranch({
+      repo_ref,
+      body: {
+        ...data
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!open) {
+      resetBranchMutation()
+    }
+  }, [open, resetBranchMutation])
+
+  useEffect(() => {
+    if (preselectedBranchOrTag) {
+      setSelectedBranchOrTag(preselectedBranchOrTag)
+    }
+  }, [open, preselectedBranchOrTag])
+
+  return (
+    <CreateBranchDialogComp
+      useTranslationStore={useTranslationStore}
+      open={open}
+      onClose={onClose}
+      selectedBranchOrTag={selectedBranchOrTag}
+      onSubmit={handleCreateBranch}
+      isCreatingBranch={isCreatingBranch}
+      error={createBranchError?.message}
+      renderProp={() => (
+        <BranchSelectorContainer
+          onSelectBranchorTag={selectBranchOrTag}
+          selectedBranch={selectedBranchOrTag}
+          preSelectedTab={preselectedTab}
+        />
+      )}
+    />
+  )
+}
diff --git a/apps/gitness/src/pages-v2/repo/repo-branch-list.tsx b/apps/gitness/src/pages-v2/repo/repo-branch-list.tsx
@@ -13,6 +13,7 @@ import {
 import { DeleteAlertDialog } from '@harnessio/ui/components'
 import { CreateBranchFormFields, RepoBranchListView } from '@harnessio/ui/views'
 
+import { CreateBranchDialog } from '../../components-v2/create-branch-dialog'
 import { useRoutes } from '../../framework/context/NavigationContext'
 import { useGetRepoRef } from '../../framework/hooks/useGetRepoPath'
 import { useQueryState } from '../../framework/hooks/useQueryState'
@@ -191,6 +192,12 @@ export function RepoBranchesListPage() {
         setCreateBranchSearchQuery={setCreateBranchSearchQuery}
       />
 
+      <CreateBranchDialog
+        open={isCreateBranchDialogOpen}
+        onClose={() => setCreateBranchDialogOpen(false)}
+        onSuccess={handleInvalidateBranchList}
+      />
+
       <DeleteAlertDialog
         open={deleteBranchName !== null}
         onClose={handleResetDeleteBranch}

diff --git a/apps/gitness/src/pages-v2/repo/repo-sidebar.tsx b/apps/gitness/src/pages-v2/repo/repo-sidebar.tsx
@@ -20,7 +20,7 @@ import { useTranslationStore } from '../../i18n/stores/i18n-store'
 import { PathParams } from '../../RouteDefinitions'
 import { orderSortDate } from '../../types'
 import { FILE_SEPERATOR, normalizeGitRef, REFS_TAGS_PREFIX } from '../../utils/git-utils'
-import { useRepoBranchesStore } from '././stores/repo-branches-store'
+import { useRepoBranchesStore } from './stores/repo-branches-store'
 import { transformBranchList } from './transform-utils/branch-transform'
 
 /**