@finos/legend-application-studio 15.0.0 → 15.2.0

package/src/components/editor/side-bar/CreateNewElementModal.tsx

@@ -41,6 +41,7 @@ import {
 import type { FileGenerationTypeOption } from '../../../stores/editor-state/GraphGenerationState.js';
 import { flowResult } from 'mobx';
 import {
+  buildElementOption,
   getPackageableElementOptionFormatter,
   useApplicationStore,
   type PackageableElementOption,
@@ -164,7 +165,8 @@ const NewRuntimeDriverEditor = observer(() => {
   );
   // mapping
   const mapping = newRuntimeDriver.mapping;
-  const mappingOptions = editorStore.mappingOptions;
+  const mappingOptions =
+    editorStore.graphManagerState.usableMappings.map(buildElementOption);
   const selectedMappingOption = { label: mapping?.path ?? '', value: mapping };
   const onMappingSelectionChange = (
     val: PackageableElementOption<Mapping>,
@@ -216,7 +218,10 @@ const NewPureModelConnectionDriverEditor = observer(
     }): void => newConnectionDriver.setStore(val.value);
     // class
     const _class = newConnectionValueDriver.class;
-    const classOptions = editorStore.classOptions.slice().sort(compareLabelFn);
+    const classOptions = editorStore.graphManagerState.usableClasses
+      .map(buildElementOption)
+      .slice()
+      .sort(compareLabelFn);
     const selectedClassOption = _class
       ? { label: _class.path, value: _class }
       : null;
@@ -321,7 +326,8 @@ const NewServiceDriverEditor = observer(() => {
     editorStore.newElementState.getNewElementDriver(NewServiceDriver);
   // mapping
   const currentMappingOption = newServiceDriver.mappingOption;
-  const mappingOptions = editorStore.mappingOptions;
+  const mappingOptions =
+    editorStore.graphManagerState.usableMappings.map(buildElementOption);
   const onMappingChange = (
     val: PackageableElementOption<Mapping> | null,
   ): void => {

package/src/components/editor/side-bar/testable/GlobalTestRunner.tsx

@@ -38,6 +38,7 @@ import {
 import {
   AssertFail,
   EqualToJsonAssertFail,
+  PackageableElement,
   TestError,
 } from '@finos/legend-graph';
 import { type GeneratorFn, isNonNullable } from '@finos/legend-shared';
@@ -58,6 +59,7 @@ import {
 } from '../../../../stores/sidebar-state/testable/GlobalTestRunnerState.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { TextDiffView } from '../../../shared/DiffView.js';
+import { getElementTypeIcon } from '../../../shared/ElementIconUtils.js';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 
@@ -249,6 +251,7 @@ const TestableTreeNodeContainer: React.FC<
 > = (props) => {
   const { node, level, stepPaddingInRem, onNodeSelect } = props;
   const { treeData, testableState, globalTestRunnerState } = props.innerProps;
+  const editorStore = useEditorStore();
   const results = testableState.results;
   const expandIcon =
     node instanceof AssertionTestTreeNodeData ? (
@@ -259,7 +262,16 @@ const TestableTreeNodeContainer: React.FC<
       <ChevronRightIcon />
     );
   const nodeIcon =
-    node instanceof TestableTreeNodeData ? node.testableMetadata.icon : null;
+    node instanceof TestableTreeNodeData
+      ? node.testableMetadata.testable instanceof PackageableElement
+        ? getElementTypeIcon(
+            editorStore,
+            editorStore.graphState.getPackageableElementType(
+              node.testableMetadata.testable,
+            ),
+          )
+        : null
+      : null;
   const resultIcon = getTestableResultIcon(
     getNodeTestableResult(
       node,

package/src/components/shared/StudioLambdaEditor.tsx

@@ -93,8 +93,11 @@ export const StudioLambdaEditor = observer(
               editorStore.graphState.checkLambdaParsingError(
                 lambdaEditorState,
                 !disabled,
-                () =>
-                  flowResult(editorStore.graphState.globalCompileInFormMode()),
+                async () => {
+                  await flowResult(
+                    editorStore.graphState.globalCompileInFormMode(),
+                  );
+                },
               ),
             ).catch(applicationStore.alertUnhandledError);
           },

package/src/index.ts

@@ -23,14 +23,11 @@ export * from './application/LegendStudioPluginManager.js';
 export * from './stores/LegendStudioAppEvent.js';
 
 // stores
+export { FormModeCompilationOutcome } from './stores/EditorGraphState.js';
 export * from './stores/LegendStudioApplicationPlugin.js';
 export * from './stores/EditorStore.js';
 export * from './stores/EditorConfig.js';
-export {
-  ExtensionModelImportRendererState,
-  ExtensionModelImporterEditorState,
-  ModelImporterEditorState,
-} from './stores/editor-state/ModelImporterState.js';
+export * from './stores/editor-state/ModelImporterState.js';
 export { ClassEditorState } from './stores/editor-state/element-editor-state/ClassEditorState.js';
 export { ElementEditorState } from './stores/editor-state/element-editor-state/ElementEditorState.js';
 export { UnsupportedElementEditorState } from './stores/editor-state/UnsupportedElementEditorState.js';
@@ -71,9 +68,13 @@ export {
 export * from './components/LegendStudioTestID.js';
 export * from './stores/EditorStoreTestUtils.js';
 
+export { PostProcessorEditorState } from './stores/editor-state/element-editor-state/connection/PostProcessorEditorState.js';
 export { MappingExecutionState } from './stores/editor-state/element-editor-state/mapping/MappingExecutionState.js';
 export { MappingTestState } from './stores/editor-state/element-editor-state/mapping/MappingTestState.js';
-export { ConnectionValueState } from './stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
+export {
+  ConnectionValueState,
+  RelationalDatabaseConnectionValueState,
+} from './stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 export * from './stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 export { MappingElementState } from './stores/editor-state/element-editor-state/mapping/MappingElementState.js';
 export { UnsupportedInstanceSetImplementationState } from './stores/editor-state/element-editor-state/mapping/UnsupportedInstanceSetImplementationState.js';
@@ -92,7 +93,7 @@ export { WorkspaceSetupStore } from './stores/workspace-setup/WorkspaceSetupStor
  */
 
 export {
-  ConnectionEditor_StringEditor,
+  ConnectionEditor_TextEditor,
   ConnectionEditor_BooleanEditor,
   ConnectionEditor_ArrayEditor,
 } from './components/editor/edit-panel/connection-editor/RelationalDatabaseConnectionEditor.js';

package/src/stores/EditorGraphState.ts

@@ -110,6 +110,14 @@ export enum GraphBuilderStatus {
   REDIRECTED_TO_TEXT_MODE = 'REDIRECTED_TO_TEXT_MODE',
 }
 
+export enum FormModeCompilationOutcome {
+  SKIPPED = 'SKIPPED',
+  SUCCEEDED = 'SUCCEEDED',
+  FAILED = 'FAILED',
+  FAILED_WITH_ERROR_REVEALED = 'FAILED_WITH_ERROR_REVEALED',
+  FAILED_AND_FALLBACK_TO_TEXT_MODE = 'FAILED_AND_FALLBACK_TO_TEXTMODE',
+}
+
 export interface GraphBuilderResult {
   status: GraphBuilderStatus;
   error?: Error;
@@ -461,13 +469,13 @@ export class EditorGraphState {
     message?: string;
     disableNotificationOnSuccess?: boolean;
     openConsole?: boolean;
-  }): GeneratorFn<void> {
+  }): GeneratorFn<FormModeCompilationOutcome> {
     assertTrue(
       this.editorStore.isInFormMode,
       'Editor must be in form mode to call this method',
     );
     if (this.checkIfApplicationUpdateOperationIsRunning()) {
-      return;
+      return FormModeCompilationOutcome.SKIPPED;
     }
     this.isRunningGlobalCompile = true;
     try {
@@ -490,6 +498,7 @@ export class EditorGraphState {
           'Compiled successfully',
         );
       }
+      return FormModeCompilationOutcome.SUCCEEDED;
     } catch (error) {
       assertErrorThrown(error);
       // TODO: we probably should make this pattern of error the handling for all other exceptions in the codebase
@@ -548,19 +557,22 @@ export class EditorGraphState {
           this.editorStore.applicationStore.notifyWarning(
             `Can't enter text mode. Transformation to grammar text failed: ${error2.message}`,
           );
-          return;
+          return FormModeCompilationOutcome.FAILED;
         }
         this.editorStore.setGraphEditMode(GRAPH_EDITOR_MODE.GRAMMAR_TEXT);
         yield flowResult(
           this.globalCompileInTextMode({
             ignoreBlocking: true,
             suppressCompilationFailureMessage: true,
+            disableNotificationOnSuccess: options?.disableNotificationOnSuccess,
           }),
         );
+        return FormModeCompilationOutcome.FAILED_AND_FALLBACK_TO_TEXT_MODE;
       } else {
         this.editorStore.applicationStore.notifyWarning(
           `Compilation failed: ${error.message}`,
         );
+        return FormModeCompilationOutcome.FAILED_WITH_ERROR_REVEALED;
       }
     } finally {
       this.isRunningGlobalCompile = false;
@@ -570,8 +582,9 @@ export class EditorGraphState {
   // TODO: when we support showing multiple notifications, we can take this `suppressCompilationFailureMessage` out as
   // we can show the transition between form mode and text mode warning and the compilation failure warning at the same time
   *globalCompileInTextMode(options?: {
-    ignoreBlocking?: boolean;
-    suppressCompilationFailureMessage?: boolean;
+    ignoreBlocking?: boolean | undefined;
+    suppressCompilationFailureMessage?: boolean | undefined;
+    disableNotificationOnSuccess?: boolean | undefined;
     openConsole?: boolean;
   }): GeneratorFn<void> {
     assertTrue(
@@ -595,7 +608,13 @@ export class EditorGraphState {
           this.editorStore.grammarTextEditorState.graphGrammarText,
           this.editorStore.graphManagerState.graph,
         )) as Entity[];
-      this.editorStore.applicationStore.notifySuccess('Compiled successfully');
+
+      if (!options?.disableNotificationOnSuccess) {
+        this.editorStore.applicationStore.notifySuccess(
+          'Compiled successfully',
+        );
+      }
+
       yield flowResult(this.updateGraphAndApplication(entities));
     } catch (error) {
       assertErrorThrown(error);

package/src/stores/EditorStore.ts

@@ -95,7 +95,6 @@ import {
 } from '@finos/legend-server-sdlc';
 import {
   type PackageableElement,
-  type Type,
   type Store,
   type GraphManagerState,
   GRAPH_MANAGER_EVENT,
@@ -114,7 +113,6 @@ import {
   PackageableConnection,
   FileGenerationSpecification,
   GenerationSpecification,
-  PRIMITIVE_TYPE,
   Package,
   DataElement,
   isElementReadOnly,
@@ -1344,89 +1342,12 @@ export class EditorStore {
     }
   }
 
-  get enumerationOptions(): PackageableElementOption<Enumeration>[] {
-    return this.graphManagerState.graph.ownEnumerations
-      .concat(this.graphManagerState.graph.dependencyManager.enumerations)
-      .map(buildElementOption);
-  }
-
-  get classOptions(): PackageableElementOption<Class>[] {
-    return this.graphManagerState.graph.ownClasses
-      .concat(
-        this.graphManagerState.collectExposedSystemElements(
-          this.graphManagerState.graph.systemModel.ownClasses,
-        ),
-      )
-      .concat(this.graphManagerState.graph.dependencyManager.classes)
-      .map(buildElementOption);
-  }
-
-  get associationOptions(): PackageableElementOption<Association>[] {
-    return this.graphManagerState.graph.ownAssociations
-      .concat(
-        this.graphManagerState.collectExposedSystemElements(
-          this.graphManagerState.graph.systemModel.ownAssociations,
-        ),
-      )
-      .concat(this.graphManagerState.graph.dependencyManager.associations)
-      .map(buildElementOption);
-  }
-
-  get profileOptions(): PackageableElementOption<Profile>[] {
-    return this.graphManagerState.graph.ownProfiles
-      .concat(
-        this.graphManagerState.collectExposedSystemElements(
-          this.graphManagerState.graph.systemModel.ownProfiles,
-        ),
-      )
-      .concat(this.graphManagerState.graph.dependencyManager.profiles)
-      .map(buildElementOption);
-  }
-
-  get classPropertyGenericTypeOptions(): PackageableElementOption<Type>[] {
-    return this.graphManagerState.graph.primitiveTypes
-      .filter((p) => p.path !== PRIMITIVE_TYPE.LATESTDATE)
-      .map(buildElementOption)
-      .concat(
-        this.graphManagerState.graph.ownTypes
-          .concat(
-            this.graphManagerState.collectExposedSystemElements(
-              this.graphManagerState.graph.systemModel.ownTypes,
-            ),
-          )
-          .concat(this.graphManagerState.graph.dependencyManager.types)
-          .map(buildElementOption),
-      );
-  }
-
-  get mappingOptions(): PackageableElementOption<Mapping>[] {
-    return this.graphManagerState.graph.ownMappings
-      .concat(this.graphManagerState.graph.dependencyManager.mappings)
-      .map(buildElementOption);
-  }
-
-  get runtimeOptions(): PackageableElementOption<PackageableRuntime>[] {
-    return this.graphManagerState.graph.ownRuntimes
-      .concat(this.graphManagerState.graph.dependencyManager.runtimes)
-      .map(buildElementOption);
-  }
-
-  get serviceOptions(): PackageableElementOption<Service>[] {
-    return this.graphManagerState.graph.ownServices
-      .concat(this.graphManagerState.graph.dependencyManager.services)
-      .map(buildElementOption);
-  }
-
   get storeOptions(): PackageableElementOption<Store>[] {
-    return this.graphManagerState.graph.ownStores
-      .concat(this.graphManagerState.graph.dependencyManager.stores)
-      .map(buildElementOption);
+    return this.graphManagerState.usableStores.map(buildElementOption);
   }
 
   get dataOptions(): PackageableElementOption<DataElement>[] {
-    return this.graphManagerState.graph.ownDataElements
-      .concat(this.graphManagerState.graph.dependencyManager.dataElements)
-      .map(buildElementOption);
+    return this.graphManagerState.usableDataElements.map(buildElementOption);
   }
 
   getSupportedElementTypes(): string[] {

package/src/stores/StoreRelational_LegendStudioApplicationPlugin_Extension.ts

@@ -18,7 +18,11 @@ import type { DSL_LegendStudioApplicationPlugin_Extension } from './LegendStudio
 import type {
   DatasourceSpecification,
   AuthenticationStrategy,
+  PostProcessor,
+  ObserverContext,
 } from '@finos/legend-graph';
+import type { RelationalDatabaseConnectionValueState } from './editor-state/element-editor-state/connection/ConnectionEditorState.js';
+import type { PostProcessorEditorState } from './editor-state/element-editor-state/connection/PostProcessorEditorState.js';
 
 // connection datasource specification
 
@@ -50,6 +54,29 @@ export type AuthenticationStrategyEditorRenderer = (
   isReadOnly: boolean,
 ) => React.ReactNode | undefined;
 
+// connection post-processor
+
+export type PostProcessorTypeGetter = (
+  metamodel: PostProcessor,
+) => string | undefined;
+
+export type PostProcessorCreator = (
+  type: string,
+  connectionValueState: RelationalDatabaseConnectionValueState,
+  observerContext: ObserverContext,
+) => PostProcessor | undefined;
+
+export type PostProcessorEditorRenderer = (
+  metamodel: PostProcessor,
+  connectionValueState: RelationalDatabaseConnectionValueState,
+  isReadOnly: boolean,
+) => React.ReactNode | undefined;
+
+export type PostProcessorStateCreator = (
+  metamodel: PostProcessor,
+  connectionValueState: RelationalDatabaseConnectionValueState,
+) => PostProcessorEditorState | undefined;
+
 export interface StoreRelational_LegendStudioApplicationPlugin_Extension
   extends DSL_LegendStudioApplicationPlugin_Extension {
   // --------------------- relational database connection datasource specification ------------------
@@ -97,4 +124,32 @@ export interface StoreRelational_LegendStudioApplicationPlugin_Extension
    * Get the list of renderers for the editor for a relational database authentication strategy.
    */
   getExtraAuthenticationStrategyEditorRenderers?(): AuthenticationStrategyEditorRenderer[];
+
+  // --------------------- relational database connection post-processor ------------------
+
+  /**
+   * Get the list of the supported type for post-processors.
+   *
+   */
+  getExtraPostProcessorClassifiers?(): string[];
+
+  /**
+   * Get the list of classifiers for a post-processor.
+   */
+  getExtraPostProcessorClassifierGetters?(): PostProcessorTypeGetter[];
+
+  /**
+   * Get the list of creators for post-processor given the type specifier.
+   */
+  getExtraPostProcessorCreators?(): PostProcessorCreator[];
+
+  /**
+   * Get the list of state creators for a post-processor.
+   */
+  getExtraPostProcessorStateCreators?(): PostProcessorStateCreator[];
+
+  /**
+   * Get the list of renderers for the editor for a post-processor.
+   */
+  getExtraPostProcessorEditorRenderers?(): PostProcessorEditorRenderer[];
 }

package/src/stores/editor/NewElementState.ts

@@ -92,7 +92,10 @@ import {
 import type { EmbeddedDataTypeOption } from '../editor-state/element-editor-state/data/DataEditorState.js';
 import { dataElement_setEmbeddedData } from '../graphModifier/DSLData_GraphModifierHelper.js';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../shared/ModelUtil.js';
-import type { PackageableElementOption } from '@finos/legend-application';
+import {
+  buildElementOption,
+  type PackageableElementOption,
+} from '@finos/legend-application';
 import { EmbeddedDataType } from '../editor-state/ExternalFormatState.js';
 import { createEmbeddedData } from '../editor-state/element-editor-state/data/EmbeddedDataState.js';
 
@@ -302,7 +305,7 @@ export class NewRelationalDatabaseConnectionDriver extends NewConnectionValueDri
     if (store instanceof Database) {
       selectedStore = store;
     } else {
-      const dbs = this.editorStore.graphManagerState.graph.databases;
+      const dbs = this.editorStore.graphManagerState.usableDatabases;
       selectedStore = dbs.length ? (dbs[0] as Database) : stub_Database();
     }
     return new RelationalDatabaseConnection(
@@ -431,7 +434,8 @@ export class NewServiceDriver extends NewElementDriver<Service> {
       isValid: computed,
       createElement: action,
     });
-    this.mappingOption = editorStore.mappingOptions[0];
+    this.mappingOption =
+      editorStore.graphManagerState.usableMappings.map(buildElementOption)[0];
   }
 
   setMappingOption(val: PackageableElementOption<Mapping> | undefined): void {
@@ -447,10 +451,7 @@ export class NewServiceDriver extends NewElementDriver<Service> {
     const _mapping = mappingOption.value;
     const mapping = PackageableElementExplicitReference.create(_mapping);
     const service = new Service(name);
-    const runtimes =
-      this.editorStore.graphManagerState.graph.ownRuntimes.concat(
-        this.editorStore.graphManagerState.graph.dependencyManager.runtimes,
-      );
+    const runtimes = this.editorStore.graphManagerState.usableRuntimes;
     const compatibleRuntimes = runtimes.filter((runtime) =>
       runtime.runtimeValue.mappings.map((m) => m.value).includes(_mapping),
     );

package/src/stores/editor-state/ModelImporterState.ts

@@ -270,12 +270,10 @@ export class NativeModelImporterEditorState extends ModelImporterEditorState {
 }
 
 export abstract class ExtensionModelImportRendererState {
-  externalFormatModelImporterState: ExternalFormatModelImporterState;
+  importerState: ModelImporterState;
 
-  constructor(
-    externalFormatModelImporterState: ExternalFormatModelImporterState,
-  ) {
-    this.externalFormatModelImporterState = externalFormatModelImporterState;
+  constructor(importerState: ModelImporterState) {
+    this.importerState = importerState;
   }
 }
 export class ExtensionModelImporterEditorState extends ModelImporterEditorState {
@@ -501,16 +499,20 @@ export class ModelImporterState extends EditorState {
   setModelImporterExtension(
     extension: ModelImporterExtensionConfiguration,
   ): ExtensionModelImporterEditorState {
-    const externalEditorState =
-      this.modelImportEditorState instanceof ExtensionModelImporterEditorState
-        ? this.modelImportEditorState
-        : new ExtensionModelImporterEditorState(
-            extension,
-            extension.getExtensionModelImportRendererStateCreator(this),
-            this,
-          );
-    externalEditorState.setExtension(extension);
-    this.setImportEditorState(externalEditorState);
-    return externalEditorState;
+    if (
+      this.modelImportEditorState instanceof
+        ExtensionModelImporterEditorState &&
+      this.modelImportEditorState.config === extension
+    ) {
+      return this.modelImportEditorState;
+    } else {
+      const modelImporterEditorState = new ExtensionModelImporterEditorState(
+        extension,
+        extension.getExtensionModelImportRendererStateCreator(this),
+        this,
+      );
+      this.setImportEditorState(modelImporterEditorState);
+      return modelImporterEditorState;
+    }
   }
 }

package/src/stores/editor-state/element-editor-state/connection/ConnectionEditorState.ts

@@ -52,12 +52,18 @@ import {
   RedshiftDatasourceSpecification,
   createValidationError,
   isStubbed_PackageableElement,
+  type PostProcessor,
+  MapperPostProcessor,
 } from '@finos/legend-graph';
 import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../DSLMapping_LegendStudioApplicationPlugin_Extension.js';
 import {
   relationDbConnection_setNewAuthenticationStrategy,
   relationDbConnection_setDatasourceSpecification,
 } from '../../../graphModifier/StoreRelational_GraphModifierHelper.js';
+import {
+  MapperPostProcessorEditorState,
+  type PostProcessorEditorState,
+} from './PostProcessorEditorState.js';
 
 export abstract class ConnectionValueState {
   editorStore: EditorStore;
@@ -74,6 +80,7 @@ export abstract class ConnectionValueState {
 export enum RELATIONAL_DATABASE_TAB_TYPE {
   GENERAL = 'GENERAL',
   STORE = 'STORE',
+  POST_PROCESSORS = 'POST-PROCESSORS',
 }
 
 export enum CORE_DATASOURCE_SPEC_TYPE {
@@ -86,6 +93,10 @@ export enum CORE_DATASOURCE_SPEC_TYPE {
   BIGQUERY = 'BIGQUERY',
 }
 
+export enum POST_PROCESSOR_TYPE {
+  MAPPER = 'MAPPER',
+}
+
 export enum CORE_AUTHENTICATION_STRATEGY_TYPE {
   DELEGATED_KERBEROS = 'DELEGATED_KERBEROS',
   H2_DEFAULT = 'H2_DEFAULT',
@@ -102,6 +113,7 @@ export class RelationalDatabaseConnectionValueState extends ConnectionValueState
   override connection: RelationalDatabaseConnection;
   selectedTab = RELATIONAL_DATABASE_TAB_TYPE.GENERAL;
   databaseBuilderState: DatabaseBuilderState;
+  postProcessorState: PostProcessorEditorState | undefined;
 
   constructor(
     editorStore: EditorStore,
@@ -109,17 +121,50 @@ export class RelationalDatabaseConnectionValueState extends ConnectionValueState
   ) {
     super(editorStore, connection);
     makeObservable(this, {
-      setSelectedTab: action,
       databaseBuilderState: observable,
       selectedTab: observable,
+      postProcessorState: observable,
+      setSelectedTab: action,
+      selectPostProcessor: action,
     });
+
     this.connection = connection;
+
     this.databaseBuilderState = new DatabaseBuilderState(
       editorStore,
       connection,
     );
   }
 
+  selectPostProcessor = (postProcessor: PostProcessor | undefined): void => {
+    if (!this.postProcessorState && postProcessor) {
+      if (postProcessor instanceof MapperPostProcessor) {
+        this.postProcessorState = new MapperPostProcessorEditorState(
+          postProcessor,
+          this,
+        );
+      } else {
+        const extraPostProcessorStateCreators = this.editorStore.pluginManager
+          .getApplicationPlugins()
+          .flatMap(
+            (plugin) =>
+              (
+                plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+              ).getExtraPostProcessorStateCreators?.() ?? [],
+          );
+        for (const creator of extraPostProcessorStateCreators) {
+          const postProcessorState = creator(postProcessor, this);
+          if (postProcessorState) {
+            this.postProcessorState = postProcessorState;
+          }
+        }
+      }
+    }
+    if (this.postProcessorState) {
+      this.postProcessorState.setPostProcessorState(postProcessor);
+    }
+  };
+
   get storeValidationResult(): ValidationIssue | undefined {
     return isStubbed_PackageableElement(this.connection.store.value)
       ? createValidationError(['Connection database cannot be empty'])
@@ -480,6 +525,7 @@ export class PackageableConnectionEditorState extends ElementEditorState {
       editorStore,
       newElement,
     );
+
     return editorState;
   }
 }

package/src/stores/editor-state/element-editor-state/connection/PostProcessorEditorState.ts

@@ -0,0 +1,73 @@
+/**
+ * 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 type {
+  PostProcessor,
+  Mapper,
+  MapperPostProcessor,
+} from '@finos/legend-graph';
+import { makeObservable, observable, action } from 'mobx';
+import type { RelationalDatabaseConnectionValueState } from './ConnectionEditorState.js';
+
+export abstract class PostProcessorEditorState {
+  postProcessor: PostProcessor | undefined;
+  connectionValueState: RelationalDatabaseConnectionValueState;
+
+  constructor(
+    postProcessor: PostProcessor | undefined,
+    connectionValueState: RelationalDatabaseConnectionValueState,
+  ) {
+    makeObservable(this, {
+      postProcessor: observable,
+      connectionValueState: observable,
+    });
+
+    this.postProcessor = postProcessor;
+    this.connectionValueState = connectionValueState;
+  }
+
+  abstract setPostProcessorState(val: PostProcessor | undefined): void;
+}
+
+export class MapperPostProcessorEditorState extends PostProcessorEditorState {
+  selectedMapper: Mapper | undefined;
+
+  constructor(
+    postProcessor: MapperPostProcessor | undefined,
+    connectionValueState: RelationalDatabaseConnectionValueState,
+  ) {
+    super(postProcessor, connectionValueState);
+
+    makeObservable(this, {
+      selectedMapper: observable,
+      setSelectedMapper: action,
+      setPostProcessorState: action,
+    });
+
+    this.postProcessor = postProcessor;
+    this.connectionValueState = connectionValueState;
+  }
+
+  setPostProcessorState = (val: PostProcessor | undefined): void => {
+    this.postProcessor = val;
+
+    this.setSelectedMapper(undefined);
+  };
+
+  setSelectedMapper = (val: Mapper | undefined): void => {
+    this.selectedMapper = val;
+  };
+}