diff --git a/packages/grafana-prometheus/src/gcopypaste/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-prometheus/src/gcopypaste/packages/grafana-ui/src/components/Select/SelectBase.tsx deleted file mode 100644 index 8ee9578e5c2..00000000000 --- a/packages/grafana-prometheus/src/gcopypaste/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ /dev/null @@ -1,129 +0,0 @@ -// Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/packages/grafana-ui/src/components/Select/SelectBase.tsx -import { cx } from '@emotion/css'; -import { max } from 'lodash'; -import { RefCallback } from 'react'; -import * as React from 'react'; -import { MenuListProps } from 'react-select'; -import { FixedSizeList as List } from 'react-window'; - -import { SelectableValue, toIconName } from '@grafana/data'; -import { selectors } from '@grafana/e2e-selectors'; -import { CustomScrollbar, Icon, getSelectStyles, useTheme2 } from '@grafana/ui'; - -interface SelectMenuProps { - maxHeight: number; - innerRef: RefCallback; - innerProps: {}; -} - -export const SelectMenu = ({ children, maxHeight, innerRef, innerProps }: React.PropsWithChildren) => { - const theme = useTheme2(); - const styles = getSelectStyles(theme); - - return ( -
- - {children} - -
- ); -}; - -SelectMenu.displayName = 'SelectMenu'; - -const VIRTUAL_LIST_ITEM_HEIGHT = 37; -const VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 7; - -// A virtualized version of the SelectMenu, descriptions for SelectableValue options not supported since those are of a variable height. -// -// To support the virtualized list we have to "guess" the width of the menu container based on the longest available option. -// the reason for this is because all of the options will be positioned absolute, this takes them out of the document and no space -// is created for them, thus the container can't grow to accomodate. -// -// VIRTUAL_LIST_ITEM_HEIGHT and WIDTH_ESTIMATE_MULTIPLIER are both magic numbers. -// Some characters (such as emojis and other unicode characters) may consist of multiple code points in which case the width would be inaccurate (but larger than needed). -export const VirtualizedSelectMenu = ({ children, maxHeight, options, getValue }: MenuListProps) => { - const theme = useTheme2(); - const styles = getSelectStyles(theme); - const [value] = getValue(); - - const valueIndex = value ? options.findIndex((option: SelectableValue) => option.value === value.value) : 0; - const initialOffset = valueIndex * VIRTUAL_LIST_ITEM_HEIGHT; - - if (!Array.isArray(children)) { - return null; - } - - const longestOption = max(options.map((option) => option.label?.length)) ?? 0; - const widthEstimate = longestOption * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER; - const heightEstimate = Math.min(options.length * VIRTUAL_LIST_ITEM_HEIGHT, maxHeight); - - return ( - - {({ index, style }) =>
{children[index]}
} -
- ); -}; - -VirtualizedSelectMenu.displayName = 'VirtualizedSelectMenu'; - -interface SelectMenuOptionProps { - isDisabled: boolean; - isFocused: boolean; - isSelected: boolean; - innerProps: JSX.IntrinsicElements['div']; - innerRef: RefCallback; - renderOptionLabel?: (value: SelectableValue) => JSX.Element; - data: SelectableValue; -} - -export const SelectMenuOptions = ({ - children, - data, - innerProps, - innerRef, - isFocused, - isSelected, - renderOptionLabel, -}: React.PropsWithChildren>) => { - const theme = useTheme2(); - const styles = getSelectStyles(theme); - const icon = data.icon ? toIconName(data.icon) : undefined; - // We are removing onMouseMove and onMouseOver from innerProps because they cause the whole - // list to re-render everytime the user hovers over an option. This is a performance issue. - // See https://github.com/JedWatson/react-select/issues/3128#issuecomment-451936743 - const { onMouseMove, onMouseOver, ...rest } = innerProps; - - return ( -
- {icon && } - {data.imgUrl && {data.label} -
- {renderOptionLabel ? renderOptionLabel(data) : children} - {data.description &&
{data.description}
} - {data.component && } -
-
- ); -}; - -SelectMenuOptions.displayName = 'SelectMenuOptions'; diff --git a/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx b/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx index 95301e8075f..bdfdd52f3f0 100644 --- a/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx +++ b/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx @@ -18,12 +18,12 @@ import { Icon, InlineField, InlineFieldRow, + SelectMenuOptions, useStyles2, useTheme2, } from '@grafana/ui'; import { PrometheusDatasource } from '../../datasource'; -import { SelectMenuOptions } from '../../gcopypaste/packages/grafana-ui/src/components/Select/SelectBase'; import { truncateResult } from '../../language_utils'; import { regexifyLabelValuesQueryString } from '../parsingUtils'; import { QueryBuilderLabelFilter } from '../shared/types';