DRAFT PR : Testing Big PR - 360 files changed

apps/design-system/src/App.tsx

@@ -4,8 +4,8 @@ import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
 import ViewPreview from '@/pages/view-preview/view-preview'
 import { useThemeStore } from '@utils/theme-utils'
 
-import { DialogProvider, TooltipProvider } from '@harnessio/ui/components'
-import { ThemeProvider, TranslationProvider } from '@harnessio/ui/context'
+import { TooltipProvider } from '@harnessio/ui/components'
+import { DialogProvider, ThemeProvider, TranslationProvider } from '@harnessio/ui/context'
 
 import AppRouterProvider from './AppRouterProvider'
 

apps/design-system/src/AppRouterProvider.tsx

@@ -10,24 +10,23 @@ import {
   useSearchParams
 } from 'react-router-dom'
 
-import { Button, RbacButtonProps, SplitButton, toButtonProps, Tooltip } from '@harnessio/ui/components'
+import {
+  Button,
+  MoreActionsTooltip,
+  RbacButtonProps,
+  rbacTooltip,
+  SplitButton,
+  Tooltip
+} from '@harnessio/ui/components'
 import { ComponentProvider, RouterContextProvider } from '@harnessio/ui/context'
 
 const RbacButton = ({ rbac: _, tooltip, ...rest }: RbacButtonProps) => {
   const hasPermission = true
 
-  const button = (
-    <Button
-      {...toButtonProps({
-        ...rest,
-        ignoreIconOnlyTooltip: true
-      })}
-      disabled={!hasPermission}
-    />
-  )
+  const button = <Button {...rest} ignoreIconOnlyTooltip disabled={!hasPermission} />
 
   return !hasPermission ? (
-    <Tooltip title={tooltip?.title ?? 'You are missing the permission for this action.'} content={tooltip?.content}>
+    <Tooltip title={tooltip?.title ?? rbacTooltip} content={tooltip?.content}>
       {button}
     </Tooltip>
   ) : (
@@ -50,7 +49,9 @@ const AppRouterProvider: FC = () => {
       useMatches={useMatches}
       useParams={useParams}
     >
-      <ComponentProvider components={{ RbacButton, RbacSplitButton: SplitButton }}>
+      <ComponentProvider
+        components={{ RbacButton, RbacSplitButton: SplitButton, RbacMoreActionsTooltip: MoreActionsTooltip }}
+      >
         <Outlet />
       </ComponentProvider>
     </RouterContextProvider>

apps/design-system/src/pages/view-preview/root-view-wrapper-store.tsx

@@ -215,7 +215,7 @@ export const useRootViewWrapperStore = () => {
         },
         {
           id: 23,
-          iconName: 'page',
+          iconName: 'empty-page',
           title: 'File Store',
           to: '/delegates'
         },
@@ -332,7 +332,7 @@ export const useRootViewWrapperStore = () => {
       items: [
         {
           id: 39,
-          iconName: 'externaltickets',
+          iconName: 'external-tickets',
           title: 'External Tickets',
           to: '/external-tickets'
         }

apps/design-system/src/subjects/views/commit-details/commit-details-store.ts

@@ -3176,12 +3176,12 @@ export const commitDetailsStore: ICommitDetailsStore = {
               newNumber: 152
             },
             {
-              content: '-        <span className="size-2 bg-icons-2 rounded-full block" />',
+              content: '-        <span className="size-2 rounded-full block" />',
               type: 'delete',
               oldNumber: 153
             },
             {
-              content: '+        <span className="block size-2 rounded-full bg-icons-2" />',
+              content: '+        <span className="block size-2 rounded-full" />',
               type: 'insert',
               newNumber: 153
             },
@@ -3225,7 +3225,7 @@ export const commitDetailsStore: ICommitDetailsStore = {
       contentId: 'content-packages/ui/src/components/dropdown-menu.tsx::::packages/ui/src/components/dropdown-menu.tsx',
       fileId: 'packages/ui/src/components/dropdown-menu.tsx::::packages/ui/src/components/dropdown-menu.tsx',
       filePath: 'packages/ui/src/components/dropdown-menu.tsx',
-      raw: 'diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx\nindex b5476fe12dfc08aeb6c1478d4ca77c46b4263490..651d2b8a9c79fc3dbc8bae8dd60f039e14cf83bb 100644\n--- a/packages/ui/src/components/dropdown-menu.tsx\n+++ b/packages/ui/src/components/dropdown-menu.tsx\n@@ -150,7 +150,7 @@ const DropdownMenuRadioItem = React.forwardRef<\n   >\n     <span className="absolute left-2 flex size-4 items-center justify-center rounded-full border border-icons-1">\n       <DropdownMenuPrimitive.ItemIndicator>\n-        <span className="size-2 bg-icons-2 rounded-full block" />\n+        <span className="block size-2 rounded-full bg-icons-2" />\n       </DropdownMenuPrimitive.ItemIndicator>\n     </span>\n     {children}\n'
+      raw: 'diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx\nindex b5476fe12dfc08aeb6c1478d4ca77c46b4263490..651d2b8a9c79fc3dbc8bae8dd60f039e14cf83bb 100644\n--- a/packages/ui/src/components/dropdown-menu.tsx\n+++ b/packages/ui/src/components/dropdown-menu.tsx\n@@ -150,7 +150,7 @@ const DropdownMenuRadioItem = React.forwardRef<\n   >\n     <span className="absolute left-2 flex size-4 items-center justify-center rounded-full border border-icons-1">\n       <DropdownMenuPrimitive.ItemIndicator>\n-        <span className="size-2 rounded-full block" />\n+        <span className="block size-2 rounded-full" />\n       </DropdownMenuPrimitive.ItemIndicator>\n     </span>\n     {children}\n'
     },
     {
       blocks: [
@@ -4268,7 +4268,7 @@ export const commitDetailsStore: ICommitDetailsStore = {
               newNumber: 247
             },
             {
-              content: '                   <Icon name="success" className="text-icons-success" />',
+              content: '                   <Icon name="success" className="text-cn-success" />',
               type: 'context',
               oldNumber: 248,
               newNumber: 248
@@ -4380,7 +4380,7 @@ export const commitDetailsStore: ICommitDetailsStore = {
               newNumber: 272
             },
             {
-              content: '                   <Icon name="success" className="text-icons-success" />',
+              content: '                   <Icon name="success" className="text-cn-success" />',
               type: 'context',
               oldNumber: 273,
               newNumber: 273
@@ -4578,7 +4578,7 @@ export const commitDetailsStore: ICommitDetailsStore = {
         'packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx::::packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx',
       filePath:
         'packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx',
-      raw: 'diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx\nindex e06b76dd1b69885e022ce9188ee8d813dda07075..37284116f49710e2be9669ca7e65a6a4c7c54d0a 100644\n--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx\n+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx\n@@ -67,7 +67,7 @@ interface HeaderItemProps {\n   header: string\n }\n const HeaderItem: React.FC<HeaderItemProps> = ({ header }: HeaderItemProps) => {\n-  return <span className="text-cn-3 text-1">{header}</span>\n+  return <span className="text-1 text-cn-3">{header}</span>\n }\n \n const AvatarItem: React.FC<AvatarItemProps> = ({ evaluations }: AvatarItemProps) => {\n@@ -244,15 +244,15 @@ const PullRequestChangesSection = ({\n             ((minApproval ?? 0) > 0 && minReqLatestApproval === undefined)) && (\n             <div className="ml-6 flex items-center justify-between">\n               {approvedEvaluations && minApproval && minApproval <= approvedEvaluations?.length ? (\n-                <div className="flex gap-x-2 items-center">\n+                <div className="flex items-center gap-x-2">\n                   <Icon name="success" className="text-icons-success" />\n                   <span className="text-2 text-cn-foreground-1">\n                     {`Changes were approved by ${approvedEvaluations?.length} ${easyPluralize(approvedEvaluations?.length, \'reviewer\', \'reviewers\')}`}\n                   </span>\n                 </div>\n               ) : (\n-                <div className="flex gap-x-2 items-center">\n-                  <Icon name="circle" className="text-icons-7 fill-transparent" />\n+                <div className="flex items-center gap-x-2">\n+                  <Icon name="circle" className="fill-transparent text-icons-7" />\n                   <span className="text-2 text-cn-foreground-1">\n                     {`${(approvedEvaluations && approvedEvaluations.length) || \'\'}/${minApproval} approvals completed`}\n                   </span>\n@@ -269,13 +269,13 @@ const PullRequestChangesSection = ({\n               {latestApprovalArr !== undefined &&\n               minReqLatestApproval !== undefined &&\n               minReqLatestApproval <= latestApprovalArr?.length ? (\n-                <div className="flex gap-x-2 items-center">\n+                <div className="flex items-center gap-x-2">\n                   <Icon name="success" className="text-icons-success" />\n                   <span className="text-2 text-cn-foreground-1">{`Latest changes were approved by ${latestApprovalArr?.length || minReqLatestApproval || \'\'} ${easyPluralize(latestApprovalArr?.length || minReqLatestApproval, \'reviewer\', \'reviewers\')}`}</span>\n                 </div>\n               ) : (\n-                <div className="flex gap-x-2 items-center">\n-                  <Icon name="circle" className="text-icons-7 fill-transparent" />\n+                <div className="flex items-center gap-x-2">\n+                  <Icon name="circle" className="fill-transparent text-icons-7" />\n                   <span className="text-2 text-cn-foreground-1">\n                     {`${latestApprovalArr?.length || minReqLatestApproval || \'\'} ${easyPluralize(latestApprovalArr?.length || minReqLatestApproval || 0, \'approval\', \'approvals\')} pending on latest changes`}\n                   </span>\n@@ -289,7 +289,7 @@ const PullRequestChangesSection = ({\n \n           {!isEmpty(changeReqEvaluations) && (\n             <div className="ml-6 flex items-center justify-between">\n-              <div className="flex gap-x-2 items-center">\n+              <div className="flex items-center gap-x-2">\n                 <Icon\n                   name="triangle-warning"\n                   className={cn({\n@@ -310,7 +310,7 @@ const PullRequestChangesSection = ({\n           {!isEmpty(codeOwners) && !isEmpty(codeOwners.evaluation_entries) && (\n             <div className="ml-6 flex items-center justify-between">\n               {codeOwnerChangeReqEntries && codeOwnerChangeReqEntries?.length > 0 ? (\n-                <div className="flex gap-x-2 items-center">\n+                <div className="flex items-center gap-x-2">\n                   <Icon\n                     name="triangle-warning"\n                     className={cn({\n'
+      raw: 'diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx\nindex e06b76dd1b69885e022ce9188ee8d813dda07075..37284116f49710e2be9669ca7e65a6a4c7c54d0a 100644\n--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx\n+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx\n@@ -67,7 +67,7 @@ interface HeaderItemProps {\n   header: string\n }\n const HeaderItem: React.FC<HeaderItemProps> = ({ header }: HeaderItemProps) => {\n-  return <span className="text-cn-3 text-1">{header}</span>\n+  return <span className="text-1 text-cn-3">{header}</span>\n }\n \n const AvatarItem: React.FC<AvatarItemProps> = ({ evaluations }: AvatarItemProps) => {\n@@ -244,15 +244,15 @@ const PullRequestChangesSection = ({\n             ((minApproval ?? 0) > 0 && minReqLatestApproval === undefined)) && (\n             <div className="ml-6 flex items-center justify-between">\n               {approvedEvaluations && minApproval && minApproval <= approvedEvaluations?.length ? (\n-                <div className="flex gap-x-2 items-center">\n+                <div className="flex items-center gap-x-2">\n                   <Icon name="success" className="text-cn-success" />\n                   <span className="text-2 text-cn-foreground-1">\n                     {`Changes were approved by ${approvedEvaluations?.length} ${easyPluralize(approvedEvaluations?.length, \'reviewer\', \'reviewers\')}`}\n                   </span>\n                 </div>\n               ) : (\n-                <div className="flex gap-x-2 items-center">\n-                  <Icon name="circle" className="text-icons-7 fill-transparent" />\n+                <div className="flex items-center gap-x-2">\n+                  <Icon name="circle" className="fill-transparent text-icons-7" />\n                   <span className="text-2 text-cn-foreground-1">\n                     {`${(approvedEvaluations && approvedEvaluations.length) || \'\'}/${minApproval} approvals completed`}\n                   </span>\n@@ -269,13 +269,13 @@ const PullRequestChangesSection = ({\n               {latestApprovalArr !== undefined &&\n               minReqLatestApproval !== undefined &&\n               minReqLatestApproval <= latestApprovalArr?.length ? (\n-                <div className="flex gap-x-2 items-center">\n+                <div className="flex items-center gap-x-2">\n                   <Icon name="success" className="text-cn-success" />\n                   <span className="text-2 text-cn-foreground-1">{`Latest changes were approved by ${latestApprovalArr?.length || minReqLatestApproval || \'\'} ${easyPluralize(latestApprovalArr?.length || minReqLatestApproval, \'reviewer\', \'reviewers\')}`}</span>\n                 </div>\n               ) : (\n-                <div className="flex gap-x-2 items-center">\n-                  <Icon name="circle" className="text-icons-7 fill-transparent" />\n+                <div className="flex items-center gap-x-2">\n+                  <Icon name="circle" className="fill-transparent text-icons-7" />\n                   <span className="text-2 text-cn-foreground-1">\n                     {`${latestApprovalArr?.length || minReqLatestApproval || \'\'} ${easyPluralize(latestApprovalArr?.length || minReqLatestApproval || 0, \'approval\', \'approvals\')} pending on latest changes`}\n                   </span>\n@@ -289,7 +289,7 @@ const PullRequestChangesSection = ({\n \n           {!isEmpty(changeReqEvaluations) && (\n             <div className="ml-6 flex items-center justify-between">\n-              <div className="flex gap-x-2 items-center">\n+              <div className="flex items-center gap-x-2">\n                 <Icon\n                   name="triangle-warning"\n                   className={cn({\n@@ -310,7 +310,7 @@ const PullRequestChangesSection = ({\n           {!isEmpty(codeOwners) && !isEmpty(codeOwners.evaluation_entries) && (\n             <div className="ml-6 flex items-center justify-between">\n               {codeOwnerChangeReqEntries && codeOwnerChangeReqEntries?.length > 0 ? (\n-                <div className="flex gap-x-2 items-center">\n+                <div className="flex items-center gap-x-2">\n                   <Icon\n                     name="triangle-warning"\n                     className={cn({\n'
     },
     {
       blocks: [

apps/design-system/src/subjects/views/data-table-demo.tsx

@@ -165,7 +165,7 @@ export const DataTableDemo: React.FC = () => {
           size="compact"
           currentSorting={tableSorting}
           onSortingChange={handleSortingChange}
-          pagination={{
+          paginationProps={{
             currentPage: 1,
             pageSize: 3,
             totalItems: users.length,

apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx

@@ -77,7 +77,7 @@ export function StepNodeComponent({
 
   return (
     <Drawer.Root>
-      <Drawer.Trigger asChild>{stepNode}</Drawer.Trigger>
+      <Drawer.Trigger>{stepNode}</Drawer.Trigger>
       <Drawer.Content size="md">
         <Drawer.Header className="p-0">
           <ExecutionHeader
@@ -129,7 +129,7 @@ export function ApprovalStepNodeComponent({
 
   return (
     <Drawer.Root>
-      <Drawer.Trigger asChild>{approvalNode}</Drawer.Trigger>
+      <Drawer.Trigger>{approvalNode}</Drawer.Trigger>
       <Drawer.Content>
         <Drawer.Header>
           <Drawer.Title>Approval</Drawer.Title>

apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx

@@ -23,6 +23,8 @@ const PullRequestCompareWrapper: FC<Partial<PullRequestComparePageProps>> = prop
       setDesc={noop}
       handleDeleteReviewer={noop}
       handleAddReviewer={noop}
+      handleAddUserGroupReviewer={noop}
+      handleDeleteUserGroupReviewer={noop}
       onFormSubmit={noop}
       onFormDraftSubmit={noop}
       onFormCancel={noop}

apps/design-system/src/subjects/views/pull-request-conversation/pull-request-conversation.tsx

@@ -6,6 +6,7 @@ import { noop } from '@utils/viewUtils'
 import { CommitSuggestionsDialog } from '@harnessio/ui/components'
 import {
   CommitSuggestion,
+  EnumBypassListType,
   EnumCheckStatus,
   EnumPullReqReviewDecision,
   ILabelType,
@@ -24,6 +25,7 @@ import {
   mockPrLabels,
   mockPullRequestActions,
   mockReviewers,
+  mockUserGroupReviewers,
   pendingChangesInfoData,
   prPanelInfo,
   pullReqChecksDecisionSucceeded
@@ -57,7 +59,7 @@ const PullRequestConversation: FC<PullRequestConversationProps> = ({ state }) =>
   const showRestoreBranchButton = false
   const errorMsg = ''
 
-  const currentUserData = { display_name: 'admin', uid: '' }
+  const currentUserData = { display_name: 'admin', id: 1, uid: '' }
 
   const comment = ''
 
@@ -76,7 +78,25 @@ const PullRequestConversation: FC<PullRequestConversationProps> = ({ state }) =>
   const PRLabels = state === 'complex-1' ? mockPrLabels : { label_data: [] as LabelAssignmentType[] }
   const searchLabel = ''
   const pullReqMetadata = { source_sha: '' }
-  const reviewers = state === 'complex-1' ? mockReviewers : undefined
+  const reviewers =
+    state === 'complex-1'
+      ? mockReviewers.map(reviewer => ({
+          ...reviewer,
+          reviewer: { ...reviewer.reviewer, type: EnumBypassListType.USER }
+        }))
+      : undefined
+  const userGroupReviewers =
+    state === 'complex-1'
+      ? mockUserGroupReviewers.map(reviewer => ({
+          ...reviewer,
+          reviewer: {
+            display_name: reviewer.user_group.name,
+            id: reviewer.user_group.id,
+            email: reviewer.user_group.identifier,
+            type: EnumBypassListType.USER_GROUP
+          }
+        }))
+      : undefined
 
   const filtersData = usePrFilters()
 
@@ -172,15 +192,17 @@ const PullRequestConversation: FC<PullRequestConversationProps> = ({ state }) =>
           handleUpload: noop
         }}
         sideBarProps={{
-          addReviewers: noop,
-          currentUserId: currentUserData?.uid,
+          addReviewer: noop,
+          authorId: currentUserData?.id,
           pullRequestMetadata: { source_sha: pullReqMetadata?.source_sha || '' },
           processReviewDecision,
           refetchReviewers: noop,
           handleDelete: noop,
+          handleUserGroupReviewerDelete: noop,
           addReviewerError: '',
           removeReviewerError: '',
           reviewers,
+          userGroupReviewers,
           labelsList,
           PRLabels: PRLabels?.label_data,
           searchLabelQuery: searchLabel,