pixel-point · 3em · Mar 4, 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-[1040px]"
         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-[772px] 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/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx b/apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx
@@ -55,6 +55,7 @@ const PullRequestCompareWrapper: FC<Partial<PullRequestComparePageProps>> = prop
       setSearchReviewersQuery={noop}
       jumpToDiff=""
       setJumpToDiff={noop}
+      editLabelsProps={{ to: '' }}
       branchSelectorRenderer={
         <BranchSelectorV2
           repoId="canary"

diff --git a/.../design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx b/.../design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx
@@ -175,7 +175,8 @@ const PullRequestConversation: FC<PullRequestConversationProps> = ({ state }) =>
           searchLabelQuery: searchLabel,
           setSearchLabelQuery: noop,
           addLabel: noop,
-          removeLabel: noop
+          removeLabel: noop,
+          editLabelsProps: { to: '' }
         }}
       />
     </>

diff --git a/.../use-get-project-label-and-values-data.ts → ...l-store-with-project-label-values-data.ts b/.../use-get-project-label-and-values-data.ts → ...l-store-with-project-label-values-data.ts
@@ -13,30 +13,35 @@ const isDataResponse = (value: LabelValuesResponseResultType): value is { key: s
   return 'data' in value
 }
 
-export interface UseGetProjectLabelAndValuesDataProps {
+export interface UseFillLabelStoreWithProjectLabelValuesDataProps {
   queryPage?: number
   query?: string
   enabled?: boolean
 }
 
-export const useGetProjectLabelAndValuesData = ({
+export const useFillLabelStoreWithProjectLabelValuesData = ({
   queryPage,
   query,
   enabled = true
-}: UseGetProjectLabelAndValuesDataProps) => {
+}: UseFillLabelStoreWithProjectLabelValuesDataProps) => {
   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,15 @@ 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(() => {
+    setIsLoading(enabled ? isLoadingSpaceLabels : 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
@@ -7,32 +7,14 @@ import { useRoutes } from '../../../framework/context/NavigationContext'
 import { useTranslationStore } from '../../../i18n/stores/i18n-store'
 import { PathParams } from '../../../RouteDefinitions'
 import { useLabelsStore } from '../stores/labels-store'
-import { useGetProjectLabelAndValuesData } from './hooks/use-get-project-label-and-values-data'
+import { useFillLabelStoreWithProjectLabelValuesData } from './hooks/use-fill-label-store-with-project-label-values-data'
 
 export const ProjectLabelFormContainer = () => {
   const routes = useRoutes()
   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 } = useFillLabelStoreWithProjectLabelValuesData({ 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
@@ -10,7 +10,7 @@ import { useQueryState } from '../../../framework/hooks/useQueryState'
 import usePaginationQueryStateWithStore from '../../../hooks/use-pagination-query-state-with-store'
 import { useTranslationStore } from '../../../i18n/stores/i18n-store'
 import { useLabelsStore } from '../stores/labels-store'
-import { useGetProjectLabelAndValuesData } from './hooks/use-get-project-label-and-values-data'
+import { useFillLabelStoreWithProjectLabelValuesData } from './hooks/use-fill-label-store-with-project-label-values-data.ts'
 
 export const ProjectLabelsList = () => {
   const navigate = useNavigate()
@@ -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
+  useFillLabelStoreWithProjectLabelValuesData({ 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-[1040px]"
         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/project-general-settings-container.tsx b/apps/gitness/src/pages-v2/project/project-general-settings-container.tsx
@@ -48,7 +48,7 @@ export const ProjectGeneralSettingsPageContainer = () => {
   }
 
   // delete API call here
-  const deleteSpaceMutation = useDeleteSpaceMutation(
+  const { mutate: deleteSpaceMutation, isLoading } = useDeleteSpaceMutation(
     { space_ref: space?.path },
     {
       onSuccess: ({ body: data }) => {
@@ -65,7 +65,7 @@ export const ProjectGeneralSettingsPageContainer = () => {
     }
   )
 
-  const handleDeleteProject = () => deleteSpaceMutation.mutate({}, {})
+  const handleDeleteProject = () => deleteSpaceMutation({})
 
   return (
     <>
@@ -85,7 +85,7 @@ export const ProjectGeneralSettingsPageContainer = () => {
         deleteFn={handleDeleteProject}
         type="Project"
         error={deleteError}
-        isLoading={deleteSpaceMutation.isLoading}
+        isLoading={isLoading}
         withForm
         useTranslationStore={useTranslationStore}
       />

diff --git a/.../pages-v2/project/stores/labels-store.tsx → ...c/pages-v2/project/stores/labels-store.ts b/.../pages-v2/project/stores/labels-store.tsx → ...c/pages-v2/project/stores/labels-store.ts
@@ -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
@@ -25,11 +25,7 @@ export const usePrConversationLabels = ({ repoRef, prId, refetchData }: UsePrCon
     labels,
     values: labelsValues,
     refetchLabels
-  } = useGetRepoLabelAndValuesData({
-    query: searchLabel,
-    inherited: true,
-    limit: 100
-  })
+  } = useGetRepoLabelAndValuesData({ query: searchLabel, inherited: true, limit: 100 })
 
   const { data: { body: prLabels } = {}, refetch: refetchPRLabels } = useListLabelsQuery({
     repo_ref: repoRef,
@@ -44,23 +40,13 @@ export const usePrConversationLabels = ({ repoRef, prId, refetchData }: UsePrCon
   }
 
   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
@@ -530,6 +530,7 @@ export const CreatePullRequest = () => {
         PRLabels={labels}
         addLabel={handleAddLabel}
         removeLabel={handleDeleteLabel}
+        editLabelsProps={{ to: routes.toRepoLabels({ spaceId, repoId }) }}
         searchLabelQuery={searchLabel}
         setSearchLabelQuery={setSearchLabel}
         branchSelectorRenderer={