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) {