Add empty state for Compare and PR views (#225)

web/src/components/Changes/Changes.tsx

@@ -13,6 +13,7 @@ import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
 import type { DiffFileEntry } from 'utils/types'
 // import { useRawDiff } from 'services/code'
 import { DIFF2HTML_CONFIG, ViewStyle } from 'components/DiffViewer/DiffViewerUtils'
+import { NoResultCard } from 'components/NoResultCard/NoResultCard'
 import type { TypesPullReq } from 'services/code'
 import { PullRequestTabContentWrapper } from '../../pages/PullRequest/PullRequestTabContentWrapper'
 import { ChangesDropdown } from './ChangesDropdown'
@@ -95,8 +96,6 @@ export const Changes: React.FC<ChangesProps> = ({
   )
 
   return (
-    // TODO: Move PullRequestTabContentWrapper out of this file
-    // as it's a reusable component and not just used for PR
     <PullRequestTabContentWrapper loading={loading} error={error} onRetry={refetch} className={css.wrapper}>
       {diffs?.length ? (
         <>
@@ -165,7 +164,14 @@ export const Changes: React.FC<ChangesProps> = ({
           </Layout.Vertical>
         </>
       ) : (
-        <Container></Container>
+        <Container>
+          <NoResultCard
+            showWhen={() => diffs?.length === 0}
+            forSearch={true}
+            title={getString('noChanges')}
+            emptySearchMessage={getString('noChangesPR')}
+          />
+        </Container>
       )}
     </PullRequestTabContentWrapper>
   )

web/src/components/CommitsView/CommitsView.tsx

@@ -6,6 +6,7 @@ import { useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
 import type { RepoCommit } from 'services/code'
 import { CommitActions } from 'components/CommitActions/CommitActions'
+import { NoResultCard } from 'components/NoResultCard/NoResultCard'
 import { ThreadSection } from 'components/ThreadSection/ThreadSection'
 import { formatDate } from 'utils/Utils'
 import { CodeIcon, GitInfoProps } from 'utils/GitUtils'
@@ -13,9 +14,11 @@ import css from './CommitsView.module.scss'
 
 interface CommitsViewProps extends Pick<GitInfoProps, 'repoMetadata'> {
   commits: RepoCommit[]
+  emptyTitle: string
+  emptyMessage: string
 }
 
-export function CommitsView({ repoMetadata, commits }: CommitsViewProps) {
+export function CommitsView({ repoMetadata, commits, emptyTitle, emptyMessage }: CommitsViewProps) {
   const { getString } = useStrings()
   const { routes } = useAppContext()
   const columns: Column<RepoCommit>[] = useMemo(
@@ -76,25 +79,32 @@ export function CommitsView({ repoMetadata, commits }: CommitsViewProps) {
 
   return (
     <Container className={css.container}>
-      {Object.entries(commitsGroupedByDate).map(([date, commitsByDate]) => {
-        return (
-          <ThreadSection
-            key={date}
-            title={
-              <Text icon={CodeIcon.Commit} iconProps={{ size: 20 }} color={Color.GREY_500} className={css.label}>
-                {getString('commitsOn', { date })}
-              </Text>
-            }>
-            <Table<RepoCommit>
-              className={css.table}
-              hideHeaders
-              columns={columns}
-              data={orderBy(commitsByDate || [], ['author.when'], ['desc'])}
-              getRowClassName={() => css.row}
-            />
-          </ThreadSection>
-        )
-      })}
+      {!!commits.length &&
+        Object.entries(commitsGroupedByDate).map(([date, commitsByDate]) => {
+          return (
+            <ThreadSection
+              key={date}
+              title={
+                <Text icon={CodeIcon.Commit} iconProps={{ size: 20 }} color={Color.GREY_500} className={css.label}>
+                  {getString('commitsOn', { date })}
+                </Text>
+              }>
+              <Table<RepoCommit>
+                className={css.table}
+                hideHeaders
+                columns={columns}
+                data={orderBy(commitsByDate || [], ['author.when'], ['desc'])}
+                getRowClassName={() => css.row}
+              />
+            </ThreadSection>
+          )
+        })}
+      <NoResultCard
+        showWhen={() => commits?.length === 0}
+        forSearch={true}
+        title={emptyTitle}
+        emptySearchMessage={emptyMessage}
+      />
     </Container>
   )
 }

web/src/components/NoResultCard/NoResultCard.module.scss

@@ -1,5 +1,5 @@
 .main {
   > div {
-    height: calc(100vh - var(--page-header-height, 64px) - 120px) !important;
+    height: calc(100vh - var(--page-header-height, 64px) - 180px) !important;
   }
 }

web/src/components/NoResultCard/NoResultCard.tsx

@@ -9,7 +9,9 @@ import css from './NoResultCard.module.scss'
 interface NoResultCardProps {
   showWhen: () => boolean
   forSearch: boolean
+  title?: string
   message?: string
+  emptySearchMessage?: string
   buttonText?: string
   buttonIcon?: IconName
   onButtonClick?: () => void
@@ -18,7 +20,9 @@ interface NoResultCardProps {
 export const NoResultCard: React.FC<NoResultCardProps> = ({
   showWhen,
   forSearch,
+  title,
   message,
+  emptySearchMessage,
   buttonText = '',
   buttonIcon = CodeIcon.Add,
   onButtonClick = noop
@@ -33,8 +37,10 @@ export const NoResultCard: React.FC<NoResultCardProps> = ({
     <Container className={css.main}>
       <NoDataCard
         image={emptyStateImage}
-        messageTitle={forSearch ? getString('noResultTitle') : undefined}
-        message={forSearch ? getString('noResultMessage') : message || getString('noResultMessage')}
+        messageTitle={forSearch ? title || getString('noResultTitle') : undefined}
+        message={
+          forSearch ? emptySearchMessage || getString('noResultMessage') : message || getString('noResultMessage')
+        }
         button={
           forSearch ? undefined : (
             <Button

web/src/framework/strings/stringTypes.ts

@@ -44,6 +44,8 @@ export interface StringsMap {
   commits: string
   commitsOn: string
   compare: string
+  compareEmptyDiffMessage: string
+  compareEmptyDiffTitle: string
   comparingChanges: string
   confirm: string
   confirmDeleteWebhook: string
@@ -117,6 +119,11 @@ export interface StringsMap {
   newRepo: string
   next: string
   noAccount: string
+  noChanges: string
+  noChangesPR: string
+  noCommits: string
+  noCommitsMessage: string
+  noCommitsPR: string
   noResultMessage: string
   noResultTitle: string
   noWebHooks: string

web/src/i18n/strings.en.yaml

@@ -267,3 +267,10 @@ repoEmptyMarkdown: |
 
   You might need [to create an API token](CREATE_API_TOKEN_URL) in order to pull from or push into this repository.
 webhookEmpty: Here is no WebHooks. Try to
+compareEmptyDiffTitle: There isn't anything to compare
+compareEmptyDiffMessage: Two branches are identical.
+noCommits: There is no commits
+noCommitsMessage: This repository does not have any commits yet.
+noCommitsPR: This Pull Request does not have commit history.
+noChanges: There is no changes
+noChangesPR: This Pull Request does not have any changes.

web/src/pages/Compare/Compare.tsx

@@ -95,7 +95,12 @@ export default function Compare() {
                   title: getString('commits'),
                   panel: (
                     <Container padding="xlarge">
-                      {!!commits?.length && <CommitsView commits={commits} repoMetadata={repoMetadata} />}
+                      <CommitsView
+                        commits={commits || []}
+                        repoMetadata={repoMetadata}
+                        emptyTitle={getString('compareEmptyDiffTitle')}
+                        emptyMessage={getString('compareEmptyDiffMessage')}
+                      />
                       <ResourceListingPagination response={response} page={page} setPage={setPage} />
                     </Container>
                   )

web/src/pages/PullRequest/PullRequestCommits/PullRequestCommits.tsx

@@ -4,6 +4,7 @@ import type { RepoCommit } from 'services/code'
 import type { GitInfoProps } from 'utils/GitUtils'
 import { voidFn, LIST_FETCHING_LIMIT } from 'utils/Utils'
 import { usePageIndex } from 'hooks/usePageIndex'
+import { useStrings } from 'framework/strings'
 import { ResourceListingPagination } from 'components/ResourceListingPagination/ResourceListingPagination'
 import { CommitsView } from 'components/CommitsView/CommitsView'
 import { PullRequestTabContentWrapper } from '../PullRequestTabContentWrapper'
@@ -14,6 +15,7 @@ export const PullRequestCommits: React.FC<Pick<GitInfoProps, 'repoMetadata' | 'p
 }) => {
   const limit = LIST_FETCHING_LIMIT
   const [page, setPage] = usePageIndex()
+  const { getString } = useStrings()
   const {
     data: commits,
     error,
@@ -33,7 +35,12 @@ export const PullRequestCommits: React.FC<Pick<GitInfoProps, 'repoMetadata' | 'p
 
   return (
     <PullRequestTabContentWrapper loading={loading} error={error} onRetry={voidFn(refetch)}>
-      {!!commits?.length && <CommitsView commits={commits} repoMetadata={repoMetadata} />}
+      <CommitsView
+        commits={commits || []}
+        repoMetadata={repoMetadata}
+        emptyTitle={getString('noCommits')}
+        emptyMessage={getString('noCommitsPR')}
+      />
 
       <ResourceListingPagination response={response} page={page} setPage={setPage} />
     </PullRequestTabContentWrapper>

web/src/pages/RepositoriesListing/RepositoriesListing.tsx

@@ -26,7 +26,7 @@ import { SearchInputWithSpinner } from 'components/SearchInputWithSpinner/Search
 import { useAppContext } from 'AppContext'
 import { NoResultCard } from 'components/NoResultCard/NoResultCard'
 import { ResourceListingPagination } from 'components/ResourceListingPagination/ResourceListingPagination'
-import emptyStateImage from './empty-state.svg'
+import noRepoImage from './no-repo.svg'
 import css from './RepositoriesListing.module.scss'
 
 export default function RepositoriesListing() {
@@ -131,7 +131,7 @@ export default function RepositoriesListing() {
         retryOnError={voidFn(refetch)}
         noData={{
           when: () => repositories?.length === 0 && searchTerm === undefined,
-          image: emptyStateImage,
+          image: noRepoImage,
           message: getString('repos.noDataMessage'),
           button: NewRepoButton
         }}>
@@ -141,6 +141,7 @@ export default function RepositoriesListing() {
             <FlexExpander />
             <SearchInputWithSpinner loading={loading} query={searchTerm} setQuery={setSearchTerm} />
           </Layout.Horizontal>
+
           <Container margin={{ top: 'medium' }}>
             {!!repositories?.length && (
               <Table<TypesRepository>

web/src/pages/RepositoryCommits/RepositoryCommits.tsx

@@ -70,7 +70,12 @@ export default function RepositoryCommits() {
               </Layout.Horizontal>
             </Container>
 
-            <CommitsView commits={commits} repoMetadata={repoMetadata} />
+            <CommitsView
+              commits={commits}
+              repoMetadata={repoMetadata}
+              emptyTitle={getString('noCommits')}
+              emptyMessage={getString('noCommitsMessage')}
+            />
 
             <ResourceListingPagination response={response} page={page} setPage={setPage} />
           </Container>