feat: pr-compare/create design improvements (#578)

* refactor: refactoring pull-request-compare-page fix: minor changes fix: minor changes fix: minor changes fix: minor changes fix: minor changes fix: minor changes * fix: minor changes * fix: minor changes --------- Co-authored-by: Andrew Golovanov <[email protected]>
harness · Dec 26, 2024 · d5c3f06 · d5c3f06
1 parent afe9135
commit d5c3f06
Show file tree

Hide file tree

Showing 40 changed files with 768 additions and 604 deletions.
diff --git a/apps/design-system/src/views/pull-request-compare/pull-request-compare.tsx b/apps/design-system/src/views/pull-request-compare/pull-request-compare.tsx
@@ -1,12 +1,12 @@
 import { FC, useCallback } from 'react'
 
-import { PullRequestCompare, SandboxPullRequestCompareProps } from '@harnessio/ui/views'
+import { PullRequestComparePage, PullRequestComparePageProps } from '@harnessio/ui/views'
 
 import { noop, useTranslationsStore } from '../../utils.ts'
 import { repoBranchListStore } from './repo-branch-store.ts'
 import { repoCommitStore } from './repo-commit-store.ts'
 
-const PullRequestCompareWrapper: FC<Partial<SandboxPullRequestCompareProps>> = props => {
+const PullRequestCompareWrapper: FC<Partial<PullRequestComparePageProps>> = props => {
   const useRepoBranchListStore = useCallback(
     () => ({
       ...repoBranchListStore,
@@ -23,7 +23,7 @@ const PullRequestCompareWrapper: FC<Partial<SandboxPullRequestCompareProps>> = p
   )
 
   return (
-    <PullRequestCompare
+    <PullRequestComparePage
       onFormSubmit={noop}
       onFormDraftSubmit={noop}
       onFormCancel={noop}

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
@@ -25,7 +25,7 @@ import {
   BranchSelectorTab,
   CommitSelectorListItem,
   CompareFormFields,
-  PullRequestCompare
+  PullRequestComparePage
 } from '@harnessio/ui/views'
 
 import { useAppContext } from '../../framework/context/AppContext'
@@ -365,7 +365,7 @@ export const CreatePullRequest = () => {
     if (isFetchingBranches) return <SkeletonList />
 
     return (
-      <PullRequestCompare
+      <PullRequestComparePage
         currentUser={currentUser?.display_name}
         setSearchCommitQuery={setQuery}
         searchCommitQuery={query}

diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
@@ -33,6 +33,7 @@ const buttonVariants = cva(
         icon: 'size-8',
         sm_icon: 'size-7',
         xs_split: 'h-auto p-0 text-xs font-medium',
+        md_split: 'h-8 text-14 font-medium',
         lg_split: 'text-md h-10 p-0 font-medium'
       },
       borderRadius: {

diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
@@ -44,6 +44,7 @@ import CloudCosts from '../icons/cloud-costs-icon.svg'
 import Code from '../icons/code.svg'
 import Cog6 from '../icons/cog-6.svg'
 import Comments from '../icons/comments.svg'
+import Compare from '../icons/compare.svg'
 import Connectors from '../icons/connectors-icon.svg'
 import CreateWorkspace from '../icons/create-workspace.svg'
 import DashboardsGradient from '../icons/dashboards-gradient.svg'
@@ -109,6 +110,7 @@ import Merged from '../icons/merged.svg'
 import Minus from '../icons/minus-icon.svg'
 import Ellipsis from '../icons/more-dots-icon.svg'
 import Navigation from '../icons/navigation-icon.svg'
+import NoDataPR from '../icons/no-data-pr.svg'
 import NodeLogo from '../icons/node-logo.svg'
 import Notification from '../icons/notification-icon.svg'
 import OpenPR from '../icons/open-pr.svg'
@@ -214,6 +216,7 @@ const IconNameMap = {
   'no-search-magnifying-glass': NoSearchMagnifyingGlass,
   'no-data-members': NoDataMembers,
   'no-data-error': NoDataError,
+  'no-data-pr': NoDataPR,
   changes: Changes,
   checks: Checks,
   'vertical-ellipsis': VerticalEllipsis,
@@ -345,7 +348,8 @@ const IconNameMap = {
   list: List,
   checklist: Checklist,
   italicize: Italicize,
-  'no-data-commits': NoDataCommits
+  'no-data-commits': NoDataCommits,
+  compare: Compare
   // fork: Fork
 } satisfies Record<string, React.FunctionComponent<React.SVGProps<SVGSVGElement>>>
 

diff --git a/packages/ui/src/components/no-data.tsx b/packages/ui/src/components/no-data.tsx
@@ -21,6 +21,7 @@ export interface NoDataProps {
     | 'no-repository'
     | 'no-data-error'
     | 'no-data-commits'
+    | 'no-data-pr'
   iconSize?: number
   description: string[]
   primaryButton?: {

diff --git a/packages/ui/src/icons/compare.svg b/packages/ui/src/icons/compare.svg
diff --git a/packages/ui/src/icons/no-data-pr.svg b/packages/ui/src/icons/no-data-pr.svg
diff --git a/packages/ui/src/icons/page-state.svg b/packages/ui/src/icons/page-state.svg
diff --git a/packages/ui/src/views/index.ts b/packages/ui/src/views/index.ts
@@ -5,7 +5,6 @@ export * from './types/link-types'
 export * as SandboxLayout from './layouts/SandboxLayout'
 export * from './layouts/SandboxRoot'
 export * from './layouts/Floating1ColumnLayout'
-export * from './layouts/PullRequestCompareLayout'
 export * from './layouts/PullRequestLayout'
 
 // Account