opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-30 23:22:16 +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({
marginRight: theme.spacing(padding / 2),
}),
content: css`
display: flex;
flex-direction: row;
align-items: center;
white-space: nowrap;
height: 100%;
`,
content: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
whiteSpace: 'nowrap',
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}
/>
<Indent level={level} />
<div className={styles.rowBody}>
<Indent level={level} />
{foldersAreOpenable ? (
<IconButton
size={CHEVRON_SIZE}
@ -150,7 +150,8 @@ const getStyles = (theme: GrafanaTheme2) => {
alignItems: 'center',
flexGrow: 1,
gap: theme.spacing(0.5),
paddingLeft: theme.spacing(1),
overflow: 'hidden',
padding: theme.spacing(0, 1),
});
return {
@ -163,14 +164,6 @@ const getStyles = (theme: GrafanaTheme2) => {
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({
display: 'flex',
position: 'relative',
@ -210,6 +203,10 @@ const getStyles = (theme: GrafanaTheme2) => {
label: css({
lineHeight: ROW_HEIGHT + 'px',
flexGrow: 1,
minWidth: 0,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
'&:hover': {
textDecoration: 'underline',
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 { 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 { listFolders, PAGE_SIZE } from 'app/features/browse-dashboards/api/services';
import { createFlatTree } from 'app/features/browse-dashboards/state';
@ -141,8 +142,8 @@ export function NestedFolderPicker({ value, onChange }: NestedFolderPickerProps)
offset: [0, 0],
trigger: 'click',
onVisibleChange: (value: boolean) => {
// Clear search state when closing the overlay
if (!value) {
// ensure search state is clean on opening the overlay
if (value) {
setSearch('');
}
setOverlayOpen(value);
@ -167,7 +168,13 @@ export function NestedFolderPicker({ value, onChange }: NestedFolderPickerProps)
icon={value !== undefined ? 'folder' : undefined}
ref={setTriggerRef}
>
{selectedFolder.isLoading ? <Skeleton width={100} /> : label ?? 'Select folder'}
{selectedFolder.isLoading ? (
<Skeleton width={100} />
) : (
<Text as="span" truncate>
{label ?? 'Select folder'}
</Text>
)}
</Button>
);
}