opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-30 08:12:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

NestedFolderPicker: Truncate overflowing text, fix selected state (#71444)

Browse Source 
* truncate overflowing text, fix selected state

* ensure search state is always clean when opening the overlay
This commit is contained in:
Ashley Harrison
2023-07-12 14:55:27 +01:00
committed by GitHub
parent 7e4e743a42
commit ad3d7d5e94
3 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -205,13 +205,14 @@ export const getButtonStyles = (props: StyleProps) => {
: css({ : css({
marginRight: theme.spacing(padding / 2), marginRight: theme.spacing(padding / 2),
}), }),
content: css` content: css({
display: flex; display: 'flex',
flex-direction: row; flexDirection: 'row',
align-items: center; alignItems: 'center',
white-space: nowrap; whiteSpace: 'nowrap',
height: 100%; overflow: 'hidden',
`, height: '100%',
}),
}; };
}; };

17
public/app/core/components/NestedFolderPicker/NestedFolderList.tsx
View File

@ -116,8 +116,8 @@ function Row({ index, style: virtualStyles, data }: RowProps) {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
/> />
<Indent level={level} />
<div className={styles.rowBody}> <div className={styles.rowBody}>
<Indent level={level} />
{foldersAreOpenable ? ( {foldersAreOpenable ? (
<IconButton <IconButton
size={CHEVRON_SIZE} size={CHEVRON_SIZE}
@ -150,7 +150,8 @@ const getStyles = (theme: GrafanaTheme2) => {
alignItems: 'center', alignItems: 'center',
flexGrow: 1, flexGrow: 1,
gap: theme.spacing(0.5), gap: theme.spacing(0.5),
paddingLeft: theme.spacing(1), overflow: 'hidden',
padding: theme.spacing(0, 1),
}); });
return { return {
@ -163,14 +164,6 @@ const getStyles = (theme: GrafanaTheme2) => {
paddingLeft: `calc(${getSvgSize(CHEVRON_SIZE)}px + ${theme.spacing(0.5)})`, paddingLeft: `calc(${getSvgSize(CHEVRON_SIZE)}px + ${theme.spacing(0.5)})`,
}), }),
headerRow: css({
backgroundColor: theme.colors.background.secondary,
height: ROW_HEIGHT,
lineHeight: ROW_HEIGHT + 'px',
margin: 0,
paddingLeft: theme.spacing(3.5),
}),
row: css({ row: css({
display: 'flex', display: 'flex',
position: 'relative', position: 'relative',
@ -210,6 +203,10 @@ const getStyles = (theme: GrafanaTheme2) => {
label: css({ label: css({
lineHeight: ROW_HEIGHT + 'px', lineHeight: ROW_HEIGHT + 'px',
flexGrow: 1, flexGrow: 1,
minWidth: 0,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
'&:hover': { '&:hover': {
textDecoration: 'underline', textDecoration: 'underline',
cursor: 'pointer', cursor: 'pointer',

13
public/app/core/components/NestedFolderPicker/NestedFolderPicker.tsx
View File

@ -6,6 +6,7 @@ import { useAsync } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Alert, Button, FilterInput, LoadingBar, useStyles2 } from '@grafana/ui'; import { Alert, Button, FilterInput, LoadingBar, useStyles2 } from '@grafana/ui';
import { Text } from '@grafana/ui/src/components/Text/Text';
import { skipToken, useGetFolderQuery } from 'app/features/browse-dashboards/api/browseDashboardsAPI'; import { skipToken, useGetFolderQuery } from 'app/features/browse-dashboards/api/browseDashboardsAPI';
import { listFolders, PAGE_SIZE } from 'app/features/browse-dashboards/api/services'; import { listFolders, PAGE_SIZE } from 'app/features/browse-dashboards/api/services';
import { createFlatTree } from 'app/features/browse-dashboards/state'; import { createFlatTree } from 'app/features/browse-dashboards/state';
@ -141,8 +142,8 @@ export function NestedFolderPicker({ value, onChange }: NestedFolderPickerProps)
offset: [0, 0], offset: [0, 0],
trigger: 'click', trigger: 'click',
onVisibleChange: (value: boolean) => { onVisibleChange: (value: boolean) => {
// Clear search state when closing the overlay // ensure search state is clean on opening the overlay
if (!value) { if (value) {
setSearch(''); setSearch('');
} }
setOverlayOpen(value); setOverlayOpen(value);
@ -167,7 +168,13 @@ export function NestedFolderPicker({ value, onChange }: NestedFolderPickerProps)
icon={value !== undefined ? 'folder' : undefined} icon={value !== undefined ? 'folder' : undefined}
ref={setTriggerRef} ref={setTriggerRef}
> >
{selectedFolder.isLoading ? <Skeleton width={100} /> : label ?? 'Select folder'} {selectedFolder.isLoading ? (
<Skeleton width={100} />
) : (
<Text as="span" truncate>
{label ?? 'Select folder'}
</Text>
)}
</Button> </Button>
); );
} }