@finos/legend-application-studio 13.0.0

package/src/components/editor/edit-panel/external-format-editor/SchemaSetElementEditor.tsx

@@ -0,0 +1,583 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import {
+  clsx,
+  ContextMenu,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+  LockIcon,
+  PlusIcon,
+  RefreshIcon,
+  PanelLoadingIndicator,
+  UploadIcon,
+  Dialog,
+  TimesIcon,
+  BlankPanelContent,
+  MenuContent,
+  MenuContentItem,
+} from '@finos/legend-art';
+import {
+  type GenerationProperty,
+  ExternalFormatSchema as Schema,
+} from '@finos/legend-graph';
+import { flowResult } from 'mobx';
+import { useMemo } from 'react';
+import {
+  SchemaSetEditorState,
+  SCHEMA_SET_TAB_TYPE,
+} from '../../../../stores/editor-state/element-editor-state/external-format/SchemaSetEditorState.js';
+import { EDITOR_LANGUAGE } from '@finos/legend-application';
+import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
+import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
+import {
+  debounce,
+  guaranteeNonNullable,
+  prettyCONSTName,
+} from '@finos/legend-shared';
+import { GenerationPropertyEditor } from '../element-generation-editor/FileGenerationEditor.js';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import {
+  externalFormat_schemaSet_addSchema,
+  externalFormat_schemaSet_deleteSchema,
+  externalFormat_schema_setContent,
+  externalFormat_schema_setId,
+  externalFormat_schema_setLocation,
+} from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
+
+const SchemaLoader = observer(
+  (props: { schemaSetEditorState: SchemaSetEditorState }) => {
+    const { schemaSetEditorState } = props;
+    const importState = schemaSetEditorState.importSchemaContentState;
+    const onClose = (): void => importState.closeModal();
+    const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      const fileList = event.target.files;
+      if (fileList) {
+        importState.setFiles(Array.from(fileList));
+      }
+    };
+    const importSchemas = (): void => {
+      if (importState.files) {
+        importState.importSchemas(importState.files);
+      }
+    };
+    return (
+      <Dialog
+        onClose={onClose}
+        open={importState.importSchemaModal}
+        TransitionProps={{
+          appear: false, // disable transition
+        }}
+      >
+        <div className="modal modal--dark modal--scrollable patch-loader">
+          <div className="modal__header">
+            <div className="modal__title">
+              <div className="modal__title__label">Schema Content Loader</div>
+            </div>
+          </div>
+          <div className="modal__body">
+            <PanelLoadingIndicator
+              isLoading={importState.loadingSchemaContentState.isInProgress}
+            />
+            <div>
+              <input
+                id="upload-file"
+                type="file"
+                name="myFiles"
+                onChange={onChange}
+                multiple={true}
+              />
+            </div>
+            {importState.files && (
+              <div className="panel__content__form__section">
+                <div className="panel__content__form__section__header__label">
+                  Schema Files
+                </div>
+                <div className="panel__content__form__section__list">
+                  <div className="panel__content__form__section__list__items">
+                    {importState.files.map((value) => (
+                      <div
+                        key={value.name}
+                        className="panel__content__form__section__list__item"
+                      >
+                        <div className="panel__content__form__section__list__item__value">
+                          {value.name}
+                        </div>
+                        <div className="panel__content__form__section__list__item__actions">
+                          <button
+                            title="Remove change"
+                            className="panel__content__form__section__list__item__remove-btn"
+                            onClick={(): void => importState.removeFile(value)}
+                            tabIndex={-1}
+                          >
+                            <TimesIcon />
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="modal__footer">
+            <button
+              type="button"
+              className="btn btn--dark blocking-alert__action--standard"
+              onClick={importSchemas}
+              disabled={!importState.files?.length}
+            >
+              Import Schemas
+            </button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);
+
+const SchemaBasicEditor = observer(
+  (props: {
+    schema: Schema;
+    language: EDITOR_LANGUAGE;
+    isReadOnly: boolean;
+  }) => {
+    const { schema, isReadOnly, language } = props;
+    const changeId: React.ChangeEventHandler<HTMLInputElement> = (event) =>
+      externalFormat_schema_setId(schema, event.target.value);
+    const changeLocation: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => externalFormat_schema_setLocation(schema, event.target.value);
+    return (
+      <div className="schema-editor">
+        <input
+          className="schema-editor__id"
+          disabled={isReadOnly}
+          value={schema.id}
+          spellCheck={false}
+          onChange={changeId}
+          placeholder={`Id`}
+        />
+        <input
+          className="schema-editor__location"
+          disabled={isReadOnly}
+          value={schema.location}
+          spellCheck={false}
+          onChange={changeLocation}
+          placeholder={`Location`}
+        />
+        <div className={clsx('schema-editor__content')}>
+          <div className="schema-editor__content__input">
+            <StudioTextInputEditor
+              inputValue={schema.content}
+              language={language}
+              updateInput={(val: string): void => {
+                externalFormat_schema_setContent(schema, val);
+              }}
+              hideGutter={true}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const SchemaSetGeneralEditor = observer(
+  (props: { schemaSetEditorState: SchemaSetEditorState }) => {
+    const { schemaSetEditorState } = props;
+    const schemaSet = schemaSetEditorState.schemaSet;
+    const applicationStore = schemaSetEditorState.editorStore.applicationStore;
+    const importSchemaContentState =
+      schemaSetEditorState.importSchemaContentState;
+    const currentSchema = schemaSetEditorState.currentSchema;
+    const isReadOnly = schemaSetEditorState.isReadOnly;
+    const description =
+      schemaSetEditorState.schemaSetModelGenerationState.description;
+    // TEMPROARY engine api should return `fileformat`.
+    const language = getEditorLanguageFromFormat(description.name);
+    const changeState =
+      (schema: Schema): (() => void) =>
+      (): void => {
+        schemaSetEditorState.setCurrentSchema(schema);
+      };
+    const getIndex = (value: Schema): number =>
+      guaranteeNonNullable(
+        schemaSet.schemas.findIndex((schema: Schema) => value === schema),
+        `Can't find schema '${value}' in schema set '${schemaSet.path}'`,
+      );
+    const addSchema = (): void => {
+      if (!isReadOnly) {
+        const schema = new Schema();
+        externalFormat_schema_setContent(schema, '');
+        externalFormat_schemaSet_addSchema(schemaSet, schema);
+        schemaSetEditorState.setCurrentSchema(schema);
+      }
+    };
+    const openSchemaLoader = (): void =>
+      importSchemaContentState.setImportSchemaModal(true);
+    const deleteSchema =
+      (val: Schema): (() => void) =>
+      (): void => {
+        externalFormat_schemaSet_deleteSchema(schemaSet, val);
+        if (schemaSet.schemas.length !== 0) {
+          schemaSetEditorState.setCurrentSchema(
+            schemaSet.schemas[schemaSet.schemas.length - 1],
+          );
+        }
+        if (schemaSet.schemas.length === 0) {
+          schemaSetEditorState.setCurrentSchema(undefined);
+        }
+      };
+    const validateSchema = (): void => {
+      if (currentSchema) {
+        flowResult(schemaSetEditorState.validateSchema(currentSchema)).catch(
+          applicationStore.alertUnhandledError,
+        );
+      }
+    };
+
+    return (
+      <ResizablePanelGroup orientation="vertical">
+        <ResizablePanel minSize={30} size={300}>
+          <div className="schema-set-panel">
+            <div className="schema-set-panel__header">
+              <div className="panel__header__title">
+                <div className="panel__header__title__label">{`${schemaSet.format} configuration`}</div>
+              </div>
+              <div className="schema-set-panel__header__actions">
+                <button
+                  className="schema-set-panel__header__action"
+                  onClick={openSchemaLoader}
+                  disabled={isReadOnly}
+                  tabIndex={-1}
+                  title={'Import Schemas'}
+                >
+                  <UploadIcon />
+                </button>
+                <button
+                  className="schema-set-panel__header__action"
+                  onClick={addSchema}
+                  disabled={isReadOnly}
+                  tabIndex={-1}
+                  title={'Add Schema'}
+                >
+                  <PlusIcon />
+                </button>
+              </div>
+            </div>
+            {schemaSet.schemas.map((schema: Schema, index: number) => (
+              <ContextMenu
+                key={schema._UUID}
+                className={clsx('schema-set-panel__item', {
+                  'schema-set-panel__item--active': currentSchema === schema,
+                })}
+                disabled={isReadOnly}
+                content={
+                  <MenuContent>
+                    <MenuContentItem onClick={deleteSchema(schema)}>
+                      Delete
+                    </MenuContentItem>
+                  </MenuContent>
+                }
+                menuProps={{ elevation: 7 }}
+              >
+                <div
+                  className="schema-set-panel__item__label"
+                  onClick={changeState(schema)}
+                >
+                  {schema.id ? schema.id : `Schema${index + 1}`}
+                </div>
+              </ContextMenu>
+            ))}
+          </div>
+        </ResizablePanel>
+        <ResizablePanelSplitter>
+          <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+        </ResizablePanelSplitter>
+        <ResizablePanel>
+          <div className="schema-set-panel">
+            <div className="schema-set-panel__header">
+              <div className="schema-set-panel__header__title">
+                {isReadOnly && (
+                  <div className="schema-set-panel__header__lock">
+                    <LockIcon />
+                  </div>
+                )}
+                <div className="schema-set-panel__header__title__label">
+                  Schema
+                </div>
+                <div className="schema-set-panel__header__title__content">
+                  {currentSchema !== undefined
+                    ? currentSchema.id
+                      ? currentSchema.id
+                      : `Schema${getIndex(currentSchema) + 1}`
+                    : ''}
+                </div>
+              </div>
+              <div className="panel__header__actions">
+                <button
+                  className="btn--dark model-loader__header__load-btn"
+                  onClick={validateSchema}
+                  disabled={!currentSchema}
+                  tabIndex={-1}
+                  title="Validate Schema"
+                >
+                  Validate
+                </button>
+              </div>
+            </div>
+            <div className="schema-set-panel__content">
+              <div className="schema-set-panel__content__lists">
+                {schemaSetEditorState.importSchemaContentState
+                  .importSchemaModal && (
+                  <SchemaLoader schemaSetEditorState={schemaSetEditorState} />
+                )}
+                {currentSchema !== undefined && (
+                  <SchemaBasicEditor
+                    key={currentSchema._UUID}
+                    language={language}
+                    schema={currentSchema}
+                    isReadOnly={isReadOnly}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    );
+  },
+);
+
+const SchemaSetModelGenerationEditor = observer(
+  (props: { schemaSetEditorState: SchemaSetEditorState }) => {
+    const { schemaSetEditorState } = props;
+    const applicationStore = schemaSetEditorState.editorStore.applicationStore;
+    const schemaSet = schemaSetEditorState.schemaSet;
+    const modelGenerationState =
+      schemaSetEditorState.schemaSetModelGenerationState;
+    const description = modelGenerationState.description;
+    const properties = description.modelGenerationProperties;
+    const isReadOnly = schemaSetEditorState.isReadOnly;
+    const debouncedRegenerate = useMemo(
+      () =>
+        debounce(() => flowResult(modelGenerationState.generateModel()), 500),
+      [modelGenerationState],
+    );
+    const update = (
+      generationProperty: GenerationProperty,
+      newValue: object,
+    ): void => {
+      debouncedRegenerate.cancel();
+      modelGenerationState.updateGenerationParameters(
+        generationProperty,
+        newValue,
+      );
+      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+    };
+    const regenerate = (): void => {
+      modelGenerationState.generateModel();
+    };
+    const getConfigValue = (name: string): unknown | undefined =>
+      modelGenerationState.getConfigValue(name);
+
+    const importGeneratedElements = (): void => {
+      modelGenerationState.importGrammar();
+    };
+    return (
+      <div className="panel__content file-generation-editor__content">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel size={250} minSize={50}>
+            <div className="panel file-generation-editor__configuration">
+              <div className="panel__header">
+                <div className="panel__header__title">
+                  <div className="panel__header__title__label">{`${schemaSet.format} configuration`}</div>
+                </div>
+                <div className="panel__header__actions">
+                  <button
+                    className="panel__header__action file-generation-editor__configuration__reset-btn"
+                    tabIndex={-1}
+                    disabled={isReadOnly || !properties.length}
+                    onClick={regenerate}
+                    title={'Reset to default configuration'}
+                  >
+                    <RefreshIcon />
+                  </button>
+                </div>
+              </div>
+              <div className="panel__content dnd__dropzone">
+                <div className="file-generation-editor__configuration__content">
+                  {modelGenerationState.modelGenerationProperties.map(
+                    (abstractGenerationProperty) => (
+                      <GenerationPropertyEditor
+                        key={abstractGenerationProperty.name}
+                        update={update}
+                        isReadOnly={isReadOnly}
+                        getConfigValue={getConfigValue}
+                        property={abstractGenerationProperty}
+                      />
+                    ),
+                  )}
+                </div>
+              </div>
+            </div>
+          </ResizablePanel>
+          <ResizablePanelSplitter>
+            <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+          </ResizablePanelSplitter>
+          <ResizablePanel>
+            <div className="panel generation-result-viewer__file">
+              <div className="panel__header">
+                <div className="panel__header__title">
+                  <div className="panel__header__title__label">result</div>
+                </div>
+                <div className="panel__header__actions">
+                  <button
+                    className={clsx(
+                      'panel__header__action  generation-result-viewer__regenerate-btn',
+                      {
+                        ' generation-result-viewer__regenerate-btn--loading':
+                          modelGenerationState.isGenerating,
+                      },
+                    )}
+                    tabIndex={-1}
+                    disabled={modelGenerationState.isGenerating}
+                    onClick={regenerate}
+                    title={'Re-generate'}
+                  >
+                    <RefreshIcon />
+                  </button>
+                  <button
+                    className="btn--dark model-loader__header__load-btn"
+                    onClick={importGeneratedElements}
+                    disabled={modelGenerationState.generationValue === ''}
+                    tabIndex={-1}
+                    title="Import generated elements"
+                  >
+                    Import
+                  </button>
+                </div>
+              </div>
+              <div className="panel__content">
+                <PanelLoadingIndicator
+                  isLoading={modelGenerationState.isGenerating}
+                />
+                <StudioTextInputEditor
+                  inputValue={modelGenerationState.generationValue}
+                  isReadOnly={true}
+                  language={EDITOR_LANGUAGE.PURE}
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);
+
+export const SchemaSetEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const schemaSetEditorState =
+    editorStore.getCurrentEditorState(SchemaSetEditorState);
+  const isReadOnly = schemaSetEditorState.isReadOnly;
+  const schemaSet = schemaSetEditorState.schemaSet;
+  const currentTab = schemaSetEditorState.selectedTab;
+  const isFetchingDescriptions =
+    editorStore.graphState.graphGenerationState.externalFormatState
+      .fetchingDescriptionsState.isInProgress;
+  const changeTab =
+    (tab: SCHEMA_SET_TAB_TYPE): (() => void) =>
+    (): void =>
+      schemaSetEditorState.setSelectedTab(tab);
+  const renderMainEditPanel = (): React.ReactNode => {
+    if (isFetchingDescriptions) {
+      return (
+        <BlankPanelContent>Fetching format descriptions</BlankPanelContent>
+      );
+    }
+    if (currentTab === SCHEMA_SET_TAB_TYPE.GENERAL) {
+      return (
+        <SchemaSetGeneralEditor schemaSetEditorState={schemaSetEditorState} />
+      );
+    }
+    const supportsModelGeneraiton =
+      schemaSetEditorState.schemaSetModelGenerationState.description
+        .supportsModelGeneration;
+    return supportsModelGeneraiton ? (
+      <SchemaSetModelGenerationEditor
+        schemaSetEditorState={schemaSetEditorState}
+      />
+    ) : (
+      <BlankPanelContent>
+        Format {schemaSet.format} does not support Model Generation
+      </BlankPanelContent>
+    );
+  };
+  return (
+    <div className="panel schema-set-panel">
+      <div className="schema-set-panel__header">
+        <div className="schema-set-panel__header__title">
+          {isReadOnly && (
+            <div className="schema-set-panel__header__lock">
+              <LockIcon />
+            </div>
+          )}
+          <div className="schema-set-panel__header__title__label">
+            Schema Set
+          </div>
+          <div className="schema-set-panel__header__title__content">
+            {schemaSet.name}
+          </div>
+        </div>
+      </div>
+      <div className="panel__content">
+        <PanelLoadingIndicator isLoading={isFetchingDescriptions} />
+        <div className="panel__header">
+          <div className="uml-element-editor__tabs">
+            {Object.values(SCHEMA_SET_TAB_TYPE).map((tab) => (
+              <div
+                key={tab}
+                onClick={changeTab(tab)}
+                className={clsx('relational-connection-editor__tab', {
+                  'relational-connection-editor__tab--active':
+                    tab === currentTab,
+                })}
+              >
+                {prettyCONSTName(tab)}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="panel__content file-generation-editor__content">
+          {currentTab === SCHEMA_SET_TAB_TYPE.GENERAL && (
+            <SchemaSetGeneralEditor
+              schemaSetEditorState={schemaSetEditorState}
+            />
+          )}
+
+          {currentTab === SCHEMA_SET_TAB_TYPE.MODEL_GENERATION &&
+            renderMainEditPanel()}
+        </div>
+      </div>
+    </div>
+  );
+});