fix: click labels without any filter (#111742)

* fix: click labels without any filter

* fix: typecheck

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}
     />
   );
 }

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}

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) => <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;

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