public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Grafana UI: Make DashboardPicker focusable (#104242)

Browse Source
This commit is contained in:
Juan Cabanas
2025-04-24 11:27:04 -03:00
committed by GitHub
parent 08205d64d1
commit 20b50e5f16
3 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/Select/SelectBase.tsx
+5 -2
View File
@@ -1,5 +1,5 @@
import { isArray, negate } from 'lodash';
import { ComponentProps, useCallback, useEffect, useRef, useState } from 'react';
import { ComponentProps, useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';
import * as React from 'react';
import {
default as ReactSelect,
@@ -152,16 +152,19 @@ export function SelectBase<T, Rest = {}>({
isValidNewOption,
formatOptionLabel,
hideSelectedOptions,
selectRef,
...rest
}: SelectBaseProps<T> & Rest) {
const theme = useTheme2();
const styles = getSelectStyles(theme);
const reactSelectRef = useRef<{ controlRef: HTMLElement }>(null);
const reactSelectRef = useRef<HTMLElement & { controlRef: HTMLElement }>(null);
const [closeToBottom, setCloseToBottom] = useState<boolean>(false);
const selectStyles = useCustomSelectStyles(theme, width);
const [hasInputValue, setHasInputValue] = useState<boolean>(!!inputValue);
useImperativeHandle(selectRef, () => reactSelectRef.current!, []);
// Infer the menu position for asynchronously loaded options. menuPlacement="auto" doesn't work when the menu is
// automatically opened when the component is created (it happens in SegmentSelect by setting menuIsOpen={true}).
// We can remove this workaround when the bug in react-select is fixed: https://github.com/JedWatson/react-select/issues/4936
packages/grafana-ui/src/components/Select/types.ts
+2
View File
@@ -116,6 +116,8 @@ export interface SelectCommonProps<T> {
loadingMessage?: string;
/** Disables wrapping of multi value values when closed */
noMultiValueWrap?: boolean;
/** Use a custom ref because generic component as output of React.forwardRef is not directly possible */
selectRef?: React.Ref<HTMLElement>;
}
export interface SelectAsyncProps<T> {
public/app/core/components/Select/DashboardPicker.tsx
+57 -60
View File
@@ -1,5 +1,5 @@
import debounce from 'debounce-promise';
import { useCallback, useEffect, useState } from 'react';
import { forwardRef, useCallback, useEffect, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { AsyncSelectProps, AsyncSelect } from '@grafana/ui';
@@ -38,72 +38,69 @@ async function findDashboards(query = '') {
const getDashboards = debounce(findDashboards, 250, { leading: true });
// TODO: this component should provide a way to apply different filters to the search APIs
export const DashboardPicker = ({
value,
onChange,
placeholder = 'Select dashboard',
noOptionsMessage = 'No dashboards found',
...props
}: Props) => {
const [current, setCurrent] = useState<SelectableValue<DashboardPickerDTO>>();
export const DashboardPicker = forwardRef<HTMLElement, Props>(
({ value, onChange, placeholder = 'Select dashboard', noOptionsMessage = 'No dashboards found', ...props }, ref) => {
const [current, setCurrent] = useState<SelectableValue<DashboardPickerDTO>>();
// This is required because the async select does not match the raw uid value
// We can not use a simple Select because the dashboard search should not return *everything*
useEffect(() => {
if (!value || value === current?.value?.uid) {
return;
}
// This is required because the async select does not match the raw uid value
// We can not use a simple Select because the dashboard search should not return *everything*
useEffect(() => {
if (!value || value === current?.value?.uid) {
return;
}
(async () => {
// value was manually changed from outside or we are rendering for the first time.
// We need to fetch dashboard information.
const dto = await getDashboardAPI().getDashboardDTO(value, undefined);
(async () => {
// value was manually changed from outside or we are rendering for the first time.
// We need to fetch dashboard information.
const dto = await getDashboardAPI().getDashboardDTO(value, undefined);
if (isDashboardV2Resource(dto)) {
setCurrent({
value: {
uid: dto.metadata.name,
title: dto.spec.title,
folderTitle: dto.metadata.annotations?.[AnnoKeyFolderTitle],
folderUid: dto.metadata.annotations?.[AnnoKeyFolder],
},
label: formatLabel(dto.metadata.annotations?.[AnnoKeyFolder], dto.spec.title),
});
} else {
if (dto.dashboard) {
if (isDashboardV2Resource(dto)) {
setCurrent({
value: {
uid: dto.dashboard.uid,
title: dto.dashboard.title,
folderTitle: dto.meta.folderTitle,
folderUid: dto.meta.folderUid,
uid: dto.metadata.name,
title: dto.spec.title,
folderTitle: dto.metadata.annotations?.[AnnoKeyFolderTitle],
folderUid: dto.metadata.annotations?.[AnnoKeyFolder],
},
label: formatLabel(dto.meta?.folderTitle, dto.dashboard.title),
label: formatLabel(dto.metadata.annotations?.[AnnoKeyFolder], dto.spec.title),
});
} else {
if (dto.dashboard) {
setCurrent({
value: {
uid: dto.dashboard.uid,
title: dto.dashboard.title,
folderTitle: dto.meta.folderTitle,
folderUid: dto.meta.folderUid,
},
label: formatLabel(dto.meta?.folderTitle, dto.dashboard.title),
});
}
}
}
})();
// we don't need to rerun this effect every time `current` changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
})();
// we don't need to rerun this effect every time `current` changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
const onPicked = useCallback(
(sel: SelectableValue<DashboardPickerDTO>) => {
setCurrent(sel);
onChange?.(sel?.value);
},
[onChange, setCurrent]
);
const onPicked = useCallback(
(sel: SelectableValue<DashboardPickerDTO>) => {
setCurrent(sel);
onChange?.(sel?.value);
},
[onChange, setCurrent]
);
return (
<AsyncSelect
loadOptions={getDashboards}
onChange={onPicked}
placeholder={placeholder}
noOptionsMessage={noOptionsMessage}
value={current}
defaultOptions={true}
{...props}
/>
);
};
return (
<AsyncSelect
loadOptions={getDashboards}
onChange={onPicked}
placeholder={placeholder}
noOptionsMessage={noOptionsMessage}
value={current}
defaultOptions={true}
{...props}
selectRef={ref}
/>
);
}
);