@finos/legend-application-studio 15.1.0 → 16.0.0

package/src/components/editor/edit-panel/connection-editor/post-processor-editor/MapperPostProcessorEditor.tsx

@@ -0,0 +1,279 @@
+/**
+ * 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 {
+  ResizablePanelGroup,
+  ResizablePanel,
+  PanelHeaderActionItem,
+  PlusIcon,
+  ResizablePanelSplitter,
+  PanelTextEditor,
+  PanelForm,
+  ContextMenu,
+  MenuContent,
+  MenuContentItem,
+  DropdownMenu,
+  PanelListSelectorItem,
+  BlankPanelContent,
+  ResizablePanelSplitterLine,
+  Panel,
+  PanelHeader,
+  PanelContent,
+} from '@finos/legend-art';
+import {
+  type Mapper,
+  MapperPostProcessor,
+  TableNameMapper,
+  SchemaNameMapper,
+} from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import type { MapperPostProcessorEditorState } from '../../../../../stores/editor-state/element-editor-state/connection/PostProcessorEditorState.js';
+import {
+  mapperPostProcessor_addMapper,
+  mapperPostProcessor_deleteMapper,
+  mapper_setFrom,
+  mapper_setTo,
+  schemaNameMapper_setFrom,
+  schemaNameMapper_setTo,
+} from '../../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+
+export const MapperPostProcessorEditor = observer(
+  (props: {
+    postProcessor: MapperPostProcessor;
+    isReadOnly: boolean;
+    postProcessorState: MapperPostProcessorEditorState;
+  }) => {
+    const { postProcessorState, isReadOnly, postProcessor } = props;
+    const selectedMapper = postProcessorState.selectedMapper;
+
+    const selectedSchemaNameMapper =
+      selectedMapper instanceof TableNameMapper
+        ? selectedMapper.schema
+        : undefined;
+
+    const selectMapper = (val: Mapper): void => {
+      postProcessorState.setSelectedMapper(val);
+    };
+
+    const addSchemaMapper = (): void => {
+      mapperPostProcessor_addMapper(
+        postProcessor,
+        new SchemaNameMapper('', ''),
+      );
+      postProcessorState.setSelectedMapper(postProcessor.mappers.at(-1));
+    };
+
+    const addTableMapper = (): void => {
+      mapperPostProcessor_addMapper(
+        postProcessor,
+        new TableNameMapper('', '', new SchemaNameMapper('', '')),
+      );
+      postProcessorState.setSelectedMapper(postProcessor.mappers.at(-1));
+    };
+
+    const deleteMapper =
+      (mapper: Mapper): (() => void) =>
+      (): void => {
+        if (postProcessorState.postProcessor instanceof MapperPostProcessor) {
+          mapperPostProcessor_deleteMapper(
+            postProcessorState.postProcessor,
+            mapper,
+          );
+        }
+
+        if (mapper === postProcessorState.selectedMapper) {
+          postProcessorState.setSelectedMapper(undefined);
+        }
+      };
+
+    const mappers = postProcessor.mappers;
+
+    const isSchemaMapperDuplicated = (val: Mapper): boolean =>
+      mappers.filter(
+        (mapper) =>
+          mapper.from === val.from &&
+          mapper.to === val.to &&
+          val instanceof SchemaNameMapper &&
+          mapper instanceof SchemaNameMapper,
+      ).length >= 2;
+
+    const isTableMapperDuplicated = (val: Mapper): boolean =>
+      mappers
+        .filter(
+          (mapper) =>
+            val instanceof TableNameMapper && mapper instanceof TableNameMapper,
+        )
+        .filter(
+          (mapper) =>
+            (mapper as TableNameMapper).schema.from ===
+              (val as TableNameMapper).schema.from &&
+            (mapper as TableNameMapper).schema.from ===
+              (val as TableNameMapper).schema.from &&
+            (mapper as TableNameMapper).from ===
+              (val as TableNameMapper).from &&
+            (mapper as TableNameMapper).from === (val as TableNameMapper).from,
+        ).length >= 2;
+
+    const isMapperDuplicated = (val: Mapper): boolean =>
+      isSchemaMapperDuplicated(val) || isTableMapperDuplicated(val);
+
+    return (
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel>
+          <ResizablePanelGroup orientation="vertical">
+            <ResizablePanel size={170} minSize={70}>
+              <Panel>
+                <PanelHeader title="mapper">
+                  <DropdownMenu
+                    disabled={isReadOnly}
+                    content={
+                      <MenuContent>
+                        <MenuContentItem onClick={addSchemaMapper}>
+                          New Schema Mapper
+                        </MenuContentItem>
+                        <MenuContentItem onClick={addTableMapper}>
+                          New Table Mapper
+                        </MenuContentItem>
+                      </MenuContent>
+                    }
+                    menuProps={{
+                      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                      transformOrigin: { vertical: 'top', horizontal: 'right' },
+                      elevation: 7,
+                    }}
+                  >
+                    <PanelHeaderActionItem
+                      disabled={isReadOnly}
+                      title="Create Mapper"
+                    >
+                      <PlusIcon />
+                    </PanelHeaderActionItem>
+                  </DropdownMenu>
+                </PanelHeader>
+                <PanelContent>
+                  {mappers.map((mapper) => (
+                    <ContextMenu
+                      key={mapper._UUID}
+                      disabled={isReadOnly}
+                      content={
+                        <MenuContent>
+                          <MenuContentItem
+                            disabled={isReadOnly}
+                            onClick={deleteMapper(mapper)}
+                          >
+                            Delete
+                          </MenuContentItem>
+                        </MenuContent>
+                      }
+                      menuProps={{ elevation: 7 }}
+                    >
+                      <PanelListSelectorItem
+                        title={
+                          mapper instanceof TableNameMapper
+                            ? 'Table Mapper'
+                            : 'Schema Mapper'
+                        }
+                        validationErrorMessage={
+                          isMapperDuplicated(mapper)
+                            ? 'Mappers have the same values'
+                            : undefined
+                        }
+                        isSelected={
+                          mapper === postProcessorState.selectedMapper
+                        }
+                        onSelect={() => selectMapper(mapper)}
+                      />
+                    </ContextMenu>
+                  ))}
+                </PanelContent>{' '}
+              </Panel>
+            </ResizablePanel>
+            <ResizablePanelSplitter>
+              <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+            </ResizablePanelSplitter>
+            <ResizablePanel>
+              <Panel>
+                <PanelHeader
+                  title={
+                    postProcessorState.selectedMapper instanceof TableNameMapper
+                      ? 'Table Mapper'
+                      : 'Schema Mapper'
+                  }
+                ></PanelHeader>
+                <PanelContent>
+                  {!selectedMapper && (
+                    <BlankPanelContent>
+                      {!mappers.length
+                        ? 'Add a mapper'
+                        : 'Select a mapper to view'}
+                    </BlankPanelContent>
+                  )}
+                  {selectedMapper && (
+                    <PanelForm>
+                      <PanelTextEditor
+                        isReadOnly={isReadOnly}
+                        value={selectedMapper.from}
+                        name="From"
+                        update={(value: string | undefined): void =>
+                          mapper_setFrom(selectedMapper, value ?? '')
+                        }
+                      />
+                      <PanelTextEditor
+                        isReadOnly={isReadOnly}
+                        value={selectedMapper.to}
+                        name="To"
+                        update={(value: string | undefined): void =>
+                          mapper_setTo(selectedMapper, value ?? '')
+                        }
+                      />
+
+                      {selectedSchemaNameMapper && (
+                        <>
+                          <PanelTextEditor
+                            isReadOnly={isReadOnly}
+                            value={selectedSchemaNameMapper.from}
+                            name="Schema - From"
+                            update={(value: string | undefined): void => {
+                              schemaNameMapper_setFrom(
+                                selectedSchemaNameMapper,
+                                value ?? '',
+                              );
+                            }}
+                          />
+                          <PanelTextEditor
+                            isReadOnly={isReadOnly}
+                            value={selectedSchemaNameMapper.to}
+                            name="Schema - To"
+                            update={(value: string | undefined): void =>
+                              schemaNameMapper_setTo(
+                                selectedSchemaNameMapper,
+                                value ?? '',
+                              )
+                            }
+                          />
+                        </>
+                      )}
+                    </PanelForm>
+                  )}
+                </PanelContent>
+              </Panel>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    );
+  },
+);

package/src/components/editor/edit-panel/data-editor/EmbeddedDataEditor.tsx

@@ -157,7 +157,8 @@ export const DataElementReferenceDataEditor = observer(
     const dataElement =
       dataElementReferenceState.embeddedData.dataElement.value;
     const editorStore = dataElementReferenceState.editorStore;
-    const options = editorStore.dataOptions;
+    const options =
+      editorStore.graphManagerState.usableDataElements.map(buildElementOption);
     const selectedOption = buildElementOption(dataElement);
     const onDataElementChange = (val: {
       label: string;

package/src/components/editor/edit-panel/mapping-editor/EnumerationMappingEditor.tsx

@@ -89,7 +89,11 @@ const EnumerationMappingSourceSelectorModal = observer(
       ),
     ]
       .map(buildElementOption)
-      .concat(editorStore.enumerationOptions);
+      .concat(
+        editorStore.graphManagerState.usableEnumerations.map(
+          buildElementOption,
+        ),
+      );
 
     const sourceSelectorRef = useRef<SelectComponent>(null);
     const filterOption = createFilter({

package/src/components/editor/edit-panel/mapping-editor/InstanceSetImplementationEditor.tsx

@@ -363,7 +363,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
             {isUnsupported && (
               <UnsupportedEditorPanel
                 isReadOnly={isReadOnly}
-                text={`Can't display class mapping source in form mode`}
+                text="Can't display class mapping source in form mode"
               ></UnsupportedEditorPanel>
             )}
             {sourceElementForSourceSelectorModal !== undefined && (
@@ -573,7 +573,7 @@ export const InstanceSetImplementationEditor = observer(
                     {isUnsupported && (
                       <UnsupportedEditorPanel
                         isReadOnly={isReadOnly}
-                        text={`Can't display class mapping in form mode`}
+                        text="Can't display class mapping in form mode"
                       ></UnsupportedEditorPanel>
                     )}
                   </div>

package/src/components/editor/edit-panel/mapping-editor/InstanceSetImplementationSourceSelectorModal.tsx

@@ -128,22 +128,15 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const options = (
-      editorStore.graphManagerState.graph.ownClasses as MappingElementSource[]
+      editorStore.graphManagerState.usableClasses as MappingElementSource[]
     )
-      .concat(
-        editorStore.graphManagerState.graph.dependencyManager
-          .classes as MappingElementSource[],
-      )
       .concat(
         editorStore.graphManagerState.graph.ownFlatDatas.flatMap(
           getAllRecordTypes,
         ),
       )
       .concat(
-        editorStore.graphManagerState.graph.ownDatabases
-          .concat(
-            editorStore.graphManagerState.graph.dependencyManager.databases,
-          )
+        editorStore.graphManagerState.usableDatabases
           .flatMap((e) =>
             e.schemas.flatMap((schema) =>
               (schema.tables as (Table | View)[]).concat(schema.views),

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionBuilder.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Fragment, useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { flowResult } from 'mobx';
 import {
   Dialog,
@@ -38,6 +38,7 @@ import {
   RefreshIcon,
   RobotIcon,
   PanelDropZone,
+  PencilIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -52,7 +53,12 @@ import {
   type MappingElementDragSource,
   CORE_DND_TYPE,
 } from '../../../../stores/shared/DnDUtil.js';
-import { guaranteeType, uniq } from '@finos/legend-shared';
+import {
+  assertErrorThrown,
+  guaranteeType,
+  hashObject,
+  uniq,
+} from '@finos/legend-shared';
 import {
   type MappingExecutionState,
   MappingExecutionEmptyInputDataState,
@@ -78,13 +84,14 @@ import {
   isStubbed_RawLambda,
 } from '@finos/legend-graph';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLMapping_LegendStudioApplicationPlugin_Extension.js';
 import { objectInputData_setData } from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
 import { flatData_setData } from '../../../../stores/graphModifier/StoreFlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
 } from '../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
+import type { QueryBuilderState } from '@finos/legend-query-builder';
 
 interface ClassMappingSelectOption {
   label: string;
@@ -179,17 +186,76 @@ const MappingExecutionQueryEditor = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
 
-    const extraQueryEditorActions = editorStore.pluginManager
-      .getApplicationPlugins()
-      .flatMap(
-        (plugin) =>
-          (
-            plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
-          ).getExtraMappingExecutionQueryEditorActionConfigurations?.() ?? [],
-      )
-      .map((config) => (
-        <Fragment key={config.key}>{config.renderer(executionState)}</Fragment>
-      ));
+    // actions
+    const editWithQueryBuilder = applicationStore.guardUnhandledError(
+      async () => {
+        const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+        await flowResult(
+          embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+            setupQueryBuilderState: (): QueryBuilderState => {
+              const queryBuilderState = new MappingExecutionQueryBuilderState(
+                executionState.mappingEditorState.mapping,
+                embeddedQueryBuilderState.editorStore.applicationStore,
+                embeddedQueryBuilderState.editorStore.graphManagerState,
+              );
+              queryBuilderState.initializeWithQuery(
+                executionState.queryState.query,
+              );
+              queryBuilderState.changeDetectionState.setQueryHashCode(
+                hashObject(executionState.queryState.query),
+              );
+              queryBuilderState.changeDetectionState.setIsEnabled(true);
+              return queryBuilderState;
+            },
+            actionConfigs: [
+              {
+                key: 'save-query-btn',
+                renderer: (
+                  queryBuilderState: QueryBuilderState,
+                ): React.ReactNode => {
+                  const save = applicationStore.guardUnhandledError(
+                    async (): Promise<void> => {
+                      try {
+                        const rawLambda = queryBuilderState.buildQuery();
+                        await flowResult(
+                          executionState.queryState.updateLamba(rawLambda),
+                        );
+                        applicationStore.notifySuccess(
+                          `Mapping execution query is updated`,
+                        );
+                        queryBuilderState.changeDetectionState.setQueryHashCode(
+                          hashObject(rawLambda),
+                        );
+                        embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
+                          undefined,
+                        );
+                      } catch (error) {
+                        assertErrorThrown(error);
+                        applicationStore.notifyError(
+                          `Can't save query: ${error.message}`,
+                        );
+                      }
+                    },
+                  );
+                  return (
+                    <button
+                      className="query-builder__dialog__header__custom-action"
+                      tabIndex={-1}
+                      onClick={save}
+                    >
+                      Save Query
+                    </button>
+                  );
+                },
+              },
+            ],
+            disableCompile: isStubbed_RawLambda(
+              executionState.queryState.query,
+            ),
+          }),
+        );
+      },
+    );
 
     // Class mapping selector
     const [openClassMappingSelectorModal, setOpenClassMappingSelectorModal] =
@@ -309,7 +375,14 @@ const MappingExecutionQueryEditor = observer(
             <div className="panel__header__title__label">query</div>
           </div>
           <div className="panel__header__actions">
-            {extraQueryEditorActions}
+            <button
+              className="panel__header__action"
+              tabIndex={-1}
+              onClick={editWithQueryBuilder}
+              title="Edit query..."
+            >
+              <PencilIcon />
+            </button>
             <button
               className="panel__header__action"
               tabIndex={-1}

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionQueryBuilder.tsx

@@ -0,0 +1,93 @@
+/**
+ * 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 {
+  buildElementOption,
+  getPackageableElementOptionFormatter,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { CustomSelectorInput, PURE_MappingIcon } from '@finos/legend-art';
+import { getMappingCompatibleClasses } from '@finos/legend-graph';
+import { QueryBuilderClassSelector } from '@finos/legend-query-builder';
+import type { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
+
+/**
+ * This setup panel supports limited cascading, we will only show:
+ * - For class selector: the list of compatible class with the specified mapping
+ */
+const MappingExecutionQueryBuilderSetupPanelContent = observer(
+  (props: { queryBuilderState: MappingExecutionQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+
+    // mapping
+    const selectedMappingOption = buildElementOption(
+      queryBuilderState.executionMapping,
+    );
+
+    // class
+    const classes = getMappingCompatibleClasses(
+      queryBuilderState.executionMapping,
+      queryBuilderState.graphManagerState.usableClasses,
+    );
+
+    return (
+      <>
+        <div className="query-builder__setup__config-group">
+          <div className="query-builder__setup__config-group__header">
+            <div className="query-builder__setup__config-group__header__title">
+              execution context
+            </div>
+          </div>
+          <div className="query-builder__setup__config-group__content">
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="mapping"
+              >
+                <PURE_MappingIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                disabled={true}
+                options={[]}
+                value={selectedMappingOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                formatOptionLabel={getPackageableElementOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+          </div>
+        </div>
+        <QueryBuilderClassSelector
+          queryBuilderState={queryBuilderState}
+          classes={classes}
+          noMatchMessage="No compatible class found for specified mapping"
+        />
+      </>
+    );
+  },
+);
+
+export const renderMappingExecutionQueryBuilderSetupPanelContent = (
+  queryBuilderState: MappingExecutionQueryBuilderState,
+): React.ReactNode => (
+  <MappingExecutionQueryBuilderSetupPanelContent
+    queryBuilderState={queryBuilderState}
+  />
+);