pixel-point · ankormoreankor · Feb 7, 2025
diff --git a/apps/design-system/src/subjects/stores/labels-store.tsx b/apps/design-system/src/subjects/stores/labels-store.tsx
@@ -74,6 +74,7 @@ export const LabelsListStore: RepoLabelsListStore = {
         }
       ]
     },
+    isLoading: false,
 
     getParentScopeLabels: false,
 
@@ -82,6 +83,7 @@ export const LabelsListStore: RepoLabelsListStore = {
     addLabel: (_: ILabelType) => {},
 
     deleteLabel: (_: string) => {},
+    setIsLoading: (_: boolean) => {},
 
     setValues: (_: Record<string, LabelValueType[]>) => {},
     setRepoSpaceRef: (_: SetRepoSpaceRefProps) => {},

diff --git a/apps/design-system/src/subjects/views/labels/labels-form.tsx b/apps/design-system/src/subjects/views/labels/labels-form.tsx
@@ -8,11 +8,10 @@ export const LabelsForm = () => {
     <LabelFormPage
       useLabelsStore={LabelsListStore.useLabelsStore}
       useTranslationStore={useTranslationStore}
-      isLoading={false}
+      isSaving={false}
       onSubmit={() => {}}
       onFormCancel={() => {}}
       error={''}
-      isDataLoading={false}
     />
   )
 }
