@finos/legend-application-studio 27.1.0 → 27.1.1

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/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,

package/src/stores/editor/editor-state/element-editor-state/data/DataEditorState.ts

@@ -26,6 +26,7 @@ import { ElementEditorState } from '../ElementEditorState.js';
 import {
   type EmbeddedDataState,
   buildEmbeddedDataEditorState,
+  type EmbeddedDataStateOption,
 } from './EmbeddedDataState.js';
 
 export enum DATA_TAB_TYPE {
@@ -45,12 +46,17 @@ export class EmbeddedDataEditorState {
   readonly embeddedData: EmbeddedData;
   readonly embeddedDataState: EmbeddedDataState;
 
-  constructor(editorStore: EditorStore, embeddedData: EmbeddedData) {
+  constructor(
+    editorStore: EditorStore,
+    embeddedData: EmbeddedData,
+    options?: EmbeddedDataStateOption,
+  ) {
     this.editorStore = editorStore;
     this.embeddedData = embeddedData;
     this.embeddedDataState = buildEmbeddedDataEditorState(
       embeddedData,
       editorStore,
+      options,
     );
   }
 }

package/src/stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.ts

@@ -17,11 +17,12 @@ import {
   type EmbeddedData,
   type ModelData,
   type DataElement,
+  RelationalCSVData,
+  type Database,
+  type RelationalCSVDataTable,
   DataElementReference,
   ExternalFormatData,
   ModelStoreData,
-  RelationalCSVData,
-  RelationalCSVDataTable,
   ModelEmbeddedData,
 } from '@finos/legend-graph';
 import {
@@ -40,8 +41,6 @@ import {
   externalFormatData_setData,
   relationalData_addTable,
   relationalData_deleteData,
-  relationalData_setTableName,
-  relationalData_setTableSchemaName,
   relationalData_setTableValues,
 } from '../../../../graph-modifier/DSL_Data_GraphModifierHelper.js';
 import { EmbeddedDataType } from '../../ExternalFormatState.js';
@@ -168,15 +167,26 @@ export class UnsupportedModelDataState extends ModelDataState {}
 export class ModelStoreDataState extends EmbeddedDataState {
   override embeddedData: ModelStoreData;
   modelDataStates: ModelDataState[] = [];
+  hideClass = false;
 
-  constructor(editorStore: EditorStore, embeddedData: ModelStoreData) {
+  constructor(
+    editorStore: EditorStore,
+    embeddedData: ModelStoreData,
+    hideClass?: boolean,
+  ) {
     super(editorStore, embeddedData);
+    makeObservable(this, {
+      hideClass: observable,
+      modelDataStates: observable,
+      buildStates: action,
+    });
     this.embeddedData = embeddedData;
     this.modelDataStates = this.buildStates();
+    this.hideClass = Boolean(hideClass);
   }
 
   label(): string {
-    return 'ModelStore Data';
+    return 'Model Store Data';
   }
 
   buildStates(): ModelDataState[] {
@@ -209,72 +219,15 @@ export class RelationalCSVDataTableState {
   }
 }
 
-export class IdentifierTableState {
-  table: RelationalCSVDataTable | undefined;
-  dataState: RelationalCSVDataState;
-  schemaName = '';
-  tableName = '';
-
-  constructor(dataState: RelationalCSVDataState) {
-    this.dataState = dataState;
-    makeObservable(this, {
-      dataState: observable,
-      schemaName: observable,
-      tableName: observable,
-      table: observable,
-      setTableName: action,
-      setSchemaName: action,
-      setTable: action,
-      handleSubmit: action,
-    });
-  }
-
-  setTable(table: RelationalCSVDataTable | undefined): void {
-    this.table = table;
-    if (table) {
-      this.tableName = table.table;
-      this.schemaName = table.schema;
-    }
-  }
-
-  setTableName(val: string): void {
-    this.tableName = val;
-  }
-
-  setSchemaName(val: string): void {
-    this.schemaName = val;
-  }
-
-  get isEditingDisabled(): boolean {
-    if (!(this.tableName && this.schemaName)) {
-      return true;
-    }
-    return Boolean(
-      this.dataState.embeddedData.tables.find(
-        (t) =>
-          `${t.table}.${t.schema}` === `${this.tableName}.${this.schemaName}`,
-      ),
-    );
-  }
-
-  handleSubmit(): void {
-    const table = this.table ?? new RelationalCSVDataTable();
-    relationalData_setTableSchemaName(table, this.schemaName);
-    relationalData_setTableName(table, this.tableName);
-    if (!this.table) {
-      table.values = '';
-      relationalData_addTable(this.dataState.embeddedData, table);
-      this.dataState.changeSelectedTable(table);
-    }
-  }
-}
-
 export class RelationalCSVDataState extends EmbeddedDataState {
   override embeddedData: RelationalCSVData;
-  showTableIdentifierModal = false;
-  tableIdentifierState: IdentifierTableState;
   selectedTable: RelationalCSVDataTableState | undefined;
   showImportCSVModal = false;
+  database: Database | undefined;
+
+  //
+  showTableIdentifierModal = false;
+  tableToEdit: RelationalCSVDataTable | undefined;
 
   constructor(editorStore: EditorStore, embeddedData: RelationalCSVData) {
     super(editorStore, embeddedData);
@@ -282,10 +235,11 @@ export class RelationalCSVDataState extends EmbeddedDataState {
       selectedTable: observable,
       showTableIdentifierModal: observable,
       deleteTable: observable,
-      tableIdentifierState: observable,
       showImportCSVModal: observable,
+      database: observable,
       resetSelectedTable: action,
       changeSelectedTable: action,
+      setDatabase: action,
       closeModal: action,
       openIdentifierModal: action,
       setShowImportCsvModal: action,
@@ -293,7 +247,6 @@ export class RelationalCSVDataState extends EmbeddedDataState {
       importCSV: action,
     });
     this.embeddedData = embeddedData;
-    this.tableIdentifierState = new IdentifierTableState(this);
     this.resetSelectedTable();
   }
 
@@ -301,9 +254,13 @@ export class RelationalCSVDataState extends EmbeddedDataState {
     this.showImportCSVModal = val;
   }
 
+  setDatabase(val: Database | undefined): void {
+    this.database = val;
+  }
+
   openIdentifierModal(renameTable?: RelationalCSVDataTable | undefined): void {
     this.showTableIdentifierModal = true;
-    this.tableIdentifierState.setTable(renameTable);
+    this.tableToEdit = renameTable;
   }
 
   closeCSVModal(): void {
@@ -311,9 +268,8 @@ export class RelationalCSVDataState extends EmbeddedDataState {
   }
 
   closeModal(): void {
-    this.tableIdentifierState.setSchemaName('');
-    this.tableIdentifierState.setTableName('');
     this.showTableIdentifierModal = false;
+    this.tableToEdit = undefined;
   }
 
   importCSV(val: string): void {
@@ -351,14 +307,23 @@ export class RelationalCSVDataState extends EmbeddedDataState {
     return 'Relational Data';
   }
 }
+export interface EmbeddedDataStateOption {
+  hideSource?: boolean;
+}
 
 export class DataElementReferenceState extends EmbeddedDataState {
   override embeddedData: DataElementReference;
   embeddedDataValueState: EmbeddedDataState;
+  options?: EmbeddedDataStateOption | undefined;
 
-  constructor(editorStore: EditorStore, embeddedData: DataElementReference) {
+  constructor(
+    editorStore: EditorStore,
+    embeddedData: DataElementReference,
+    options?: EmbeddedDataStateOption,
+  ) {
     super(editorStore, embeddedData);
     this.embeddedData = embeddedData;
+    this.options = options;
     this.embeddedDataValueState = this.buildValueState();
   }
 
@@ -375,10 +340,11 @@ export class DataElementReferenceState extends EmbeddedDataState {
     this.embeddedDataValueState = this.buildValueState();
   }
 
-  buildValueState(): EmbeddedDataState {
+  buildValueState(options?: EmbeddedDataStateOption): EmbeddedDataState {
     return buildEmbeddedDataEditorState(
       this.embeddedData.dataElement.value.data,
       this.editorStore,
+      this.options,
     );
   }
 }
@@ -392,16 +358,21 @@ export class UnsupportedDataState extends EmbeddedDataState {
 export function buildEmbeddedDataEditorState(
   _embeddedData: EmbeddedData,
   editorStore: EditorStore,
+  options?: EmbeddedDataStateOption,
 ): EmbeddedDataState {
   const embeddedData = _embeddedData;
   if (embeddedData instanceof ExternalFormatData) {
     return new ExternalFormatDataState(editorStore, embeddedData);
   } else if (embeddedData instanceof ModelStoreData) {
-    return new ModelStoreDataState(editorStore, embeddedData);
+    return new ModelStoreDataState(
+      editorStore,
+      embeddedData,
+      options?.hideSource,
+    );
   } else if (embeddedData instanceof RelationalCSVData) {
     return new RelationalCSVDataState(editorStore, embeddedData);
   } else if (embeddedData instanceof DataElementReference) {
-    return new DataElementReferenceState(editorStore, embeddedData);
+    return new DataElementReferenceState(editorStore, embeddedData, options);
   } else {
     const extraEmbeddedDataEditorStateBuilders = editorStore.pluginManager
       .getApplicationPlugins()