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

fix(console): should hide filters from app list empty placeholder (#4358)

Browse source
This commit is contained in:
Charles Zhao 2023-08-17 01:07:18 -05:00 committed by GitHub
parent 66c75cb0af
commit 8b013ce979
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/console/src/pages/Applications/components/GuideGroup/index.module.scss
View file

@ -3,6 +3,7 @@
.guideGroup {
display: flex;
flex-direction: column;
max-width: 1876px;
container-type: inline-size;
label {

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

@ -24,9 +24,10 @@ import * as styles from './index.module.scss';
type Props = {
className?: string;
hasCardBorder?: boolean;
hasFilters?: boolean;
};
function GuideLibrary({ className, hasCardBorder }: Props) {
function GuideLibrary({ className, hasCardBorder, hasFilters }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.applications.guide' });
const { navigate } = useTenantPathname();
const [keyword, setKeyword] = useState<string>('');
@ -68,35 +69,37 @@ function GuideLibrary({ className, hasCardBorder }: Props) {
return (
<div className={classNames(styles.container, className)}>
<div className={styles.filters}>
<label>{t('filter.title')}</label>
<TextInput
className={styles.searchInput}
icon={<SearchIcon />}
placeholder={t('filter.placeholder')}
value={keyword}
onChange={(event) => {
setKeyword(event.currentTarget.value);
}}
/>
<div className={styles.checkboxGroupContainer}>
<CheckboxGroup
className={styles.checkboxGroup}
options={allAppGuideCategories.map((category) => ({
title: `applications.guide.categories.${category}`,
value: category,
}))}
value={filterCategories}
onChange={(value) => {
const sortedValue = allAppGuideCategories.filter((category) =>
value.includes(category)
);
setFilterCategories(sortedValue);
{hasFilters && (
<div className={styles.filters}>
<label>{t('filter.title')}</label>
<TextInput
className={styles.searchInput}
icon={<SearchIcon />}
placeholder={t('filter.placeholder')}
value={keyword}
onChange={(event) => {
setKeyword(event.currentTarget.value);
}}
/>
{isM2mDisabledForCurrentPlan && <ProTag className={styles.proTag} />}
<div className={styles.checkboxGroupContainer}>
<CheckboxGroup
className={styles.checkboxGroup}
options={allAppGuideCategories.map((category) => ({
title: `applications.guide.categories.${category}`,
value: category,
}))}
value={filterCategories}
onChange={(value) => {
const sortedValue = allAppGuideCategories.filter((category) =>
value.includes(category)
);
setFilterCategories(sortedValue);
}}
/>
{isM2mDisabledForCurrentPlan && <ProTag className={styles.proTag} />}
</div>
</div>
</div>
)}
{keyword && (
<GuideGroup
className={styles.guideGroup}

2
packages/console/src/pages/Applications/components/GuideLibraryModal/index.tsx
View file

@ -30,7 +30,7 @@ function GuideLibraryModal({ isOpen, onClose }: Props) {
>
<div className={styles.container}>
<GuideHeader onClose={onClose} />
<GuideLibrary className={styles.content} />
<GuideLibrary hasFilters className={styles.content} />
<nav className={styles.actionBar}>
<span className={styles.text}>{t('do_not_need_tutorial')}</span>
<Button