@finos/legend-application-studio 28.18.123 → 28.18.125

package/src/application/LegendIngestionConfiguration.ts

@@ -0,0 +1,94 @@
+/**
+ * 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 {
+  assertNonEmptyString,
+  SerializationFactory,
+  usingModelSchema,
+} from '@finos/legend-shared';
+import type { AuthProviderProps } from 'react-oidc-context';
+import { createModelSchema, primitive, raw } from 'serializr';
+
+export class IngestDeploymentOIDC {
+  redirectPath!: string;
+  silentRedirectPath!: string;
+  authProviderProps!: AuthProviderProps;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(IngestDeploymentOIDC, {
+      redirectPath: primitive(),
+      silentRedirectPath: primitive(),
+      authProviderProps: raw(),
+    }),
+  );
+}
+
+export class IngestDeploymentServerConfig {
+  environmentClassification!: string;
+  ingestServerUrl!: string;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(IngestDeploymentServerConfig, {
+      environmentClassification: primitive(),
+      ingestServerUrl: primitive(),
+    }),
+  );
+}
+
+export class IngestionDeploymentConfiguration {
+  oidcConfig!: IngestDeploymentOIDC;
+  defaultServer!: IngestDeploymentServerConfig;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(IngestionDeploymentConfiguration, {
+      oidcConfig: usingModelSchema(IngestDeploymentOIDC.serialization.schema),
+      defaultServer: usingModelSchema(
+        IngestDeploymentServerConfig.serialization.schema,
+      ),
+    }),
+  );
+}
+
+export class LegendIngestionConfiguration {
+  discoveryUrl!: string;
+  deployment!: IngestionDeploymentConfiguration;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(LegendIngestionConfiguration, {
+      discoveryUrl: primitive(),
+      deployment: usingModelSchema(
+        IngestionDeploymentConfiguration.serialization.schema,
+      ),
+    }),
+  );
+}
+
+export const validateIngestionDeploymentConfiguration = (
+  config: LegendIngestionConfiguration,
+): void => {
+  assertNonEmptyString(
+    config.deployment.defaultServer.environmentClassification,
+    'Ingestion deployment server environment classification is missing',
+  );
+  assertNonEmptyString(
+    config.deployment.defaultServer.ingestServerUrl,
+    'Ingestion deployment server URL is missing',
+  );
+  assertNonEmptyString(
+    config.discoveryUrl,
+    'Ingestion discovery URL is missing',
+  );
+};

package/src/application/LegendStudioApplicationConfig.ts

@@ -35,6 +35,10 @@ import {
   type LegendApplicationConfigurationData,
 } from '@finos/legend-application';
 import { QueryBuilderConfig } from '@finos/legend-query-builder';
+import {
+  LegendIngestionConfiguration,
+  validateIngestionDeploymentConfiguration,
+} from './LegendIngestionConfiguration.js';
 
 export class ServiceRegistrationEnvironmentConfig {
   env!: string;
@@ -106,6 +110,8 @@ class LegendStudioApplicationCoreOptions {
    */
   queryBuilderConfig: QueryBuilderConfig | undefined;
 
