fixes

pixel-point · Feb 14, 2025 · a5e0700 · a5e0700
1 parent 1528fbc
commit a5e0700
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 166 deletions.
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-conversation.tsx b/apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx
@@ -29,7 +29,7 @@ import {
   useReviewerListPullReqQuery,
   useUpdatePullReqMutation
 } from '@harnessio/code-service-client'
-import { Alert, SkeletonList, Spacer } from '@harnessio/ui/components'
+import { Alert, SkeletonList } from '@harnessio/ui/components'
 import {
   PullRequestCommentBox,
   PullRequestFilters,
@@ -584,16 +584,16 @@ export default function PullRequestConversationPage() {
                 routes.toExecution({ spaceId, repoId, pipelineId, executionId })
               }
             />
-            <Spacer size={12} />
+
             <PullRequestFilters
+              className="mb-6 mt-12"
               activityFilters={activityFilters}
               dateFilters={dateFilters}
               activityFilter={activityFilter}
               dateOrderSort={dateOrderSort}
               setActivityFilter={setActivityFilter}
               setDateOrderSort={setDateOrderSort}
             />
-            <Spacer size={6} />
 
             <PullRequestOverview
               toCommitDetails={({ sha }: { sha: string }) =>
@@ -606,29 +606,7 @@ export default function PullRequestConversationPage() {
               repoId={repoRef}
               refetchActivities={refetchActivities}
               commentStatusPullReq={commentStatusPullReq}
-              data={activities?.map((item: TypesPullReqActivity) => {
-                return {
-                  author: item?.author,
-                  created: item?.created,
-                  deleted: item?.deleted,
-                  edited: item?.edited,
-                  id: item?.id,
-                  kind: item?.kind,
-                  mentions: item?.mentions,
-                  metadata: item?.metadata,
-                  order: item?.order,
-                  parent_id: item?.parent_id,
-                  payload: item as TypesPullReqActivity,
-                  pullreq_id: item?.pullreq_id,
-                  repo_id: item?.repo_id,
-                  resolved: item?.resolved,
-                  resolver: item?.resolver,
-                  sub_order: item?.sub_order,
-                  text: item?.text,
-                  type: item?.type,
-                  updated: item?.updated
-                }
-              })}
+              data={activities?.map((item: TypesPullReqActivity) => ({ ...item, payload: item }))}
               pullReqMetadata={pullReqMetadata ? pullReqMetadata : undefined}
               activityFilter={activityFilter}
               dateOrderSort={dateOrderSort}
@@ -643,17 +621,18 @@ export default function PullRequestConversationPage() {
               filenameToLanguage={filenameToLanguage}
               handleUpload={handleUpload}
             />
-            <Spacer size={9} />
+
             <PullRequestCommentBox
+              className="my-9"
               comment={comment}
               setComment={setComment}
               currentUser={currentUserData?.display_name}
               onSaveComment={handleSaveComment}
               handleUpload={handleUpload}
             />
-            <Spacer size={9} />
           </SandboxLayout.Content>
         </SandboxLayout.Column>
+
         <SandboxLayout.Column>
           <SandboxLayout.Content className="px-0 pt-0">
             <PullRequestSideBar

diff --git a/apps/gitness/src/pages-v2/repo/labels/hooks/use-get-repo-label-and-values-data.ts b/apps/gitness/src/pages-v2/repo/labels/hooks/use-get-repo-label-and-values-data.ts
@@ -33,19 +33,19 @@ export const useGetRepoLabelAndValuesData = ({
   const [isLoadingValues, setIsLoadingValues] = useState(false)
   const [values, setValues] = useState<LabelValuesType>({})
 
-  const { data: { body: labels } = {}, isLoading: isLoadingRepoLabels } = useListRepoLabelsQuery(
+  const {
+    data: { body: labels } = {},
+    isLoading: isLoadingRepoLabels,
+    refetch: refetchLabels
+  } = useListRepoLabelsQuery(
     {
       repo_ref: repo_ref ?? '',
       queryParams: { page: queryPage || 1, limit, query: query ?? '', inherited }
     },
-    {
-      enabled
-    }
+    { enabled }
   )
 
-  const labelsData = useMemo(() => {
-    return (labels || []) as ILabelType[]
-  }, [labels])
+  const labelsData = useMemo(() => (labels || []) as ILabelType[], [labels])
 
   /**
    * Get values for each label
@@ -118,6 +118,7 @@ export const useGetRepoLabelAndValuesData = ({
     space_ref,
     repo_ref,
     labels: labelsData,
-    values
+    values,
+    refetchLabels
   }
 }
diff --git a/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx b/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx
@@ -68,6 +68,7 @@ export const LabelFormColorAndNameGroup: FC<LabelFormColorAndNameGroupProps> = (
             : t('views:labelData.form.colorLabelPlaceholder', 'Enter label name')
         }
         size="md"
+        maxLength={50}
         {...inputProps}
       />
 

diff --git a/packages/ui/src/views/repo/pull-request/components/labels/label-value-selector.tsx b/packages/ui/src/views/repo/pull-request/components/labels/label-value-selector.tsx
@@ -10,14 +10,14 @@ export interface LabelValueSelectorProps {
   useTranslationStore: () => TranslationStore
   label: LabelsWithValueType
   handleAddOrRemoveLabel: (data: HandleAddLabelType, isSelected: boolean) => void
-  onClose: () => void
+  onSearchClean: () => void
 }
 
 export const LabelValueSelector: FC<LabelValueSelectorProps> = ({
   useTranslationStore,
   label,
   handleAddOrRemoveLabel,
-  onClose
+  onSearchClean
 }) => {
   const { t } = useTranslationStore()
   const [searchState, setSearchState] = useState('')
@@ -97,7 +97,7 @@ export const LabelValueSelector: FC<LabelValueSelectorProps> = ({
           className="absolute right-2 top-1.5 z-20 text-icons-1 hover:text-icons-2"
           size="icon"
           variant="custom"
-          onClick={onClose}
+          onClick={onSearchClean}
         >
           <Icon name="cross" size={12} />
         </Button>
@@ -119,7 +119,7 @@ export const LabelValueSelector: FC<LabelValueSelectorProps> = ({
 
         {isAllowAddNewValue && !!label?.isCustom && (
           <>
-            <span className="px-1 pb-1.5 pt-2 leading-[1.125rem] text-foreground-2">
+            <span className="px-2 pb-1.5 pt-1 leading-[1.125rem] text-foreground-2">
               {t('views:pullRequests.addValue', 'Add new value')}
             </span>
 
@@ -134,12 +134,6 @@ export const LabelValueSelector: FC<LabelValueSelectorProps> = ({
             {t('views:pullRequests.labelNotFound', 'Label not found')}
           </span>
         )}
-
-        {!values.length && !!label?.isCustom && !isAllowAddNewValue && (
-          <span className="block px-5 py-4 text-center leading-tight text-foreground-2">
-            {t('views:pullRequests.addValue', 'Add new value')}
-          </span>
-        )}
       </ScrollArea>
     </>
   )

diff --git a/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-header.tsx b/packages/ui/src/views/repo/pull-request/components/labels/pull-request-labels-header.tsx
@@ -14,6 +14,14 @@ import {
 
 import { LabelValueSelector } from './label-value-selector'
 
+const getSelectedValueId = (label?: LabelAssignmentType) => {
+  if (!!label && 'assigned_value' in label) {
+    return label.assigned_value?.id ?? undefined
+  }
+
+  return undefined
+}
+
 export interface LabelsWithValueType extends ILabelType {
   values?: LabelValueType[]
   isCustom?: boolean
@@ -61,8 +69,7 @@ export const LabelsHeader = ({
       let res: LabelsWithValueType = {
         ...label,
         isSelected: !!selectedLabel,
-        selectedValueId:
-          !!selectedLabel && selectedLabel?.assigned_value ? selectedLabel?.assigned_value?.id || undefined : undefined
+        selectedValueId: getSelectedValueId(selectedLabel)
       }
 
       if (isCustom) {
@@ -98,15 +105,13 @@ export const LabelsHeader = ({
     handleCloseValuesView()
   }
 
-  const handleCloseValuesView = () => {
-    setLabelWithValuesToShow(null)
-  }
+  const handleCloseValuesView = () => setLabelWithValuesToShow(null)
 
   return (
     <article className="flex items-center justify-between">
       <h5 className="text-14 font-medium text-foreground-1">{t('views:pullRequests.labels')}</h5>
 
-      <DropdownMenu.Root>
+      <DropdownMenu.Root onOpenChange={isOpen => !isOpen && handleCloseValuesView()}>
         <DropdownMenu.Trigger asChild>
           <Button
             className="text-icons-1 hover:text-icons-2 data-[state=open]:text-icons-2"
@@ -129,7 +134,7 @@ export const LabelsHeader = ({
               useTranslationStore={useTranslationStore}
               label={labelWithValuesToShow}
               handleAddOrRemoveLabel={handleAddOrRemoveLabel}
-              onClose={handleCloseValuesView}
+              onSearchClean={handleCloseValuesView}
             />
           )}
 

diff --git a/.../src/views/repo/pull-request/details/components/conversation/pull-request-comment-box.tsx b/.../src/views/repo/pull-request/details/components/conversation/pull-request-comment-box.tsx
@@ -28,6 +28,7 @@ interface ToolbarItem {
 }
 
 interface PullRequestCommentBoxProps {
+  className?: string
   onSaveComment: (comment: string) => void
   comment: string
   setComment: (comment: string) => void
@@ -49,7 +50,8 @@ const TABS_KEYS = {
 }
 
 //  TODO: will have to eventually implement a commenting and reply system similiar to gitness
-const PullRequestCommentBox = ({
+export const PullRequestCommentBox = ({
+  className,
   onSaveComment,
   currentUser,
   inReplyMode = false,
@@ -154,7 +156,7 @@ const PullRequestCommentBox = ({
   }
 
   return (
-    <div className="flex items-start gap-x-3 font-sans" data-comment-editor-shown="true">
+    <div className={cn('flex items-start gap-x-3 font-sans', className)} data-comment-editor-shown="true">
       {!inReplyMode && !isEditMode && avatar}
       <div
         className={cn('pb-4 pt-1.5 px-4 flex-1 bg-background-2 border-border-1 overflow-auto', {
@@ -257,5 +259,3 @@ const PullRequestCommentBox = ({
     </div>
   )
 }
-
-export { PullRequestCommentBox }
diff --git a/...s/ui/src/views/repo/pull-request/details/components/conversation/pull-request-filters.tsx b/...s/ui/src/views/repo/pull-request/details/components/conversation/pull-request-filters.tsx
@@ -1,4 +1,5 @@
 import { DropdownMenu, Icon } from '@/components'
+import { cn } from '@utils/cn'
 
 interface DropdownMenuComponentProps<T> {
   items: T[]
@@ -42,6 +43,7 @@ export interface PullRequestFilterProps<T extends FilterOption> {
   dateOrderSort: T
   setActivityFilter: (filter: T) => void
   setDateOrderSort: (sort: T) => void
+  className?: string
 }
 
 const PullRequestFilters = <T extends FilterOption>({
@@ -50,11 +52,13 @@ const PullRequestFilters = <T extends FilterOption>({
   activityFilter,
   dateOrderSort,
   setActivityFilter,
-  setDateOrderSort
+  setDateOrderSort,
+  className
 }: PullRequestFilterProps<T>) => {
   return (
-    <div className="grid grid-cols-[1fr_auto] items-center border-b border-borders-1 pb-2">
+    <div className={cn('grid grid-cols-[1fr_auto] items-center border-b border-borders-1 pb-2', className)}>
       <h3 className="text-18 font-medium leading-snug text-foreground-1">Overview</h3>
+
       <div className="flex items-center gap-x-5">
         <DropdownMenuComponent items={activityFilters} selectedItem={activityFilter} onItemSelect={setActivityFilter} />
         <DropdownMenuComponent items={dateFilters} selectedItem={dateOrderSort} onItemSelect={setDateOrderSort} />