USEFULL/drone
1
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-02 05:30:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Consolidate logic to show No Result (#223)

Browse Source 
* Add no result search view into repo listing view

* Consolidate logic to show No Result
This commit is contained in:
Tan Nhu 2023-01-17 16:11:39 -08:00 committed by GitHub
parent 1aa1123bd2
commit eed7b2c29b
13 changed files with 121 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/NoResultCard/NoResultCard.module.scss Normal file
View File

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

6
web/src/components/NoResultCard/NoResultCard.module.scss.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
/* eslint-disable */
// this is an auto-generated file
declare const styles: {
readonly main: string
}
export default styles

51
web/src/components/NoResultCard/NoResultCard.tsx Normal file
View File

@ -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<NoResultCardProps> = ({
showWhen,
forSearch,
message,
buttonText = '',
buttonIcon = CodeIcon.Add,
onButtonClick = noop
}) => {
const { getString } = useStrings()
if (!showWhen()) {
return null
}
return (
<Container className={css.main}>
<NoDataCard
image={emptyStateImage}
messageTitle={forSearch ? getString('noResultTitle') : undefined}
message={forSearch ? getString('noResultMessage') : message || getString('noResultMessage')}
button={
forSearch ? undefined : (
<Button
variation={ButtonVariation.PRIMARY}
text={buttonText}
icon={buttonIcon as IconName}
onClick={onButtonClick}
/>
)
}
/>
</Container>
)
}

2
web/src/framework/strings/stringTypes.ts
View File

@ -117,6 +117,8 @@ export interface StringsMap {
newRepo: string
next: string
noAccount: string
noResultMessage: string
noResultTitle: string
noWebHooks: string
none: string
off: string

2
web/src/i18n/strings.en.yaml
View File

@ -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

4
web/src/pages/PullRequests/PullRequests.module.scss
View File

@ -18,10 +18,6 @@
align-items: center;
}
}
.noData > div {
height: calc(100vh - var(--page-header-height, 64px) - 120px) !important;
}
}
.rowImg {

1
web/src/pages/PullRequests/PullRequests.module.scss.d.ts vendored
View File

@ -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

54
web/src/pages/PullRequests/PullRequests.tsx
View File

@ -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() {
<ResourceListingPagination response={response} page={page} setPage={setPage} />
</>
)}
{data?.length === 0 && (
<Container className={css.noData}>
<NoDataCard
image={emptyStateImage}
message={getString('pullRequestEmpty')}
button={
<Button
variation={ButtonVariation.PRIMARY}
text={getString('newPullRequest')}
icon={CodeIcon.Add}
onClick={() => {
history.push(
routes.toCODECompare({
repoPath: repoMetadata?.path as string,
diffRefs: makeDiffRefs(repoMetadata?.default_branch as string, '')
})
)
}}
/>
}
/>
</Container>
)}
<NoResultCard
showWhen={() => 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, '')
})
)
}
/>
</Container>
</Layout.Vertical>
)}

22
web/src/pages/RepositoriesListing/RepositoriesListing.tsx
View File

@ -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() {
<SearchInputWithSpinner loading={loading} query={searchTerm} setQuery={setSearchTerm} />
</Layout.Horizontal>
<Container margin={{ top: 'medium' }}>
<Table<TypesRepository>
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 && (
<Table<TypesRepository>
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)}
/>
)}
<NoResultCard
showWhen={() => !!repositories && repositories.length === 0 && !!searchTerm?.length}
forSearch={true}
/>
</Container>
<ResourceListingPagination response={response} page={page} setPage={setPage} />

4
web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss
View File

@ -1,3 +1,7 @@
.resourceContent {
background-color: var(--primary-bg);
.noData > div {
height: calc(100vh - var(--page-header-height, 64px) - 120px) !important;
}
}

1
web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.module.scss.d.ts vendored
View File

@ -2,5 +2,6 @@
// this is an auto-generated file
declare const styles: {
readonly resourceContent: string
readonly noData: string
}
export default styles

3
web/src/pages/RepositoryBranches/RepositoryBranchesContent/RepositoryBranchesContent.tsx
View File

@ -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<GitInfoProps, '
/>
)}
<NoResultCard showWhen={() => !!branches && branches.length === 0 && !!searchTerm?.length} forSearch={true} />
<ResourceListingPagination response={response} page={page} setPage={setPage} />
</Container>
)

55
web/src/pages/Webhooks/Webhooks.tsx
View File

@ -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() {
<ResourceListingPagination response={response} page={page} setPage={setPage} />
</>
)}
{webhooks?.length === 0 && (
<Container className={css.noData}>
<NoDataCard
image={emptyStateImage}
message={getString('webhookEmpty')}
button={
<Button
variation={ButtonVariation.PRIMARY}
text={getString('createWebhook')}
icon={CodeIcon.Add}
onClick={() => {
history.push(
routes.toCODEWebhookNew({
repoPath: repoMetadata?.path as string
})
)
}}
/>
}
/>
</Container>
)}
<NoResultCard
showWhen={() => webhooks?.length === 0}
forSearch={!!searchTerm}
message={getString('webhookEmpty')}
buttonText={getString('createWebhook')}
onButtonClick={() =>
history.push(
routes.toCODEWebhookNew({
repoPath: repoMetadata?.path as string
})
)
}
/>
</Container>
</Layout.Vertical>
)}