mirror of https://github.com/grafana/grafana.git
fix: click labels without any filter (#111742)
* fix: click labels without any filter * fix: typecheck
This commit is contained in:
parent
54eda07b2e
commit
911d35e17b
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue