add pr status header design review

Author: ankormoreankor

apps/gitness/src/pages-v2/pull-request/hooks/usePRChecksDecision.ts

@@ -47,20 +47,45 @@ export function usePRChecksDecision({
     status: string
   }>({ title: '', content: '', color: '', status: '' })
 
+  const checks = [
+    {
+      bypassable: true,
+      required: false,
+      check: {
+        created: 0,
+        ended: 0,
+        id: 1,
+        identifier: 'some',
+        link: '',
+        metadata: {},
+        payload: {
+          data: {},
+          kind: 'pipeline',
+          version: '1.0.0'
+        },
+        reported_by: '',
+        started: 0,
+        status: 'success',
+        summary: 'some text',
+        updated: 0
+      }
+    }
+  ]
+
   const status = useMemo(() => {
     let _status: ExecutionState | undefined
     const _count = { ...DEFAULT_COUNTS }
-    const total = data?.checks?.length
+    const total = checks?.length
     // @ts-expect-error remove "@ts-expect-error" once CodeServiceClient Response for useChecksPullReqQuery is fixed
-    const { message: summaryMessage } = generateStatusSummary(data?.checks)
+    const { message: summaryMessage } = generateStatusSummary(checks)
     setSummaryText(summaryMessage)
     // @ts-expect-error remove "@ts-expect-error" once CodeServiceClient Response for useChecksPullReqQuery is fixed
-    const checkInfoData = determineStatusMessage(data?.checks)
+    const checkInfoData = determineStatusMessage(checks)
     if (checkInfoData) {
       setCheckInfo(checkInfoData)
     }
     if (total) {
-      for (const check of (data as Data).checks) {
+      for (const check of checks) {
         switch (check.check.status) {
           case ExecutionState.ERROR:
           case ExecutionState.FAILURE:
@@ -140,7 +165,7 @@ export function usePRChecksDecision({
     }
 
     return _status
-  }, [data])
+  }, [])
 
   // *******
   // NOTE: TODO: refactor this to make it more clear and readable
@@ -169,7 +194,7 @@ export function usePRChecksDecision({
     overallStatus: status,
     count,
     error,
-    data,
+    data: { ...data, checks },
     color,
     background,
     message,

apps/gitness/src/pages-v2/pull-request/pull-request-conversation.tsx

@@ -190,6 +190,7 @@ export default function PullRequestConversationPage() {
     pullReqCommits: state.pullReqCommits,
     repoMetadata: state.repoMetadata
   }))
+  console.log('🚀 ~ PullRequestConversationPage ~ pullReqChecksDecision:', pullReqChecksDecision)
 
   const { currentUser: currentUserData } = useAppContext()
 

packages/ui/src/components/avatar.tsx

@@ -22,7 +22,7 @@ export const avatarVariants = cva('cn-avatar', {
     }
   },
   defaultVariants: {
-    size: 'sm',
+    size: 'md',
     rounded: false
   }
 })

packages/ui/src/components/branch-tag.tsx

@@ -7,6 +7,7 @@ interface BranchTagProps {
   spaceId?: string
   repoId?: string
   hideBranchIcon?: boolean
+  hideCopyButton?: boolean
   theme?: TagProps['theme']
   variant?: TagProps['variant']
   size?: TagProps['size']
@@ -17,6 +18,7 @@ const BranchTag: React.FC<BranchTagProps> = ({
   spaceId,
   repoId,
   hideBranchIcon,
+  hideCopyButton,
   theme = 'gray',
   variant = 'secondary',
   size = 'md'
@@ -29,6 +31,7 @@ const BranchTag: React.FC<BranchTagProps> = ({
         size={size}
         icon={hideBranchIcon ? undefined : 'git-branch'}
         value={branchName || ''}
+        hideCopyButton={hideCopyButton}
       />
     </Link>
   )

packages/ui/src/components/copy-tag.tsx

@@ -7,9 +7,10 @@ import { Tag, TagProps } from './tag'
 type CopyTagProps = TagProps & {
   actionIcon?: never
   onActionClick?: never
+  hideCopyButton?: boolean
 }
 
-export function CopyTag(props: CopyTagProps) {
+export function CopyTag({ hideCopyButton, ...props }: CopyTagProps) {
   const { value } = props
 
   const [copied, setCopied] = useState(false)
@@ -32,5 +33,7 @@ export function CopyTag(props: CopyTagProps) {
     })
   }, [value])
 
-  return <Tag {...props} actionIcon={copied ? 'check' : 'copy'} onActionClick={handleCopy} />
+  return (
+    <Tag {...props} actionIcon={!hideCopyButton ? (copied ? 'check' : 'copy') : undefined} onActionClick={handleCopy} />
+  )
 }

packages/ui/src/components/more-actions-tooltip.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 
 import { useRouterContext } from '@/context'
-import { Button, ButtonVariants } from '@components/button'
+import { Button, ButtonProps, ButtonVariants } from '@components/button'
 import { DropdownMenu } from '@components/dropdown-menu'
 import { IconV2, type IconPropsV2 } from '@components/icon-v2'
 import { cn } from '@utils/cn'
@@ -17,6 +17,7 @@ export interface ActionData {
 }
 
 export interface MoreActionsTooltipProps {
+  theme?: ButtonProps['theme']
   actions: ActionData[]
   isInTable?: boolean
   iconName?: IconPropsV2['name']
@@ -30,6 +31,7 @@ export interface MoreActionsTooltipProps {
  * A component for displaying a button that, when clicked, shows a tooltip with a list of actions.
  */
 export const MoreActionsTooltip: FC<MoreActionsTooltipProps> = ({
+  theme,
   actions,
   iconName = 'more-vert',
   sideOffset = 2,
@@ -44,6 +46,7 @@ export const MoreActionsTooltip: FC<MoreActionsTooltipProps> = ({
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <Button
+          theme={theme}
           className={cn('text-icons-1 hover:text-icons-2 data-[state=open]:text-icons-2')}
           variant={buttonVariant}
           iconOnly

packages/ui/src/views/repo/pull-request/components/pull-request-side-bar.tsx

@@ -74,7 +74,7 @@ export const PullRequestSideBar: FC<PullRequestSideBarProps> = ({
 }) => {
   return (
     <Layout.Vertical gap="md">
-      <Layout.Vertical gap="md">
+      <Layout.Vertical gap="2xs">
         <ReviewersHeader
           currentUserId={currentUserId}
           usersList={usersList}
@@ -95,7 +95,7 @@ export const PullRequestSideBar: FC<PullRequestSideBarProps> = ({
         />
       </Layout.Vertical>
       {!isCreatingPr ? (
-        <Layout.Vertical gap="md">
+        <Layout.Vertical gap="2xs">
           <LabelsHeader
             labelsList={labelsList}
             labelsValues={labelsValues}

packages/ui/src/views/repo/pull-request/components/reviewers/pull-request-reviewers-header.tsx

@@ -1,6 +1,14 @@
 import { useMemo, useRef } from 'react'
 
-import { Button, DropdownMenu, IconV2, SearchInput, Text, useSearchableDropdownKeyboardNavigation } from '@/components'
+import {
+  Button,
+  DropdownMenu,
+  IconV2,
+  Layout,
+  SearchInput,
+  Text,
+  useSearchableDropdownKeyboardNavigation
+} from '@/components'
 import { useTranslation } from '@/context'
 import { PrincipalType } from '@/types'
 import { PRReviewer } from '@/views'
@@ -46,7 +54,7 @@ const ReviewersHeader = ({
   const handleCloseValuesView = useRef(debounce(() => handleSearchQuery(''), 300)).current
 
   return (
-    <div className="mb-0.5 flex items-center justify-between">
+    <Layout.Flex align="center" justify="between">
       <Text as="h5" variant="body-strong" color="foreground-1">
         {t('views:pullRequests.reviewers', 'Reviewers')}
       </Text>
@@ -94,7 +102,7 @@ const ReviewersHeader = ({
           })}
         </DropdownMenu.Content>
       </DropdownMenu.Root>
-    </div>
+    </Layout.Flex>
   )
 }
 

packages/ui/src/views/repo/pull-request/components/reviewers/pull-request-reviewers-list.tsx

@@ -1,4 +1,5 @@
 import { Alert } from '@components/alert'
+import { Layout } from '@components/layout'
 import { Text } from '@components/text'
 
 import { EnumPullReqReviewDecision, PullReqReviewDecision } from '../../pull-request.types'
@@ -28,13 +29,14 @@ const ReviewersList: React.FC<ReviewersListProps> = ({
   addReviewerError,
   removeReviewerError
 }) => (
-  <div className="flex flex-col gap-3">
-    {addReviewerError || removeReviewerError ? (
-      <Alert.Root theme="danger">
-        <Alert.Title>Failed to add reviewer</Alert.Title>
-        <Alert.Description>{addReviewerError ?? removeReviewerError}</Alert.Description>
-      </Alert.Root>
-    ) : null}
+  <Layout.Vertical gapY="md">
+    {addReviewerError ||
+      (removeReviewerError && (
+        <Alert.Root theme="danger">
+          <Alert.Title>Failed to add reviewer</Alert.Title>
+          <Alert.Description>{addReviewerError ?? removeReviewerError}</Alert.Description>
+        </Alert.Root>
+      ))}
 
     {reviewers.length ? (
       reviewers.map(({ reviewer, review_decision, sha }) => (
@@ -52,7 +54,7 @@ const ReviewersList: React.FC<ReviewersListProps> = ({
         No reviewers
       </Text>
     )}
-  </div>
+  </Layout.Vertical>
 )
 
 export { ReviewersList }