code review fixes 2

hiderr · hiderr · commit 8e4ace03c47f · 2025-04-08T10:38:11.000+02:00
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
@@ -1,9 +1,10 @@
-import { useCallback, useState } from 'react'
+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'
@@ -16,15 +17,23 @@ interface CreateBranchDialogProps {
   open: boolean
   onClose: () => void
   onSuccess?: () => void
+  preselectedBranchOrTag?: BranchSelectorListItem | null
+  preselectedTab?: BranchSelectorTab
 }
 
-export const CreateBranchDialog = ({ open, onClose, onSuccess }: CreateBranchDialogProps) => {
+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<string>('')
+  const [createdBranchName, setCreatedBranchName] = useState('')
 
   const selectBranchOrTag = useCallback((branchTagName: BranchSelectorListItem) => {
     setSelectedBranchOrTag(branchTagName)
@@ -38,7 +47,8 @@ export const CreateBranchDialog = ({ open, onClose, onSuccess }: CreateBranchDia
   const {
     mutateAsync: createBranch,
     error: createBranchError,
-    isLoading: isCreatingBranch
+    isLoading: isCreatingBranch,
+    reset: resetBranchMutation
   } = useCreateBranchMutation(
     {},
     {
@@ -60,6 +70,18 @@ export const CreateBranchDialog = ({ open, onClose, onSuccess }: CreateBranchDia
     })
   }
 
+  useEffect(() => {
+    if (!open) {
+      resetBranchMutation()
+    }
+  }, [open, resetBranchMutation])
+
+  useEffect(() => {
+    if (preselectedBranchOrTag) {
+      setSelectedBranchOrTag(preselectedBranchOrTag)
+    }
+  }, [open, preselectedBranchOrTag])
+
   return (
     <CreateBranchDialogComp
       useTranslationStore={useTranslationStore}
@@ -70,7 +92,11 @@ export const CreateBranchDialog = ({ open, onClose, onSuccess }: CreateBranchDia
       isCreatingBranch={isCreatingBranch}
       error={createBranchError?.message}
       renderProp={() => (
-        <BranchSelectorContainer onSelectBranchorTag={selectBranchOrTag} selectedBranch={selectedBranchOrTag} />
+        <BranchSelectorContainer
+          onSelectBranchorTag={selectBranchOrTag}
+          selectedBranch={selectedBranchOrTag}
+          preSelectedTab={preselectedTab}
+        />
       )}
     />
   )
diff --git a/apps/gitness/src/pages-v2/repo/repo-tags-list-container.tsx b/apps/gitness/src/pages-v2/repo/repo-tags-list-container.tsx
@@ -10,6 +10,7 @@ import {
 import { DeleteAlertDialog, DeleteAlertDialogProps } from '@harnessio/ui/components'
 import {
   BranchSelectorListItem,
+  BranchSelectorTab,
   CommitTagType,
   CreateTagDialog,
   CreateTagFormFields,
@@ -38,6 +39,8 @@ export const RepoTagsListContainer = () => {
   const { queryPage } = usePaginationQueryStateWithStore({ page, setPage })
 
   const [selectedBranchOrTag, setSelectedBranchOrTag] = useState<BranchSelectorListItem | null>(null)
+  const [selectedTagInList, setSelectedTagInList] = useState<BranchSelectorListItem | null>(null)
+  const [preSelectedTab, setPreSelectedTab] = useState<BranchSelectorTab>(BranchSelectorTab.BRANCHES)
 
   const [openCreateTagDialog, setOpenCreateTagDialog] = useState(false)
   const [openCreateBranchDialog, setOpenCreateBranchDialog] = useState(false)
@@ -62,7 +65,8 @@ export const RepoTagsListContainer = () => {
   const {
     mutate: createTag,
     isLoading: isCreatingTag,
-    error: createTagError
+    error: createTagError,
+    reset: resetCreateTagMutation
   } = useCreateTagMutation(
     { repo_ref: repo_ref },
     {
@@ -120,12 +124,22 @@ export const RepoTagsListContainer = () => {
     setSelectedBranchOrTag(branchTagName)
   }, [])
 
+  useEffect(() => {
+    if (!openCreateTagDialog) {
+      resetCreateTagMutation()
+    }
+  }, [openCreateTagDialog, resetCreateTagMutation])
+
   return (
     <>
       <RepoTagsListView
         useTranslationStore={useTranslationStore}
         isLoading={isLoadingTags}
-        openCreateBranchDialog={() => setOpenCreateBranchDialog(true)}
+        openCreateBranchDialog={(selectedTagInList: BranchSelectorListItem) => {
+          setOpenCreateBranchDialog(true)
+          setSelectedTagInList(selectedTagInList)
+          setPreSelectedTab(BranchSelectorTab.TAGS)
+        }}
         openCreateTagDialog={() => setOpenCreateTagDialog(true)}
         searchQuery={query}
         setSearchQuery={setQuery}
@@ -148,7 +162,12 @@ export const RepoTagsListContainer = () => {
           <BranchSelectorContainer onSelectBranchorTag={selectBranchOrTag} selectedBranch={selectedBranchOrTag} />
         )}
       />
-      <CreateBranchDialog open={openCreateBranchDialog} onClose={() => setOpenCreateBranchDialog(false)} />
+      <CreateBranchDialog
+        open={openCreateBranchDialog}
+        onClose={() => setOpenCreateBranchDialog(false)}
+        preselectedBranchOrTag={selectedTagInList}
+        preselectedTab={preSelectedTab}
+      />
       <DeleteAlertDialog
         open={deleteTagDialog}
         onClose={() => setDeleteTagDialog(false)}
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
@@ -1,3 +1,2 @@
 coverage/
-dist
-node_modules
+dist
diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json
@@ -525,9 +525,9 @@
     "selectMember": "Select member",
     "selectRole": "Select role",
     "enterBranchName": "Enter branch name",
+    "basedOn": "Based on",
     "tagName": "Name",
     "enterTagName": "Enter a tag name here",
-    "basedOn": "Based on",
     "createBranchError": "Branch name is required",
     "select": "Select",
     "baseBranch": "Base branch",
diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json
@@ -514,9 +514,9 @@
     "selectMember": "",
     "selectRole": "",
     "enterBranchName": "Entrez le nom de la branche",
+    "basedOn": "Basé sur",
     "tagName": "Nom",
     "enterTagName": "Entrez un nom d'étiquette ici",
-    "basedOn": "Basé sur",
     "createBranchError": "Le nom de la branche est requis",
     "select": "Sélectionner",
     "baseBranch": "Branche de base",
diff --git a/packages/ui/src/components/alert-dialog.tsx b/packages/ui/src/components/alert-dialog.tsx
@@ -70,7 +70,7 @@ const AlertDialogContent = React.forwardRef<
         {...props}
       >
         <Button
-          className="absolute right-3 top-[18px] z-10 text-icons-4 transition-colors duration-200 hover:text-icons-2 disabled:pointer-events-none"
+          className="text-icons-4 hover:text-icons-2 absolute right-3 top-[18px] z-10 transition-colors duration-200 disabled:pointer-events-none"
           type="button"
           variant="custom"
           size="icon"
diff --git a/packages/ui/src/views/repo/components/branch-selector-v2/branch-selector-dropdown.tsx b/packages/ui/src/views/repo/components/branch-selector-v2/branch-selector-dropdown.tsx
@@ -17,10 +17,11 @@ export const BranchSelectorDropdown: FC<BranchSelectorDropdownProps> = ({
   isBranchOnly = false,
   searchQuery,
   setSearchQuery,
-  dynamicWidth = false
+  dynamicWidth = false,
+  preSelectedTab = BranchSelectorTab.BRANCHES
 }) => {
   const { Link } = useRouterContext()
-  const [activeTab, setActiveTab] = useState<BranchSelectorTab>(BranchSelectorTab.BRANCHES)
+  const [activeTab, setActiveTab] = useState<BranchSelectorTab>(preSelectedTab)
   const { t } = useTranslationStore()
   const BRANCH_SELECTOR_LABELS = getBranchSelectorLabels(t)
 
diff --git a/packages/ui/src/views/repo/components/branch-selector-v2/branch-selector.tsx b/packages/ui/src/views/repo/components/branch-selector-v2/branch-selector.tsx
@@ -20,6 +20,7 @@ interface BranchSelectorProps {
   searchQuery?: string
   setSearchQuery: (query: string) => void
   dynamicWidth?: boolean
+  preSelectedTab?: BranchSelectorTab
 }
 export const BranchSelectorV2: FC<BranchSelectorProps> = ({
   repoId,
@@ -35,7 +36,8 @@ export const BranchSelectorV2: FC<BranchSelectorProps> = ({
   isBranchOnly = false,
   searchQuery = '',
   setSearchQuery,
-  dynamicWidth = false
+  dynamicWidth = false,
+  preSelectedTab
 }) => {
   const isTag = selectedBranchorTag
     ? tagList?.some(tag => tag.name === selectedBranchorTag.name && tag.sha === selectedBranchorTag.sha)
@@ -72,6 +74,7 @@ export const BranchSelectorV2: FC<BranchSelectorProps> = ({
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
         dynamicWidth={dynamicWidth}
+        preSelectedTab={preSelectedTab}
       />
     </DropdownMenu.Root>
   )
diff --git a/packages/ui/src/views/repo/components/branch-selector/types.ts b/packages/ui/src/views/repo/components/branch-selector/types.ts
@@ -30,6 +30,7 @@ export interface BranchSelectorDropdownProps {
   searchQuery: string
   setSearchQuery: (query: string) => void
   dynamicWidth?: boolean
+  preSelectedTab?: BranchSelectorTab
 }
 
 export interface BranchSelectorProps extends BranchSelectorDropdownProps {
diff --git a/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx b/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx
@@ -1,7 +1,7 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { Alert, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Input } from '@/components'
+import { Alert, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Input, Label } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { TranslationStore } from '@views/repo'
 import { z } from 'zod'
@@ -52,11 +52,10 @@ export function CreateBranchDialog({
     defaultValues: INITIAL_FORM_VALUES
   })
 
-  const handleClose = () => {
+  const resetForm = useCallback(() => {
     clearErrors()
     reset(INITIAL_FORM_VALUES)
-    onClose()
-  }
+  }, [clearErrors, reset])
 
   const handleFormSubmit = async (data: CreateBranchFormFields) => {
     await onSubmit(data)
@@ -67,10 +66,19 @@ export function CreateBranchDialog({
   }
 
   useEffect(() => {
-    if (open && selectedBranchOrTag) {
-      setValue('target', selectedBranchOrTag.name, { shouldValidate: true })
+    if (open) {
+      resetForm()
+
+      if (selectedBranchOrTag) {
+        setValue('target', selectedBranchOrTag.name, { shouldValidate: true })
+      }
     }
-  }, [selectedBranchOrTag, setValue, open])
+  }, [selectedBranchOrTag, setValue, open, resetForm])
+
+  const handleClose = () => {
+    resetForm()
+    onClose()
+  }
 
   return (
     <Dialog.Root open={open} onOpenChange={handleClose}>
@@ -92,7 +100,12 @@ export function CreateBranchDialog({
           </Fieldset>
 
           <Fieldset>
-            <ControlGroup>{BranchSelectorContainer()}</ControlGroup>
+            <ControlGroup>
+              <Label htmlFor="target" className="mb-2" color="secondary">
+                {t('views:forms.basedOn', 'Based on')}
+              </Label>
+              {BranchSelectorContainer()}
+            </ControlGroup>
           </Fieldset>
 
           {error ? (
diff --git a/packages/ui/src/views/repo/repo-tags/components/repo-tags-list.tsx b/packages/ui/src/views/repo/repo-tags/components/repo-tags-list.tsx
diff --git a/packages/ui/src/views/repo/repo-tags/types.tsx b/packages/ui/src/views/repo/repo-tags/types.tsx

-Original file line number
+Diff line change
@@ @@ -1,3 +1,2 @@ @@
 coverage/
 -dist
 -node_modules
 +dist
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ const AlertDialogContent = React.forwardRef<`
`70`	`70`	`{...props}`
`71`	`71`	`>`
`72`	`72`	`<Button`
`73`		`- className="absolute right-3 top-[18px] z-10 text-icons-4 transition-colors duration-200 hover:text-icons-2 disabled:pointer-events-none"`
	`73`	`+ className="text-icons-4 hover:text-icons-2 absolute right-3 top-[18px] z-10 transition-colors duration-200 disabled:pointer-events-none"`
`74`	`74`	`type="button"`
`75`	`75`	`variant="custom"`
`76`	`76`	`size="icon"`
Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ export interface BranchSelectorDropdownProps {`
`30`	`30`	`searchQuery: string`
`31`	`31`	`setSearchQuery: (query: string) => void`
`32`	`32`	`dynamicWidth?: boolean`
	`33`	`+ preSelectedTab?: BranchSelectorTab`
`33`	`34`	`}`
`34`	`35`
`35`	`36`	`export interface BranchSelectorProps extends BranchSelectorDropdownProps {`