From eed7b2c29bf643840c729d31ddcbac9cb542a8c5 Mon Sep 17 00:00:00 2001 From: Tan Nhu Date: Tue, 17 Jan 2023 16:11:39 -0800 Subject: [PATCH] Consolidate logic to show No Result (#223) * Add no result search view into repo listing view * Consolidate logic to show No Result --- .../NoResultCard/NoResultCard.module.scss | 5 ++ .../NoResultCard.module.scss.d.ts | 6 ++ .../components/NoResultCard/NoResultCard.tsx | 51 +++++++++++++++++ web/src/framework/strings/stringTypes.ts | 2 + web/src/i18n/strings.en.yaml | 2 + .../PullRequests/PullRequests.module.scss | 4 -- .../PullRequests.module.scss.d.ts | 1 - web/src/pages/PullRequests/PullRequests.tsx | 54 ++++++------------ .../RepositoriesListing.tsx | 22 +++++--- .../RepositoryBranchesContent.module.scss | 4 ++ ...RepositoryBranchesContent.module.scss.d.ts | 1 + .../RepositoryBranchesContent.tsx | 3 + web/src/pages/Webhooks/Webhooks.tsx | 55 ++++++------------- 13 files changed, 121 insertions(+), 89 deletions(-) create mode 100644 web/src/components/NoResultCard/NoResultCard.module.scss create mode 100644 web/src/components/NoResultCard/NoResultCard.module.scss.d.ts create mode 100644 web/src/components/NoResultCard/NoResultCard.tsx diff --git a/web/src/components/NoResultCard/NoResultCard.module.scss b/web/src/components/NoResultCard/NoResultCard.module.scss new file mode 100644 index 000000000..40a6269d8 --- /dev/null +++ b/web/src/components/NoResultCard/NoResultCard.module.scss @@ -0,0 +1,5 @@ +.main { + > div { + height: calc(100vh - var(--page-header-height, 64px) - 120px) !important; + } +} diff --git a/web/src/components/NoResultCard/NoResultCard.module.scss.d.ts b/web/src/components/NoResultCard/NoResultCard.module.scss.d.ts new file mode 100644 index 000000000..9e614bf2d --- /dev/null +++ b/web/src/components/NoResultCard/NoResultCard.module.scss.d.ts @@ -0,0 +1,6 @@ +/* eslint-disable */ +// this is an auto-generated file +declare const styles: { + readonly main: string +} +export default styles diff --git a/web/src/components/NoResultCard/NoResultCard.tsx b/web/src/components/NoResultCard/NoResultCard.tsx new file mode 100644 index 000000000..c09e79a4f --- /dev/null +++ b/web/src/components/NoResultCard/NoResultCard.tsx @@ -0,0 +1,51 @@ +import React from 'react' +import { Button, Container, ButtonVariation, NoDataCard, IconName } from '@harness/uicore' +import { noop } from 'lodash-es' +import { CodeIcon } from 'utils/GitUtils' +import { useStrings } from 'framework/strings' +import emptyStateImage from 'images/empty-state.svg' +import css from './NoResultCard.module.scss' + +interface NoResultCardProps { + showWhen: () => boolean + forSearch: boolean + message?: string + buttonText?: string + buttonIcon?: IconName + onButtonClick?: () => void +} + +export const NoResultCard: React.FC = ({ + showWhen, + forSearch, + message, + buttonText = '', + buttonIcon = CodeIcon.Add, + onButtonClick = noop +}) => { + const { getString } = useStrings() + + if (!showWhen()) { + return null + } + + return ( + + + ) + } + /> + + ) +} diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts index ab1360b97..3f2e5e151 100644 --- a/web/src/framework/strings/stringTypes.ts +++ b/web/src/framework/strings/stringTypes.ts @@ -117,6 +117,8 @@ export interface StringsMap { newRepo: string next: string noAccount: string + noResultMessage: string + noResultTitle: string noWebHooks: string none: string off: string diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml index a53add633..42f389455 100644 --- a/web/src/i18n/strings.en.yaml +++ b/web/src/i18n/strings.en.yaml @@ -60,6 +60,8 @@ searchBranches: Search branches updated: Updated cloneHTTPS: Clone with HTTPS nameYourFile: Name your file... +noResultTitle: Sorry, no result found +noResultMessage: What you searched was unfortunately not found or doesn’t exist repos: name: Repo Name data: Repo Data diff --git a/web/src/pages/PullRequests/PullRequests.module.scss b/web/src/pages/PullRequests/PullRequests.module.scss index a554b57d0..90b896ca0 100644 --- a/web/src/pages/PullRequests/PullRequests.module.scss +++ b/web/src/pages/PullRequests/PullRequests.module.scss @@ -18,10 +18,6 @@ align-items: center; } } - - .noData > div { - height: calc(100vh - var(--page-header-height, 64px) - 120px) !important; - } } .rowImg { diff --git a/web/src/pages/PullRequests/PullRequests.module.scss.d.ts b/web/src/pages/PullRequests/PullRequests.module.scss.d.ts index f84d22384..3b82a6352 100644 --- a/web/src/pages/PullRequests/PullRequests.module.scss.d.ts +++ b/web/src/pages/PullRequests/PullRequests.module.scss.d.ts @@ -6,7 +6,6 @@ declare const styles: { readonly row: string readonly title: string readonly titleRow: string - readonly noData: string readonly rowImg: string readonly open: string readonly merged: string diff --git a/web/src/pages/PullRequests/PullRequests.tsx b/web/src/pages/PullRequests/PullRequests.tsx index 07916a34a..fc13361f8 100644 --- a/web/src/pages/PullRequests/PullRequests.tsx +++ b/web/src/pages/PullRequests/PullRequests.tsx @@ -1,31 +1,20 @@ import React, { useMemo, useState } from 'react' -import { - Button, - Container, - ButtonVariation, - PageBody, - Text, - Color, - TableV2, - Layout, - StringSubstitute, - NoDataCard -} from '@harness/uicore' +import { Container, PageBody, Text, Color, TableV2, Layout, StringSubstitute } from '@harness/uicore' import cx from 'classnames' import { useHistory } from 'react-router-dom' import { useGet } from 'restful-react' import type { CellProps, Column } from 'react-table' import ReactTimeago from 'react-timeago' -import { CodeIcon, makeDiffRefs, PullRequestFilterOption } from 'utils/GitUtils' +import { makeDiffRefs, PullRequestFilterOption } from 'utils/GitUtils' import { useAppContext } from 'AppContext' import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata' import { useStrings } from 'framework/strings' import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader' import { voidFn, getErrorMessage, LIST_FETCHING_LIMIT } from 'utils/Utils' -import emptyStateImage from 'images/empty-state.svg' import { usePageIndex } from 'hooks/usePageIndex' import type { TypesPullReq } from 'services/code' import { ResourceListingPagination } from 'components/ResourceListingPagination/ResourceListingPagination' +import { NoResultCard } from 'components/NoResultCard/NoResultCard' import { PullRequestsContentHeader } from './PullRequestsContentHeader/PullRequestsContentHeader' import prImgOpen from './pull-request-open.svg' import prImgMerged from './pull-request-merged.svg' @@ -143,29 +132,20 @@ export default function PullRequests() { )} - {data?.length === 0 && ( - - { - history.push( - routes.toCODECompare({ - repoPath: repoMetadata?.path as string, - diffRefs: makeDiffRefs(repoMetadata?.default_branch as string, '') - }) - ) - }} - /> - } - /> - - )} + data?.length === 0} + forSearch={!!searchTerm} + message={getString('pullRequestEmpty')} + buttonText={getString('newPullRequest')} + onButtonClick={() => + history.push( + routes.toCODECompare({ + repoPath: repoMetadata?.path as string, + diffRefs: makeDiffRefs(repoMetadata?.default_branch as string, '') + }) + ) + } + /> )} diff --git a/web/src/pages/RepositoriesListing/RepositoriesListing.tsx b/web/src/pages/RepositoriesListing/RepositoriesListing.tsx index da86215f7..604f96e9c 100644 --- a/web/src/pages/RepositoriesListing/RepositoriesListing.tsx +++ b/web/src/pages/RepositoriesListing/RepositoriesListing.tsx @@ -24,6 +24,7 @@ import { usePageIndex } from 'hooks/usePageIndex' import { useGetSpaceParam } from 'hooks/useGetSpaceParam' import { SearchInputWithSpinner } from 'components/SearchInputWithSpinner/SearchInputWithSpinner' import { useAppContext } from 'AppContext' +import { NoResultCard } from 'components/NoResultCard/NoResultCard' import { ResourceListingPagination } from 'components/ResourceListingPagination/ResourceListingPagination' import emptyStateImage from './empty-state.svg' import css from './RepositoriesListing.module.scss' @@ -141,14 +142,19 @@ export default function RepositoriesListing() { - - className={css.table} - columns={columns} - data={repositories || []} - onRowClick={repoInfo => { - history.push(routes.toCODERepository({ repoPath: repoInfo.path as string })) - }} - getRowClassName={row => cx(css.row, !row.original.description && css.noDesc)} + {!!repositories?.length && ( + + className={css.table} + columns={columns} + data={repositories || []} + onRowClick={repoInfo => history.push(routes.toCODERepository({ repoPath: repoInfo.path as string }))} + getRowClassName={row => cx(css.row, !row.original.description && css.noDesc)} + /> + )} + + !!repositories && repositories.length === 0 && !!searchTerm?.length} + forSearch={true} /> diff --git a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss b/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss index 89c68c63c..7f1615d5d 100644 --- a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss +++ b/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss @@ -1,3 +1,7 @@ .resourceContent { background-color: var(--primary-bg); + + .noData > div { + height: calc(100vh - var(--page-header-height, 64px) - 120px) !important; + } } diff --git a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss.d.ts b/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss.d.ts index 442d643fe..74c2ff5a1 100644 --- a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss.d.ts +++ b/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss.d.ts @@ -2,5 +2,6 @@ // this is an auto-generated file declare const styles: { readonly resourceContent: string + readonly noData: string } export default styles diff --git a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.tsx b/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.tsx index ea52716d6..f4864e940 100644 --- a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.tsx +++ b/web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.tsx @@ -9,6 +9,7 @@ import { useAppContext } from 'AppContext' import type { GitInfoProps } from 'utils/GitUtils' import { ResourceListingPagination } from 'components/ResourceListingPagination/ResourceListingPagination' import { useShowRequestError } from 'hooks/useShowRequestError' +import { NoResultCard } from 'components/NoResultCard/NoResultCard' import { BranchesContentHeader } from './BranchesContentHeader/BranchesContentHeader' import { BranchesContent } from './BranchesContent/BranchesContent' import css from './RepositoryBranchesContent.module.scss' @@ -68,6 +69,8 @@ export function RepositoryBranchesContent({ repoMetadata }: Pick )} + !!branches && branches.length === 0 && !!searchTerm?.length} forSearch={true} /> + ) diff --git a/web/src/pages/Webhooks/Webhooks.tsx b/web/src/pages/Webhooks/Webhooks.tsx index b5070c4ab..7f0f12bc9 100644 --- a/web/src/pages/Webhooks/Webhooks.tsx +++ b/web/src/pages/Webhooks/Webhooks.tsx @@ -1,33 +1,18 @@ import React, { useMemo, useState } from 'react' -import { - Button, - Container, - ButtonVariation, - PageBody, - Text, - Color, - TableV2, - Layout, - Icon, - Utils, - useToaster, - IconName, - NoDataCard -} from '@harness/uicore' +import { Container, PageBody, Text, Color, TableV2, Layout, Icon, Utils, useToaster, IconName } from '@harness/uicore' import { useHistory } from 'react-router-dom' import { useGet, useMutate } from 'restful-react' import type { CellProps, Column } from 'react-table' -import { CodeIcon } from 'utils/GitUtils' import { useAppContext } from 'AppContext' import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata' import { useStrings } from 'framework/strings' import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader' import { voidFn, getErrorMessage, LIST_FETCHING_LIMIT } from 'utils/Utils' -import emptyStateImage from 'images/empty-state.svg' import { OptionsMenuButton } from 'components/OptionsMenuButton/OptionsMenuButton' import { useConfirmAct } from 'hooks/useConfirmAction' import { usePageIndex } from 'hooks/usePageIndex' import { ResourceListingPagination } from 'components/ResourceListingPagination/ResourceListingPagination' +import { NoResultCard } from 'components/NoResultCard/NoResultCard' import type { OpenapiWebhookType } from 'services/code' import { WebhooksHeader } from './WebhooksHeader/WebhooksHeader' import css from './Webhooks.module.scss' @@ -176,28 +161,20 @@ export default function Webhooks() { )} - {webhooks?.length === 0 && ( - - { - history.push( - routes.toCODEWebhookNew({ - repoPath: repoMetadata?.path as string - }) - ) - }} - /> - } - /> - - )} + + webhooks?.length === 0} + forSearch={!!searchTerm} + message={getString('webhookEmpty')} + buttonText={getString('createWebhook')} + onButtonClick={() => + history.push( + routes.toCODEWebhookNew({ + repoPath: repoMetadata?.path as string + }) + ) + } + /> )}