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 { .guideGroup {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 1876px;
container-type: inline-size; container-type: inline-size;
label { 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 = { type Props = {
className?: string; className?: string;
hasCardBorder?: boolean; 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 { t } = useTranslation(undefined, { keyPrefix: 'admin_console.applications.guide' });
const { navigate } = useTenantPathname(); const { navigate } = useTenantPathname();
const [keyword, setKeyword] = useState<string>(''); const [keyword, setKeyword] = useState<string>('');
@ -68,35 +69,37 @@ function GuideLibrary({ className, hasCardBorder }: Props) {
return ( return (
<div className={classNames(styles.container, className)}> <div className={classNames(styles.container, className)}>
<div className={styles.filters}> {hasFilters && (
<label>{t('filter.title')}</label> <div className={styles.filters}>
<TextInput <label>{t('filter.title')}</label>
className={styles.searchInput} <TextInput
icon={<SearchIcon />} className={styles.searchInput}
placeholder={t('filter.placeholder')} icon={<SearchIcon />}
value={keyword} placeholder={t('filter.placeholder')}
onChange={(event) => { value={keyword}
setKeyword(event.currentTarget.value); 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);
}} }}
/> />
{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>
</div> )}
{keyword && ( {keyword && (
<GuideGroup <GuideGroup
className={styles.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}> <div className={styles.container}>
<GuideHeader onClose={onClose} /> <GuideHeader onClose={onClose} />
<GuideLibrary className={styles.content} /> <GuideLibrary hasFilters className={styles.content} />
<nav className={styles.actionBar}> <nav className={styles.actionBar}>
<span className={styles.text}>{t('do_not_need_tutorial')}</span> <span className={styles.text}>{t('do_not_need_tutorial')}</span>
<Button <Button