Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

fix(console): show placeholder when no search is found in guide library (#4368)

Browse source
This commit is contained in:
Charles Zhao 2023-08-18 03:29:28 -05:00 committed by GitHub
parent 1b75f7bb10
commit 4647879747
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/console/src/components/EmptyDataPlaceholder/index.tsx
View file

@ -11,15 +11,16 @@ import * as styles from './index.module.scss';
type Props = {
title?: string;
size?: 'large' | 'medium' | 'small';
className?: string;
};
function EmptyDataPlaceholder({ title, size = 'medium' }: Props) {
function EmptyDataPlaceholder({ title, size = 'medium', className }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const theme = useTheme();
const EmptyImage = theme === Theme.Light ? Empty : EmptyDark;
return (
<div className={classNames(styles.empty, styles[size])}>
<div className={classNames(styles.empty, styles[size], className)}>
<EmptyImage className={styles.image} />
<div className={styles.title}>{title ?? t('errors.empty')}</div>
</div>

7
packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss
View file

@ -56,3 +56,10 @@
flex: 1;
margin: _.unit(8) _.unit(8) 0 0;
}
.emptyPlaceholder {
justify-content: center;
position: absolute;
width: 100%;
height: 70%;
}

20
packages/console/src/pages/Applications/components/GuideLibrary/index.tsx
View file

@ -4,6 +4,7 @@ import { useCallback, useContext, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import SearchIcon from '@/assets/icons/search.svg';
import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
import ProTag from '@/components/ProTag';
import { isCloud } from '@/consts/env';
import { TenantsContext } from '@/contexts/TenantsProvider';
@ -100,14 +101,17 @@ function GuideLibrary({ className, hasCardBorder, hasFilters }: Props) {
</div>
</div>
)}
{keyword && (
<GuideGroup
className={styles.guideGroup}
hasCardBorder={hasCardBorder}
guides={filteredMetadata}
onClickGuide={onClickGuide}
/>
)}
{keyword &&
(filteredMetadata?.length ? (
<GuideGroup
className={styles.guideGroup}
hasCardBorder={hasCardBorder}
guides={filteredMetadata}
onClickGuide={onClickGuide}
/>
) : (
<EmptyDataPlaceholder className={styles.emptyPlaceholder} size="large" />
))}
{!keyword && (
<OverlayScrollbar className={styles.groups}>
{(filterCategories.length > 0 ? filterCategories : allAppGuideCategories).map(