grafana/public/app/plugins/panel/debug/StateView.tsx

import { FormEvent } from 'react';

import { PanelOptionsEditorProps, PanelProps } from '@grafana/data';
import { Trans, t } from '@grafana/i18n';
import { Field, Input, usePanelContext } from '@grafana/ui';

import { Options } from './panelcfg.gen';

export function StateView(props: PanelProps<Options>) {
  const context = usePanelContext();

  const onChangeName = (e: FormEvent<HTMLInputElement>) => {
    context.onInstanceStateChange!({
      name: e.currentTarget.value,
    });
  };

  return (
    <>
      <Field label={t('debug.state-view.label-state-name', 'State name')}>
        <Input value={context.instanceState?.name ?? ''} onChange={onChangeName} />
      </Field>
    </>
  );
}

export function StateViewEditor({ value, context, onChange, item }: PanelOptionsEditorProps<string>) {
  return (
    <div>
      <Trans i18nKey="debug.state-view.current-value" values={{ currentValue: context.instanceState?.name }}>
        Current value: {'{{currentValue}}'}{' '}
      </Trans>
    </div>
  );
}