diff --git a/public/app/features/browse-dashboards/components/BrowseView.tsx b/public/app/features/browse-dashboards/components/BrowseView.tsx index b1bbc45ba3d..1c98b2d440a 100644 --- a/public/app/features/browse-dashboards/components/BrowseView.tsx +++ b/public/app/features/browse-dashboards/components/BrowseView.tsx @@ -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} /> ); } diff --git a/public/app/features/browse-dashboards/components/DashboardsTree.test.tsx b/public/app/features/browse-dashboards/components/DashboardsTree.test.tsx index 3e1b597405a..7ad0097f442 100644 --- a/public/app/features/browse-dashboards/components/DashboardsTree.test.tsx +++ b/public/app/features/browse-dashboards/components/DashboardsTree.test.tsx @@ -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} diff --git a/public/app/features/browse-dashboards/components/DashboardsTree.tsx b/public/app/features/browse-dashboards/components/DashboardsTree.tsx index 4e15552f7d1..a7999919db9 100644 --- a/public/app/features/browse-dashboards/components/DashboardsTree.tsx +++ b/public/app/features/browse-dashboards/components/DashboardsTree.tsx @@ -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) => , }; 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; diff --git a/public/app/features/browse-dashboards/components/TagsCell.tsx b/public/app/features/browse-dashboards/components/TagsCell.tsx index 7ac29e08008..f5f15032caf 100644 --- a/public/app/features/browse-dashboards/components/TagsCell.tsx +++ b/public/app/features/browse-dashboards/components/TagsCell.tsx @@ -6,7 +6,11 @@ import { TagList, useStyles2 } from '@grafana/ui'; import { DashboardsTreeItem } from '../types'; -export function TagsCell({ row: { original: data } }: CellProps) { +interface TagsCellProps extends CellProps { + 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; + return ; } function getStyles(theme: GrafanaTheme2) {