diff --git a/apps/design-system/src/subjects/views/labels/project-labels-list.tsx b/apps/design-system/src/subjects/views/labels/project-labels-list.tsx
@@ -12,14 +12,13 @@ export const ProjectLabelsList = () => {
   return (
     <>
       <LabelsListPage
+        className="mx-auto max-w-[812px]"
         useTranslationStore={useTranslationStore}
         useLabelsStore={LabelsListStore.useLabelsStore}
         createdIn={''}
-        handleEditLabel={() => {}}
-        handleDeleteLabel={() => setOpenAlertDeleteDialog(true)}
         searchQuery={''}
-        setSearchQuery={() => {}}
-        isLoading={false}
+        setSearchQuery={noop}
+        labelsListViewProps={{ handleEditLabel: noop, handleDeleteLabel: () => setOpenAlertDeleteDialog(true) }}
       />
       <DeleteAlertDialog
         open={openAlertDeleteDialog}

diff --git a/apps/design-system/src/subjects/views/labels/repo-labels-list.tsx b/apps/design-system/src/subjects/views/labels/repo-labels-list.tsx
@@ -12,15 +12,14 @@ export const RepoLabelsList = () => {
   return (
     <>
       <LabelsListPage
+        className="max-w-[570px] px-0"
         useTranslationStore={useTranslationStore}
         useLabelsStore={LabelsListStore.useLabelsStore}
         createdIn={''}
-        handleEditLabel={() => {}}
-        handleDeleteLabel={() => setOpenAlertDeleteDialog(true)}
         searchQuery={''}
-        setSearchQuery={() => {}}
-        isLoading={false}
+        setSearchQuery={noop}
         isRepository
+        labelsListViewProps={{ handleEditLabel: noop, handleDeleteLabel: () => setOpenAlertDeleteDialog(true) }}
       />
       <DeleteAlertDialog
         open={openAlertDeleteDialog}

diff --git a/apps/gitness/src/pages-v2/project/labels/hooks/use-get-project-label-and-values-data.ts b/apps/gitness/src/pages-v2/project/labels/hooks/use-get-project-label-and-values-data.ts
@@ -27,16 +27,21 @@ export const useGetProjectLabelAndValuesData = ({
   const space_ref = useGetSpaceURLParam()
   const [isLoadingValues, setIsLoadingValues] = useState(false)
 
-  const { labels: storeLabels, setLabels, setValues, setRepoSpaceRef, resetLabelsAndValues } = useLabelsStore()
+  const {
+    labels: storeLabels,
+    setLabels,
+    setValues,
+    setRepoSpaceRef,
+    resetLabelsAndValues,
+    setIsLoading
+  } = useLabelsStore()
 
   const { data: { body: labels } = {}, isLoading: isLoadingSpaceLabels } = useListSpaceLabelsQuery(
     {
       space_ref: space_ref ?? '',
       queryParams: { page: queryPage || 1, limit: 10, query: query ?? '' }
     },
-    {
-      enabled
-    }
+    { enabled }
   )
 
   /**
@@ -123,13 +128,19 @@ export const useGetProjectLabelAndValuesData = ({
    * Set space_ref to store
    */
   useEffect(() => {
-    setRepoSpaceRef({
-      space_ref: space_ref ?? ''
-    })
+    setRepoSpaceRef({ space_ref: space_ref ?? '' })
   }, [space_ref, setRepoSpaceRef])
 
-  return {
-    isLoading: isLoadingSpaceLabels || isLoadingValues,
-    space_ref
-  }
+  /**
+   * Set loading state to store
+   */
+  useEffect(() => {
+    if (enabled) {
+      return setIsLoading(isLoadingSpaceLabels)
+    }
+
+    setIsLoading(isLoadingValues)
+  }, [isLoadingSpaceLabels, isLoadingValues, setIsLoading, query, enabled])
+
+  return { space_ref }
 }
diff --git a/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx b/apps/gitness/src/pages-v2/project/labels/project-label-form-container.tsx
@@ -14,25 +14,7 @@ export const ProjectLabelFormContainer = () => {
   const { spaceId, labelId } = useParams<PathParams>()
   const navigate = useNavigate()
 
-  const { isLoading: isDataLoading, space_ref } = useGetProjectLabelAndValuesData({
-    query: labelId,
-    enabled: !!labelId
-  })
-
-  const {
-    mutate,
-    isLoading,
-    error: createError
-  } = useSaveSpaceLabelMutation(
-    {
-      space_ref: space_ref ?? ''
-    },
-    {
-      onSuccess: () => {
-        onFormCancel()
-      }
-    }
-  )
+  const { space_ref } = useGetProjectLabelAndValuesData({ query: labelId, enabled: !!labelId })
 
   const onFormCancel = () => {
     if (window.history.length > 1) {
@@ -42,28 +24,27 @@ export const ProjectLabelFormContainer = () => {
     }
   }
 
+  const {
+    mutate,
+    isLoading: isSaving,
+    error: createError
+  } = useSaveSpaceLabelMutation({ space_ref: space_ref ?? '' }, { onSuccess: onFormCancel })
+
   const onSubmit = (data: CreateLabelFormFields) => {
     const { values, ...rest } = data
 
-    mutate({
-      body: {
-        label: {
-          ...rest
-        },
-        values
-      }
-    })
+    mutate({ body: { label: { ...rest }, values } })
   }
 
   return (
     <LabelFormPage
+      className="mx-auto"
       useLabelsStore={useLabelsStore}
       useTranslationStore={useTranslationStore}
-      isLoading={isLoading}
+      isSaving={isSaving}
       onSubmit={onSubmit}
       onFormCancel={onFormCancel}
       error={createError?.message}
-      isDataLoading={isDataLoading}
       labelId={labelId}
     />
   )

diff --git a/apps/gitness/src/pages-v2/project/labels/project-labels-list-container.tsx b/apps/gitness/src/pages-v2/project/labels/project-labels-list-container.tsx
@@ -24,17 +24,16 @@ export const ProjectLabelsList = () => {
   const { queryPage } = usePaginationQueryStateWithStore({ page, setPage })
   const [query, setQuery] = useQueryState('query')
 
-  const { isLoading } = useGetProjectLabelAndValuesData({ queryPage, query })
+  // To fetch labels/values and set isLoading state at useLabelsStore
+  useGetProjectLabelAndValuesData({ queryPage, query })
 
   const handleOpenDeleteDialog = (identifier: string) => {
     setOpenAlertDeleteDialog(true)
     setIdentifier(identifier)
   }
 
   const { mutate: deleteSpaceLabel, isLoading: isDeletingSpaceLabel } = useDeleteSpaceLabelMutation(
-    {
-      space_ref: space_ref ?? ''
-    },
+    { space_ref: space_ref ?? '' },
     {
       onSuccess: (_data, variables) => {
         setOpenAlertDeleteDialog(false)
@@ -48,22 +47,19 @@ export const ProjectLabelsList = () => {
   }
 
   const handleDeleteLabel = (identifier: string) => {
-    deleteSpaceLabel({
-      key: identifier
-    })
+    deleteSpaceLabel({ key: identifier })
   }
 
   return (
     <>
       <LabelsListPage
+        className="mx-auto max-w-[812px]"
         useTranslationStore={useTranslationStore}
         useLabelsStore={useLabelsStore}
         createdIn={space_ref}
-        handleEditLabel={handleEditLabel}
-        handleDeleteLabel={handleOpenDeleteDialog}
         searchQuery={query}
         setSearchQuery={setQuery}
-        isLoading={isLoading}
+        labelsListViewProps={{ handleDeleteLabel: handleOpenDeleteDialog, handleEditLabel }}
       />
       <DeleteAlertDialog
         open={openAlertDeleteDialog}

diff --git a/apps/gitness/src/pages-v2/project/stores/labels-store.tsx b/apps/gitness/src/pages-v2/project/stores/labels-store.tsx
@@ -6,7 +6,7 @@ export const useLabelsStore = create<ILabelsStore>(set => ({
   labels: [],
   totalPages: 1,
   page: 1,
-
+  isLoading: true,
   values: {},
   space_ref: null,
   repo_ref: null,
@@ -18,6 +18,8 @@ export const useLabelsStore = create<ILabelsStore>(set => ({
   deleteLabel: (key: string) => set(state => ({ labels: state.labels.filter(label => label.key !== key) })),
   setPage: (page: number) => set({ page }),
 
+  setIsLoading: (isLoading: boolean) => set({ isLoading }),
+
   setValues: (values: LabelValuesType) => set({ values }),
   setRepoSpaceRef: ({ repo_ref, space_ref }: SetRepoSpaceRefProps) => set({ repo_ref, space_ref }),
   setGetParentScopeLabels: (getParentScopeLabels: boolean) => set({ getParentScopeLabels }),

diff --git a/apps/gitness/src/pages-v2/pull-request/hooks/use-pr-conversation-labels.ts b/apps/gitness/src/pages-v2/pull-request/hooks/use-pr-conversation-labels.ts
@@ -21,11 +21,11 @@ export const usePrConversationLabels = ({ repoRef, prId, refetchData }: UsePrCon
     setSearchLabel(data)
   }, [])
 
-  const { labels, values: labelsValues } = useGetRepoLabelAndValuesData({
-    query: searchLabel,
-    inherited: true,
-    limit: 100
-  })
+  const {
+    labels,
+    values: labelsValues,
+    refetchLabels
+  } = useGetRepoLabelAndValuesData({ query: searchLabel, inherited: true, limit: 100 })
 
   const { data: { body: prLabels } = {}, refetch: refetchPRLabels } = useListLabelsQuery({
     repo_ref: repoRef,
@@ -35,27 +35,18 @@ export const usePrConversationLabels = ({ repoRef, prId, refetchData }: UsePrCon
 
   const handleOnSuccess = () => {
     refetchPRLabels()
+    refetchLabels()
     refetchData()
   }
 
   const { mutate: addLabel } = useAssignLabelMutation(
-    {
-      repo_ref: repoRef,
-      pullreq_number: prId
-    },
-    {
-      onSuccess: handleOnSuccess
-    }
+    { repo_ref: repoRef, pullreq_number: prId },
+    { onSuccess: handleOnSuccess }
   )
 
   const { mutate: removeLabel } = useUnassignLabelMutation(
-    {
-      repo_ref: repoRef,
-      pullreq_number: prId
-    },
-    {
-      onSuccess: handleOnSuccess
-    }
+    { repo_ref: repoRef, pullreq_number: prId },
+    { onSuccess: handleOnSuccess }
   )
 
   const handleAddLabel = useCallback((body: HandleAddLabelType) => addLabel({ body }), [addLabel])

diff --git a/apps/gitness/src/pages-v2/pull-request/pull-request-compare.tsx b/apps/gitness/src/pages-v2/pull-request/pull-request-compare.tsx
@@ -495,6 +495,8 @@ export const CreatePullRequest = () => {
     setReviewers(newReviewers)
   }
 
+  const handleEditLabels = () => navigate(routes.toRepoLabels({ spaceId, repoId }))
+
   const handleAddLabel = (labelToAdd: HandleAddLabelType) => {
     const findLabel = labelsList.find(label => label.id === labelToAdd.label_id)
     if (!findLabel) return
@@ -601,6 +603,7 @@ export const CreatePullRequest = () => {
         PRLabels={labels}
         addLabel={handleAddLabel}
         removeLabel={handleDeleteLabel}
+        editLabels={handleEditLabels}
         searchLabelQuery={searchLabel}
         setSearchLabelQuery={setSearchLabel}
       />