diff --git a/public/app/features/browse-dashboards/components/DashboardsTree.test.tsx b/public/app/features/browse-dashboards/components/DashboardsTree.test.tsx index ff29ea9f9b2..20709235e0b 100644 --- a/public/app/features/browse-dashboards/components/DashboardsTree.test.tsx +++ b/public/app/features/browse-dashboards/components/DashboardsTree.test.tsx @@ -43,7 +43,6 @@ describe('browse-dashboards DashboardsTree', () => { /> ); expect(screen.queryByText(dashboard.item.title)).toBeInTheDocument(); - expect(screen.queryByText('Dashboard')).toBeInTheDocument(); expect(screen.queryByText(assertIsDefined(dashboard.item.tags)[0])).toBeInTheDocument(); expect(screen.getByTestId(selectors.pages.BrowseDashbards.table.checkbox(dashboard.item.uid))).toBeInTheDocument(); }); @@ -84,7 +83,6 @@ describe('browse-dashboards DashboardsTree', () => { /> ); expect(screen.queryByText(folder.item.title)).toBeInTheDocument(); - expect(screen.queryByText('Folder')).toBeInTheDocument(); }); it('calls onFolderClick when a folder button is clicked', async () => { @@ -125,6 +123,5 @@ describe('browse-dashboards DashboardsTree', () => { /> ); expect(screen.queryByText('No items')).toBeInTheDocument(); - expect(screen.queryByText(emptyFolderIndicator.item.kind)).not.toBeInTheDocument(); }); }); diff --git a/public/app/features/browse-dashboards/components/DashboardsTree.tsx b/public/app/features/browse-dashboards/components/DashboardsTree.tsx index 1efbf32c55d..70cd87e19ee 100644 --- a/public/app/features/browse-dashboards/components/DashboardsTree.tsx +++ b/public/app/features/browse-dashboards/components/DashboardsTree.tsx @@ -22,7 +22,6 @@ import CheckboxCell from './CheckboxCell'; import CheckboxHeaderCell from './CheckboxHeaderCell'; import { NameCell } from './NameCell'; import { TagsCell } from './TagsCell'; -import { TypeCell } from './TypeCell'; import { useCustomFlexLayout } from './customFlexTableLayout'; interface DashboardsTreeProps { @@ -85,20 +84,13 @@ export function DashboardsTree({ Cell: (props: DashboardsTreeCellProps) => , }; - const typeColumn: DashboardsTreeColumn = { - id: 'type', - width: 1, - Header: t('browse-dashboards.dashboards-tree.type-column', 'Type'), - Cell: TypeCell, - }; - const tagsColumns: DashboardsTreeColumn = { id: 'tags', width: 2, Header: t('browse-dashboards.dashboards-tree.tags-column', 'Tags'), Cell: TagsCell, }; - const columns = [canSelect && checkboxColumn, nameColumn, typeColumn, tagsColumns].filter(isTruthy); + const columns = [canSelect && checkboxColumn, nameColumn, tagsColumns].filter(isTruthy); return columns; }, [onFolderClick, canSelect]); diff --git a/public/app/features/browse-dashboards/components/NameCell.tsx b/public/app/features/browse-dashboards/components/NameCell.tsx index f4f01fd6c8e..5dfb562b2ad 100644 --- a/public/app/features/browse-dashboards/components/NameCell.tsx +++ b/public/app/features/browse-dashboards/components/NameCell.tsx @@ -1,13 +1,14 @@ import { css } from '@emotion/css'; -import React, { useEffect, useRef, useState } from 'react'; +import React from 'react'; import Skeleton from 'react-loading-skeleton'; import { CellProps } from 'react-table'; import { GrafanaTheme2 } from '@grafana/data'; import { reportInteraction } from '@grafana/runtime'; -import { IconButton, Link, Spinner, useStyles2 } from '@grafana/ui'; +import { Icon, IconButton, Link, Spinner, useStyles2 } from '@grafana/ui'; import { getSvgSize } from '@grafana/ui/src/components/Icon/utils'; import { Span } from '@grafana/ui/src/unstable'; +import { getIconForKind } from 'app/features/search/service/utils'; import { useChildrenByParentUIDState } from '../state'; import { DashboardsTreeItem } from '../types'; @@ -15,6 +16,7 @@ import { DashboardsTreeItem } from '../types'; import { Indent } from './Indent'; const CHEVRON_SIZE = 'md'; +const ICON_SIZE = 'sm'; type NameCellProps = CellProps & { onFolderClick: (uid: string, newOpenState: boolean) => void; @@ -24,17 +26,8 @@ export function NameCell({ row: { original: data }, onFolderClick }: NameCellPro const styles = useStyles2(getStyles); const { item, level, isOpen } = data; const childrenByParentUID = useChildrenByParentUIDState(); - const chevronRef = useRef(null); const isLoading = isOpen && !childrenByParentUID[item.uid]; - const [shouldRestoreFocus, setShouldRestoreFocus] = useState(false); - - // restore focus back to the original button when loading is complete - useEffect(() => { - if (!isLoading && chevronRef.current && shouldRestoreFocus) { - chevronRef.current.focus(); - setShouldRestoreFocus(false); - } - }, [isLoading, shouldRestoreFocus]); + const iconName = getIconForKind(data.item.kind, isOpen); if (item.kind === 'ui') { return ( @@ -59,43 +52,36 @@ export function NameCell({ row: { original: data }, onFolderClick }: NameCellPro {item.kind === 'folder' ? ( - <> - {isLoading ? ( - - ) : ( - { - if (!isOpen && !childrenByParentUID[item.uid]) { - setShouldRestoreFocus(true); - } - onFolderClick(item.uid, !isOpen); - }} - name={isOpen ? 'angle-down' : 'angle-right'} - tooltip={isOpen ? 'Collapse folder' : 'Expand folder'} - /> - )} - + { + onFolderClick(item.uid, !isOpen); + }} + name={isOpen ? 'angle-down' : 'angle-right'} + aria-label={isOpen ? 'Collapse folder' : 'Expand folder'} + /> ) : ( )} - - {item.url ? ( - { - reportInteraction('manage_dashboards_result_clicked'); - }} - href={item.url} - className={styles.link} - > - {item.title} - - ) : ( - item.title - )} - +
+ {isLoading ? : } + + {item.url ? ( + { + reportInteraction('manage_dashboards_result_clicked'); + }} + href={item.url} + className={styles.link} + > + {item.title} + + ) : ( + item.title + )} + +
); } @@ -114,6 +100,12 @@ const getStyles = (theme: GrafanaTheme2) => { folderButtonSpacer: css({ paddingLeft: `calc(${getSvgSize(CHEVRON_SIZE)}px + ${theme.spacing(1)})`, }), + iconNameContainer: css({ + alignItems: 'center', + display: 'flex', + gap: theme.spacing(1), + overflow: 'hidden', + }), link: css({ '&:hover': { textDecoration: 'underline', diff --git a/public/app/features/browse-dashboards/components/TypeCell.tsx b/public/app/features/browse-dashboards/components/TypeCell.tsx deleted file mode 100644 index 4d2f4f56627..00000000000 --- a/public/app/features/browse-dashboards/components/TypeCell.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; -import Skeleton from 'react-loading-skeleton'; -import { CellProps } from 'react-table'; - -import { GrafanaTheme2 } from '@grafana/data'; -import { Icon, useStyles2 } from '@grafana/ui'; -import { Span } from '@grafana/ui/src/unstable'; -import { Trans } from 'app/core/internationalization'; -import { getIconForKind } from 'app/features/search/service/utils'; - -import { DashboardsTreeItem } from '../types'; - -export function TypeCell({ row: { original: data } }: CellProps) { - const iconName = getIconForKind(data.item.kind); - const styles = useStyles2(getStyles); - - switch (data.item.kind) { - case 'dashboard': - return ( -
- - - Dashboard - -
- ); - case 'folder': - return ( -
- - - Folder - -
- ); - case 'panel': - return ( -
- - - Panel - -
- ); - case 'ui': - return data.item.uiKind === 'empty-folder' ? null : ; - default: - return null; - } -} - -const getStyles = (theme: GrafanaTheme2) => ({ - container: css({ - alignItems: 'center', - display: 'flex', - flexWrap: 'nowrap', - gap: theme.spacing(0.5), - // needed for text to truncate correctly - overflow: 'hidden', - }), -}); diff --git a/public/app/features/search/service/utils.ts b/public/app/features/search/service/utils.ts index 923b1c5295a..f1360d9b8fc 100644 --- a/public/app/features/search/service/utils.ts +++ b/public/app/features/search/service/utils.ts @@ -38,13 +38,13 @@ function delay(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } -export function getIconForKind(kind: string): IconName { +export function getIconForKind(kind: string, isOpen?: boolean): IconName { if (kind === 'dashboard') { return 'apps'; } if (kind === 'folder') { - return 'folder'; + return isOpen ? 'folder-open' : 'folder'; } return 'question-circle'; diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json index 02ed79bcf72..f0b8f8ee335 100644 --- a/public/locales/de-DE/grafana.json +++ b/public/locales/de-DE/grafana.json @@ -7,17 +7,11 @@ }, "dashboards-tree": { "name-column": "", - "tags-column": "", - "type-column": "" + "tags-column": "" }, "no-results": { "clear": "", "text": "" - }, - "type-cell": { - "dashboard": "", - "folder": "", - "panel": "" } }, "clipboard-button": { diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index e9964fe6e18..8f6d90d4589 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -7,17 +7,11 @@ }, "dashboards-tree": { "name-column": "Name", - "tags-column": "Tags", - "type-column": "Type" + "tags-column": "Tags" }, "no-results": { "clear": "Clear search and filters", "text": "No results found for your query." - }, - "type-cell": { - "dashboard": "Dashboard", - "folder": "Folder", - "panel": "Panel" } }, "clipboard-button": { diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json index e763aba19e9..ed33eb3d887 100644 --- a/public/locales/es-ES/grafana.json +++ b/public/locales/es-ES/grafana.json @@ -7,17 +7,11 @@ }, "dashboards-tree": { "name-column": "", - "tags-column": "", - "type-column": "" + "tags-column": "" }, "no-results": { "clear": "", "text": "" - }, - "type-cell": { - "dashboard": "", - "folder": "", - "panel": "" } }, "clipboard-button": { diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json index 578fa73d711..880d59b5a56 100644 --- a/public/locales/fr-FR/grafana.json +++ b/public/locales/fr-FR/grafana.json @@ -7,17 +7,11 @@ }, "dashboards-tree": { "name-column": "", - "tags-column": "", - "type-column": "" + "tags-column": "" }, "no-results": { "clear": "", "text": "" - }, - "type-cell": { - "dashboard": "", - "folder": "", - "panel": "" } }, "clipboard-button": { diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index b08b1fd9b3b..670ef64b0d7 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -7,17 +7,11 @@ }, "dashboards-tree": { "name-column": "Ńämę", - "tags-column": "Ŧäģş", - "type-column": "Ŧypę" + "tags-column": "Ŧäģş" }, "no-results": { "clear": "Cľęäř şęäřčĥ äʼnđ ƒįľŧęřş", "text": "Ńő řęşūľŧş ƒőūʼnđ ƒőř yőūř qūęřy." - }, - "type-cell": { - "dashboard": "Đäşĥþőäřđ", - "folder": "Főľđęř", - "panel": "Päʼnęľ" } }, "clipboard-button": { diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json index a8c2757a8c7..57e47dca102 100644 --- a/public/locales/zh-Hans/grafana.json +++ b/public/locales/zh-Hans/grafana.json @@ -7,17 +7,11 @@ }, "dashboards-tree": { "name-column": "", - "tags-column": "", - "type-column": "" + "tags-column": "" }, "no-results": { "clear": "", "text": "" - }, - "type-cell": { - "dashboard": "", - "folder": "", - "panel": "" } }, "clipboard-button": {