@finos/legend-application-studio 28.3.4 → 28.4.0

package/src/components/editor/editor-group/service-editor/ServiceExecutionQueryEditor.tsx

@@ -16,7 +16,7 @@
 
 import { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import type { ServicePureExecutionState } from '../../../../stores/editor/editor-state/element-editor-state/service/ServiceExecutionState.js';
+import { ServicePureExecutionState } from '../../../../stores/editor/editor-state/element-editor-state/service/ServiceExecutionState.js';
 import {
   Dialog,
   PanelLoadingIndicator,
@@ -32,12 +32,18 @@ import {
   ModalFooter,
   ModalHeader,
 } from '@finos/legend-art';
-import { assertErrorThrown } from '@finos/legend-shared';
+import {
+  assertErrorThrown,
+  guaranteeNonNullable,
+  returnUndefOnError,
+} from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
-  isStubbed_RawLambda,
+  type Service,
   KeyedExecutionParameter,
+  MultiExecutionParameters,
+  PureExecution,
 } from '@finos/legend-graph';
 import {
   type QueryBuilderState,
@@ -56,6 +62,9 @@ import {
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
 import { EXTERNAL_APPLICATION_NAVIGATION__generateServiceQueryCreatorUrl } from '../../../../__lib__/LegendStudioNavigation.js';
+import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
+import { pureExecution_setFunction } from '../../../../stores/graph-modifier/DSL_Service_GraphModifierHelper.js';
+import { ServiceEditorState } from '../../../../stores/editor/editor-state/element-editor-state/service/ServiceEditorState.js';
 
 const ServiceExecutionResultViewer = observer(
   (props: { executionState: ServicePureExecutionState }) => {
@@ -114,7 +123,6 @@ export const ServiceExecutionQueryEditor = observer(
       applicationStore.guardUnhandledError(async () => {
         const selectedExecutionState =
           executionState.selectedExecutionContextState;
-
         await flowResult(
           embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
             setupQueryBuilderState: (): QueryBuilderState => {
@@ -127,6 +135,9 @@ export const ServiceExecutionQueryEditor = observer(
                 KeyedExecutionParameter
                   ? selectedExecutionState.executionContext.key
                   : undefined,
+                undefined,
+                undefined,
+                embeddedQueryBuilderState.editorStore.applicationStore.config.options.queryBuilderConfig,
               );
               queryBuilderState.initializeWithQuery(
                 executionState.execution.func,
@@ -179,9 +190,7 @@ export const ServiceExecutionQueryEditor = observer(
                 },
               },
             ],
-            disableCompile: isStubbed_RawLambda(
-              executionState.queryState.query,
-            ),
+            disableCompile: true,
           }),
         );
         executionState.setOpeningQueryEditor(false);
@@ -435,3 +444,94 @@ export const ServiceExecutionQueryEditor = observer(
     );
   },
 );
+
+export const queryService = async (
+  service: Service,
+  editorStore: EditorStore,
+): Promise<void> => {
+  const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+  const applicationStore = editorStore.applicationStore;
+  const execution =
+    service.execution instanceof PureExecution ? service.execution : undefined;
+  const selectedExec =
+    execution instanceof MultiExecutionParameters
+      ? execution.singleExecutionParameters[0]?.key
+      : undefined;
+  await flowResult(
+    embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+      setupQueryBuilderState: (): QueryBuilderState => {
+        const queryBuilderState = new ServiceQueryBuilderState(
+          embeddedQueryBuilderState.editorStore.applicationStore,
+          embeddedQueryBuilderState.editorStore.graphManagerState,
+          service,
+          undefined,
+          selectedExec,
+          undefined,
+          undefined,
+          embeddedQueryBuilderState.editorStore.applicationStore.config.options.queryBuilderConfig,
+        );
+        if (execution) {
+          queryBuilderState.initializeWithQuery(execution.func);
+        }
+        return queryBuilderState;
+      },
+      actionConfigs: [
+        {
+          key: 'save-query-btn',
+          renderer: (queryBuilderState: QueryBuilderState): React.ReactNode => {
+            const save = applicationStore.guardUnhandledError(async () => {
+              try {
+                const rawLambda = queryBuilderState.buildQuery();
+                const serviceState = returnUndefOnError(() =>
+                  editorStore.tabManagerState.getCurrentEditorState(
+                    ServiceEditorState,
+                  ),
+                );
+                if (
+                  serviceState?.service === service &&
+                  serviceState.executionState instanceof
+                    ServicePureExecutionState
+                ) {
+                  await flowResult(
+                    serviceState.executionState.queryState.updateLamba(
+                      rawLambda,
+                    ),
+                  );
+                } else {
+                  pureExecution_setFunction(
+                    guaranteeNonNullable(
+                      execution,
+                      'Service execution expected to be a pure execution',
+                    ),
+                    rawLambda,
+                  );
+                }
+                applicationStore.notificationService.notifySuccess(
+                  `Service query is updated`,
+                );
+                embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
+                  undefined,
+                );
+              } catch (error) {
+                assertErrorThrown(error);
+                applicationStore.notificationService.notifyError(
+                  `Can't save query: ${error.message}`,
+                );
+              }
+            });
+            return (
+              <button
+                className="query-builder__dialog__header__custom-action"
+                tabIndex={-1}
+                disabled={editorStore.isInViewerMode}
+                onClick={save}
+              >
+                Save Query
+              </button>
+            );
+          },
+        },
+      ],
+    }),
+  );
+};

package/src/components/editor/editor-group/service-editor/testable/ServiceTestDataEditor.tsx

@@ -39,20 +39,26 @@ import {
   ResizablePanelGroup,
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
+  TimesIcon,
 } from '@finos/legend-art';
 import {
   type IdentifiedConnection,
   type ConnectionTestData,
   type DataElement,
+  type ValueSpecification,
   getAllIdentifiedServiceConnections,
   DataElementReference,
   PackageableElementExplicitReference,
+  Column,
 } from '@finos/legend-graph';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useState } from 'react';
