export function SchemaEditor()

in libs/designer-ui/src/lib/schemaeditor/index.tsx [41:171]
120 lines of code
5 McCabe index (conditional complexity)

export function SchemaEditor({ readonly, label, initialValue, onChange, onFocus }: SchemaEditorProps): JSX.Element {
  const intl = useIntl();
  const [errorMessage, setErrorMessage] = useState('');
  const [modalOpen, setModalOpen] = useState(false);
  const [getCurrentValue, setCurrentValue] = useFunctionalState(getInitialValue(initialValue));
  const [editorHeight, setEditorHeight] = useState(getEditorHeight(getInitialValue(initialValue)));
  const [samplePayload, setSamplePayload] = useState<string | undefined>('');
  const modalEditorRef = useRef<editor.IStandaloneCodeEditor | null>(null);

  const getStyles = (): Partial<IDialogStyles> => {
    return {
      main: {
        display: 'inline-block',
        width: '800px',
      },
    };
  };

  const schemaEditorLabel = intl.formatMessage({
    defaultMessage: 'Use sample payload to generate schema',
    id: 'DGMwU4',
    description: 'Button Label for allowing users to generate from schema',
  });

  const DONE_TEXT = intl.formatMessage({
    defaultMessage: 'Done',
    id: 'SvQyvs',
    description: 'confirmation text',
  });

  const SCHEMA_EDITOR_SAMPLE_PAYLOAD_DESCRIPTION = intl.formatMessage({
    defaultMessage: 'Enter or paste a sample JSON payload.',
    id: 'h1lQDa',
    description: 'Modal Title text',
  });
  const handleContentChanged = (e: EditorContentChangedEventArgs): void => {
    setErrorMessage('');
    if (e.value !== undefined) {
      setCurrentValue(e.value);
      setEditorHeight(getEditorHeight(e.value));
    }
  };

  const handleBlur = (): void => {
    const newValue = [createLiteralValueSegment(getCurrentValue())];
    if (notEqual(newValue, initialValue)) {
      onChange?.({ value: [createLiteralValueSegment(getCurrentValue())] });
    }
  };

  const handleFocus = (): void => {
    onFocus?.();
  };

  const openModal = () => {
    setModalOpen(true);
    setSamplePayload('');
    setErrorMessage('');
  };

  const handleConfirm = () => {
    if (samplePayload) {
      try {
        const jsonSchema = generateSchemaFromJsonString(samplePayload);
        const stringifiedJsonSchema = formatValue(JSON.stringify(jsonSchema, null, 4));
        setCurrentValue(stringifiedJsonSchema);
        setEditorHeight(getEditorHeight(stringifiedJsonSchema));
        onChange?.({ value: [createLiteralValueSegment(stringifiedJsonSchema)] });
      } catch (ex) {
        const error = intl.formatMessage({
          defaultMessage: 'Unable to generate schema',
          id: 'jgOaTX',
          description: 'Error Message on generating schema based on payload',
        });
        setErrorMessage(error);
      }
    }
    setModalOpen(false);
  };

  const closeModal = () => {
    setErrorMessage('');
    setModalOpen(false);
  };

  const handleSamplePayloadChanged = (e: EditorContentChangedEventArgs): void => {
    setSamplePayload(e.value);
  };

  return (
    <div className="msla-schema-editor-body">
      <MonacoEditor
        label={label}
        height={editorHeight}
        value={getCurrentValue()}
        fontSize={13}
        readOnly={readonly}
        lineNumbers="off"
        language={EditorLanguage.json}
        onContentChanged={handleContentChanged}
        onFocus={handleFocus}
        onBlur={handleBlur}
        contextMenu={true}
      />
      <div className="msla-schema-editor-operations">
        <ActionButton className="msla-schema-card-button" disabled={readonly} styles={buttonStyles} onClick={openModal}>
          {schemaEditorLabel}
        </ActionButton>
        <div className="msla-schema-editor-error-message">{errorMessage}</div>
      </div>
      <ModalDialog
        confirmText={DONE_TEXT}
        getStyles={getStyles}
        isOpen={modalOpen}
        title={SCHEMA_EDITOR_SAMPLE_PAYLOAD_DESCRIPTION}
        onConfirm={handleConfirm}
        onDismiss={closeModal}
      >
        <div className="msla-schema-editor-modal-body">
          <MonacoEditor
            ref={modalEditorRef}
            fontSize={13}
            language={EditorLanguage.json}
            onContentChanged={handleSamplePayloadChanged}
            defaultValue={''}
          />
        </div>
      </ModalDialog>
    </div>
  );
}