@finos/legend-application-studio 28.21.3 → 28.21.4

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

@@ -15,6 +15,7 @@
  */
 
 import {
+  BlankPanelPlaceholder,
   clsx,
   CompareIcon,
   ContextMenu,
@@ -38,6 +39,7 @@ import {
 } from '@finos/legend-art';
 import {
   type DataElement,
+  DataProduct,
   type ValueSpecification,
   type VariableExpression,
   type PrimitiveInstanceValue,
@@ -61,6 +63,8 @@ import {
   type TestAssertionState,
   EqualToAssertionState,
   EqualToAssertFailState,
+  EqualToRelationAssertionState,
+  EqualToRelationAssertFailState,
 } from '../../../../stores/editor/editor-state/element-editor-state/testable/TestAssertionState.js';
 import { externalFormatData_setData } from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
 import { TESTABLE_RESULT } from '../../../../stores/editor/sidebar-state/testable/GlobalTestRunnerState.js';
@@ -76,11 +80,13 @@ import {
   getPackageableElementOptionFormatter,
 } from '@finos/legend-lego/graph-editor';
 import type { TestParamContentType } from '../../../../stores/editor/utils/TestableUtils.js';
+import { RelationElementEditor } from '../data-editor/RelationElementsDataEditor.js';
 import {
   BasicValueSpecificationEditor,
   buildDefaultInstanceValue,
 } from '@finos/legend-query-builder';
 import { useApplicationStore } from '@finos/legend-application';
+import type { DataProductTestState } from '../../../../stores/editor/editor-state/element-editor-state/dataProduct/testable/DataProductTestableState.js';
 
 export const SharedDataElementModal = observer(
   (props: {
@@ -575,6 +581,132 @@ const TestErrorViewer = observer((props: { testError: TestError }) => {
   );
 });
 
+const EqualToRelationAsssertionEditor = observer(
+  (props: {
+    testAssertionEditorState: TestAssertionEditorState;
+    equalToRelationAssertionState: EqualToRelationAssertionState;
+  }) => {
+    const { equalToRelationAssertionState, testAssertionEditorState } = props;
+    const isReadOnly = testAssertionEditorState.testState.isReadOnly;
+
+    return (
+      <RelationElementEditor
+        relationElementState={
+          equalToRelationAssertionState.expectedRelationElementState
+        }
+        isReadOnly={isReadOnly}
+      />
+    );
+  },
+);
+
+const DataProductEqualToRelationAssertionEditor = observer(
+  (props: { testAssertionEditorState: TestAssertionEditorState }) => {
+    const { testAssertionEditorState } = props;
+    const testState =
+      testAssertionEditorState.testState as DataProductTestState;
+    const isReadOnly = testAssertionEditorState.testState.isReadOnly;
+    const relationElementState = testState.testDataRelationState;
+
+    return (
+      <div className="service-test-data-editor panel">
+        <div className="function-testable-editor__header">
+          <div className="function-testable-editor__header__title">
+            <div className="function-testable-editor__header__title__label">
+              expected
+            </div>
+          </div>
+        </div>
+        <div className="panel__content__form__section">
+          <div className="panel__content__form__section__header__label">
+            Access Point
+          </div>
+          <div className="panel__content__form__section__header__prompt">
+            {testState.accessPointLabel}
+          </div>
+        </div>
+        {relationElementState ? (
+          <RelationElementEditor
+            relationElementState={relationElementState}
+            isReadOnly={isReadOnly}
+          />
+        ) : (
+          <BlankPanelPlaceholder
+            text="No expected columns"
+            tooltipText="No expected columns configured for this test"
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+const EqualToRelationAssertFailViewer = observer(
+  (props: {
+    equalToRelationAssertFailState: EqualToRelationAssertFailState;
+  }) => {
+    const { equalToRelationAssertFailState } = props;
+    const applicationStore =
+      equalToRelationAssertFailState.resultState.editorStore.applicationStore;
+    const open = (): void => equalToRelationAssertFailState.setDiffModal(true);
+    const close = (): void =>
+      equalToRelationAssertFailState.setDiffModal(false);
+    const expected = equalToRelationAssertFailState.status.expected;
+    const actual = equalToRelationAssertFailState.status.actual;
+
+    return (
+      <>
+        <div className="equal-to-json-editor__message" onClick={open}>
+          {`<Click to see difference>`}
+        </div>
+        {equalToRelationAssertFailState.diffModal && (
+          <Dialog
+            open={Boolean(equalToRelationAssertFailState.diffModal)}
+            onClose={close}
+            classes={{
+              root: 'editor-modal__root-container',
+              container: 'editor-modal__container',
+              paper: 'editor-modal__content',
+            }}
+          >
+            <Modal
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              className="editor-modal"
+            >
+              <ModalHeader>
+                <div className="equal-to-json-result__diff__summary">
+                  <div className="equal-to-json-result__diff__header__label">
+                    expected
+                  </div>
+                  <div className="equal-to-json-result__diff__icon">
+                    <CompareIcon />
+                  </div>
+                  <div className="equal-to-json-result__diff__header__label">
+                    actual
+                  </div>
+                </div>
+              </ModalHeader>
+              <ModalBody>
+                <JSONDiffView from={expected} to={actual} lossless={false} />
+              </ModalBody>
+              <ModalFooter>
+                <ModalFooterButton
+                  text="Close"
+                  onClick={close}
+                  type="secondary"
+                />
+              </ModalFooter>
+            </Modal>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+);
+
 const AssertFailViewer = observer(
   (props: { assertFailState: AssertFailState }) => {
     const { assertFailState } = props;
@@ -606,6 +738,10 @@ const AssertFailViewer = observer(
           <EqualToJsonAssertFailViewer
             equalToJsonAssertFailState={assertFailState}
           />
+        ) : assertFailState instanceof EqualToRelationAssertFailState ? (
+          <EqualToRelationAssertFailViewer
+            equalToRelationAssertFailState={assertFailState}
+          />
         ) : assertFailState instanceof EqualToAssertFailState ? (
           <EqualToAssertFailViewer equalToAssertFailState={assertFailState} />
         ) : isGenericEqualToFail ? (
@@ -849,6 +985,8 @@ export const TestAssertionEditor = observer(
     const { testAssertionState } = props;
     const selectedTab = testAssertionState.selectedTab;
     const isReadOnly = testAssertionState.testState.isReadOnly;
+    const isDataProductTest =
+      testAssertionState.testState.testable instanceof DataProduct;
     const isDisabled =
       isReadOnly ||
       !testAssertionState.assertionState.supportsGeneratingAssertion ||
@@ -870,6 +1008,20 @@ export const TestAssertionEditor = observer(
             testAssertionEditorState={testAssertionState}
           />
         );
+      } else if (state instanceof EqualToRelationAssertionState) {
+        if (isDataProductTest) {
+          return (
+            <DataProductEqualToRelationAssertionEditor
+              testAssertionEditorState={testAssertionState}
+            />
+          );
+        }
+        return (
+          <EqualToRelationAsssertionEditor
+            equalToRelationAssertionState={state}
+            testAssertionEditorState={testAssertionState}
+          />
+        );
       }
       return (
         <UnsupportedEditorPanel
@@ -901,22 +1053,24 @@ export const TestAssertionEditor = observer(
               </div>
             ))}
           </div>
-          <div className="testable-test-assertion-editor__header__actions">
-            <button
-              className="panel__header__action service-execution-editor__test-data__generate-btn"
-              onClick={generate}
-              title="Generate expected result if possible"
-              disabled={isDisabled}
-              tabIndex={-1}
-            >
-              <div className="service-execution-editor__test-data__generate-btn__label">
-                <RefreshIcon className="service-execution-editor__test-data__generate-btn__label__icon" />
-                <div className="service-execution-editor__test-data__generate-btn__label__title">
-                  Generate
+          {!isDataProductTest && (
+            <div className="testable-test-assertion-editor__header__actions">
+              <button
+                className="panel__header__action service-execution-editor__test-data__generate-btn"
+                onClick={generate}
+                title="Generate expected result if possible"
+                disabled={isDisabled}
+                tabIndex={-1}
+              >
+                <div className="service-execution-editor__test-data__generate-btn__label">
+                  <RefreshIcon className="service-execution-editor__test-data__generate-btn__label__icon" />
+                  <div className="service-execution-editor__test-data__generate-btn__label__title">
+                    Generate
+                  </div>
                 </div>
-              </div>
-            </button>
-          </div>
+              </button>
+            </div>
+          )}
         </div>
         <div className="testable-test-assertion-editor__content">
           {selectedTab === TEST_ASSERTION_TAB.EXPECTED && (

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

@@ -211,8 +211,12 @@ export class ModelStoreDataState extends EmbeddedDataState {
 
 export class RelationElementState {
   relationElement: RelationElement;
+  supportsColumnEditing: boolean;
 
-  constructor(relationElement: RelationElement) {
+  constructor(
+    relationElement: RelationElement,
+    options?: { supportsColumnEditing?: boolean },
+  ) {
     makeObservable(this, {
       relationElement: observable,
       addColumn: action,
@@ -224,6 +228,7 @@ export class RelationElementState {
       clearAllData: action,
       importCSV: action,
     });
+    this.supportsColumnEditing = options?.supportsColumnEditing ?? true;
     this.relationElement = relationElement;
     this.relationElement = observe_RelationElement(relationElement);
   }
@@ -382,12 +387,21 @@ export class RelationElementState {
   }
 }
 
+export interface RelationElementAccessorOption {
+  label: string;
+  value: string;
+  columns: string[];
+}
+
 export class RelationElementsDataState extends EmbeddedDataState {
   override embeddedData: RelationElementsData;
   showImportCSVModal = false;
   showNewRelationElementModal = false;
   activeRelationElement: RelationElementState | undefined;
   relationElementStates: RelationElementState[];
+  accessorOptions: RelationElementAccessorOption[] | undefined;
+  accessorTypeLabel: string | undefined;
+  refreshAccessorOptions: (() => Promise<void>) | undefined;
 
   constructor(editorStore: EditorStore, embeddedData: RelationElementsData) {
     super(editorStore, embeddedData);
@@ -396,10 +410,15 @@ export class RelationElementsDataState extends EmbeddedDataState {
       showImportCSVModal: observable,
       showNewRelationElementModal: observable,
       activeRelationElement: observable,
+      relationElementStates: observable,
+      accessorOptions: observable,
+      accessorTypeLabel: observable,
       setActiveRelationElement: action,
       setShowImportCSVModal: action,
       setShowNewRelationElementModal: action,
       addRelationElement: action,
+      deleteRelationElement: action,
+      setAccessorOptions: action,
     });
     this.embeddedData = embeddedData;
     this.relationElementStates = embeddedData.relationElements.map(
@@ -423,6 +442,18 @@ export class RelationElementsDataState extends EmbeddedDataState {
     this.setActiveRelationElement(newElementState);
   }
 
+  deleteRelationElement(relationElementState: RelationElementState): void {
+    const idx = this.relationElementStates.indexOf(relationElementState);
+    if (idx === -1) {
+      return;
+    }
+    this.relationElementStates.splice(idx, 1);
+    this.embeddedData.relationElements.splice(idx, 1);
+    if (this.activeRelationElement === relationElementState) {
+      this.setActiveRelationElement(this.relationElementStates[0]);
+    }
+  }
+
   setShowImportCSVModal(show: boolean): void {
     this.showImportCSVModal = show;
   }
@@ -430,6 +461,28 @@ export class RelationElementsDataState extends EmbeddedDataState {
   setShowNewRelationElementModal(show: boolean): void {
     this.showNewRelationElementModal = show;
   }
+
+  setAccessorOptions(
+    options: RelationElementAccessorOption[] | undefined,
+    typeLabel: string | undefined,
+  ): void {
+    this.accessorOptions = options;
+    this.accessorTypeLabel = typeLabel;
+  }
+
+  setRefreshAccessorOptions(fn: (() => Promise<void>) | undefined): void {
+    this.refreshAccessorOptions = fn;
+  }
+
+  get availableAccessorOptions(): RelationElementAccessorOption[] {
+    if (!this.accessorOptions) {
+      return [];
+    }
+    const existingPaths = new Set(
+      this.relationElementStates.map((s) => s.relationElement.paths.join('.')),
+    );
+    return this.accessorOptions.filter((opt) => !existingPaths.has(opt.value));
+  }
 }
 
 export class RelationalCSVDataTableState {

package/src/stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.ts

@@ -109,6 +109,7 @@ import {
   modelAccessPointGroup_setMapping,
   dataProduct_setSupportInfoIfAbsent,
 } from '../../../../graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
+import { DataProductTestableState } from './testable/DataProductTestableState.js';
 import { LambdaEditorState, LineageState } from '@finos/legend-query-builder';
 import {
   DataProductElementEditorInitialConfiguration,
@@ -129,6 +130,7 @@ export enum DATA_PRODUCT_TAB {
   SUPPORT = 'Support',
   APG = 'APG',
   OPERATIONAL = 'Operational',
+  TESTING = 'Testing',
 }
 
 export enum DATA_PRODUCT_TYPE {
@@ -966,6 +968,7 @@ export class DataProductEditorState extends ElementEditorState {
   selectedGroupState: AccessPointGroupState | undefined;
   selectedTab: DATA_PRODUCT_TAB;
   modelledDataProduct = false;
+  testableState: DataProductTestableState;
 
   constructor(
     editorStore: EditorStore,
@@ -1015,6 +1018,7 @@ export class DataProductEditorState extends ElementEditorState {
       this.deployOnOpen = elementConfig.deployOnOpen ?? false;
     }
     this.selectedTab = DATA_PRODUCT_TAB.HOME;
+    this.testableState = new DataProductTestableState(this);
   }
 
   setDeployOnOpen(value: boolean): void {