grafana/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx

import { css, cx } from '@emotion/css';
import { useEffect, useMemo, useState } from 'react';

import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, Segment, useStyles2 } from '@grafana/ui';

import { FuncDefs } from '../gfunc';
import { actions } from '../state/actions';
import { useDispatch } from '../state/context';

import { mapFuncDefsToSelectables } from './helpers';

type Props = {
  funcDefs: FuncDefs;
};

export function AddGraphiteFunction({ funcDefs }: Props) {
  const dispatch = useDispatch();
  const [value, setValue] = useState<SelectableValue<string> | undefined>(undefined);
  const styles = useStyles2(getStyles);

  const options = useMemo(() => mapFuncDefsToSelectables(funcDefs), [funcDefs]);

  // Note: actions.addFunction will add a component that will have a dropdown or input in auto-focus
  // (the first param of the function). This auto-focus will cause onBlur() on AddGraphiteFunction's
  // Segment component and trigger onChange once again. (why? we call onChange if the user dismissed
  // the dropdown, see: SegmentSelect.onCloseMenu for more details). To avoid it we need to wait for
  // the Segment to disappear first (hence useEffect) and then dispatch the action that will add new
  // components.
  useEffect(() => {
    if (value?.value !== undefined) {
      dispatch(actions.addFunction({ name: value.value }));
      setValue(undefined);
    }
  }, [value, dispatch]);

  return (
    <div>
      <Segment
        Component={
          <Button icon="plus" variant="secondary" className={cx(styles.button)} aria-label="Add new function" />
        }
        options={options}
        onChange={setValue}
        inputMinWidth={150}
      />
    </div>
  );
}

function getStyles(theme: GrafanaTheme2) {
  return {
    button: css({
      marginRight: theme.spacing(0.5),
    }),
  };
}