-import type {
-  ConnectionTestDataState,
-  ServiceTestDataState,
+import {
+  createMockPrimitiveValueSpecificationFromRelationalDataType,
+  type ConnectionTestDataState,
+  type RowIdentifierState,
+  type ServiceTestDataState,
+  type TableRowIdentifierState,
 } from '../../../../../stores/editor/editor-state/element-editor-state/service/testable/ServiceTestDataState.js';
 import type { EmbeddedDataTypeOption } from '../../../../../stores/editor/editor-state/element-editor-state/data/DataEditorState.js';
 import { EmbeddedDataEditor } from '../../data-editor/EmbeddedDataEditor.js';
@@ -64,11 +70,266 @@ import {
   useApplicationStore,
 } from '@finos/legend-application';
 import { buildElementOption } from '@finos/legend-lego/graph-editor';
-import { prettyCONSTName } from '@finos/legend-shared';
+import {
+  filterByType,
+  getNullableFirstEntry,
+  guaranteeNonNullable,
+  prettyCONSTName,
+} from '@finos/legend-shared';
 import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../../../stores/extensions/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 import { useEditorStore } from '../../../EditorStoreProvider.js';
-import { LambdaParameterValuesEditor } from '@finos/legend-query-builder';
+import {
+  BasicValueSpecificationEditor,
+  LambdaParameterValuesEditor,
+} from '@finos/legend-query-builder';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../../__lib__/LegendStudioDocumentation.js';
+import type { TableOption } from '../../data-editor/RelationalCSVDataEditor.js';
+import { getPrimitiveTypeFromRelationalType } from '../../../../../stores/editor/utils/MockDataUtils.js';
+
+export interface ColumnOption {
+  value: Column;
+  label: string;
+}
+
+export const RowIdentifierEditor = observer(
+  (props: {
+    tableRowIdentifierState: TableRowIdentifierState;
+    rowIdentifierState: RowIdentifierState;
+  }) => {
+    const { tableRowIdentifierState, rowIdentifierState } = props;
+    const columnOptions = tableRowIdentifierState.table.columns
+      .filter(filterByType(Column))
+      .map((_c) => ({
+        label: _c.name,
+        value: _c,
+      }));
+    const changeColumn = (val: ColumnOption): void => {
+      if (rowIdentifierState.column.name !== val.value.name) {
+        const valueSpec =
+          createMockPrimitiveValueSpecificationFromRelationalDataType(
+            guaranteeNonNullable(rowIdentifierState.column.type),
+            tableRowIdentifierState.connectionTestDataState.editorStore
+              .graphManagerState.graph,
+            tableRowIdentifierState.connectionTestDataState.editorStore
+              .changeDetectionState.observerContext,
+          );
+        if (valueSpec) {
+          rowIdentifierState.updateRowIdentifierValue(valueSpec);
+          rowIdentifierState.updateRowIdentifierColumn(val.value);
+        }
+      }
+    };
+
+    const resetNode = (): void => {
+      const valueSpec =
+        createMockPrimitiveValueSpecificationFromRelationalDataType(
+          guaranteeNonNullable(rowIdentifierState.column.type),
+          tableRowIdentifierState.connectionTestDataState.editorStore
+            .graphManagerState.graph,
+          tableRowIdentifierState.connectionTestDataState.editorStore
+            .changeDetectionState.observerContext,
+        );
+      if (valueSpec) {
+        rowIdentifierState.updateRowIdentifierValue(valueSpec);
+      }
+    };
+
+    return (
+      <div className="panel__content__form__section__list">
+        <div className="panel__content__form__section__list__new-item">
+          <CustomSelectorInput
+            className="service-editor__owner__selector"
+            placeholder="Choose a column..."
+            options={columnOptions}
+            onChange={changeColumn}
+            value={{
+              label: rowIdentifierState.column.name,
+
+              value: rowIdentifierState.column,
+            }}
+            darkMode={true}
+          />
+          <BasicValueSpecificationEditor
+            valueSpecification={rowIdentifierState.value}
+            setValueSpecification={(val: ValueSpecification): void => {
+              rowIdentifierState.updateRowIdentifierValue(val);
+            }}
+            graph={
+              tableRowIdentifierState.connectionTestDataState.editorStore
+                .graphManagerState.graph
+            }
+            obseverContext={
+              tableRowIdentifierState.connectionTestDataState.editorStore
+                .changeDetectionState.observerContext
+            }
+            typeCheckOption={{
+              expectedType: guaranteeNonNullable(
+                getPrimitiveTypeFromRelationalType(
+                  guaranteeNonNullable(rowIdentifierState.column.type),
+                ),
+              ),
+            }}
+            resetValue={resetNode}
+          />
+          <button
+            className="btn--icon btn--dark btn--sm"
+            onClick={(): void =>
+              tableRowIdentifierState.removeRowIdentifierState(
+                rowIdentifierState,
+              )
+            }
+            tabIndex={-1}
+            title={'Remove Row'}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+export const TableRowIdentifierEditor = observer(
+  (props: {
+    connectionTestDataState: ConnectionTestDataState;
+    tableRowIdentifierState: TableRowIdentifierState;
+  }) => {
+    const { connectionTestDataState, tableRowIdentifierState } = props;
+    const tables = connectionTestDataState.getAvailableTables();
+    const tableOptions = tables.map((_t) => ({
+      label: `${_t.schema.name}.${_t.name}`,
+      value: _t,
+    }));
+
+    const changeTable = (val: TableOption): void => {
+      if (tableRowIdentifierState.table !== val.value) {
+        tableRowIdentifierState.updateTable(val.value);
+        tableRowIdentifierState.setNewRowIdentifierState([]);
+      }
+    };
+    const addNewRow = (): void => {
+      tableRowIdentifierState.addNewRowIdentifierState(
+        guaranteeNonNullable(
+          tableRowIdentifierState.table.columns.filter(filterByType(Column))[0],
+        ),
+      );
+    };
+    return (
+      <ModalBody className="lambda-parameter-values__modal__body">
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Table
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            create seed data below based on root tables
+          </div>
+          <CustomSelectorInput
+            placeholder="Choose a root table..."
+            options={tableOptions}
+            onChange={changeTable}
+            value={{
+              label: `${tableRowIdentifierState.table.schema.name}.${tableRowIdentifierState.table.name}`,
+
+              value: tableRowIdentifierState.table,
+            }}
+            darkMode={true}
+          />
+        </div>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Seed Data
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            create value for primary key column
+          </div>
+          {tableRowIdentifierState.rowIdentifierStates.map(
+            (rowIdentifierState) => (
+              <RowIdentifierEditor
+                key={rowIdentifierState._UUID}
+                tableRowIdentifierState={tableRowIdentifierState}
+                rowIdentifierState={rowIdentifierState}
+              />
+            ),
+          )}
+          <div className="panel__content__form__section__list__new-item__add">
+            <button
+              className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+              onClick={addNewRow}
+              tabIndex={-1}
+              title="Add Seed Data for column"
+            >
+              Add Row
+            </button>
+          </div>
+        </div>
+      </ModalBody>
+    );
+  },
+);
+
+export const SeedDataInputModal = observer(
+  (props: { connectionTestDataState: ConnectionTestDataState }) => {
+    const { connectionTestDataState } = props;
+    const applicationStore = useApplicationStore();
+    const useSeedDataInputModal = connectionTestDataState.useSeedDataInputModal;
+    const closeModal = (): void =>
+      connectionTestDataState.setUseSeedDataInputModal(false);
+    const generateWithSeedData = (): void => {
+      closeModal();
+      flowResult(connectionTestDataState.generateTestDataWithSeedData()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
+    const addNewTable = (): void => {
+      const tables = connectionTestDataState.getAvailableTables();
+      if (tables[0]) {
+        connectionTestDataState.addNewTableIdentifierState(tables[0]);
+      }
+    };
+
+    return (
+      <Dialog
+        open={useSeedDataInputModal}
+        onClose={closeModal}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal
+          darkMode={true}
+          className="editor-modal lambda-parameter-values__modal"
+        >
+          <ModalHeader title="Create Seed Data Input (BETA)" />
+          <ModalBody className="lambda-parameter-values__modal__body">
+            {connectionTestDataState.tableRowIdentifierStates.map(
+              (tableRowIdentifierState) => (
+                <TableRowIdentifierEditor
+                  key={tableRowIdentifierState._UUID}
+                  connectionTestDataState={connectionTestDataState}
+                  tableRowIdentifierState={tableRowIdentifierState}
+                />
+              ),
+            )}
+            <button
+              className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+              onClick={addNewTable}
+              tabIndex={-1}
+              title="Add Seed Data for table"
+            >
+              Add a Different Table
+            </button>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton onClick={closeModal} text="Close" />
+            <ModalFooterButton onClick={generateWithSeedData} text="Generate" />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
 
 export const UseDataElementModal = observer(
   (props: { connectionTestDataState: ConnectionTestDataState }) => {
@@ -201,6 +462,17 @@ export const ConnectionTestDataEditor = observer(
       }
     };
 
+    const generateTestDataWithSeedData = (): void => {
+      connectionTestDataState.setUseSeedDataInputModal(true);
+      connectionTestDataState.setNewTableIdentifierState([]);
+      const table = getNullableFirstEntry(
+        connectionTestDataState.getAvailableTables(),
+      );
+      if (table) {
+        connectionTestDataState.addNewTableIdentifierState(table);
+      }
+    };
+
     const generateQuerySchemas = (): void => {
       flowResult(connectionTestDataState.generateQuerySchemas()).catch(
         applicationStore.alertUnhandledError,
@@ -268,6 +540,16 @@ export const ConnectionTestDataEditor = observer(
                     >
                       Generate Query Schemas
                     </MenuContentItem>
+                    <MenuContentItem
+                      className="btn__dropdown-combo__option"
+                      onClick={generateTestDataWithSeedData}
+                      disabled={
+                        connectionTestDataState
+                          .generatingTestDataWithSeedDataState.isInProgress
+                      }
+                    >
+                      Generate with Seed Data (Beta)
+                    </MenuContentItem>
                   </MenuContent>
                 }
                 menuProps={{
@@ -316,6 +598,11 @@ export const ConnectionTestDataEditor = observer(
             connectionTestDataState={connectionTestDataState}
           />
         )}
+        {connectionTestDataState.useSeedDataInputModal && (
+          <SeedDataInputModal
+            connectionTestDataState={connectionTestDataState}
+          />
+        )}
       </div>
     );
   },
@@ -624,6 +911,10 @@ export const ServiceTestDataEditor = observer(
               Boolean(
                 testDataState.selectedDataState?.generateSchemaQueryState
                   .isInProgress,
+              ) ||
+              Boolean(
+                testDataState.selectedDataState
+                  ?.generatingTestDataWithSeedDataState.isInProgress,
               )
             }
           />

package/src/components/editor/editor-group/uml-editor/ClassQueryBuilder.tsx

@@ -379,6 +379,7 @@ export const queryClass = async (
         const queryBuilderState = new ClassQueryBuilderState(
           embeddedQueryBuilderState.editorStore.applicationStore,
           embeddedQueryBuilderState.editorStore.graphManagerState,
+          editorStore.applicationStore.config.options.queryBuilderConfig,
         );
         queryBuilderState.changeClass(_class);
         queryBuilderState.propagateClassChange(_class);

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

@@ -113,6 +113,7 @@ import {
   type FunctionActivatorConfiguration,
   Database,
   DEPENDENCY_ROOT_PACKAGE_PREFIX,
+  Service,
 } from '@finos/legend-graph';
 import {
   ActionAlertActionType,
@@ -145,6 +146,7 @@ import {
 import { DatabaseBuilderWizard } from '../editor-group/connection-editor/DatabaseBuilderWizard.js';
 import { FunctionEditorState } from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
 import { DatabaseModelBuilder } from '../editor-group/connection-editor/DatabaseModelBuilder.js';
+import { queryService } from '../editor-group/service-editor/ServiceExecutionQueryEditor.js';
 
 const ElementRenamer = observer(() => {
   const editorStore = useEditorStore();
@@ -520,6 +522,13 @@ const ExplorerContextMenu = observer(
         }
       },
     );
+    const buildServiceQuery = editorStore.applicationStore.guardUnhandledError(
+      async () => {
+        if (node?.packageableElement instanceof Service) {
+          await queryService(node.packageableElement, editorStore);
+        }
+      },
+    );
     const generateSampleData = editorStore.applicationStore.guardUnhandledError(
       async () => {
         if (node?.packageableElement instanceof Class) {
@@ -852,6 +861,14 @@ const ExplorerContextMenu = observer(
             <MenuContentDivider />
           </>
         )}
+        {node.packageableElement instanceof Service && (
+          <>
+            <MenuContentItem onClick={buildServiceQuery}>
+              Query...
+            </MenuContentItem>
+            <MenuContentDivider />
+          </>
+        )}
         {node.packageableElement instanceof ConcreteFunctionDefinition && (
           <>
             {editorStore.applicationStore.config.options

package/src/stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.ts

@@ -15,7 +15,10 @@
  */
 
 import type { GenericLegendApplicationStore } from '@finos/legend-application';
-import { QueryBuilderState } from '@finos/legend-query-builder';
+import {
+  type QueryBuilderConfig,
+  QueryBuilderState,
+} from '@finos/legend-query-builder';
 import type { GraphManagerState, Mapping } from '@finos/legend-graph';
 import { renderMappingExecutionQueryBuilderSetupPanelContent } from '../../../../../components/editor/editor-group/mapping-editor/MappingExecutionQueryBuilder.js';
 
@@ -29,8 +32,9 @@ export class MappingExecutionQueryBuilderState extends QueryBuilderState {
     applicationStore: GenericLegendApplicationStore,
     graphManagerState: GraphManagerState,
     mapping: Mapping,
+    config: QueryBuilderConfig | undefined,
   ) {
-    super(applicationStore, graphManagerState);
+    super(applicationStore, graphManagerState, config);
     this.executionMapping = mapping;
     this.executionContextState.mapping = mapping;
   }