IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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} /> <FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} />
</Stack> </Stack>
)} )}
{!items.length && <Label>No values</Label>} {items.length > 0 ? (
{items.length && ( <>
<List <List
height={height} height={height}
itemCount={items.length} itemCount={items.length}
itemSize={ITEM_HEIGHT} itemSize={ITEM_HEIGHT}
width="100%" width="100%"
className={styles.filterList} className={styles.filterList}
> >
{({ index, style }) => { {({ index, style }) => {
const option = items[index]; const option = items[index];
const { value, label } = option; const { value, label } = option;
const isChecked = values.find((s) => s.value === value) !== undefined; const isChecked = values.find((s) => s.value === value) !== undefined;
return ( return (
<div className={styles.filterListRow} style={style} title={label}> <div className={styles.filterListRow} style={style} title={label}>
<Checkbox value={isChecked} label={label} onChange={onCheckedChanged(option)} /> <Checkbox value={isChecked} label={label} onChange={onCheckedChanged(option)} />
</div> </div>
); );
}} }}
</List> </List>
)} <Stack direction="column" gap={0.25}>
{items.length && ( <div className={cx(styles.selectDivider)} />
<Stack direction="column" gap={0.25}> <div className={cx(styles.filterListRow)}>
<div className={cx(styles.selectDivider)} /> <Checkbox
<div className={cx(styles.filterListRow)}> value={selectCheckValue}
<Checkbox indeterminate={selectCheckIndeterminate}
value={selectCheckValue} label={selectCheckLabel}
indeterminate={selectCheckIndeterminate} description={selectCheckDescription}
label={selectCheckLabel} onChange={onSelectChanged}
description={selectCheckDescription} />
onChange={onSelectChanged} </div>
/> </Stack>
</div> </>
</Stack> ) : (
<Label className={styles.noValuesLabel}>No values</Label>
)} )}
</Stack> </Stack>
); );
@ -246,4 +247,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
borderTop: `1px solid ${theme.colors.border.medium}`, borderTop: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(0.5, 2), padding: theme.spacing(0.5, 2),
}), }),
noValuesLabel: css({
paddingTop: theme.spacing(1),
}),
}); });