@finos/legend-application-studio 26.1.7 → 26.1.9

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

@@ -24,8 +24,10 @@ import {
   MaskIcon,
   MenuContent,
   MenuContentItem,
+  Modal,
   ModalBody,
   ModalFooter,
+  ModalFooterButton,
   ModalHeader,
   PanelLoadingIndicator,
   PlusIcon,
@@ -36,10 +38,13 @@ import {
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
 } from '@finos/legend-art';
-import type {
-  IdentifiedConnection,
-  ConnectionTestData,
-  DataElement,
+import {
+  type IdentifiedConnection,
+  type ConnectionTestData,
+  type DataElement,
+  getAllIdentifiedServiceConnections,
+  DataElementReference,
+  PackageableElementExplicitReference,
 } from '@finos/legend-graph';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useState } from 'react';
@@ -60,8 +65,84 @@ import { buildElementOption } from '@finos/legend-lego/graph-editor';
 import { 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 { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../../__lib__/LegendStudioDocumentation.js';
 import { LambdaParameterValuesEditor } from '@finos/legend-query-builder';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../../__lib__/LegendStudioDocumentation.js';
+
+export const UseDataElementModal = observer(
+  (props: { connectionTestDataState: ConnectionTestDataState }) => {
+    const { connectionTestDataState } = props;
+    const editorStore = connectionTestDataState.editorStore;
+    const useSharedModal = connectionTestDataState.useSharedModal;
+    const closeModal = (): void =>
+      connectionTestDataState.setUseSharedModal(false);
+    const dataElements =
+      connectionTestDataState.editorStore.graphManagerState.graph.dataElements;
+    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) {
+        const value = new DataElementReference();
+        value.dataElement =
+          PackageableElementExplicitReference.create(dataElement);
+        connectionTestDataState.changeEmbeddedData(value);
+      }
+      closeModal();
+    };
+    const isReadOnly =
+      connectionTestDataState.testDataState.testSuiteState.testableState
+        .serviceEditorState.isReadOnly;
+    return (
+      <Dialog
+        open={useSharedModal}
+        onClose={closeModal}
+        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}
+                  value={selectedDataElement}
+                  darkMode={true}
+                />
+              </div>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              className="database-builder__action--btn"
+              disabled={isReadOnly}
+              onClick={change}
+              title="Change to use Shared Data"
+            >
+              Change
+            </ModalFooterButton>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
 
 export const ConnectionTestDataEditor = observer(
   (props: { connectionTestDataState: ConnectionTestDataState }) => {
@@ -72,6 +153,13 @@ export const ConnectionTestDataEditor = observer(
     const isReadOnly =
       connectionTestDataState.testDataState.testSuiteState.testableState
         .serviceEditorState.isReadOnly;
+    const dataElements =
+      connectionTestDataState.editorStore.graphManagerState.graph.dataElements;
+    const openShared = (): void => {
+      if (dataElements.length) {
+        connectionTestDataState.setUseSharedModal(true);
+      }
+    };
     // test data
     const anonymizeGeneratedData =
       connectionTestDataState.anonymizeGeneratedData;
@@ -159,6 +247,22 @@ export const ConnectionTestDataEditor = observer(
                 </div>
               </div>
             </button>
+            <button
+              className="panel__header__action service-execution-editor__test-data__generate-btn"
+              onClick={openShared}
+              title="Use Shared Data via Defined Data Element"
+              disabled={
+                connectionTestDataState.generatingTestDataState.isInProgress ||
+                !dataElements.length
+              }
+              tabIndex={-1}
+            >
+              <div className="service-execution-editor__test-data__generate-btn__label">
+                <div className="service-execution-editor__test-data__generate-btn__label__title">
+                  Shared Data
+                </div>
+              </div>
+            </button>
           </div>
         </div>
         <EmbeddedDataEditor
@@ -176,6 +280,11 @@ export const ConnectionTestDataEditor = observer(
             lambdaParametersState={connectionTestDataState.parametersState}
           />
         )}
+        {connectionTestDataState.useSharedModal && (
+          <UseDataElementModal
+            connectionTestDataState={connectionTestDataState}
+          />
+        )}
       </div>
     );
   },
@@ -279,13 +388,15 @@ export const NewConnectionDataModal = observer(
     };
     const isReadOnly =
       testDataState.testSuiteState.testableState.serviceEditorState.isReadOnly;
+    const service =
+      testDataState.testSuiteState.testableState.serviceEditorState.service;
     const closeModal = (): void => newConnectionState.setModal(false);
-    const connectionOptions = testDataState.allIdentifiedConnections.map(
-      (e) => ({
-        label: e.id,
-        value: e,
-      }),
-    );
+    const allIdentifiedConnections =
+      getAllIdentifiedServiceConnections(service);
+    const connectionOptions = allIdentifiedConnections.map((e) => ({
+      label: e.id,
+      value: e,
+    }));
     const selectedConnection = newConnectionState.connection
       ? {
           label: newConnectionState.connection.id,
@@ -294,7 +405,7 @@ export const NewConnectionDataModal = observer(
       : undefined;
     const isDisabled =
       isReadOnly ||
-      !testDataState.allIdentifiedConnections.length ||
+      !allIdentifiedConnections.length ||
       Boolean(
         testDataState.testData.connectionsTestData.find(
           (c) => c.connectionId === selectedConnection?.value.id,
@@ -439,6 +550,15 @@ export const ServiceTestDataEditor = observer(
     const applicationStore = useApplicationStore();
     const testData = testDataState.testData;
     const newConnectionDataState = testDataState.newConnectionDataState;
+    const identifedConnections = getAllIdentifiedServiceConnections(
+      testDataState.testSuiteState.testableState.service,
+    );
+    const selectedDataState = testDataState.selectedDataState;
+    const hideExplorer =
+      identifedConnections.length === 1 &&
+      testData.connectionsTestData.length === 1 &&
+      testData.connectionsTestData[0]?.connectionId ===
+        identifedConnections[0]?.id;
     const addConnectionTestData = (): void => {
       testDataState.newConnectionDataState.openModal();
     };
@@ -451,7 +571,7 @@ export const ServiceTestDataEditor = observer(
         <div className="service-test-suite-editor__header">
           <div className="service-test-suite-editor__header__title">
             <div className="service-test-suite-editor__header__title__label service-test-suite-editor__header__title__label--data">
-              test suite data
+              Test DATA
             </div>
           </div>
         </div>
@@ -464,63 +584,69 @@ export const ServiceTestDataEditor = observer(
               tooltipText="Click to add connection test data"
             />
           )}
-          <ResizablePanelGroup orientation="vertical">
-            <ResizablePanel minSize={100}>
-              <div className="binding-editor__header">
-                <div className="binding-editor__header__title">
-                  <div className="binding-editor__header__title__label">
-                    connections
+          {hideExplorer && selectedDataState ? (
+            <ConnectionTestDataEditor
+              connectionTestDataState={selectedDataState}
+            />
+          ) : (
+            <ResizablePanelGroup orientation="vertical">
+              <ResizablePanel minSize={100}>
+                <div className="binding-editor__header">
+                  <div className="binding-editor__header__title">
+                    <div className="binding-editor__header__title__label">
+                      connections
+                      <button
+                        className="binding-editor__header__title__label__hint"
+                        tabIndex={-1}
+                        onClick={seeDocumentation}
+                        title="click to see more details on connection test data"
+                      >
+                        <InfoCircleIcon />
+                      </button>
+                    </div>
+                  </div>
+                  <div className="panel__header__actions">
                     <button
-                      className="binding-editor__header__title__label__hint"
+                      className="panel__header__action"
                       tabIndex={-1}
-                      onClick={seeDocumentation}
-                      title="click to see more details on connection test data"
+                      onClick={addConnectionTestData}
+                      title="Add Connection Test Data"
                     >
-                      <InfoCircleIcon />
+                      <PlusIcon />
                     </button>
                   </div>
                 </div>
-                <div className="panel__header__actions">
-                  <button
-                    className="panel__header__action"
-                    tabIndex={-1}
-                    onClick={addConnectionTestData}
-                    title="Add Connection Test Data"
-                  >
-                    <PlusIcon />
-                  </button>
+                <div>
+                  {testData.connectionsTestData.map((connectionTestData) => (
+                    <ConnectionTestDataItem
+                      key={connectionTestData.connectionId}
+                      serviceTestDataState={testDataState}
+                      connectionTestData={connectionTestData}
+                    />
+                  ))}
                 </div>
-              </div>
-              <div>
-                {testData.connectionsTestData.map((connectionTestData) => (
-                  <ConnectionTestDataItem
-                    key={connectionTestData.connectionId}
-                    serviceTestDataState={testDataState}
-                    connectionTestData={connectionTestData}
+              </ResizablePanel>
+              <ResizablePanelSplitter>
+                <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+              </ResizablePanelSplitter>
+              <ResizablePanel minSize={600}>
+                <PanelLoadingIndicator
+                  isLoading={Boolean(
+                    testDataState.selectedDataState?.generatingTestDataState
+                      .isInProgress,
+                  )}
+                />
+                {testDataState.selectedDataState && (
+                  <ConnectionTestDataEditor
+                    connectionTestDataState={testDataState.selectedDataState}
                   />
-                ))}
-              </div>
-            </ResizablePanel>
-            <ResizablePanelSplitter>
-              <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
-            </ResizablePanelSplitter>
-            <ResizablePanel minSize={600}>
-              <PanelLoadingIndicator
-                isLoading={Boolean(
-                  testDataState.selectedDataState?.generatingTestDataState
-                    .isInProgress,
                 )}
-              />
-              {testDataState.selectedDataState && (
-                <ConnectionTestDataEditor
-                  connectionTestDataState={testDataState.selectedDataState}
-                />
-              )}
-              {newConnectionDataState.showModal && (
-                <NewConnectionDataModal testDataState={testDataState} />
-              )}
-            </ResizablePanel>
-          </ResizablePanelGroup>
+                {newConnectionDataState.showModal && (
+                  <NewConnectionDataModal testDataState={testDataState} />
+                )}
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          )}
         </div>
       </div>
     );

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

@@ -26,6 +26,10 @@ import {
   MenuContent,
   MenuContentItem,
   BlankPanelContent,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  Panel,
+  PanelHeader,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { ServiceTestSuite } from '@finos/legend-graph';
@@ -45,26 +49,34 @@ import { RenameModal } from '../../testable/TestableSharedComponents.js';
 export const ServiceTestSuiteEditor = observer(
   (props: { serviceTestSuiteState: ServiceTestSuiteState }) => {
     const { serviceTestSuiteState } = props;
+    const serviceRuntime =
+      serviceTestSuiteState.testableState.serviceEditorState.executionState
+        .serviceExecutionParameters?.runtime;
+
     return (
       <div className="service-test-suite-editor">
-        <ResizablePanelGroup orientation="horizontal">
-          <ResizablePanel size={300} minSize={28}>
-            {serviceTestSuiteState.testDataState && (
-              <ServiceTestDataEditor
-                testDataState={serviceTestSuiteState.testDataState}
-              />
-            )}
-            {!serviceTestSuiteState.testDataState && (
-              <BlankPanelContent>No test data specified</BlankPanelContent>
-            )}
-          </ResizablePanel>
-          <ResizablePanelSplitter>
-            <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
-          </ResizablePanelSplitter>
-          <ResizablePanel minSize={56}>
-            <ServiceTestsEditor suiteState={serviceTestSuiteState} />
-          </ResizablePanel>
-        </ResizablePanelGroup>
+        {serviceRuntime ? (
+          <ResizablePanelGroup orientation="horizontal">
+            <ResizablePanel size={300} minSize={28}>
+              {serviceTestSuiteState.testDataState && (
+                <ServiceTestDataEditor
+                  testDataState={serviceTestSuiteState.testDataState}
+                />
+              )}
+              {!serviceTestSuiteState.testDataState && (
+                <BlankPanelContent>No test data specified</BlankPanelContent>
+              )}
+            </ResizablePanel>
+            <ResizablePanelSplitter>
+              <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+            </ResizablePanelSplitter>
+            <ResizablePanel minSize={56}>
+              <ServiceTestsEditor suiteState={serviceTestSuiteState} />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        ) : (
+          <ServiceTestsEditor suiteState={serviceTestSuiteState} />
+        )}
       </div>
     );
   },
@@ -113,10 +125,10 @@ export const ServiceTestableEditor = observer(
     );
 
     return (
-      <div className="service-test-suite-editor panel">
-        <div className="panel__header">
+      <Panel className="service-test-suite-editor">
+        <PanelHeader>
           {service.tests.length ? (
-            <div className="panel__header service-test-suite-editor__header service-test-suite-editor__header--with-tabs">
+            <PanelHeader className="service-test-suite-editor__header service-test-suite-editor__header--with-tabs">
               <div className="uml-element-editor__tabs">
                 {service.tests.map((suite) => (
                   <div
@@ -141,22 +153,17 @@ export const ServiceTestableEditor = observer(
                   </div>
                 ))}
               </div>
-            </div>
+            </PanelHeader>
           ) : (
             <div></div>
           )}
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
-              tabIndex={-1}
-              onClick={addSuite}
-              title="Add Service Suite"
-            >
+          <PanelHeaderActions>
+            <PanelHeaderActionItem onClick={addSuite} title="Add Service Suite">
               <PlusIcon />
-            </button>
-          </div>
-        </div>
-        <div className="service-test-suite-editor panel">
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
+        <Panel className="service-test-suite-editor">
           {serviceTestableState.selectedSuiteState && (
             <ServiceTestSuiteEditor
               serviceTestSuiteState={serviceTestableState.selectedSuiteState}
@@ -181,8 +188,8 @@ export const ServiceTestableEditor = observer(
               setValue={renameSuite}
             />
           )}
-        </div>
-      </div>
+        </Panel>
+      </Panel>
     );
   },
 );

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

@@ -542,6 +542,11 @@ const TestAssertionsEditor = observer(
     const isReadOnly =
       serviceTestState.suiteState.testableState.serviceEditorState.isReadOnly;
     const editorStore = serviceTestState.editorStore;
+    const selectedAsertionState = serviceTestState.selectedAsertionState;
+    const hideExplorer =
+      serviceTestState.test.assertions.length === 1 &&
+      serviceTestState.selectedAsertionState?.assertion.id ===
+        serviceTestState.test.assertions[0]?.id;
     const addAssertion = (): void => serviceTestState.addAssertion();
     const renameAssertion = (val: string): void =>
       testAssertion_setId(
@@ -555,95 +560,92 @@ const TestAssertionsEditor = observer(
     };
     return (
       <div className="panel service-test-editor">
-        <div className="service-test-suite-editor__header">
-          <div className="service-test-suite-editor__header__title">
-            <div className="service-test-suite-editor__header__title__label service-test-suite-editor__header__title__label--assertions">
-              assertions
-            </div>
-          </div>
-        </div>
-        <div className="service-test-editor__content">
-          <ResizablePanelGroup orientation="vertical">
-            <ResizablePanel minSize={100} size={200}>
-              <div className="binding-editor__header">
-                <div className="binding-editor__header__title">
-                  <div className="testable-test-assertion-explorer__header__summary">
-                    <div className="testable-test-assertion-explorer__header__summary__icon testable-test-assertion-explorer__header__summary__icon--assertion">
-                      <TestTubeIcon />
+        {hideExplorer && selectedAsertionState ? (
+          <TestAssertionEditor testAssertionState={selectedAsertionState} />
+        ) : (
+          <div className="service-test-editor__content">
+            <ResizablePanelGroup orientation="vertical">
+              <ResizablePanel minSize={100} size={200}>
+                <div className="binding-editor__header">
+                  <div className="binding-editor__header__title">
+                    <div className="testable-test-assertion-explorer__header__summary">
+                      <div className="testable-test-assertion-explorer__header__summary__icon testable-test-assertion-explorer__header__summary__icon--assertion">
+                        <TestTubeIcon />
+                      </div>
+                      <div>{serviceTestState.assertionCount}</div>
                     </div>
-                    <div>{serviceTestState.assertionCount}</div>
-                  </div>
-                  <div className="testable-test-assertion-explorer__header__summary">
-                    <div className="testable-test-assertion-explorer__header__summary__icon testable-test-assertion-explorer__header__summary__icon--passed">
-                      <CheckCircleIcon />
+                    <div className="testable-test-assertion-explorer__header__summary">
+                      <div className="testable-test-assertion-explorer__header__summary__icon testable-test-assertion-explorer__header__summary__icon--passed">
+                        <CheckCircleIcon />
+                      </div>
+                      <div>{serviceTestState.assertionPassed}</div>
                     </div>
-                    <div>{serviceTestState.assertionPassed}</div>
-                  </div>
-                  <div className="testable-test-assertion-explorer__header__summary">
-                    <div className="testable-test-assertion-explorer__header__summary__icon testable-test-assertion-explorer__header__summary__icon--failed">
-                      <TimesCircleIcon />
+                    <div className="testable-test-assertion-explorer__header__summary">
+                      <div className="testable-test-assertion-explorer__header__summary__icon testable-test-assertion-explorer__header__summary__icon--failed">
+                        <TimesCircleIcon />
+                      </div>
+                      <div>{serviceTestState.assertionFailed}</div>
                     </div>
-                    <div>{serviceTestState.assertionFailed}</div>
+                  </div>
+                  <div className="panel__header__actions">
+                    <button
+                      className="panel__header__action testable-test-explorer__play__all__icon"
+                      tabIndex={-1}
+                      onClick={runTest}
+                      title="Run All Assertions"
+                    >
+                      <RunAllIcon />
+                    </button>
+                    <button
+                      className="panel__header__action"
+                      tabIndex={-1}
+                      onClick={addAssertion}
+                      title="Add Test Assertion"
+                    >
+                      <PlusIcon />
+                    </button>
                   </div>
                 </div>
-                <div className="panel__header__actions">
-                  <button
-                    className="panel__header__action testable-test-explorer__play__all__icon"
-                    tabIndex={-1}
-                    onClick={runTest}
-                    title="Run All Assertions"
-                  >
-                    <RunAllIcon />
-                  </button>
-                  <button
-                    className="panel__header__action"
-                    tabIndex={-1}
-                    onClick={addAssertion}
-                    title="Add Test Assertion"
-                  >
-                    <PlusIcon />
-                  </button>
+                <div>
+                  {serviceTestState.assertionEditorStates.map(
+                    (assertionState) => (
+                      <TestAssertionItem
+                        key={assertionState.assertion.id}
+                        testableTestState={serviceTestState}
+                        testAssertionEditorState={assertionState}
+                        isReadOnly={
+                          serviceTestState.suiteState.testableState
+                            .serviceEditorState.isReadOnly
+                        }
+                      />
+                    ),
+                  )}
                 </div>
-              </div>
-              <div>
-                {serviceTestState.assertionEditorStates.map(
-                  (assertionState) => (
-                    <TestAssertionItem
-                      key={assertionState.assertion.id}
-                      testableTestState={serviceTestState}
-                      testAssertionEditorState={assertionState}
-                      isReadOnly={
-                        serviceTestState.suiteState.testableState
-                          .serviceEditorState.isReadOnly
-                      }
-                    />
-                  ),
+                {serviceTestState.assertionToRename && (
+                  <RenameModal
+                    val={serviceTestState.assertionToRename.id}
+                    isReadOnly={isReadOnly}
+                    showModal={true}
+                    closeModal={(): void =>
+                      serviceTestState.setAssertionToRename(undefined)
+                    }
+                    setValue={renameAssertion}
+                  />
                 )}
-              </div>
-              {serviceTestState.assertionToRename && (
-                <RenameModal
-                  val={serviceTestState.assertionToRename.id}
-                  isReadOnly={isReadOnly}
-                  showModal={true}
-                  closeModal={(): void =>
-                    serviceTestState.setAssertionToRename(undefined)
-                  }
-                  setValue={renameAssertion}
-                />
-              )}
-            </ResizablePanel>
-            <ResizablePanelSplitter>
-              <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
-            </ResizablePanelSplitter>
-            <ResizablePanel>
-              {serviceTestState.selectedAsertionState && (
-                <TestAssertionEditor
-                  testAssertionState={serviceTestState.selectedAsertionState}
-                />
-              )}
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </div>
+              </ResizablePanel>
+              <ResizablePanelSplitter>
+                <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+              </ResizablePanelSplitter>
+              <ResizablePanel>
+                {selectedAsertionState && (
+                  <TestAssertionEditor
+                    testAssertionState={selectedAsertionState}
+                  />
+                )}
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+        )}
       </div>
     );
   },
@@ -678,7 +680,7 @@ const ServiceTestEditor = observer(
             <ServiceTestSetupEditor serviceTestState={serviceTestState} />
           )}
 
-          {selectedTab === TESTABLE_TEST_TAB.ASSERTIONS && (
+          {selectedTab === TESTABLE_TEST_TAB.ASSERTION && (
             <TestAssertionsEditor serviceTestState={serviceTestState} />
           )}
         </div>