grafana/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx

import { css } from '@emotion/css';
import { FormEvent, useState, ChangeEvent } from 'react';

import { DataFrameSchema, FieldSchema, GrafanaTheme2 } from '@grafana/data';
import { useStyles2, TextArea, InlineField, Input, FieldSet, InlineSwitch } from '@grafana/ui';

type Config = Record<string, any>;

interface SchemaFormProps {
  config: Config;
  schema: DataFrameSchema;
  onChange: (config: Config) => void;
}

const renderInput = (field: FieldSchema, onChange: SchemaFormProps['onChange'], config: SchemaFormProps['config']) => {
  switch (field.type) {
    case 'number':
      return (
        <Input
          type="number"
          defaultValue={config?.[field.name]}
          onChange={(e: FormEvent<HTMLInputElement>) => {
            const newValue = e.currentTarget.valueAsNumber;
            onChange({ ...config, [field.name]: newValue });
          }}
        />
      );
    case 'boolean':
      return (
        <InlineSwitch
          value={config?.[field.name] ?? true}
          onChange={() => {
            onChange({ ...config, [field.name]: !config[field.name] });
          }}
        />
      );
    default:
      return (
        <Input
          type="string"
          value={config?.[field.name]}
          onChange={(e: ChangeEvent<HTMLInputElement>) => {
            const newValue = e.target.value;
            onChange({ ...config, [field.name]: newValue });
          }}
        />
      );
  }
};

const getStyles = (theme: GrafanaTheme2) => {
  return {
    jsonView: css({
      marginBottom: theme.spacing(1),
    }),
  };
};

export const SimulationSchemaForm = ({ config, schema, onChange }: SchemaFormProps) => {
  const [jsonView, setJsonView] = useState<boolean>(false);

  const styles = useStyles2(getStyles);

  const onUpdateTextArea = (event: FormEvent<HTMLTextAreaElement>) => {
    const element = event.currentTarget;
    onChange(JSON.parse(element.value));
  };

  return (
    <FieldSet label="Config">
      <InlineSwitch
        className={styles.jsonView}
        label="JSON View"
        showLabel
        value={jsonView}
        onChange={() => setJsonView(!jsonView)}
      />
      {jsonView ? (
        <TextArea defaultValue={JSON.stringify(config, null, 2)} rows={7} onChange={onUpdateTextArea} />
      ) : (
        <>
          {schema.fields.map((field) => (
            <InlineField label={field.name} key={field.name} labelWidth={14}>
              {renderInput(field, onChange, config)}
            </InlineField>
          ))}
        </>
      )}
    </FieldSet>
  );
};