+  ingestDeploymentConfig: LegendIngestionConfiguration | undefined;
+
   private static readonly serialization = new SerializationFactory(
     createModelSchema(LegendStudioApplicationCoreOptions, {
       enableGraphBuilderStrictMode: optional(primitive()),
@@ -120,6 +126,9 @@ class LegendStudioApplicationCoreOptions {
       queryBuilderConfig: optional(
         usingModelSchema(QueryBuilderConfig.serialization.schema),
       ),
+      ingestDeploymentConfig: optional(
+        usingModelSchema(LegendIngestionConfiguration.serialization.schema),
+      ),
     }),
   );
 
@@ -229,6 +238,12 @@ export class LegendStudioApplicationConfig extends LegendApplicationConfig {
     this.options = LegendStudioApplicationCoreOptions.create(
       input.configData.extensions?.core ?? {},
     );
+
+    if (this.options.ingestDeploymentConfig) {
+      validateIngestionDeploymentConfiguration(
+        this.options.ingestDeploymentConfig,
+      );
+    }
   }
 
   override getDefaultApplicationStorageKey(): string {

package/src/components/ElementIconUtils.tsx

@@ -45,6 +45,7 @@ import {
   LaunchIcon,
   LinkIcon,
   PURE_DataProductIcon,
+  PURE_IngestIcon,
 } from '@finos/legend-art';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../stores/editor/utils/ModelClassifierUtils.js';
 
@@ -105,6 +106,8 @@ export const getElementTypeIcon = (
       return <PURE_GenerationSpecificationIcon />;
     case PACKAGEABLE_ELEMENT_TYPE.SNOWFLAKE_APP:
       return <PURE_SnowflakeAppIcon />;
+    case PACKAGEABLE_ELEMENT_TYPE.INGEST_DEFINITION:
+      return <PURE_IngestIcon />;
     default: {
       if (type) {
         const extraElementIconGetters = editorStore.pluginManager

package/src/components/LegendStudioWebApplication.tsx

@@ -42,6 +42,8 @@ import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../__lib__/LegendStudioDocument
 import { LazyTextEditor } from './lazy-text-editor/LazyTextEditor.js';
 import { PureCompatibilityTestManager } from './pct/PureCompatibilityTest.js';
 import { ShowcaseViewer } from './showcase/ShowcaseViewer.js';
+import { AuthProvider, type AuthProviderProps } from 'react-oidc-context';
+import type { User } from 'oidc-client-ts';
 
 const NotFoundPage = observer(() => {
   const applicationStore = useApplicationStore();
@@ -287,6 +289,33 @@ export const LegendStudioWebApplication = observer(
   (props: { baseUrl: string }) => {
     const { baseUrl } = props;
 
+    const applicationStore = useLegendStudioApplicationStore();
+    const oidcConfig =
+      applicationStore.config.options.ingestDeploymentConfig?.deployment
+        .oidcConfig;
+    if (oidcConfig) {
+      const onSigninCallback = (_user: User | undefined) => {
+        window.location.href = (_user?.state as string | undefined) ?? '/';
+      };
+
+      const mergedOIDCConfig: AuthProviderProps = {
+        ...oidcConfig.authProviderProps,
+        redirect_uri: `${window.location.origin}${oidcConfig.redirectPath}`,
+        silent_redirect_uri: `${window.location.origin}${oidcConfig.silentRedirectPath}`,
+        onSigninCallback,
+      };
+
+      return (
+        <AuthProvider {...mergedOIDCConfig}>
+          <BrowserEnvironmentProvider baseUrl={baseUrl}>
+            <LegendStudioFrameworkProvider>
+              <LegendStudioWebApplicationRouter />
+            </LegendStudioFrameworkProvider>
+          </BrowserEnvironmentProvider>
+        </AuthProvider>
+      );
+    }
+
     return (
       <BrowserEnvironmentProvider baseUrl={baseUrl}>
         <LegendStudioFrameworkProvider>

package/src/components/editor/Editor.tsx

@@ -35,7 +35,10 @@ import { GrammarTextEditor } from './editor-group/GrammarTextEditor.js';
 import { StatusBar } from './StatusBar.js';
 import { ActivityBar } from './ActivityBar.js';
 import { ShowcaseSideBar } from './ShowcaseSideBar.js';
-import type { WorkspaceEditorPathParams } from '../../__lib__/LegendStudioNavigation.js';
+import type {
+  StudioQueryParams,
+  WorkspaceEditorPathParams,
+} from '../../__lib__/LegendStudioNavigation.js';
 import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
 import { guaranteeNonNullable, isNonNullable } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
@@ -70,6 +73,8 @@ export const Editor = withEditorStore(
       `Workspace/group workspace ID is not provided`,
     );
     const editorStore = useEditorStore();
+    const studioParams =
+      editorStore.applicationStore.navigationService.navigator.getCurrentLocationParameters<StudioQueryParams>();
     const applicationStore = useApplicationStore();
     const editable =
       editorStore.graphManagerState.graphBuildState.hasCompleted &&
@@ -146,8 +151,8 @@ export const Editor = withEditorStore(
 
     // initialize
     useEffect(() => {
-      editorStore.internalizeEntityPath(params);
-    }, [editorStore, params]);
+      editorStore.internalizeEntityPath(params, studioParams);
+    }, [editorStore, params, studioParams]);
 
     useEffect(() => {
       flowResult(

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

@@ -90,6 +90,8 @@ import { HostedServiceFunctionActivatorEditorState } from '../../../stores/edito
 import { HostedServiceFunctionActivatorEditor } from './function-activator/HostedServiceFunctionActivatorEditor.js';
 import { DataProductEditorState } from '../../../stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
 import { DataProductEditor } from './dataProduct/DataPoductEditor.js';
+import { IngestDefinitionEditorState } from '../../../stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
+import { IngestDefinitionEditor } from './ingest-editor/IngestDefinitionEditor.js';
 
 export const ViewerEditorGroupSplashScreen: React.FC = () => {
   const commandListWidth = 300;
@@ -238,7 +240,6 @@ export const EditorGroup = observer(() => {
         .map((e) => e.name.toLowerCase())
         .includes(file.key.toLowerCase()),
   );
-
   const renderActiveElementTab = (): React.ReactNode => {
     if (currentTabState instanceof ElementEditorState) {
       const generationViewState = currentTabState.generationModeState;
@@ -274,6 +275,8 @@ export const EditorGroup = observer(() => {
             return <FunctionEditor key={currentTabState.uuid} />;
           } else if (currentTabState instanceof MappingEditorState) {
             return <MappingEditor key={currentTabState.uuid} />;
+          } else if (currentTabState instanceof IngestDefinitionEditorState) {
+            return <IngestDefinitionEditor key={currentTabState.uuid} />;
           } else if (currentTabState instanceof ServiceEditorState) {
             return <ServiceEditor key={currentTabState.uuid} />;
           } else if (currentTabState instanceof DataProductEditorState) {

package/src/components/editor/editor-group/ingest-editor/IngestDefinitionEditor.tsx

@@ -0,0 +1,156 @@
+/**
+ * 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 { useEditorStore } from '../../EditorStoreProvider.js';
+import {
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalTitle,
+  PanelContent,
+  PanelHeader,
+  PanelHeaderActions,
+  RocketIcon,
+} from '@finos/legend-art';
+import {
+  generateUrlToDeployOnOpen,
+  IngestDefinitionEditorState,
+} from '../../../../stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import { useEffect } from 'react';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
+import { flowResult } from 'mobx';
+import { useAuth } from 'react-oidc-context';
+
+const IngestDepoymentModal = observer(
+  (props: { state: IngestDefinitionEditorState }) => {
+    const { state } = props;
+    const applicationStore = state.editorStore.applicationStore;
+
+    return (
+      <Dialog
+        open={state.deploymentState.isInProgress}
+        classes={{ container: 'search-modal__container' }}
+      >
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="database-builder"
+        >
+          <ModalHeader>
+            <ModalTitle title="Deploy Ingestion" />
+          </ModalHeader>
+          <ModalBody>
+            <div>{state.deploymentState.message}</div>
+          </ModalBody>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+export const IngestDefinitionEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const ingestDefinitionEditorState =
+    editorStore.tabManagerState.getCurrentEditorState(
+      IngestDefinitionEditorState,
+    );
+  const ingestDef = ingestDefinitionEditorState.ingest;
+  const auth = useAuth();
+
+  const deployIngest = (): void => {
+    // Trigger OAuth flow if not authenticated
+    if (!auth.isAuthenticated) {
+      // remove this redirect if we move to do oauth at the beginning of opening studio
+      auth
+        .signinRedirect({
+          state: generateUrlToDeployOnOpen(ingestDefinitionEditorState),
+        })
+        .catch(editorStore.applicationStore.alertUnhandledError);
+      return;
+    }
+    // Use the token for deployment
+    const token = auth.user?.access_token;
+    if (token) {
+      flowResult(ingestDefinitionEditorState.deploy(token)).catch(
+        editorStore.applicationStore.alertUnhandledError,
+      );
+    } else {
+      editorStore.applicationStore.notificationService.notifyError(
+        'Authentication failed. No token available.',
+      );
+    }
+  };
+
+  const isValid = ingestDefinitionEditorState.validForDeployment;
+  useEffect(() => {
+    ingestDefinitionEditorState.generateElementGrammar();
+  }, [ingestDefinitionEditorState]);
+
+  useEffect(() => {
+    if (ingestDefinitionEditorState.deployOnOpen) {
+      flowResult(ingestDefinitionEditorState.init_with_deploy(auth)).catch(
+        editorStore.applicationStore.alertUnhandledError,
+      );
+    }
+  }, [
+    auth,
+    editorStore.applicationStore.alertUnhandledError,
+    ingestDefinitionEditorState,
+  ]);
+
+  return (
+    <div className="data-product-editor">
+      <PanelHeader
+        title="Ingest"
+        titleContent={ingestDef.name}
+        darkMode={true}
+        isReadOnly={true}
+      ></PanelHeader>
+      <PanelContent>
+        <PanelHeader title="deployment" darkMode={true}>
+          <PanelHeaderActions>
+            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+              <button
+                className="btn__dropdown-combo__label"
+                onClick={deployIngest}
+                title={ingestDefinitionEditorState.validationMessage}
+                tabIndex={-1}
+                disabled={!isValid}
+              >
+                <RocketIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">Deploy</div>
+              </button>
+            </div>
+          </PanelHeaderActions>
+        </PanelHeader>
+        <PanelContent>
+          <CodeEditor
+            inputValue={ingestDefinitionEditorState.textContent}
+            isReadOnly={true}
+            language={CODE_EDITOR_LANGUAGE.PURE}
+          />
+        </PanelContent>
+        {ingestDefinitionEditorState.deploymentState.isInProgress && (
+          <IngestDepoymentModal state={ingestDefinitionEditorState} />
+        )}
+      </PanelContent>
+    </div>
+  );
+});

package/src/components/lazy-text-editor/LazyTextEditor.tsx

@@ -365,7 +365,7 @@ export const LazyTextEditor = withEditorStore(
 
     // initialize
     useEffect(() => {
-      editorStore.internalizeEntityPath(params);
+      editorStore.internalizeEntityPath(params, undefined);
     }, [editorStore, params]);
 
     useEffect(() => {

package/src/stores/editor/EditorGraphState.ts

@@ -91,6 +91,7 @@ import {
   GraphEntities,
   HostedService,
   DataProduct,
+  IngestDefinition,
 } from '@finos/legend-graph';
 import { CONFIGURATION_EDITOR_TAB } from './editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
 import { PACKAGEABLE_ELEMENT_TYPE } from './utils/ModelClassifierUtils.js';
@@ -857,6 +858,8 @@ export class EditorGraphState {
       return PACKAGEABLE_ELEMENT_TYPE.HOSTED_SERVICE;
     } else if (element instanceof DataProduct) {
       return PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT;
+    } else if (element instanceof IngestDefinition) {
+      return PACKAGEABLE_ELEMENT_TYPE.INGEST_DEFINITION;
     }
     const extraElementTypeLabelGetters = this.editorStore.pluginManager
       .getApplicationPlugins()

package/src/stores/editor/EditorStore.ts

@@ -56,6 +56,7 @@ import {
   AssertionError,
   guaranteeType,
   type Clazz,
+  returnUndefOnError,
 } from '@finos/legend-shared';
 import { EditorSDLCState } from './EditorSDLCState.js';
 import { ModelImporterState } from './editor-state/ModelImporterState.js';
@@ -69,6 +70,8 @@ import {
   generateEditorRoute,
   generateSetupRoute,
   generateViewProjectRoute,
+  LEGEND_STUDIO_QUERY_PARAMS,
+  type StudioQueryParams,
   type WorkspaceEditorPathParams,
 } from '../../__lib__/LegendStudioNavigation.js';
 import { PanelDisplayState } from '@finos/legend-art';
@@ -118,6 +121,8 @@ import {
   LazyTextEditorStore,
 } from '../lazy-text-editor/LazyTextEditorStore.js';
 import type { QueryBuilderDataCubeViewerState } from '@finos/legend-query-builder';
+import { IngestionManager } from '../ingestion/IngestionManager.js';
+import { EditorInitialConfiguration } from './editor-state/element-editor-state/ElementEditorInitialConfiguration.js';
 
 export abstract class EditorExtensionState {
   /**
@@ -133,6 +138,7 @@ export class EditorStore implements CommandRegistrar {
   readonly applicationStore: LegendStudioApplicationStore;
   readonly sdlcServerClient: SDLCServerClient;
   readonly depotServerClient: DepotServerClient;
+  readonly ingestionManager: IngestionManager | undefined;
   readonly pluginManager: LegendStudioPluginManager;
 
   /**
@@ -145,6 +151,7 @@ export class EditorStore implements CommandRegistrar {
   readonly initState = ActionState.create();
 
   initialEntityPath?: string | undefined;
+  editorConfig: EditorInitialConfiguration | undefined;
   editorMode: EditorMode;
   // NOTE: once we clear up the editor store to make modes more separated
   // we should remove these sets of functions. They are basically hacks to
@@ -303,6 +310,16 @@ export class EditorStore implements CommandRegistrar {
       this,
       this.sdlcState,
     );
+    // ingestion
+    const ingestionConifg =
+      applicationStore.config.options.ingestDeploymentConfig;
+    if (ingestionConifg) {
+      this.ingestionManager = new IngestionManager(
+        ingestionConifg,
+        this.applicationStore,
+      );
+    }
+
     // extensions
     this.extensionStates = this.pluginManager
       .getApplicationPlugins()
@@ -549,17 +566,35 @@ export class EditorStore implements CommandRegistrar {
     this.explorerTreeState = new ExplorerTreeState(this);
   }
 
-  internalizeEntityPath(params: Partial<WorkspaceEditorPathParams>): void {
+  internalizeEntityPath(
+    params: Partial<WorkspaceEditorPathParams>,
+    studioParams: Partial<StudioQueryParams> | undefined,
+  ): void {
     const { projectId, entityPath } = params;
     const workspaceType = params.groupWorkspaceId
       ? WorkspaceType.GROUP
       : WorkspaceType.USER;
+    const editorConfig =
+      studioParams?.[LEGEND_STUDIO_QUERY_PARAMS.EDITOR_CONFIG];
     const workspaceId = guaranteeNonNullable(
       params.groupWorkspaceId ?? params.workspaceId,
       `Workspace/group workspace ID is not provided`,
     );
     if (entityPath) {
       this.initialEntityPath = entityPath;
+      if (editorConfig) {
+        const _config = returnUndefOnError(() =>
+          EditorInitialConfiguration.serialization.fromJson(
+            JSON.parse(atob(editorConfig)),
+          ),
+        );
+        const config = guaranteeNonNullable(
+          _config,
+          `error reading and serializing config ${editorConfig}`,
+        );
+
+        this.editorConfig = config;
+      }
       this.applicationStore.navigationService.navigator.updateCurrentLocation(
         generateEditorRoute(
           guaranteeNonNullable(projectId),
@@ -1031,7 +1066,10 @@ export class EditorStore implements CommandRegistrar {
         try {
           this.graphEditorMode.openElement(
             this.graphManagerState.graph.getElement(this.initialEntityPath),
+            this.editorConfig,
           );
+          // we may not want to set as undefined if using it for other things
+          this.editorConfig = undefined;
         } catch {
           const elementPath = this.initialEntityPath;
           this.initialEntityPath = undefined;

package/src/stores/editor/EditorTabManagerState.ts

@@ -36,6 +36,7 @@ import {
   SnowflakeApp,
   HostedService,
   DataProduct,
+  IngestDefinition,
 } from '@finos/legend-graph';
 import {
   type Clazz,
@@ -66,6 +67,8 @@ import { SnowflakeAppFunctionActivatorEdtiorState } from './editor-state/element
 import { HostedServiceFunctionActivatorEditorState } from './editor-state/element-editor-state/function-activator/HostedServiceFunctionActivatorEditorState.js';
 import { ArtifactGenerationViewerState } from './editor-state/ArtifactGenerationViewerState.js';
 import { DataProductEditorState } from './editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
+import { IngestDefinitionEditorState } from './editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
+import type { EditorInitialConfiguration } from './editor-state/element-editor-state/ElementEditorInitialConfiguration.js';
 
 export class EditorTabManagerState extends TabManagerState {
   readonly editorStore: EditorStore;
@@ -146,6 +149,7 @@ export class EditorTabManagerState extends TabManagerState {
 
   createElementEditorState(
     element: PackageableElement,
+    config?: EditorInitialConfiguration,
   ): ElementEditorState | undefined {
     if (element instanceof PrimitiveType) {
       throw new UnsupportedOperationError(
@@ -173,6 +177,8 @@ export class EditorTabManagerState extends TabManagerState {
       return new PackageableConnectionEditorState(this.editorStore, element);
     } else if (element instanceof Mapping) {
       return new MappingEditorState(this.editorStore, element);
+    } else if (element instanceof IngestDefinition) {
+      return new IngestDefinitionEditorState(this.editorStore, element, config);
     } else if (element instanceof Service) {
       return new ServiceEditorState(this.editorStore, element);
     } else if (element instanceof DataProduct) {

package/src/stores/editor/GraphEditFormModeState.ts

@@ -55,6 +55,7 @@ import { ElementEditorState } from './editor-state/element-editor-state/ElementE
 import { LegendStudioTelemetryHelper } from '../../__lib__/LegendStudioTelemetryHelper.js';
 import { GraphEditorMode } from './GraphEditorMode.js';
 import { GlobalBulkServiceRegistrationState } from './sidebar-state/BulkServiceRegistrationState.js';
+import type { EditorInitialConfiguration } from './editor-state/element-editor-state/ElementEditorInitialConfiguration.js';
 
 export class GraphEditFormModeState extends GraphEditorMode {
   *initialize(): GeneratorFn<void> {
@@ -567,7 +568,10 @@ export class GraphEditFormModeState extends GraphEditorMode {
     return;
   }
 
-  openElement(element: PackageableElement): void {
+  openElement(
+    element: PackageableElement,
+    config?: EditorInitialConfiguration | undefined,
+  ): void {
     if (!(element instanceof Package)) {
       const existingElementState = this.editorStore.tabManagerState.tabs.find(
         (state) =>
@@ -575,7 +579,10 @@ export class GraphEditFormModeState extends GraphEditorMode {
       );
       const newTab =
         existingElementState ??
-        this.editorStore.tabManagerState.createElementEditorState(element);
+        this.editorStore.tabManagerState.createElementEditorState(
+          element,
+          config,
+        );
       if (newTab) {
         this.editorStore.tabManagerState.openTab(newTab);
       } else {

package/src/stores/editor/GraphEditorMode.ts

@@ -22,6 +22,7 @@ import type { EditorStore } from './EditorStore.js';
 
 import type { GRAPH_EDITOR_MODE } from './EditorConfig.js';
 import type { Problem } from './EditorGraphState.js';
+import type { EditorInitialConfiguration } from './editor-state/element-editor-state/ElementEditorInitialConfiguration.js';
 
 export abstract class GraphEditorMode {
   readonly editorStore: EditorStore;
@@ -81,5 +82,8 @@ export abstract class GraphEditorMode {
     isGraphBuildFailure?: boolean;
   }): GeneratorFn<void>;
   abstract handleCleanupFailure(error: unknown): GeneratorFn<void>;
-  abstract openElement(element: PackageableElement): void;
+  abstract openElement(
+    element: PackageableElement,
+    config?: EditorInitialConfiguration | undefined,
+  ): void;
 }