...

import { ChangeEvent, useCallback, useEffect, useState } from 'react';

import { t } from '@grafana/i18n';
import { InlineField, Input } from '@grafana/ui';

import DataSource from '../../datasource';
import { migrateStringQueriesToObjectQueries } from '../../grafanaTemplateVariableFns';
import { AzureMonitorQuery, AzureQueryType } from '../../types/query';

const GrafanaTemplateVariableFnInput = ({
  query,
  updateQuery,
  datasource,
}: {
  query: AzureMonitorQuery;
  updateQuery: (val: AzureMonitorQuery) => void;
  datasource: DataSource;
}) => {
  const [inputVal, setInputVal] = useState('');

useEffect(() => {
    setInputVal(query.grafanaTemplateVariableFn?.rawQuery || '');
  }, [query.grafanaTemplateVariableFn?.rawQuery]);

const onChange = (event: ChangeEvent<HTMLInputElement>) => {
    setInputVal(event.target.value);
  };

return (
    <InlineField
      label={t(
        'components.grafana-template-variable-fn-input.label-grafana-template-variable',
        'Grafana template variable function'
      )}
    >
      <Input
        placeholder={t(
          'components.grafana-template-variable-fn-input.placeholder-grafana-template-variable',
          'Type a grafana template variable function, e.g. {{example}}',
          { example: 'Subscriptions()' }
        )}
        value={inputVal}
        onChange={onChange}
        onBlur={() => onRunQuery(inputVal)}
      />
    </InlineField>
  );
};

export default GrafanaTemplateVariableFnInput;

.	Edit
..	Edit
GrafanaTemplateVariableFn.tsx	Edit
VariableEditor.test.tsx	Edit
VariableEditor.tsx	Edit