@finos/legend-application-studio 13.1.2 → 15.0.1

package/src/components/editor/edit-panel/ModelImporter.tsx

@@ -0,0 +1,372 @@
+/**
+ * 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 {
+  type ModelImporterEditorState,
+  ModelImporterState,
+  ExtensionModelImporterEditorState,
+  MODEL_IMPORT_NATIVE_INPUT_TYPE,
+  NativeModelImporterEditorState,
+  ExternalFormatModelImporterState,
+} from '../../../stores/editor-state/ModelImporterState.js';
+import { prettyCONSTName } from '@finos/legend-shared';
+import {
+  DropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  CaretDownIcon,
+  CheckSquareIcon,
+  TruckLoadingIcon,
+  EmptySquareIcon,
+  BlankPanelContent,
+  PanelLoadingIndicator,
+  clsx,
+} from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { useEditorStore } from '../EditorStoreProvider.js';
+import {
+  ActionAlertType,
+  ActionAlertActionType,
+  useApplicationStore,
+  EDITOR_LANGUAGE,
+  useApplicationNavigationContext,
+} from '@finos/legend-application';
+import { StudioTextInputEditor } from '../../shared/StudioTextInputEditor.js';
+import type { ModelImporterExtensionConfiguration } from '../../../stores/LegendStudioApplicationPlugin.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
+import { SCHEMA_SET_TAB_TYPE } from '../../../stores/editor-state/element-editor-state/external-format/SchemaSetEditorState.js';
+import { SchemaSetModelGenerationEditor } from './external-format-editor/SchemaSetModelGenerationEditor.js';
+import { SchemaSetGeneralEditor } from './external-format-editor/SchemaSetElementEditor.js';
+
+const ExternalFormatModelImporterEditor = observer(
+  (props: { externalFormatState: ExternalFormatModelImporterState }) => {
+    const { externalFormatState } = props;
+    const schemaSetEditorState = externalFormatState.schemaSetEditorState;
+    const editorStore = schemaSetEditorState.editorStore;
+    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.SCHEMAS) {
+        return (
+          <SchemaSetGeneralEditor
+            schemaSetEditorState={schemaSetEditorState}
+            isReadOnly={false}
+          />
+        );
+      }
+      const supportsModelGeneraiton =
+        schemaSetEditorState.schemaSetModelGenerationState.description
+          ?.supportsModelGeneration;
+      return supportsModelGeneraiton ? (
+        <SchemaSetModelGenerationEditor
+          modelGenerationState={
+            schemaSetEditorState.schemaSetModelGenerationState
+          }
+          isReadOnly={false}
+        />
+      ) : (
+        <BlankPanelContent>
+          Format {schemaSet.format} does not support Model Generation
+        </BlankPanelContent>
+      );
+    };
+    return (
+      <div className="panel schema-set-panel">
+        <div className="panel__content model-loader">
+          <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.SCHEMAS && (
+              <SchemaSetGeneralEditor
+                schemaSetEditorState={schemaSetEditorState}
+                isReadOnly={false}
+              />
+            )}
+
+            {currentTab === SCHEMA_SET_TAB_TYPE.GENERATE_MODEL &&
+              renderMainEditPanel()}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+export const ModelImporter = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const modelImporterState =
+    editorStore.getCurrentEditorState(ModelImporterState);
+  const nativeInputTypes = Object.values(MODEL_IMPORT_NATIVE_INPUT_TYPE);
+  const extraModelImporterExtensionsConfigs =
+    modelImporterState.extensionConfigs;
+  const externalFormatDescriptions =
+    modelImporterState.editorStore.graphState.graphGenerationState
+      .externalFormatState.externalFormatDescriptionsWithModelGenerationSupport;
+  // replace flag
+  const replace = modelImporterState.replace;
+  const toggleReplace = (): void => modelImporterState.setReplaceFlag(!replace);
+  const label = modelImporterState.modelImportEditorState.label;
+  const modelImportEditorState = modelImporterState.modelImportEditorState;
+  const loadModel = (): void => {
+    if (editorStore.hasUnpushedChanges) {
+      editorStore.setActionAlertInfo({
+        message: 'You have unpushed changes',
+        prompt:
+          'This action will discard these changes and refresh the application',
+        type: ActionAlertType.CAUTION,
+        onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
+        onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
+        actions: [
+          {
+            label: 'Proceed to load model',
+            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            handler: (): void => {
+              editorStore.setIgnoreNavigationBlocking(true);
+              flowResult(
+                modelImporterState.modelImportEditorState.loadModel(),
+              ).catch(applicationStore.alertUnhandledError);
+            },
+          },
+          {
+            label: 'Abort',
+            type: ActionAlertActionType.PROCEED,
+            default: true,
+          },
+        ],
+      });
+    } else {
+      flowResult(modelImporterState.modelImportEditorState.loadModel()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }
+  };
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MODEL_LOADER,
+  );
+  const renderExtraActions = (): React.ReactNode => {
+    if (modelImportEditorState instanceof NativeModelImporterEditorState) {
+      // actions
+      const loadCurrentProjectEntities = applicationStore.guardUnhandledError(
+        () => flowResult(modelImportEditorState.loadCurrentProjectEntities()),
+      );
+      return (
+        <button
+          className="model-loader__header__configs__load-project-entities-btn"
+          tabIndex={-1}
+          onClick={loadCurrentProjectEntities}
+          title="Load current project entities"
+        >
+          <TruckLoadingIcon />
+        </button>
+      );
+    }
+    return null;
+  };
+  const renderModelImporterEditor = (): React.ReactNode => {
+    if (modelImportEditorState instanceof ExtensionModelImporterEditorState) {
+      return modelImportEditorState.config.renderer(
+        modelImportEditorState.rendererState,
+      );
+    } else if (
+      modelImportEditorState instanceof NativeModelImporterEditorState
+    ) {
+      const updateModel = (val: string): void =>
+        modelImportEditorState.setModelText(val);
+      return (
+        <div className="panel__content model-loader__editor">
+          <StudioTextInputEditor
+            language={
+              modelImportEditorState.nativeType ===
+              MODEL_IMPORT_NATIVE_INPUT_TYPE.PURE_GRAMMAR
+                ? EDITOR_LANGUAGE.PURE
+                : EDITOR_LANGUAGE.JSON
+            }
+            inputValue={modelImportEditorState.modelText}
+            updateInput={updateModel}
+            showMiniMap={true}
+          />
+        </div>
+      );
+    } else if (
+      modelImportEditorState instanceof ExternalFormatModelImporterState
+    ) {
+      return (
+        <ExternalFormatModelImporterEditor
+          externalFormatState={modelImportEditorState}
+        />
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="panel model-loader">
+      <div className="panel__header model-loader__header">
+        <div className="model-loader__header__configs">
+          <DropdownMenu
+            content={
+              <MenuContent className="model-loader__header__configs__type__menu">
+                <div className="model-loader__header__configs__type-option__group model-loader__header__configs__type-option__group--native">
+                  <div className="model-loader__header__configs__type-option__group__name">
+                    native
+                  </div>
+                  <div className="model-loader__header__configs__type-option__group__options">
+                    {nativeInputTypes.map((inputType) => (
+                      <MenuContentItem
+                        key={inputType}
+                        className="model-loader__header__configs__type-option__group__option"
+                        onClick={(): ModelImporterEditorState =>
+                          modelImporterState.setNativeImportType(inputType)
+                        }
+                      >
+                        {prettyCONSTName(inputType)}
+                      </MenuContentItem>
+                    ))}
+                  </div>
+                </div>
+                {Boolean(externalFormatDescriptions.length) && (
+                  <>
+                    <div className="model-loader__header__configs__type-option__group__separator" />
+                    <div className="model-loader__header__configs__type-option__group model-loader__header__configs__type-option__group--external">
+                      <div className="model-loader__header__configs__type-option__group__name">
+                        external
+                      </div>
+                      <div className="model-loader__header__configs__type-option__group__options">
+                        {externalFormatDescriptions.map((inputType) => (
+                          <MenuContentItem
+                            key={inputType.name}
+                            className="model-loader__header__configs__type-option__group__option"
+                            onClick={() =>
+                              modelImporterState.setExternalFormatImportFormat(
+                                inputType,
+                              )
+                            }
+                          >
+                            {inputType.name}
+                          </MenuContentItem>
+                        ))}
+                      </div>
+                    </div>
+                  </>
+                )}
+                {Boolean(extraModelImporterExtensionsConfigs.length > 0) && (
+                  <>
+                    <div className="model-loader__header__configs__type-option__group__separator" />
+                    <div className="model-loader__header__configs__type-option__group model-loader__header__configs__type-option__group--extension">
+                      <div className="model-loader__header__configs__type-option__group__name">
+                        extensions
+                      </div>
+                      <div className="model-loader__header__configs__type-option__group__options">
+                        {extraModelImporterExtensionsConfigs.map(
+                          (config: ModelImporterExtensionConfiguration) => (
+                            <MenuContentItem
+                              key={config.key}
+                              className="model-loader__header__configs__type-option__group__option"
+                              onClick={() =>
+                                modelImporterState.setModelImporterExtension(
+                                  config,
+                                )
+                              }
+                            >
+                              {config.label ?? prettyCONSTName(config.key)}
+                            </MenuContentItem>
+                          ),
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </MenuContent>
+            }
+            menuProps={{
+              anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+              transformOrigin: { vertical: 'top', horizontal: 'right' },
+            }}
+          >
+            <div className="model-loader__header__configs__type">
+              <div className="model-loader__header__configs__type__label">
+                {prettyCONSTName(label)}
+              </div>
+              <div className="model-loader__header__configs__type__icon">
+                <CaretDownIcon />
+              </div>
+            </div>
+          </DropdownMenu>
+          {modelImportEditorState.allowHardReplace && (
+            <div
+              className="model-loader__header__configs__edit-mode"
+              onClick={toggleReplace}
+            >
+              <div className="model-loader__header__configs__edit-mode__icon">
+                {replace ? <CheckSquareIcon /> : <EmptySquareIcon />}
+              </div>
+              <div className="model-loader__header__configs__edit-mode__label">
+                replace
+              </div>
+            </div>
+          )}
+          {renderExtraActions()}
+        </div>
+        <div className="model-loader__header__action">
+          <button
+            className="btn--dark model-loader__header__load-btn"
+            onClick={loadModel}
+            disabled={
+              modelImportEditorState.loadModelActionState.isInProgress ||
+              modelImportEditorState.isLoadingDisabled
+            }
+            tabIndex={-1}
+            title="Load model"
+          >
+            Load
+          </button>
+        </div>
+      </div>
+
+      {renderModelImporterEditor()}
+    </div>
+  );
+});

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

@@ -24,7 +24,6 @@ import {
   ResizablePanelSplitterLine,
   LockIcon,
   PlusIcon,
-  RefreshIcon,
   PanelLoadingIndicator,
   UploadIcon,
   Dialog,
@@ -33,25 +32,17 @@ import {
   MenuContent,
   MenuContentItem,
 } from '@finos/legend-art';
-import {
-  type GenerationProperty,
-  ExternalFormatSchema as Schema,
-} from '@finos/legend-graph';
+import { ExternalFormatSchema as Schema } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
-import { useMemo } from 'react';
 import {
   SchemaSetEditorState,
+  type InnerSchemaSetEditorState,
   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 { guaranteeNonNullable, prettyCONSTName } from '@finos/legend-shared';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   externalFormat_schemaSet_addSchema,
@@ -60,9 +51,12 @@ import {
   externalFormat_schema_setId,
   externalFormat_schema_setLocation,
 } from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
+import { SchemaSetModelGenerationEditor } from './SchemaSetModelGenerationEditor.js';
 
 const SchemaLoader = observer(
-  (props: { schemaSetEditorState: SchemaSetEditorState }) => {
+  (props: {
+    schemaSetEditorState: InnerSchemaSetEditorState | SchemaSetEditorState;
+  }) => {
     const { schemaSetEditorState } = props;
     const importState = schemaSetEditorState.importSchemaContentState;
     const onClose = (): void => importState.closeModal();
@@ -199,19 +193,23 @@ const SchemaBasicEditor = observer(
   },
 );
 
-const SchemaSetGeneralEditor = observer(
-  (props: { schemaSetEditorState: SchemaSetEditorState }) => {
-    const { schemaSetEditorState } = props;
+export const SchemaSetGeneralEditor = observer(
+  (props: {
+    schemaSetEditorState: InnerSchemaSetEditorState | SchemaSetEditorState;
+    isReadOnly: boolean;
+  }) => {
+    const { schemaSetEditorState, isReadOnly } = 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 language = description
+      ? getEditorLanguageFromFormat(description.name)
+      : EDITOR_LANGUAGE.TEXT;
     const changeState =
       (schema: Schema): (() => void) =>
       (): void => {
@@ -246,7 +244,10 @@ const SchemaSetGeneralEditor = observer(
         }
       };
     const validateSchema = (): void => {
-      if (currentSchema) {
+      if (
+        currentSchema &&
+        schemaSetEditorState instanceof SchemaSetEditorState
+      ) {
         flowResult(schemaSetEditorState.validateSchema(currentSchema)).catch(
           applicationStore.alertUnhandledError,
         );
@@ -332,15 +333,17 @@ const SchemaSetGeneralEditor = observer(
                 </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>
+                {schemaSetEditorState instanceof SchemaSetEditorState && (
+                  <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">
@@ -366,133 +369,6 @@ const SchemaSetGeneralEditor = observer(
   },
 );
 
-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">
-                <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 =
@@ -513,17 +389,23 @@ export const SchemaSetEditor = observer(() => {
         <BlankPanelContent>Fetching format descriptions</BlankPanelContent>
       );
     }
-    if (currentTab === SCHEMA_SET_TAB_TYPE.GENERAL) {
+    if (currentTab === SCHEMA_SET_TAB_TYPE.SCHEMAS) {
       return (
-        <SchemaSetGeneralEditor schemaSetEditorState={schemaSetEditorState} />
+        <SchemaSetGeneralEditor
+          schemaSetEditorState={schemaSetEditorState}
+          isReadOnly={isReadOnly}
+        />
       );
     }
     const supportsModelGeneraiton =
       schemaSetEditorState.schemaSetModelGenerationState.description
-        .supportsModelGeneration;
+        ?.supportsModelGeneration;
     return supportsModelGeneraiton ? (
       <SchemaSetModelGenerationEditor
-        schemaSetEditorState={schemaSetEditorState}
+        modelGenerationState={
+          schemaSetEditorState.schemaSetModelGenerationState
+        }
+        isReadOnly={isReadOnly}
       />
     ) : (
       <BlankPanelContent>
@@ -531,11 +413,12 @@ export const SchemaSetEditor = observer(() => {
       </BlankPanelContent>
     );
   };
+
   return (
     <div className="panel schema-set-panel">
       <div className="schema-set-panel__header">
         <div className="schema-set-panel__header__title">
-          {isReadOnly && (
+          {schemaSetEditorState.isReadOnly && (
             <div className="schema-set-panel__header__lock">
               <LockIcon />
             </div>
@@ -544,7 +427,7 @@ export const SchemaSetEditor = observer(() => {
             Schema Set
           </div>
           <div className="schema-set-panel__header__title__content">
-            {schemaSet.name}
+            {schemaSetEditorState.schemaSet.name}
           </div>
         </div>
       </div>
@@ -568,13 +451,14 @@ export const SchemaSetEditor = observer(() => {
         </div>
 
         <div className="panel__content file-generation-editor__content">
-          {currentTab === SCHEMA_SET_TAB_TYPE.GENERAL && (
+          {currentTab === SCHEMA_SET_TAB_TYPE.SCHEMAS && (
             <SchemaSetGeneralEditor
               schemaSetEditorState={schemaSetEditorState}
+              isReadOnly={isReadOnly}
             />
           )}
 
-          {currentTab === SCHEMA_SET_TAB_TYPE.MODEL_GENERATION &&
+          {currentTab === SCHEMA_SET_TAB_TYPE.GENERATE_MODEL &&
             renderMainEditPanel()}
         </div>
       </div>