IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-03 12:11:09 -06:00
Code Issues Packages Projects Releases Wiki Activity

FilterList: Improve "No values" display (#90032)

Browse Source 
* FilterList: Improve "No values" display

* Switch to ternary
This commit is contained in:
Alex Khomenko 2024-07-08 13:27:34 +03:00 committed by GitHub
parent 675457fb10
commit c1ec327b74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/grafana-ui/src/components/Table/FilterList.tsx
View File

@ -184,41 +184,42 @@ export const FilterList = ({
<FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} />
</Stack>
)}
{!items.length && <Label>No values</Label>}
{items.length && (
<List
height={height}
itemCount={items.length}
itemSize={ITEM_HEIGHT}
width="100%"
className={styles.filterList}
>
{({ index, style }) => {
const option = items[index];
const { value, label } = option;
const isChecked = values.find((s) => s.value === value) !== undefined;
{items.length > 0 ? (
<>
<List
height={height}
itemCount={items.length}
itemSize={ITEM_HEIGHT}
width="100%"
className={styles.filterList}
>
{({ index, style }) => {
const option = items[index];
const { value, label } = option;
const isChecked = values.find((s) => s.value === value) !== undefined;
return (
<div className={styles.filterListRow} style={style} title={label}>
<Checkbox value={isChecked} label={label} onChange={onCheckedChanged(option)} />
</div>
);
}}
</List>
)}
{items.length && (
<Stack direction="column" gap={0.25}>
<div className={cx(styles.selectDivider)} />
<div className={cx(styles.filterListRow)}>
<Checkbox
value={selectCheckValue}
indeterminate={selectCheckIndeterminate}
label={selectCheckLabel}
description={selectCheckDescription}
onChange={onSelectChanged}
/>
</div>
</Stack>
return (
<div className={styles.filterListRow} style={style} title={label}>
<Checkbox value={isChecked} label={label} onChange={onCheckedChanged(option)} />
</div>
);
}}
</List>
<Stack direction="column" gap={0.25}>
<div className={cx(styles.selectDivider)} />
<div className={cx(styles.filterListRow)}>
<Checkbox
value={selectCheckValue}
indeterminate={selectCheckIndeterminate}
label={selectCheckLabel}
description={selectCheckDescription}
onChange={onSelectChanged}
/>
</div>
</Stack>
</>
) : (
<Label className={styles.noValuesLabel}>No values</Label>
)}
</Stack>
);
@ -246,4 +247,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
borderTop: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(0.5, 2),
}),
noValuesLabel: css({
paddingTop: theme.spacing(1),
}),
});