Na}{

File Content: `MetricSelect.tsx`

import { flatten } from 'lodash';
import React, { useCallback, useMemo } from 'react';

import { SelectableValue } from '@grafana/data';
import { Select } from '@grafana/ui';
import { Variable } from 'app/types/templates';

export interface Props {
  onChange: (value: string | undefined) => void;
  options: Array<SelectableValue<string>>;
  isSearchable: boolean;
  value: string;
  placeholder?: string;
  className?: string;
  variables?: Variable[];
}

export const MetricSelect = (props: Props) => {
  const { value, placeholder, className, isSearchable, onChange } = props;
  const options = useSelectOptions(props);
  const selected = useSelectedOption(options, value);
  const onChangeValue = useCallback((selectable: SelectableValue<string>) => onChange(selectable.value), [onChange]);

  return (
    <Select
      className={className}
      isMulti={false}
      isClearable={false}
      backspaceRemovesValue={false}
      onChange={onChangeValue}
      options={options}
      isSearchable={isSearchable}
      maxMenuHeight={500}
      placeholder={placeholder}
      noOptionsMessage="No options found"
      value={selected}
    />
  );
};

const useSelectOptions = ({ variables = [], options }: Props): Array<SelectableValue<string>> => {
  return useMemo(() => {
    if (!Array.isArray(variables) || variables.length === 0) {
      return options;
    }

    return [
      {
        label: 'Template Variables',
        options: variables.map(({ name }) => ({
          label: `$${name}`,
          value: `$${name}`,
        })),
      },
      ...options,
    ];
  }, [variables, options]);
};

const useSelectedOption = (options: Array<SelectableValue<string>>, value: string): SelectableValue<string> => {
  return useMemo(() => {
    const allOptions = options.every((o) => o.options) ? flatten(options.map((o) => o.options)) : options;
    return allOptions.find((option) => option.value === value);
  }, [options, value]);
};

Name	Size	Permission
ReadonlyFolderPicker	---	0755
DashboardPicker.tsx	3195 bytes	0644
FolderPicker.tsx	2046 bytes	0644
MetricSelect.test.tsx	1345 bytes	0644
MetricSelect.tsx	1955 bytes	0644
OldFolderPicker.test.tsx	7626 bytes	0644
OldFolderPicker.tsx	12322 bytes	0644
OrgPicker.test.tsx	1270 bytes	0644
OrgPicker.tsx	1730 bytes	0644
ServiceAccountPicker.tsx	2062 bytes	0644
SortPicker.tsx	1685 bytes	0644
TeamPicker.test.tsx	536 bytes	0644
TeamPicker.tsx	2323 bytes	0644
UserPicker.test.tsx	446 bytes	0644
UserPicker.tsx	1971 bytes	0644

File Content: MetricSelect.tsx

File Content: `MetricSelect.tsx`