fix: click labels without any filter (#111742)

* fix: click labels without any filter

* fix: typecheck
This commit is contained in:
Costa Alexoglou 2025-09-29 16:19:50 +02:00 committed by GitHub
parent 54eda07b2e
commit 911d35e17b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 29 additions and 4 deletions

View File

@ -8,6 +8,7 @@ import { CallToActionCard, EmptyState, LinkButton, TextLink } from '@grafana/ui'
import { useGetFrontendSettingsQuery } from 'app/api/clients/provisioning/v0alpha1';
import { contextSrv } from 'app/core/core';
import { useIsProvisionedInstance } from 'app/features/provisioning/hooks/useIsProvisionedInstance';
import { useSearchStateManager } from 'app/features/search/state/SearchStateManager';
import { DashboardViewItem } from 'app/features/search/types';
import { useDispatch, useSelector } from 'app/types/store';
@ -47,6 +48,8 @@ export function BrowseView({ folderUID, width, height, permissions }: BrowseView
const { data: settingsData } = useGetFrontendSettingsQuery(!provisioningEnabled || hasNoRole ? skipToken : undefined);
const rootItems = useSelector(rootItemsSelector);
const [, stateManager] = useSearchStateManager();
const excludeUIDs = useMemo(() => {
if (isProvisionedInstance || !provisioningEnabled) {
return [];
@ -82,6 +85,13 @@ export function BrowseView({ folderUID, width, height, permissions }: BrowseView
[dispatch]
);
const handleTagClick = useCallback(
(tag: string) => {
stateManager.onAddTag(tag);
},
[stateManager]
);
const isSelected = useCallback(
(item: DashboardViewItem | '$all'): SelectionState => {
if (item === '$all') {
@ -197,6 +207,7 @@ export function BrowseView({ folderUID, width, height, permissions }: BrowseView
onItemSelectionChange={handleItemSelectionChange}
isItemLoaded={isItemLoaded}
requestLoadMore={handleLoadMore}
onTagClick={handleTagClick}
/>
);
}

View File

@ -50,6 +50,7 @@ describe('browse-dashboards DashboardsTree', () => {
width={WIDTH}
height={HEIGHT}
onFolderClick={noop}
onTagClick={noop}
onItemSelectionChange={noop}
onAllSelectionChange={noop}
isItemLoaded={allItemsAreLoaded}
@ -75,6 +76,7 @@ describe('browse-dashboards DashboardsTree', () => {
width={WIDTH}
height={HEIGHT}
onFolderClick={noop}
onTagClick={noop}
onItemSelectionChange={noop}
onAllSelectionChange={noop}
isItemLoaded={allItemsAreLoaded}
@ -95,6 +97,7 @@ describe('browse-dashboards DashboardsTree', () => {
width={WIDTH}
height={HEIGHT}
onFolderClick={noop}
onTagClick={noop}
onItemSelectionChange={noop}
onAllSelectionChange={noop}
isItemLoaded={allItemsAreLoaded}
@ -114,6 +117,7 @@ describe('browse-dashboards DashboardsTree', () => {
width={WIDTH}
height={HEIGHT}
onFolderClick={noop}
onTagClick={noop}
onItemSelectionChange={noop}
onAllSelectionChange={noop}
isItemLoaded={allItemsAreLoaded}
@ -135,6 +139,7 @@ describe('browse-dashboards DashboardsTree', () => {
width={WIDTH}
height={HEIGHT}
onFolderClick={noop}
onTagClick={noop}
onItemSelectionChange={noop}
onAllSelectionChange={noop}
isItemLoaded={allItemsAreLoaded}
@ -156,6 +161,7 @@ describe('browse-dashboards DashboardsTree', () => {
width={WIDTH}
height={HEIGHT}
onFolderClick={noop}
onTagClick={noop}
onItemSelectionChange={noop}
onAllSelectionChange={noop}
isItemLoaded={allItemsAreLoaded}
@ -178,6 +184,7 @@ describe('browse-dashboards DashboardsTree', () => {
width={WIDTH}
height={HEIGHT}
onFolderClick={handler}
onTagClick={noop}
onItemSelectionChange={noop}
onAllSelectionChange={noop}
isItemLoaded={allItemsAreLoaded}
@ -199,6 +206,7 @@ describe('browse-dashboards DashboardsTree', () => {
width={WIDTH}
height={HEIGHT}
onFolderClick={noop}
onTagClick={noop}
onItemSelectionChange={noop}
onAllSelectionChange={noop}
isItemLoaded={allItemsAreLoaded}

View File

@ -35,6 +35,7 @@ interface DashboardsTreeProps {
onFolderClick: (uid: string, newOpenState: boolean) => void;
onAllSelectionChange: (newState: boolean) => void;
onItemSelectionChange: (item: DashboardViewItem, newState: boolean) => void;
onTagClick: (tag: string) => void;
isItemLoaded: (itemIndex: number) => boolean;
requestLoadMore: (folderUid: string | undefined) => void;
@ -50,6 +51,7 @@ export function DashboardsTree({
height,
isSelected,
onFolderClick,
onTagClick,
onAllSelectionChange,
onItemSelectionChange,
isItemLoaded,
@ -98,13 +100,13 @@ export function DashboardsTree({
id: 'tags',
width: 2,
Header: t('browse-dashboards.dashboards-tree.tags-column', 'Tags'),
Cell: TagsCell,
Cell: (props: DashboardsTreeCellProps) => <TagsCell {...props} onTagClick={onTagClick} />,
};
const canSelect = canSelectItems(permissions);
const columns = [canSelect && checkboxColumn, nameColumn, tagsColumns].filter(isTruthy);
return columns;
}, [onFolderClick, permissions]);
}, [onFolderClick, onTagClick, permissions]);
const table = useTable({ columns: tableColumns, data: items }, useCustomFlexLayout);
const { getTableProps, getTableBodyProps, headerGroups } = table;

View File

@ -6,7 +6,11 @@ import { TagList, useStyles2 } from '@grafana/ui';
import { DashboardsTreeItem } from '../types';
export function TagsCell({ row: { original: data } }: CellProps<DashboardsTreeItem, unknown>) {
interface TagsCellProps extends CellProps<DashboardsTreeItem, unknown> {
onTagClick?: (tag: string) => void;
}
export function TagsCell({ row: { original: data }, onTagClick }: TagsCellProps) {
const styles = useStyles2(getStyles);
const item = data.item;
@ -22,7 +26,7 @@ export function TagsCell({ row: { original: data } }: CellProps<DashboardsTreeIt
return null;
}
return <TagList className={styles.tagList} tags={item.tags} />;
return <TagList className={styles.tagList} tags={item.tags} onClick={onTagClick} />;
}
function getStyles(theme: GrafanaTheme2) {