grafana/public/swagger/plugins.tsx

import { createContext } from 'react';

import { CodeEditor, Monaco } from '@grafana/ui';

import { K8sNameLookup } from './K8sNameLookup';

// swagger does not have types
interface UntypedProps {
  [k: string]: any;
}

export type SchemaType = Record<string, any> | undefined;
export type ResourceInfo = {
  group: string;
  version: string;
  resource: string;
  namespaced: boolean;
};

// Use react contexts to stash settings
export const SchemaContext = createContext<SchemaType>(undefined);
export const NamespaceContext = createContext<string | undefined>(undefined);
export const ResourceContext = createContext<ResourceInfo | undefined>(undefined);

/* eslint-disable react/display-name */
export const WrappedPlugins = function () {
  return {
    wrapComponents: {
      parameterRow: (Original: React.ElementType) => (props: UntypedProps) => {
        // When the parameter name is in the path, lets make it a drop down
        const name = props.param.get('name');
        const where = props.param.get('in');
        if (name === 'name' && where === 'path') {
          const path = props.specPath.get(1).split('/');
          if (path.length > 4 && path[1] === 'apis') {
            const info: ResourceInfo = {
              group: path[2],
              version: path[3],
              resource: path[4],
              namespaced: path[4] === 'namespaces',
            };
            if (info.namespaced) {
              info.resource = path[6];
            }
            // console.log('NAME (in path)', path, info);
            return (
              <ResourceContext.Provider value={info}>
                <Original {...props} />
              </ResourceContext.Provider>
            );
          }
        }
        return <Original {...props} />;
      },

      // https://github.com/swagger-api/swagger-ui/blob/v5.17.14/src/core/components/parameters/parameters.jsx#L235
      // https://github.com/swagger-api/swagger-ui/blob/v5.17.14/src/core/plugins/oas3/components/request-body.jsx#L35
      RequestBody: (Original: React.ElementType) => (props: UntypedProps) => {
        let v: SchemaType = undefined;
        const content = props.requestBody.get('content');
        if (content) {
          let mime = content.get('application/json') ?? content.get('*/*');
          if (mime) {
            v = mime.get('schema').toJS();
          }
          console.log('RequestBody', v, mime, props);
        }
        // console.log('RequestBody PROPS', props);
        return (
          <SchemaContext.Provider value={v}>
            <Original {...props} />
          </SchemaContext.Provider>
        );
      },

      modelExample: (Original: React.ElementType) => (props: UntypedProps) => {
        if (props.isExecute && props.schema) {
          console.log('modelExample PROPS', props);
          return (
            <SchemaContext.Provider value={props.schema.toJS()}>
              <Original {...props} />
            </SchemaContext.Provider>
          );
        }
        return <Original {...props} />;
      },

      JsonSchemaForm: (Original: React.ElementType) => (props: UntypedProps) => {
        const { description, disabled, required, onChange, value } = props;
        if (!disabled && required) {
          switch (description) {
            case 'namespace': {
              return (
                <NamespaceContext.Consumer>
                  {(namespace) => {
                    if (!value && namespace) {
                      setTimeout(() => {
                        // Fake type in the value
                        onChange(namespace);
                      }, 100);
                    }
                    return <Original {...props} />;
                  }}
                </NamespaceContext.Consumer>
              );
            }
            case 'name': {
              return <K8sNameLookup onChange={onChange} value={value} Original={Original} props={props} />;
            }
          }
        }
        return <Original {...props} />;
      },

      // https://github.com/swagger-api/swagger-ui/blob/v5.17.14/src/core/plugins/oas3/components/request-body-editor.jsx
      TextArea: (Original: React.ElementType) => (props: UntypedProps) => {
        return (
          <SchemaContext.Consumer>
            {(schema) => {
              if (schema) {
                const val = props.value ?? props.defaultValue ?? '';
                //console.log('JSON TextArea', props, info);
                // Return a synthetic text area event
                const cb = (txt: string) => {
                  props.onChange({
                    target: {
                      value: txt,
                    },
                  });
                };
                console.log('CodeEditor', schema);

                return (
                  <CodeEditor
                    value={val}
                    height={300}
                    language="application/json"
                    showMiniMap={val.length > 500}
                    onBlur={cb}
                    onSave={cb}
                    onBeforeEditorMount={(monaco: Monaco) => {
                      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
                        validate: true,
                        schemas: [
                          {
                            uri: schema['$$ref'] ?? '#internal',
                            fileMatch: ['*'], // everything
                            schema: schema,
                          },
                        ],
                      });
                    }}
                  />
                );
              }
              return <Original {...props} />;
            }}
          </SchemaContext.Consumer>
        );
      },
    },
  };
};