@finos/legend-application-studio 15.1.0 → 15.2.0

package/src/components/editor/edit-panel/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -20,6 +20,7 @@ import {
   CORE_AUTHENTICATION_STRATEGY_TYPE,
   CORE_DATASOURCE_SPEC_TYPE,
   RELATIONAL_DATABASE_TAB_TYPE,
+  POST_PROCESSOR_TYPE,
 } from '../../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 import { useState } from 'react';
 import {
@@ -33,11 +34,27 @@ import {
   TimesIcon,
   ErrorIcon,
   PencilIcon,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PlusIcon,
+  PanelTextEditor,
+  ContextMenu,
+  MenuContent,
+  MenuContentItem,
+  PanelListSelectorItem,
+  DropdownMenu,
+  PanelTabs,
+  BlankPanelContent,
+  ResizablePanelSplitterLine,
+  PanelContent,
+  Panel,
 } from '@finos/legend-art';
 import { capitalize, prettyCONSTName } from '@finos/legend-shared';
+
 import {
   type RelationalDatabaseConnection,
   type Store,
+  type PostProcessor,
   DatabaseType,
   DelegatedKerberosAuthenticationStrategy,
   OAuthAuthenticationStrategy,
@@ -54,6 +71,7 @@ import {
   BigQueryDatasourceSpecification,
   RedshiftDatasourceSpecification,
   PackageableElementExplicitReference,
+  MapperPostProcessor,
 } from '@finos/legend-graph';
 import { runInAction } from 'mobx';
 import type { LegendStudioApplicationPlugin } from '../../../../stores/LegendStudioApplicationPlugin.js';
@@ -116,7 +134,12 @@ import {
   gcpWorkloadIdentityFederationAuthenticationStrategy_setServiceAccountEmail,
   gcpWorkloadIdentityFederationAuthenticationStrategy_setAdditionalGcpScopes,
   middleTierUsernamePasswordAuthenticationStrategy_setVaultReference,
+  relationalDatabaseConnection_addPostProcessor,
+  relationalDatabaseConnection_deletePostProcessor,
 } from '../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+import { MapperPostProcessorEditor } from './post-processor-editor/MapperPostProcessorEditor.js';
+import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
+import type { MapperPostProcessorEditorState } from '../../../../stores/editor-state/element-editor-state/connection/PostProcessorEditorState.js';
 
 /**
  * NOTE: this is a WIP we did to quickly assemble a modular UI for relational database connection editor
@@ -126,13 +149,13 @@ import {
 // TODO: consider to move this to shared
 export const ConnectionEditor_BooleanEditor = observer(
   (props: {
-    propertyName: string;
+    name: string;
     description?: string;
     value: boolean | undefined;
     isReadOnly: boolean;
     update: (value: boolean | undefined) => void;
   }) => {
-    const { value, propertyName, description, isReadOnly, update } = props;
+    const { value, name, description, isReadOnly, update } = props;
     const toggle = (): void => {
       if (!isReadOnly) {
         update(!value);
@@ -142,7 +165,7 @@ export const ConnectionEditor_BooleanEditor = observer(
     return (
       <div className="panel__content__form__section">
         <div className="panel__content__form__section__header__label">
-          {capitalize(propertyName)}
+          {capitalize(name)}
         </div>
         <div
           className={clsx('panel__content__form__section__toggler', {
@@ -168,60 +191,22 @@ export const ConnectionEditor_BooleanEditor = observer(
   },
 );
 
-// TODO: consider to move this to shared
-export const ConnectionEditor_StringEditor = observer(
-  (props: {
-    propertyName: string;
-    description?: string;
-    value: string | undefined;
-    isReadOnly: boolean;
-    update: (value: string | undefined) => void;
-  }) => {
-    const { value, propertyName, description, isReadOnly, update } = props;
-    const displayValue = value ?? '';
-    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-      const stringValue = event.target.value;
-      const updatedValue = stringValue ? stringValue : undefined;
-      update(updatedValue);
-    };
-
-    return (
-      <div className="panel__content__form__section">
-        <div className="panel__content__form__section__header__label">
-          {capitalize(propertyName)}
-        </div>
-        <div className="panel__content__form__section__header__prompt">
-          {description}
-        </div>
-        <input
-          className="panel__content__form__section__input"
-          spellCheck={false}
-          disabled={isReadOnly}
-          value={displayValue}
-          onChange={changeValue}
-        />
-      </div>
-    );
-  },
-);
-
 // TODO: consider to move this to shared
 export const ConnectionEditor_TextEditor = observer(
   (props: {
-    propertyName: string;
+    name: string;
     description?: string;
     value: string | undefined;
     isReadOnly: boolean;
     language: EDITOR_LANGUAGE;
     update: (value: string | undefined) => void;
   }) => {
-    const { value, propertyName, description, isReadOnly, language, update } =
-      props;
+    const { value, name, description, isReadOnly, language, update } = props;
 
     return (
       <div className="panel__content__form__section">
         <div className="panel__content__form__section__header__label">
-          {capitalize(propertyName)}
+          {capitalize(name)}
         </div>
         <div className="panel__content__form__section__header__prompt">
           {description}
@@ -242,13 +227,13 @@ export const ConnectionEditor_TextEditor = observer(
 // TODO: consider to move this to shared
 export const ConnectionEditor_ArrayEditor = observer(
   (props: {
-    propertyName: string;
+    name: string;
     description?: string;
     values: string[];
     isReadOnly: boolean;
     update: (updatedValues: string[]) => void;
   }) => {
-    const { propertyName, description, values, isReadOnly, update } = props;
+    const { name, description, values, isReadOnly, update } = props;
     const arrayValues = values;
     // NOTE: `showEditInput` is either boolean (to hide/show the add value button) or a number (index of the item being edited)
     const [showEditInput, setShowEditInput] = useState<boolean | number>(false);
@@ -300,7 +285,7 @@ export const ConnectionEditor_ArrayEditor = observer(
     return (
       <div className="panel__content__form__section">
         <div className="panel__content__form__section__header__label">
-          {capitalize(propertyName)}
+          {capitalize(name)}
         </div>
         <div className="panel__content__form__section__header__prompt">
           {description}
@@ -434,7 +419,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
         <ConnectionEditor_TextEditor
           isReadOnly={isReadOnly}
           value={SQLValue}
-          propertyName={'test data setup SQL'}
+          name={'test data setup SQL'}
           language={EDITOR_LANGUAGE.SQL}
           update={(value: string | undefined): void =>
             localH2DatasourceSpecification_setTestDataSetupSqls(
@@ -448,7 +433,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
   },
 );
 
-// data source
+//data source
 const StaticDatasourceSpecificationEditor = observer(
   (props: {
     sourceSpec: StaticDatasourceSpecification;
@@ -462,10 +447,10 @@ const StaticDatasourceSpecificationEditor = observer(
 
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.host}
-          propertyName={'host'}
+          name={'host'}
           update={(value: string | undefined): void =>
             staticDatasourceSpecification_setHost(sourceSpec, value ?? '')
           }
@@ -483,10 +468,10 @@ const StaticDatasourceSpecificationEditor = observer(
             onChange={changePort}
           />
         </div>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
-          propertyName={'database'}
+          name={'database'}
           update={(value: string | undefined): void =>
             staticDatasourceSpecification_setDatabaseName(
               sourceSpec,
@@ -507,10 +492,10 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
     const { sourceSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
-          propertyName={'database'}
+          name={'database'}
           update={(value: string | undefined): void =>
             embeddedH2DatasourceSpecification_setDatabaseName(
               sourceSpec,
@@ -518,10 +503,10 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.directory}
-          propertyName={'directory'}
+          name={'directory'}
           update={(value: string | undefined): void =>
             embeddedH2DatasourceSpecification_setDirectory(
               sourceSpec,
@@ -532,7 +517,7 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
         <ConnectionEditor_BooleanEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.autoServerMode}
-          propertyName={'auto server mode'}
+          name={'auto server mode'}
           update={(value?: boolean): void =>
             embeddedH2DatasourceSpecification_setAutoServerMode(
               sourceSpec,
@@ -553,10 +538,10 @@ const DatabricksDatasourceSpecificationEditor = observer(
     const { sourceSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.hostname}
-          propertyName="hostname"
+          name="hostname"
           update={(value: string | undefined): void =>
             databricksDatasourceSpecification_setHostName(
               sourceSpec,
@@ -564,18 +549,18 @@ const DatabricksDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.port}
-          propertyName="port"
+          name="port"
           update={(value: string | undefined): void =>
             databricksDatasourceSpecification_setPort(sourceSpec, value ?? '')
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.protocol}
-          propertyName="protocol"
+          name="protocol"
           update={(value: string | undefined): void =>
             databricksDatasourceSpecification_setProtocol(
               sourceSpec,
@@ -583,10 +568,10 @@ const DatabricksDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.httpPath}
-          propertyName="httpPath"
+          name="httpPath"
           update={(value: string | undefined): void =>
             databricksDatasourceSpecification_setHttpPath(
               sourceSpec,
@@ -607,90 +592,90 @@ const SnowflakeDatasourceSpecificationEditor = observer(
     const { sourceSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.accountName}
-          propertyName="account"
+          name="account"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setAccountName(sourceSpec, value ?? '')
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.region}
-          propertyName="region"
+          name="region"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setRegion(sourceSpec, value ?? '')
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.warehouseName}
-          propertyName="warehouse"
+          name="warehouse"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setWarehouseName(sourceSpec, value ?? '')
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
-          propertyName="database"
+          name="database"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setDatabaseName(sourceSpec, value ?? '')
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.cloudType}
-          propertyName="cloud type"
+          name="cloud type"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setCloudType(sourceSpec, value)
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyHost}
-          propertyName="proxy host"
+          name="proxy host"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setProxyHost(sourceSpec, value)
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyPort}
-          propertyName="proxy port"
+          name="proxy port"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setProxyPort(sourceSpec, value)
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.nonProxyHosts}
-          propertyName="non proxy hosts"
+          name="non proxy hosts"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setNonProxyHosts(sourceSpec, value)
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.organization}
-          propertyName="organization"
+          name="organization"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setOrganization(sourceSpec, value)
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.accountType}
-          propertyName="account type"
+          name="account type"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setAccountType(sourceSpec, value)
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.role}
-          propertyName="role"
+          name="role"
           update={(value: string | undefined): void =>
             snowflakeDatasourceSpec_setRole(sourceSpec, value)
           }
@@ -699,7 +684,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
         <ConnectionEditor_BooleanEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.quotedIdentifiersIgnoreCase}
-          propertyName="quoted identifiers ignore case"
+          name="quoted identifiers ignore case"
           description="Controls whether Snowflake will treat alphabetic characters in double-quoted identifiers as uppercase"
           update={(value: boolean | undefined): void =>
             snowflakeDatasourceSpec_setQuotedIdentifiersIgnoreCase(
@@ -725,10 +710,10 @@ const RedshiftDatasourceSpecificationEditor = observer(
     };
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.host}
-          propertyName="host"
+          name="host"
           update={(value: string | undefined): void =>
             redshiftDatasourceSpecification_setHost(sourceSpec, value ?? '')
           }
@@ -746,10 +731,10 @@ const RedshiftDatasourceSpecificationEditor = observer(
             onChange={changePort}
           />
         </div>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
-          propertyName="database"
+          name="database"
           update={(value: string | undefined): void =>
             redshiftDatasourceSpecification_setDatabaseName(
               sourceSpec,
@@ -758,18 +743,18 @@ const RedshiftDatasourceSpecificationEditor = observer(
           }
         />
 
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.region}
-          propertyName="region"
+          name="region"
           update={(value: string | undefined): void =>
             redshiftDatasourceSpecification_setRegion(sourceSpec, value ?? '')
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.clusterID}
-          propertyName="cluster"
+          name="cluster"
           update={(value: string | undefined): void =>
             redshiftDatasourceSpecification_setClusterID(
               sourceSpec,
@@ -777,10 +762,10 @@ const RedshiftDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.endpointURL}
-          propertyName="endpointURL"
+          name="endpointURL"
           update={(value: string | undefined): void =>
             redshiftDatasourceSpecification_setEndpointURL(
               sourceSpec,
@@ -801,10 +786,10 @@ const BigQueryDatasourceSpecificationEditor = observer(
     const { sourceSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.projectId}
-          propertyName={'project id'}
+          name={'project id'}
           update={(value: string | undefined): void =>
             bigQueryDatasourceSpecification_setProjectId(
               sourceSpec,
@@ -812,10 +797,10 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.defaultDataset}
-          propertyName={'default dataset'}
+          name={'default dataset'}
           update={(value: string | undefined): void =>
             bigQueryDatasourceSpecification_setDefaultDataset(
               sourceSpec,
@@ -823,10 +808,10 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyHost}
-          propertyName="proxy host"
+          name="proxy host"
           description="Specifies proxy host for connection to GCP BigQuery"
           update={(value: string | undefined): void =>
             bigQueryDatasourceSpecification_setProxyHost(
@@ -835,10 +820,10 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyPort}
-          propertyName="proxy port"
+          name="proxy port"
           description="Specifies proxy port for connection to GCP BigQuery"
           update={(value: string | undefined): void =>
             bigQueryDatasourceSpecification_setProxyPort(
@@ -862,10 +847,10 @@ const DelegatedKerberosAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.serverPrincipal}
-          propertyName={'server principal'}
+          name={'server principal'}
           update={(value: string | undefined): void =>
             delegatedKerberosAuthenticationStrategy_setServerPrincipal(
               authSpec,
@@ -886,10 +871,10 @@ const ApiTokenAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.apiToken}
-          propertyName={'apiTokenRef'}
+          name={'apiTokenRef'}
           update={(value: string | undefined): void =>
             apiTokenAuthenticationStrategy_setApiToken(authSpec, value ?? '')
           }
@@ -907,10 +892,10 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.privateKeyVaultReference}
-          propertyName={'private key vault reference'}
+          name={'private key vault reference'}
           update={(value: string | undefined): void =>
             snowflakePublicAuthenticationStrategy_setPrivateKeyVaultReference(
               authSpec,
@@ -918,10 +903,10 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.passPhraseVaultReference}
-          propertyName={'pass phrase vault reference'}
+          name={'pass phrase vault reference'}
           update={(value: string | undefined): void =>
             snowflakePublicAuthenticationStrategy_setPassPhraseVaultReference(
               authSpec,
@@ -929,10 +914,10 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.publicUserName}
-          propertyName={'public user name'}
+          name={'public user name'}
           update={(value: string | undefined): void =>
             snowflakePublicAuthenticationStrategy_setPublicUserName(
               authSpec,
@@ -950,18 +935,18 @@ const OAuthAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.oauthKey}
-          propertyName={'oauth key'}
+          name={'oauth key'}
           update={(value: string | undefined): void =>
             oAuthAuthenticationStrategy_setOauthKey(authSpec, value ?? '')
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.scopeName}
-          propertyName={'scope name'}
+          name={'scope name'}
           update={(value: string | undefined): void =>
             oAuthAuthenticationStrategy_setScopeName(authSpec, value ?? '')
           }
@@ -979,10 +964,10 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.baseVaultReference}
-          propertyName={'base vault reference'}
+          name={'base vault reference'}
           update={(value: string | undefined): void =>
             usernamePasswordAuthenticationStrategy_setBaseVaultReference(
               authSpec,
@@ -990,10 +975,10 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.userNameVaultReference}
-          propertyName={'user name vault reference'}
+          name={'user name vault reference'}
           update={(value: string | undefined): void =>
             usernamePasswordAuthenticationStrategy_setUserNameVaultReference(
               authSpec,
@@ -1001,10 +986,10 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.passwordVaultReference}
-          propertyName={'password vault reference'}
+          name={'password vault reference'}
           update={(value: string | undefined): void =>
             usernamePasswordAuthenticationStrategy_setPasswordVaultReference(
               authSpec,
@@ -1025,10 +1010,10 @@ const MiddleTierUsernamePasswordAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.vaultReference}
-          propertyName={'vault reference'}
+          name={'vault reference'}
           description="Specifies the cred vault reference containing connection credentials"
           update={(value: string | undefined): void =>
             middleTierUsernamePasswordAuthenticationStrategy_setVaultReference(
@@ -1051,10 +1036,10 @@ const GCPWorkloadIdentityFederationAuthenticationStrategyEditor = observer(
     const GCPScopes = authSpec.additionalGcpScopes.join('\n');
     return (
       <>
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.serviceAccountEmail}
-          propertyName={'Service Account Email'}
+          name={'Service Account Email'}
           update={(value: string | undefined): void =>
             gcpWorkloadIdentityFederationAuthenticationStrategy_setServiceAccountEmail(
               authSpec,
@@ -1062,10 +1047,10 @@ const GCPWorkloadIdentityFederationAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <ConnectionEditor_StringEditor
+        <PanelTextEditor
           isReadOnly={isReadOnly}
           value={GCPScopes}
-          propertyName={'Additional GCP Scopes'}
+          name={'Additional GCP Scopes'}
           update={(value: string | undefined): void =>
             gcpWorkloadIdentityFederationAuthenticationStrategy_setAdditionalGcpScopes(
               authSpec,
@@ -1103,6 +1088,7 @@ const RelationalConnectionStoreEditor = observer(
       connectionValueState.editorStore.graphManagerState.graph.ownStores;
     const options = stores.map(buildElementOption);
     const store = connection.store.value;
+
     const selectedStore = {
       value: store,
       label: isStoreEmpty ? noStoreLabel : store.path,
@@ -1151,6 +1137,232 @@ const RelationalConnectionStoreEditor = observer(
   },
 );
 
+const renderEditorPostProcessor = (
+  connectionValueState: RelationalDatabaseConnectionValueState,
+  postProcessor: PostProcessor,
+  isReadOnly: boolean,
+  plugins: LegendStudioApplicationPlugin[],
+): React.ReactNode => {
+  if (postProcessor instanceof MapperPostProcessor) {
+    return (
+      <MapperPostProcessorEditor
+        postProcessorState={
+          connectionValueState.postProcessorState as MapperPostProcessorEditorState
+        }
+        isReadOnly={isReadOnly}
+        postProcessor={postProcessor}
+      />
+    );
+  } else {
+    const extraPostProcessorEditorRenderers = plugins.flatMap(
+      (plugin) =>
+        (
+          plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+        ).getExtraPostProcessorEditorRenderers?.() ?? [],
+    );
+    for (const editorRenderer of extraPostProcessorEditorRenderers) {
+      const editor = editorRenderer(postProcessor, connectionValueState, false);
+      if (editor) {
+        return editor;
+      }
+    }
+    return (
+      <UnsupportedEditorPanel
+        isReadOnly={true}
+        text="Can't display post-processor in form mode"
+      ></UnsupportedEditorPanel>
+    );
+  }
+};
+
+const PostProcessorRelationalConnectionEditor = observer(
+  (props: {
+    connectionValueState: RelationalDatabaseConnectionValueState;
+    isReadOnly: boolean;
+  }) => {
+    const { connectionValueState, isReadOnly } = props;
+
+    const connection = connectionValueState.connection;
+
+    const postProcessors = connection.postProcessors;
+
+    const editorStore = useEditorStore();
+    const observerContext = editorStore.changeDetectionState.observerContext;
+    const plugins = editorStore.pluginManager.getApplicationPlugins();
+
+    const postProcessorState = connectionValueState.postProcessorState;
+
+    const deletePostProcessor =
+      (postProcessor: PostProcessor): (() => void) =>
+      (): void => {
+        relationalDatabaseConnection_deletePostProcessor(
+          connectionValueState,
+          postProcessor,
+        );
+        if (
+          postProcessor ===
+          connectionValueState.postProcessorState?.postProcessor
+        ) {
+          connectionValueState.postProcessorState.setPostProcessorState(
+            undefined,
+          );
+        }
+      };
+    const postProcessorOptions = (
+      Object.values(POST_PROCESSOR_TYPE) as string[]
+    )
+      .concat(
+        plugins.flatMap(
+          (plugin) =>
+            (
+              plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+            ).getExtraPostProcessorClassifiers?.() ?? [],
+        ),
+      )
+      .map((e) => ({
+        value: e,
+        label: prettyCONSTName(e),
+      }));
+
+    const addPostProcessor =
+      (postProcessorType: string): (() => void) =>
+      (): void => {
+        switch (postProcessorType) {
+          case POST_PROCESSOR_TYPE.MAPPER: {
+            relationalDatabaseConnection_addPostProcessor(
+              connectionValueState,
+              new MapperPostProcessor(),
+              observerContext,
+            );
+            break;
+          }
+          default: {
+            const extraPostProcessorCreators = plugins.flatMap(
+              (plugin) =>
+                (
+                  plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+                ).getExtraPostProcessorCreators?.() ?? [],
+            );
+            for (const creator of extraPostProcessorCreators) {
+              creator(postProcessorType, connectionValueState, observerContext);
+            }
+          }
+        }
+
+        connectionValueState.postProcessorState?.setPostProcessorState(
+          connectionValueState.connection.postProcessors[
+            connectionValueState.connection.postProcessors.length - 1
+          ],
+        );
+      };
+
+    const selectPostProcessor = (postProcessor: PostProcessor): void => {
+      connectionValueState.selectPostProcessor(postProcessor);
+    };
+
+    return (
+      <div className="relational-connection-editor">
+        <ResizablePanelGroup orientation="horizontal">
+          <ResizablePanelSplitter>
+            <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+          </ResizablePanelSplitter>
+          <ResizablePanel>
+            <div className="relational-connection-editor__content">
+              <ResizablePanelGroup orientation="vertical">
+                <ResizablePanel size={150} minSize={70}>
+                  <Panel>
+                    <PanelHeader title="post-processor">
+                      <DropdownMenu
+                        disabled={isReadOnly}
+                        content={postProcessorOptions.map(
+                          (postProcessorType) => (
+                            <MenuContentItem
+                              key={postProcessorType.value}
+                              onClick={addPostProcessor(
+                                postProcessorType.value,
+                              )}
+                            >
+                              New {postProcessorType.label} Post-Processor
+                            </MenuContentItem>
+                          ),
+                        )}
+                        menuProps={{
+                          anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                          },
+                          transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'right',
+                          },
+                          elevation: 7,
+                        }}
+                      >
+                        <PanelHeaderActionItem
+                          disabled={isReadOnly}
+                          title="Create Post-Processor"
+                        >
+                          <PlusIcon />
+                        </PanelHeaderActionItem>
+                      </DropdownMenu>
+                    </PanelHeader>
+                    <PanelContent>
+                      {postProcessors.map((postProcessor, idx) => (
+                        <ContextMenu
+                          key={postProcessor._UUID}
+                          disabled={isReadOnly}
+                          content={
+                            <MenuContent>
+                              <MenuContentItem
+                                onClick={deletePostProcessor(postProcessor)}
+                              >
+                                Delete
+                              </MenuContentItem>
+                            </MenuContent>
+                          }
+                          menuProps={{ elevation: 7 }}
+                        >
+                          <PanelListSelectorItem
+                            title={`Post-Processor ${idx + 1}`}
+                            onSelect={() => selectPostProcessor(postProcessor)}
+                            isSelected={
+                              postProcessor ===
+                              postProcessorState?.postProcessor
+                            }
+                          />
+                        </ContextMenu>
+                      ))}
+                    </PanelContent>
+                  </Panel>
+                </ResizablePanel>
+                <ResizablePanelSplitter>
+                  <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+                </ResizablePanelSplitter>
+                <ResizablePanel>
+                  {postProcessorState?.postProcessor &&
+                    renderEditorPostProcessor(
+                      connectionValueState,
+                      postProcessorState.postProcessor,
+                      true,
+                      plugins,
+                    )}
+                  {!postProcessorState && (
+                    <BlankPanelContent>
+                      {!postProcessors.length
+                        ? 'Addddd a post-processor'
+                        : 'Select a post-processor to view'}
+                    </BlankPanelContent>
+                  )}
+                </ResizablePanel>
+              </ResizablePanelGroup>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);
+
 const renderDatasourceSpecificationEditor = (
   connection: RelationalDatabaseConnection,
   isReadOnly: boolean,
@@ -1310,6 +1522,7 @@ const RelationalConnectionGeneralEditor = observer(
     const connection = connectionValueState.connection;
     const editorStore = useEditorStore();
     const plugins = editorStore.pluginManager.getApplicationPlugins();
+
     // database type
     const typeOptions = Object.values(DatabaseType).map((e) => ({
       value: e,
@@ -1386,11 +1599,8 @@ const RelationalConnectionGeneralEditor = observer(
         <ResizablePanelGroup orientation="horizontal">
           <ResizablePanel size={200} minSize={15}>
             <div className="panel">
-              <div className="panel__header">
-                <div className="panel__header__title">
-                  <div className="panel__header__title__label">general</div>
-                </div>
-              </div>
+              <PanelHeader title="general"></PanelHeader>
+
               <div className="panel__content relational-connection-editor__general">
                 <div className="panel__content__form__section">
                   <div className="panel__content__form__section__header__label">
@@ -1406,7 +1616,7 @@ const RelationalConnectionGeneralEditor = observer(
                 <ConnectionEditor_BooleanEditor
                   isReadOnly={isReadOnly}
                   value={connection.quoteIdentifiers}
-                  propertyName="Quote identifiers"
+                  name="Quote identifiers"
                   description="Specifies whether to use double-quotes for SQL identifiers"
                   update={(value?: boolean): void =>
                     dBConnection_setQuoteIdentifiers(connection, Boolean(value))
@@ -1421,13 +1631,7 @@ const RelationalConnectionGeneralEditor = observer(
               <ResizablePanelGroup orientation="vertical">
                 <ResizablePanel size={450} minSize={50}>
                   <div className="relational-connection-editor__auth">
-                    <div className="panel__header">
-                      <div className="panel__header__title">
-                        <div className="panel__header__title__label">
-                          datasource spec
-                        </div>
-                      </div>
-                    </div>
+                    <PanelHeader title="datasource spec"></PanelHeader>
                     <div className="panel__content relational-connection-editor__auth__content">
                       <div className="panel__content__form__section">
                         <div className="panel__content__form__section__header__label">
@@ -1453,13 +1657,7 @@ const RelationalConnectionGeneralEditor = observer(
                 <ResizablePanelSplitter />
                 <ResizablePanel>
                   <div className="relational-connection-editor__source">
-                    <div className="panel__header">
-                      <div className="panel__header__title">
-                        <div className="panel__header__title__label">
-                          authentication spec
-                        </div>
-                      </div>
-                    </div>
+                    <PanelHeader title="authentication spec"></PanelHeader>
                     <div className="panel__content relational-connection-editor__source__content">
                       <div className="panel__content__form__section">
                         <div className="panel__content__form__section__header__label">
@@ -1499,27 +1697,22 @@ export const RelationalDatabaseConnectionEditor = observer(
     const { connectionValueState, isReadOnly } = props;
     const selectedTab = connectionValueState.selectedTab;
     const changeTab =
-      (tab: RELATIONAL_DATABASE_TAB_TYPE): (() => void) =>
-      (): void =>
-        connectionValueState.setSelectedTab(tab);
+      <T,>( // eslint-disable-line
+        tab: T,
+      ) =>
+      (): void => {
+        connectionValueState.setSelectedTab(
+          tab as unknown as RELATIONAL_DATABASE_TAB_TYPE,
+        );
+      };
     return (
       <>
-        <div className="panel__header">
-          <div className="uml-element-editor__tabs">
-            {Object.values(RELATIONAL_DATABASE_TAB_TYPE).map((tab) => (
-              <div
-                key={tab}
-                onClick={changeTab(tab)}
-                className={clsx('relational-connection-editor__tab', {
-                  'relational-connection-editor__tab--active':
-                    tab === selectedTab,
-                })}
-              >
-                {prettyCONSTName(tab)}
-              </div>
-            ))}
-          </div>
-        </div>
+        <PanelTabs
+          tabTitles={Object.values(RELATIONAL_DATABASE_TAB_TYPE)}
+          changeTheTab={changeTab}
+          selectedTab={selectedTab}
+          tabClassName="relational-connection-editor__tab"
+        />
         <div className="panel__content">
           {selectedTab === RELATIONAL_DATABASE_TAB_TYPE.GENERAL && (
             <RelationalConnectionGeneralEditor
@@ -1533,6 +1726,12 @@ export const RelationalDatabaseConnectionEditor = observer(
               isReadOnly={isReadOnly}
             />
           )}
+          {selectedTab === RELATIONAL_DATABASE_TAB_TYPE.POST_PROCESSORS && (
+            <PostProcessorRelationalConnectionEditor
+              connectionValueState={connectionValueState}
+              isReadOnly={isReadOnly}
+            />
+          )}
         </div>
       </>
     );