@finos/legend-application-studio 27.1.0 → 27.1.2

package/src/components/editor/editor-group/testable/TestableSharedComponents.tsx

@@ -18,6 +18,7 @@ import {
   clsx,
   CompareIcon,
   ContextMenu,
+  CustomSelectorInput,
   Dialog,
   MenuContent,
   MenuContentItem,
@@ -34,7 +35,7 @@ import {
   RefreshIcon,
   WrenchIcon,
 } from '@finos/legend-art';
-import { TestError } from '@finos/legend-graph';
+import { type DataElement, TestError } from '@finos/legend-graph';
 import {
   prettyCONSTName,
   tryToFormatLosslessJSONString,
@@ -61,6 +62,86 @@ import {
 import { forwardRef, useState } from 'react';
 import type { TestableTestEditorState } from '../../../../stores/editor/editor-state/element-editor-state/testable/TestableEditorState.js';
 import { getTestableResultIcon } from '../../side-bar/testable/GlobalTestRunner.js';
+import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
+import {
+  buildElementOption,
+  getPackageableElementOptionFormatter,
+} from '@finos/legend-lego/graph-editor';
+
+export const SharedDataElementModal = observer(
+  (props: {
+    filterBy?: (val: DataElement) => boolean;
+    handler: (val: DataElement) => void;
+    editorStore: EditorStore;
+    isReadOnly: boolean;
+    close: () => void;
+  }) => {
+    const { filterBy, isReadOnly, close, editorStore, handler } = props;
+    const dataElements =
+      editorStore.graphManagerState.graph.dataElements.filter((e) =>
+        filterBy ? filterBy(e) : true,
+      );
+    const [dataElement, setDataElement] = useState(dataElements[0]);
+    const dataElementOptions =
+      editorStore.graphManagerState.usableDataElements.map(buildElementOption);
+    const selectedDataElement = dataElement
+      ? buildElementOption(dataElement)
+      : null;
+    const onDataElementChange = (val: {
+      label: string;
+      value?: DataElement;
+    }): void => {
+      if (val.value !== selectedDataElement?.value && val.value) {
+        setDataElement(val.value);
+      }
+    };
+    const change = (): void => {
+      if (dataElement) {
+        handler(dataElement);
+      }
+      close();
+    };
+    return (
+      <Dialog
+        open={true}
+        onClose={close}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <Modal darkMode={true} className="service-test-data-modal">
+          <ModalBody>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Data Element
+              </div>
+              <div className="explorer__new-element-modal__driver">
+                <CustomSelectorInput
+                  className="panel__content__form__section__dropdown data-element-reference-editor__value__dropdown"
+                  disabled={false}
+                  options={dataElementOptions}
+                  onChange={onDataElementChange}
+                  formatOptionLabel={getPackageableElementOptionFormatter({})}
+                  value={selectedDataElement}
+                  darkMode={true}
+                />
+              </div>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              className="database-builder__action--btn"
+              disabled={isReadOnly}
+              onClick={change}
+              title="Change to use Data Element"
+            >
+              Change
+            </ModalFooterButton>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
 
 export const RenameModal = observer(
   (props: {
@@ -438,6 +519,10 @@ export const TestAssertionEditor = observer(
     const { testAssertionState } = props;
     const selectedTab = testAssertionState.selectedTab;
     const isReadOnly = testAssertionState.testState.isReadOnly;
+    const isDisabled =
+      isReadOnly ||
+      !testAssertionState.assertionState.supportsGeneratingAssertion ||
+      testAssertionState.generatingExpectedAction.isInProgress;
     const changeTab = (val: TEST_ASSERTION_TAB): void =>
       testAssertionState.setSelectedTab(val);
     const renderContent = (state: TestAssertionState): React.ReactNode => {
@@ -484,7 +569,7 @@ export const TestAssertionEditor = observer(
               className="panel__header__action service-execution-editor__test-data__generate-btn"
               onClick={generate}
               title="Generate expected result if possible"
-              disabled={isReadOnly}
+              disabled={isDisabled}
               tabIndex={-1}
             >
               <div className="service-execution-editor__test-data__generate-btn__label">
@@ -497,7 +582,7 @@ export const TestAssertionEditor = observer(
           </div>
         </div>
         <div className="testable-test-assertion-editor__content">
-          {selectedTab === TEST_ASSERTION_TAB.SETUP && (
+          {selectedTab === TEST_ASSERTION_TAB.EXPECTED && (
             <div className="testable-test-assertion-editor__setup">
               {renderContent(testAssertionState.assertionState)}
             </div>

package/src/components/editor/panel-group/SQLPlaygroundPanel.tsx

@@ -16,16 +16,9 @@
 
 import { observer } from 'mobx-react-lite';
 import {
-  type TreeNodeContainerProps,
   ResizablePanelGroup,
   ResizablePanel,
   ResizablePanelSplitter,
-  TreeView,
-  PURE_DatabaseSchemaIcon,
-  PURE_DatabaseTableIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  KeyIcon,
   CustomSelectorInput,
   type SelectComponent,
   createFilter,
@@ -37,9 +30,6 @@ import {
   PanelLoadingIndicator,
   BlankPanelContent,
   TrashIcon,
-  CircleIcon,
-  CheckCircleIcon,
-  EmptyCircleIcon,
   PURE_DatabaseIcon,
   SyncIcon,
 } from '@finos/legend-art';
@@ -65,18 +55,9 @@ import {
   PackageableConnection,
   RelationalDatabaseConnection,
   guaranteeRelationalDatabaseConnection,
-  stringifyDataType,
 } from '@finos/legend-graph';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../__lib__/LegendStudioApplicationNavigationContext.js';
-import {
-  DatabaseSchemaExplorerTreeColumnNodeData,
-  DatabaseSchemaExplorerTreeSchemaNodeData,
-  DatabaseSchemaExplorerTreeTableNodeData,
-  type DatabaseSchemaExplorerTreeData,
-  type DatabaseSchemaExplorerTreeNodeData,
-  type SQLPlaygroundPanelState,
-} from '../../../stores/editor/panel-group/SQLPlaygroundPanelState.js';
-import { renderColumnTypeIcon } from '../editor-group/connection-editor/DatabaseEditorHelper.js';
+import { type SQLPlaygroundPanelState } from '../../../stores/editor/panel-group/SQLPlaygroundPanelState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { PANEL_MODE } from '../../../stores/editor/EditorConfig.js';
 import { useDrag, useDrop } from 'react-dnd';
@@ -94,191 +75,35 @@ import {
   parseCSVString,
   uniqBy,
 } from '@finos/legend-shared';
-
-const getDatabaseSchemaNodeIcon = (
-  node: DatabaseSchemaExplorerTreeNodeData,
-): React.ReactNode => {
-  if (node instanceof DatabaseSchemaExplorerTreeSchemaNodeData) {
-    return (
-      <div className="sql-playground__database-schema-explorer-tree__icon--schema">
-        <PURE_DatabaseSchemaIcon />
-      </div>
-    );
-  } else if (node instanceof DatabaseSchemaExplorerTreeTableNodeData) {
-    return (
-      <div className="sql-playground__database-schema-explorer-tree__icon--table">
-        <PURE_DatabaseTableIcon />
-      </div>
-    );
-  } else if (node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
-    return renderColumnTypeIcon(node.column.type);
-  }
-  return null;
-};
+import {
+  DatabaseSchemaExplorer,
+  DatabaseSchemaExplorerTreeNodeContainer,
+  type DatabaseSchemaExplorerTreeNodeContainerProps,
+} from '../editor-group/connection-editor/DatabaseSchemaExplorer.js';
+import { DatabaseSchemaExplorerTreeTableNodeData } from '../../../stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.js';
 
 const DATABASE_NODE_DND_TYPE = 'DATABASE_NODE_DND_TYPE';
 type DatabaseNodeDragType = { text: string };
 
-const DatabaseSchemaExplorerTreeNodeContainer: React.FC<
-  TreeNodeContainerProps<
-    DatabaseSchemaExplorerTreeNodeData,
-    {
-      toggleCheckedNode: (node: DatabaseSchemaExplorerTreeNodeData) => void;
-      isPartiallySelected: (
-        node: DatabaseSchemaExplorerTreeNodeData,
-      ) => boolean;
-    }
-  >
-> = (props) => {
-  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
-  const { toggleCheckedNode, isPartiallySelected } = innerProps;
-  const isExpandable =
-    Boolean(!node.childrenIds || node.childrenIds.length) &&
-    !(node instanceof DatabaseSchemaExplorerTreeColumnNodeData);
-  const nodeExpandIcon = isExpandable ? (
-    node.isOpen ? (
-      <ChevronDownIcon />
-    ) : (
-      <ChevronRightIcon />
-    )
-  ) : (
-    <div />
-  );
-  const [, nodeDragRef] = useDrag<DatabaseNodeDragType>(
-    () => ({
-      type: DATABASE_NODE_DND_TYPE,
-      item: {
-        text:
-          node instanceof DatabaseSchemaExplorerTreeTableNodeData
-            ? `${node.owner.name}.${node.label}`
-            : node.label,
-      },
-    }),
-    [node],
-  );
-  const nodeTypeIcon = getDatabaseSchemaNodeIcon(node);
-  const toggleExpandNode = (): void => onNodeSelect?.(node);
-  const isPrimaryKeyColumn =
-    node instanceof DatabaseSchemaExplorerTreeColumnNodeData &&
-    node.owner.primaryKey.includes(node.column);
-
-  const renderCheckedIcon = (
-    _node: DatabaseSchemaExplorerTreeNodeData,
-  ): React.ReactNode => {
-    if (_node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
-      return null;
-    } else if (isPartiallySelected(_node)) {
-      return <CircleIcon />;
-    } else if (_node.isChecked) {
-      return <CheckCircleIcon />;
-    }
-    return <EmptyCircleIcon />;
-  };
-
-  return (
-    <div
-      className="tree-view__node__container"
-      style={{
-        paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
-        display: 'flex',
-      }}
-      ref={nodeDragRef}
-      onClick={toggleExpandNode}
-    >
-      <div className="tree-view__node__icon sql-playground__database-schema-explorer-tree__node__icon__group">
-        <div className="sql-playground__database-schema-explorer-tree__expand-icon">
-          {nodeExpandIcon}
-        </div>
-        <div
-          className="sql-playground__database-schema-explorer-tree__toggle-icon"
-          onClick={(event) => {
-            event.stopPropagation();
-            toggleCheckedNode(node);
-          }}
-        >
-          {renderCheckedIcon(node)}
-        </div>
-        <div className="sql-playground__database-schema-explorer-tree__type-icon">
-          {nodeTypeIcon}
-        </div>
-      </div>
-      <div className="tree-view__node__label sql-playground__database-schema-explorer-tree__node__label">
-        {node.label}
-        {node instanceof DatabaseSchemaExplorerTreeColumnNodeData && (
-          <div className="sql-playground__database-schema-explorer-tree__node__type">
-            <div className="sql-playground__database-schema-explorer-tree__node__type__label">
-              {stringifyDataType(node.column.type)}
-            </div>
-          </div>
-        )}
-        {isPrimaryKeyColumn && (
-          <div
-            className="sql-playground__database-schema-explorer-tree__node__pk"
-            title="Primary Key"
-          >
-            <KeyIcon />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const DatabaseSchemaExplorer = observer(
-  (props: {
-    treeData: DatabaseSchemaExplorerTreeData;
-    playgroundState: SQLPlaygroundPanelState;
-  }) => {
-    const { treeData, playgroundState } = props;
-    const applicationStore = useApplicationStore();
-
-    const onNodeSelect = (node: DatabaseSchemaExplorerTreeNodeData): void => {
-      flowResult(playgroundState.onNodeSelect(node, treeData)).catch(
-        applicationStore.alertUnhandledError,
-      );
-    };
-
-    const getChildNodes = (
-      node: DatabaseSchemaExplorerTreeNodeData,
-    ): DatabaseSchemaExplorerTreeNodeData[] =>
-      playgroundState
-        .getChildNodes(node, treeData)
-        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
-
-    const isPartiallySelected = (
-      node: DatabaseSchemaExplorerTreeNodeData,
-    ): boolean => {
-      if (
-        node instanceof DatabaseSchemaExplorerTreeSchemaNodeData &&
-        !node.isChecked
-      ) {
-        return Boolean(
-          playgroundState
-            .getChildNodes(node, treeData)
-            ?.find((childNode) => childNode.isChecked === true),
-        );
-      }
-      return false;
-    };
-
-    const toggleCheckedNode = (
-      node: DatabaseSchemaExplorerTreeNodeData,
-    ): void => playgroundState.toggleCheckedNode(node, treeData);
+const SQLPlaygroundDatabaseSchemaExplorerTreeNodeContainer = observer(
+  (props: DatabaseSchemaExplorerTreeNodeContainerProps) => {
+    const { node } = props;
+
+    const [, nodeDragRef] = useDrag<DatabaseNodeDragType>(
+      () => ({
+        type: DATABASE_NODE_DND_TYPE,
+        item: {
+          text:
+            node instanceof DatabaseSchemaExplorerTreeTableNodeData
+              ? `${node.owner.name}.${node.label}`
+              : node.label,
+        },
+      }),
+      [node],
+    );
 
     return (
-      <TreeView
-        className="sql-playground__database-schema-explorer-tree"
-        components={{
-          TreeNodeContainer: DatabaseSchemaExplorerTreeNodeContainer,
-        }}
-        innerProps={{
-          toggleCheckedNode,
-          isPartiallySelected,
-        }}
-        treeData={treeData}
-        onNodeSelect={onNodeSelect}
-        getChildNodes={getChildNodes}
-      />
+      <DatabaseSchemaExplorerTreeNodeContainer {...props} ref={nodeDragRef} />
     );
   },
 );
@@ -369,9 +194,11 @@ const getDatabaseSchemaEntities = async (
   model: monacoEditorAPI.ITextModel,
   playgroundState: SQLPlaygroundPanelState,
 ): Promise<monacoLanguagesAPI.CompletionItem[]> => {
-  if (playgroundState.treeData) {
+  if (playgroundState.schemaExplorerState?.treeData) {
     return uniqBy(
-      Array.from(playgroundState.treeData.nodes.values()).map(
+      Array.from(
+        playgroundState.schemaExplorerState.treeData.nodes.values(),
+      ).map(
         (value) =>
           ({
             label: value.label,
@@ -700,15 +527,21 @@ export const SQLPlaygroundPanel = observer(() => {
     [handleConnectionDrop],
   );
 
-  const updateDatabase = applicationStore.guardUnhandledError(() =>
-    flowResult(playgroundState.updateDatabase()),
-  );
+  const updateDatabase = (): void => {
+    if (playgroundState.schemaExplorerState) {
+      flowResult(playgroundState.schemaExplorerState.updateDatabase()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }
+  };
 
   useEffect(() => {
-    flowResult(playgroundState.fetchDatabaseMetadata()).catch(
-      applicationStore.alertUnhandledError,
-    );
-  }, [playgroundState, applicationStore, playgroundState.connection]);
+    if (playgroundState.schemaExplorerState) {
+      flowResult(
+        playgroundState.schemaExplorerState.fetchDatabaseMetadata(),
+      ).catch(applicationStore.alertUnhandledError);
+    }
+  }, [playgroundState, applicationStore, playgroundState.schemaExplorerState]);
 
   useConditionedApplicationNavigationContext(
     LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SQL_PLAYGROUND,
@@ -770,10 +603,13 @@ export const SQLPlaygroundPanel = observer(() => {
                   </div>
                 </div>
                 <div className="sql-playground__config__schema-explorer">
-                  {playgroundState.treeData && (
+                  {playgroundState.schemaExplorerState?.treeData && (
                     <DatabaseSchemaExplorer
-                      treeData={playgroundState.treeData}
-                      playgroundState={playgroundState}
+                      treeData={playgroundState.schemaExplorerState.treeData}
+                      schemaExplorerState={playgroundState.schemaExplorerState}
+                      treeNodeContainerComponent={
+                        SQLPlaygroundDatabaseSchemaExplorerTreeNodeContainer
+                      }
                     />
                   )}
                 </div>

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

@@ -133,7 +133,7 @@ import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
-import { DatabaseBuilder } from '../editor-group/connection-editor/DatabaseBuilder.js';
+import { DatabaseBuilderWizard } from '../editor-group/connection-editor/DatabaseBuilderWizard.js';
 import { FunctionEditorState } from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
 
 const ElementRenamer = observer(() => {
@@ -516,7 +516,7 @@ const ExplorerContextMenu = observer(
     const buildDatabase = editorStore.applicationStore.guardUnhandledError(
       async () => {
         if (isRelationalDatabaseConnection(node?.packageableElement)) {
-          editorStore.explorerTreeState.buildDbBuilderState(
+          editorStore.explorerTreeState.buildDatabase(
             guaranteeRelationalDatabaseConnection(node?.packageableElement),
             editorStore.isInViewerMode,
           );
@@ -1128,7 +1128,7 @@ const ExplorerTrees = observer(() => {
               <ElementRenamer />
               <SampleDataGenerator />
               {editorStore.explorerTreeState.databaseBuilderState && (
-                <DatabaseBuilder
+                <DatabaseBuilderWizard
                   databaseBuilderState={
                     editorStore.explorerTreeState.databaseBuilderState
                   }

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

@@ -275,6 +275,11 @@ const WorkflowExplorerContextMenu = observer(
         workflowState.cancelJob(node.workflowJob, treeData);
       }
     };
+    const runManualJob = (): void => {
+      if (node instanceof WorkflowJobTreeNodeData) {
+        workflowState.runManualJob(node.workflowJob, treeData);
+      }
+    };
     const viewLogs = (): void => {
       if (node instanceof WorkflowJobTreeNodeData) {
         workflowManagerState.logState.viewJobLogs(node.workflowJob);
@@ -304,6 +309,11 @@ const WorkflowExplorerContextMenu = observer(
             {node.workflowJob.status === WorkflowJobStatus.IN_PROGRESS && (
               <MenuContentItem onClick={cancelJob}>Cancel Job</MenuContentItem>
             )}
+            {node.workflowJob.status === WorkflowJobStatus.WAITING_MANUAL && (
+              <MenuContentItem onClick={runManualJob}>
+                Run Manual Job
+              </MenuContentItem>
+            )}
           </>
         )}
         {node instanceof WorkflowTreeNodeData && (

package/src/stores/editor/ExplorerTreeState.ts

@@ -51,7 +51,7 @@ import {
   type RelationalDatabaseConnection,
 } from '@finos/legend-graph';
 import { APPLICATION_EVENT } from '@finos/legend-application';
-import { DatabaseBuilderState } from './editor-state/element-editor-state/connection/DatabaseBuilderState.js';
+import { DatabaseBuilderWizardState } from './editor-state/element-editor-state/connection/DatabaseBuilderWizardState.js';
 
 export enum ExplorerTreeRootPackageLabel {
   FILE_GENERATION = 'generated-files',
@@ -75,7 +75,7 @@ export class ExplorerTreeState {
 
   elementToRename?: PackageableElement | undefined;
   classToGenerateSampleData?: Class | undefined;
-  databaseBuilderState: DatabaseBuilderState | undefined;
+  databaseBuilderState: DatabaseBuilderWizardState | undefined;
 
   constructor(editorStore: EditorStore) {
     makeObservable(this, {
@@ -103,7 +103,7 @@ export class ExplorerTreeState {
       buildTreeInTextMode: action,
       openExplorerTreeNodes: action,
       reprocess: action,
-      buildDbBuilderState: action,
+      buildDatabase: action,
       setDatabaseBuilderState: action,
       onTreeNodeSelect: action,
       openNode: action,
@@ -176,14 +176,11 @@ export class ExplorerTreeState {
     this.classToGenerateSampleData = val;
   }
 
-  setDatabaseBuilderState(val: DatabaseBuilderState | undefined): void {
+  setDatabaseBuilderState(val: DatabaseBuilderWizardState | undefined): void {
     this.databaseBuilderState = val;
   }
-  buildDbBuilderState(
-    val: RelationalDatabaseConnection,
-    isReadOnly: boolean,
-  ): void {
-    const dbBuilderState = new DatabaseBuilderState(
+  buildDatabase(val: RelationalDatabaseConnection, isReadOnly: boolean): void {
+    const dbBuilderState = new DatabaseBuilderWizardState(
       this.editorStore,
       val,
       isReadOnly,

package/src/stores/editor/NewElementState.ts

@@ -619,7 +619,6 @@ export class NewDataElementDriver extends NewElementDriver<DataElement> {
   createElement(name: string): DataElement {
     const embeddedDataOption = guaranteeNonNullable(this.embeddedDataOption);
     const dataElement = new DataElement(name);
-
     const data = createEmbeddedData(embeddedDataOption.value, this.editorStore);
     dataElement_setEmbeddedData(
       dataElement,