@finos/legend-application-studio 27.0.0 → 27.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "27.0.0",
+  "version": "27.1.1",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -45,11 +45,11 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.24",
-    "@finos/legend-art": "7.0.24",
-    "@finos/legend-graph": "30.0.9",
-    "@finos/legend-lego": "1.1.0",
-    "@finos/legend-query-builder": "4.0.13",
+    "@finos/legend-application": "15.0.25",
+    "@finos/legend-art": "7.0.25",
+    "@finos/legend-graph": "30.0.10",
+    "@finos/legend-lego": "1.1.2",
+    "@finos/legend-query-builder": "4.1.1",
     "@finos/legend-server-depot": "6.0.16",
     "@finos/legend-server-sdlc": "5.0.17",
     "@finos/legend-shared": "10.0.15",

package/src/__lib__/LegendStudioApplicationNavigationContext.ts

@@ -23,6 +23,7 @@ export enum LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY {
   EDITOR = 'studio.editor',
 
   MODEL_LOADER = 'studio.editor.model-loader',
+  MODEL_LOADER_EXTERNAL_FORMAT_IMPORTER = 'studio.editor.model-loader-external-format-importer',
   TEXT_MODE_EDITOR = 'studio.editor.text-mode-editor',
   EMBEDDED_QUERY_BUILDER = 'studio.editor.embedded-query-builder',
 
@@ -56,7 +57,17 @@ export enum LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY {
   SERVICE_EDITOR_EXECUTION = 'studio.editor.service-editor.execution',
   SERVICE_EDITOR_TEST = 'studio.editor.service-editor.test',
 
+  SQL_PLAYGROUND = 'studio.editor.panel-group.sql-playground',
+
+  // DataElement/Embedded data
   DATA_ELEMENT_EDITOR = 'studio.editor.data-element-editor',
+  EMBEDDED_DATA_RELATIONAL_EDITOR = 'studio.editor.embedded-data-relational-editor',
+  EMBEDDED_DATA_EXTERNAL_FORMAT_EDITOR = 'studio.editor.embedded-data-external-format-editor',
+  EMBEDDED_DATA_DATA_ELEMENT_REFERENCE_EDITOR = 'studio.editor.embedded-data-data-element-reference-editor',
+  EMBEDDED_DATA_MODEL_STORE_EDITOR = 'studio.editor.embedded-data-model-store-editor',
 
-  SQL_PLAYGROUND = 'studio.editor.panel-group.sql-playground',
+  // external format
+  SCHEMA_SET_EDITOR = 'dsl-external-format.studio.editor.schema-set-editor',
+  SCHEMA_SET_MODEL_GENERATION = 'dsl-external-format.studio.editor.schema-set-model-generation',
+  BINDING_EDITOR = 'dsl-external-format.studio.editor.binding-editor',
 }

package/src/__lib__/LegendStudioEvent.ts

@@ -35,7 +35,7 @@ export enum LEGEND_STUDIO_APP_EVENT {
   SERVICE_TEST_SETUP_FAILURE = 'editor.service-editor.test-setup.failure',
   GENERATION_FAILURE = 'editor.generation.failure',
   EXTERNAL_FORMAT_FAILURE = 'editor.external-format.failure',
-
+  MAPPING_TEST_FAILURE = 'editor.mapping-editor.test-runner.failure',
   // SDLC
   // TODO: consider to split this generic errors into more specific events
   SDLC_MANAGER_FAILURE = 'sdlc.manager.failure',

package/src/application/LegendStudioApplicationConfig.ts

@@ -74,6 +74,13 @@ class LegendStudioApplicationCoreOptions {
    */
   TEMPORARY__enableFunctionActivatorSupport = false;
 
+  /**
+   * This flag can be removed when the support for local connection is official
+   * Right now it's done to support the SnowflakeApp creation demo
+   * See https://github.com/finos/legend-engine/pull/1819
+   */
+  TEMPORARY__enableLocalConnectionBuilder = false;
+
   /**
    * This flag can be removed when the support for raw SQL execution is official
    * See https://github.com/finos/legend-engine/pull/1841
@@ -110,6 +117,7 @@ class LegendStudioApplicationCoreOptions {
       TEMPORARY__preserveSectionIndex: optional(primitive()),
       TEMPORARY__enableFunctionActivatorSupport: optional(primitive()),
       TEMPORARY__enableRawSQLExecutor: optional(primitive()),
+      TEMPORARY__enableLocalConnectionBuilder: optional(primitive()),
       TEMPORARY__enableMappingTestableEditor: optional(primitive()),
       TEMPORARY__serviceRegistrationConfig: list(
         object(ServiceRegistrationEnvironmentConfig),

package/src/components/ElementIconUtils.tsx

@@ -42,6 +42,7 @@ import {
   PURE_PackageIcon,
   PURE_DataIcon,
   LaunchIcon,
+  LinkIcon,
 } from '@finos/legend-art';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../stores/editor/utils/ModelClassifierUtils.js';
 
@@ -88,6 +89,8 @@ export const getElementTypeIcon = (
       return <PURE_ServiceIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.CONNECTION:
       return <PURE_ConnectionIcon />;
+    case PACKAGEABLE_ELEMENT_TYPE.TEMPORARY__LOCAL_CONNECTION:
+      return <LinkIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.RUNTIME:
       return <PURE_RuntimeIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.FILE_GENERATION:

package/src/components/editor/editor-group/ModelImporter.tsx

@@ -100,6 +100,10 @@ const ExternalFormatModelImporterEditor = observer(
         </BlankPanelContent>
       );
     };
+
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MODEL_LOADER_EXTERNAL_FORMAT_IMPORTER,
+    );
     return (
       <Panel className="schema-set-panel">
         <PanelContent className="model-loader">

package/src/components/editor/editor-group/connection-editor/DatabaseBuilder.tsx

@@ -22,7 +22,6 @@ import {
   ResizablePanel,
   ResizablePanelSplitter,
   PanelLoadingIndicator,
-  clsx,
   TreeView,
   PURE_DatabaseSchemaIcon,
   PURE_DatabaseTableIcon,
@@ -139,7 +138,7 @@ const DatabaseBuilderTreeNodeContainer = observer(
 
     return (
       <div
-        className={clsx('tree-view__node__container')}
+        className="tree-view__node__container"
         style={{
           paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
           display: 'flex',
@@ -151,7 +150,7 @@ const DatabaseBuilderTreeNodeContainer = observer(
             {nodeExpandIcon}
           </div>
           <div
-            className={clsx('database-builder-tree__checker-icon')}
+            className="database-builder-tree__checker-icon"
             onClick={(event) => {
               event.stopPropagation();
               toggleCheckedNode(node);
@@ -198,6 +197,13 @@ export const DatabaseBuilderExplorer = observer(
       );
     };
 
+    const getChildNodes = (
+      node: DatabaseBuilderTreeNodeData,
+    ): DatabaseBuilderTreeNodeData[] =>
+      databaseBuilderState
+        .getChildNodes(node, treeData)
+        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
+
     const isPartiallySelected = (
       node: DatabaseBuilderTreeNodeData,
     ): boolean => {
@@ -208,22 +214,15 @@ export const DatabaseBuilderExplorer = observer(
         return Boolean(
           databaseBuilderState
             .getChildNodes(node, treeData)
-            ?.find((s) => s.isChecked === true),
+            ?.find((childNode) => childNode.isChecked === true),
         );
       }
       return false;
     };
 
-    const getChildNodes = (
-      node: DatabaseBuilderTreeNodeData,
-    ): DatabaseBuilderTreeNodeData[] =>
-      databaseBuilderState
-        .getChildNodes(node, treeData)
-        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
-
-    const toggleCheckedNode = (node: DatabaseBuilderTreeNodeData): void => {
+    const toggleCheckedNode = (node: DatabaseBuilderTreeNodeData): void =>
       databaseBuilderState.toggleCheckedNode(node, treeData);
-    };
+
     return (
       <TreeView
         className="database-builder-tree"

package/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx

@@ -62,6 +62,8 @@ import {
 import { RelationalCSVDataEditor } from './RelationalCSVDataEditor.js';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
 import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 
 export const ExternalFormatDataEditor = observer(
   (props: {
@@ -92,6 +94,9 @@ export const ExternalFormatDataEditor = observer(
       ),
     );
     const format = (): void => externalFormatDataState.format();
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_EXTERNAL_FORMAT_EDITOR,
+    );
     return (
       <div className="panel external-format-data-editor">
         <div className="external-format-data-editor__header">
@@ -147,16 +152,14 @@ export const ExternalFormatDataEditor = observer(
             </DropdownMenu>
           </div>
         </div>
-        <div className={clsx('external-format-data-editor__content')}>
-          <div className="external-format-data-editor__content__input">
-            <CodeEditor
-              language={language}
-              inputValue={externalFormatDataState.embeddedData.data}
-              updateInput={changeData}
-              hideGutter={true}
-            />
-          </div>
-        </div>
+        <PanelContent className="model-loader__editor">
+          <CodeEditor
+            language={language}
+            inputValue={externalFormatDataState.embeddedData.data}
+            updateInput={changeData}
+            hideGutter={true}
+          />
+        </PanelContent>
       </div>
     );
   },
@@ -184,6 +187,9 @@ export const DataElementReferenceDataEditor = observer(
     };
     const visitData = (): void =>
       editorStore.graphEditorMode.openElement(dataElement);
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_DATA_ELEMENT_REFERENCE_EDITOR,
+    );
     return (
       <div className="panel data-element-reference-editor">
         <div className="data-element-reference-editor__header">
@@ -240,6 +246,7 @@ export const ModelEmbeddedDataEditor = observer(
   }) => {
     const { isReadOnly, modelStoreDataState, modelDataState } = props;
     const modelData = modelDataState.modelData;
+    const hideClass = modelStoreDataState.hideClass;
     const classSelectorRef = useRef<SelectComponent>(null);
     const elementFilterOption = createFilter({
       ignoreCase: true,
@@ -271,34 +278,32 @@ export const ModelEmbeddedDataEditor = observer(
     };
 
     return (
-      <div>
-        <div className="sample-data-generator__controller">
-          <div
-            className="sample-data-generator__controller__icon"
-            title="class"
-          >
-            <PURE_ClassIcon />
+      <>
+        {!hideClass && (
+          <div className="sample-data-generator__controller">
+            <div
+              className="sample-data-generator__controller__icon"
+              title="class"
+            >
+              <PURE_ClassIcon />
+            </div>
+            <CustomSelectorInput
+              ref={classSelectorRef}
+              className="sample-data-generator__controller__class-selector"
+              options={classOptions}
+              onChange={changeClass}
+              value={selectedClassOption}
+              darkMode={true}
+              filterOption={elementFilterOption}
+              formatOptionLabel={getPackageableElementOptionFormatter({
+                darkMode: true,
+              })}
+            />
           </div>
-          <CustomSelectorInput
-            ref={classSelectorRef}
-            className="sample-data-generator__controller__class-selector"
-            options={classOptions}
-            onChange={changeClass}
-            value={selectedClassOption}
-            darkMode={true}
-            filterOption={elementFilterOption}
-            formatOptionLabel={getPackageableElementOptionFormatter({
-              darkMode: true,
-            })}
-          />
-        </div>
-        <div>
-          {renderEmbeddedDataEditor(
-            modelDataState.embeddedDataState,
-            isReadOnly,
-          )}
-        </div>
-      </div>
+        )}
+
+        {renderEmbeddedDataEditor(modelDataState.embeddedDataState, isReadOnly)}
+      </>
     );
   },
 );
@@ -309,7 +314,9 @@ export const ModelStoreDataEditor = observer(
     isReadOnly: boolean;
   }) => {
     const { isReadOnly, modelStoreDataState } = props;
-
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_MODEL_STORE_EDITOR,
+    );
     return (
       <div className="panel connection-editor">
         {modelStoreDataState.modelDataStates.map((_modelDataState) => {

package/src/components/editor/editor-group/data-editor/RelationalCSVDataEditor.tsx

@@ -18,6 +18,7 @@ import {
   BlankPanelPlaceholder,
   clsx,
   ContextMenu,
+  CustomSelectorInput,
   Dialog,
   MenuContent,
   MenuContentItem,
@@ -26,6 +27,7 @@ import {
   ModalFooter,
   ModalFooterButton,
   ModalHeader,
+  PanelFormBooleanField,
   PlusIcon,
   ResizablePanel,
   ResizablePanelGroup,
@@ -33,7 +35,11 @@ import {
   ResizablePanelSplitterLine,
   UploadIcon,
 } from '@finos/legend-art';
-import type { RelationalCSVDataTable } from '@finos/legend-graph';
+import {
+  type Table,
+  getAllTablesFromDatabase,
+  RelationalCSVDataTable,
+} from '@finos/legend-graph';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useState } from 'react';
 import type { RelationalCSVDataState } from '../../../../stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
@@ -41,22 +47,92 @@ import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import {
+  relationalData_addTable,
+  relationalData_setTableName,
+  relationalData_setTableSchemaName,
+} from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
+import { createMockDataForMappingElementSource } from '../../../../stores/editor/utils/MockDataUtils.js';
 
-const RelationalTableIdentifierModal = observer(
+interface TableOption {
+  value: Table;
+  label: string;
+}
+
+const RelationalTableIdentifierEditor = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
     const { isReadOnly, dataState } = props;
-    const tableIdentifierState = dataState.tableIdentifierState;
-    const editableTable = tableIdentifierState.table;
+    const resolvedDb = dataState.database;
+    const existingDataTable = dataState.tableToEdit;
+
+    // table
+    const [schemaName, setSchemaName] = useState<string | undefined>(
+      existingDataTable?.schema,
+    );
+    const [tableName, setTableName] = useState<string | undefined>(
+      existingDataTable?.table,
+    );
+    // selectors if db provided
+    const tables = resolvedDb
+      ? getAllTablesFromDatabase(resolvedDb)
+      : undefined;
+    const [dbTable, setDbTable] = useState<Table | undefined>(tables?.[0]);
+    const [includeBare, setIncludeBare] = useState(true);
+    const showFullPath = resolvedDb && resolvedDb.schemas.length > 2;
+    const tableOptions =
+      tables?.map((_t) => ({
+        label: showFullPath ? `${_t.schema.name}.${_t.name}` : `${_t.name}`,
+        value: _t,
+      })) ?? [];
+    const onTableChange = (val: TableOption | null): void => {
+      setDbTable(val?.value);
+    };
+    const selectedTable = dbTable
+      ? {
+          label: showFullPath
+            ? `${dbTable.schema.name}.${dbTable.name}`
+            : `${dbTable.name}`,
+          value: dbTable,
+        }
+      : undefined;
     const closeModal = (): void => dataState.closeModal();
-    const changeTableValue: React.ChangeEventHandler<HTMLInputElement> = (
+    const changeSchemaValue: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => {
-      tableIdentifierState.setTableName(event.target.value);
+      setSchemaName(event.target.value);
     };
-    const changeSchemaValue: React.ChangeEventHandler<HTMLInputElement> = (
+    const changeTableValue: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => {
-      tableIdentifierState.setSchemaName(event.target.value);
+      setTableName(event.target.value);
+    };
+    const toggleIncludeBare = (): void => {
+      setIncludeBare(!includeBare);
+    };
+    const useSelector = resolvedDb && !existingDataTable;
+    const isDisabled = useSelector ? !dbTable : !(schemaName && tableName);
+
+    const handleSubmit = (): void => {
+      const newTable = new RelationalCSVDataTable();
+      newTable.values = '';
+      const editTable = existingDataTable ?? newTable;
+      const _schemaName = useSelector ? dbTable?.schema.name : schemaName;
+      const _name = useSelector ? dbTable?.name : tableName;
+      relationalData_setTableSchemaName(editTable, _schemaName ?? '');
+      relationalData_setTableName(editTable, _name ?? '');
+      if (!existingDataTable && dbTable && includeBare) {
+        editTable.values = createMockDataForMappingElementSource(
+          dbTable,
+          dataState.editorStore,
+        );
+      }
+      if (!existingDataTable) {
+        relationalData_addTable(dataState.embeddedData, editTable);
+        dataState.changeSelectedTable(editTable);
+      }
+      closeModal();
     };
     return (
       <Dialog
@@ -68,42 +144,71 @@ const RelationalTableIdentifierModal = observer(
         <form
           onSubmit={(event) => {
             event.preventDefault();
-            tableIdentifierState.handleSubmit();
+            handleSubmit();
             closeModal();
           }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">
-            {editableTable
+            {existingDataTable
               ? 'Rename Relational Data Table'
               : 'Add Relational Data Table'}
           </div>
           <div className="relational-data-editor__identifier">
-            <div className="relational-data-editor__identifier__values">
-              <input
-                className="panel__content__form__section__input"
-                disabled={isReadOnly}
-                placeholder="schemaName"
-                value={tableIdentifierState.schemaName}
-                onChange={changeSchemaValue}
-              />
-            </div>
-            <div className="relational-data-editor__identifier__values">
-              <input
-                className="relational-data-editor__identifier__values panel__content__form__section__input"
-                disabled={isReadOnly}
-                placeholder="tableName"
-                value={tableIdentifierState.tableName}
-                onChange={changeTableValue}
-              />
-            </div>
+            {resolvedDb && !existingDataTable ? (
+              <>
+                <div className="panel__content__form__section">
+                  <div className="panel__content__form__section__header__label">
+                    Table
+                  </div>
+                  <div className="explorer__new-element-modal__driver">
+                    <CustomSelectorInput
+                      className="explorer__new-element-modal__driver__dropdown"
+                      options={tableOptions}
+                      onChange={onTableChange}
+                      value={selectedTable}
+                      isClearable={false}
+                      darkMode={true}
+                    />
+                  </div>
+                </div>
+                <PanelFormBooleanField
+                  isReadOnly={isReadOnly}
+                  value={includeBare}
+                  name="Include Columns and First Row"
+                  prompt="Will include table columns and first row using table definition"
+                  update={toggleIncludeBare}
+                />
+              </>
+            ) : (
+              <>
+                <div className="relational-data-editor__identifier__values">
+                  <input
+                    className="panel__content__form__section__input"
+                    disabled={isReadOnly}
+                    placeholder="schemaName"
+                    value={schemaName}
+                    onChange={changeSchemaValue}
+                  />
+                </div>
+                <div className="relational-data-editor__identifier__values">
+                  <input
+                    className="relational-data-editor__identifier__values panel__content__form__section__input"
+                    disabled={isReadOnly}
+                    placeholder="tableName"
+                    value={tableName}
+                    onChange={changeTableValue}
+                  />
+                </div>
+              </>
+            )}
           </div>
           <div className="search-modal__actions">
             <button
               className="btn btn--dark"
-              disabled={tableIdentifierState.isEditingDisabled || isReadOnly}
+              disabled={isDisabled || isReadOnly}
             >
-              {editableTable ? 'Rename' : 'Add'}
+              {existingDataTable ? 'Rename' : 'Add'}
             </button>
           </div>
         </form>
@@ -199,6 +304,10 @@ export const RelationalCSVDataEditor = observer(
     const isTableActive = (table: RelationalCSVDataTable): boolean =>
       currentTableState?.table === table;
     const showCSVModal = (): void => dataState.setShowImportCsvModal(true);
+
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_RELATIONAL_EDITOR,
+    );
     return (
       <ResizablePanelGroup orientation="vertical">
         <ResizablePanel minSize={30} size={300}>
@@ -308,7 +417,7 @@ export const RelationalCSVDataEditor = observer(
                 />
               )}
               {dataState.showTableIdentifierModal && (
-                <RelationalTableIdentifierModal
+                <RelationalTableIdentifierEditor
                   dataState={dataState}
                   isReadOnly={isReadOnly}
                 />

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_BindingElementEditor.tsx

@@ -59,6 +59,8 @@ import {
   externalFormat_modelUnit_deletePackageableElementExcludes,
   externalFormat_modelUnit_deletePackageableElementIncludes,
 } from '../../../../stores/graph-modifier/DSL_ExternalFormat_GraphModifierHelper.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 
 const ModelUnitPackagableElementEntryEditor = observer(
   (props: {
@@ -424,6 +426,11 @@ export const BindingEditor = observer(() => {
     (tab: BINDING_TAB_TYPE): (() => void) =>
     (): void =>
       editorState.setSelectedTab(tab);
+
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.BINDING_EDITOR,
+  );
+
   return (
     <div className="binding-editor">
       <div className="binding-editor__header">

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.tsx

@@ -59,6 +59,8 @@ import {
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
 import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
+import { useApplicationNavigationContext } from '@finos/legend-application';
 
 const SchemaLoader = observer(
   (props: {
@@ -415,6 +417,10 @@ export const SchemaSetEditor = observer(() => {
     );
   };
 
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SCHEMA_SET_EDITOR,
+  );
+
   return (
     <div className="panel schema-set-panel">
       <div className="schema-set-panel__header">

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.tsx

@@ -39,6 +39,8 @@ import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 
 enum HIDDEN_CONFIGURATION_PROPERTIES {
   FORMAT = 'format',
@@ -100,6 +102,10 @@ export const SchemaSetModelGenerationEditor = observer(
       modelGenerationState.importGeneratedModelsIntoGraph();
     };
 
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SCHEMA_SET_MODEL_GENERATION,
+    );
+
     return (
       <PanelContent className="file-generation-editor__content">
         <ResizablePanelGroup orientation="vertical">