diff --git a/web/src/components/Changes/Changes.tsx b/web/src/components/Changes/Changes.tsx index a6f1567f8..a39fdc9e4 100644 --- a/web/src/components/Changes/Changes.tsx +++ b/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 = ({ ) return ( - // TODO: Move PullRequestTabContentWrapper out of this file - // as it's a reusable component and not just used for PR {diffs?.length ? ( <> @@ -165,7 +164,14 @@ export const Changes: React.FC = ({ ) : ( - + + diffs?.length === 0} + forSearch={true} + title={getString('noChanges')} + emptySearchMessage={getString('noChangesPR')} + /> + )} ) diff --git a/web/src/components/CommitsView/CommitsView.tsx b/web/src/components/CommitsView/CommitsView.tsx index 27ff1e7c5..23c79e0f9 100644 --- a/web/src/components/CommitsView/CommitsView.tsx +++ b/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 { 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[] = useMemo( @@ -76,25 +79,32 @@ export function CommitsView({ repoMetadata, commits }: CommitsViewProps) { return ( - {Object.entries(commitsGroupedByDate).map(([date, commitsByDate]) => { - return ( - - {getString('commitsOn', { date })} - - }> - - className={css.table} - hideHeaders - columns={columns} - data={orderBy(commitsByDate || [], ['author.when'], ['desc'])} - getRowClassName={() => css.row} - /> - - ) - })} + {!!commits.length && + Object.entries(commitsGroupedByDate).map(([date, commitsByDate]) => { + return ( + + {getString('commitsOn', { date })} + + }> + + className={css.table} + hideHeaders + columns={columns} + data={orderBy(commitsByDate || [], ['author.when'], ['desc'])} + getRowClassName={() => css.row} + /> + + ) + })} + commits?.length === 0} + forSearch={true} + title={emptyTitle} + emptySearchMessage={emptyMessage} + /> ) } diff --git a/web/src/components/NoResultCard/NoResultCard.module.scss b/web/src/components/NoResultCard/NoResultCard.module.scss index 40a6269d8..13c88ec9d 100644 --- a/web/src/components/NoResultCard/NoResultCard.module.scss +++ b/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; } } diff --git a/web/src/components/NoResultCard/NoResultCard.tsx b/web/src/components/NoResultCard/NoResultCard.tsx index c09e79a4f..8c84665b9 100644 --- a/web/src/components/NoResultCard/NoResultCard.tsx +++ b/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 = ({ showWhen, forSearch, + title, message, + emptySearchMessage, buttonText = '', buttonIcon = CodeIcon.Add, onButtonClick = noop @@ -33,8 +37,10 @@ export const NoResultCard: React.FC = ({ - {!!commits?.length && } + ) diff --git a/web/src/pages/PullRequest/PullRequestCommits/PullRequestCommits.tsx b/web/src/pages/PullRequest/PullRequestCommits/PullRequestCommits.tsx index 9d1d0d7b6..022402290 100644 --- a/web/src/pages/PullRequest/PullRequestCommits/PullRequestCommits.tsx +++ b/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 { 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 - {!!commits?.length && } + diff --git a/web/src/pages/RepositoriesListing/RepositoriesListing.tsx b/web/src/pages/RepositoriesListing/RepositoriesListing.tsx index 604f96e9c..9253e1d8b 100644 --- a/web/src/pages/RepositoriesListing/RepositoriesListing.tsx +++ b/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() { + {!!repositories?.length && ( diff --git a/web/src/pages/RepositoriesListing/empty-state.svg b/web/src/pages/RepositoriesListing/empty-state.svg deleted file mode 100644 index ca6264407..000000000 --- a/web/src/pages/RepositoriesListing/empty-state.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/pages/RepositoriesListing/no-repo.svg b/web/src/pages/RepositoriesListing/no-repo.svg new file mode 100644 index 000000000..816feecf4 --- /dev/null +++ b/web/src/pages/RepositoriesListing/no-repo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/pages/RepositoryCommits/RepositoryCommits.tsx b/web/src/pages/RepositoryCommits/RepositoryCommits.tsx index 552c2c8ea..f3718cc5f 100644 --- a/web/src/pages/RepositoryCommits/RepositoryCommits.tsx +++ b/web/src/pages/RepositoryCommits/RepositoryCommits.tsx @@ -70,7 +70,12 @@ export default function RepositoryCommits() { - +