@finos/legend-application-studio 27.1.0 → 27.1.2

package/src/components/editor/editor-group/mapping-editor/MappingTestableEditor.tsx

@@ -23,11 +23,11 @@ import {
   ModelStore,
   Database,
   getMappingCompatibleClasses,
-  getRootSetImplementation,
-  RelationalInstanceSetImplementation,
-  EmbeddedRelationalInstanceSetImplementation,
   isStubbed_RawLambda,
   stub_RawLambda,
+  MappingTest,
+  PackageableElementExplicitReference,
+  DataElementReference,
 } from '@finos/legend-graph';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import {
@@ -55,36 +55,31 @@ import {
   ResizablePanelSplitterLine,
   RunAllIcon,
   RunErrorsIcon,
-  TestTubeIcon,
   type SelectComponent,
-  CheckCircleIcon,
-  TimesCircleIcon,
   PanelLoadingIndicator,
   ContextMenu,
   ModalHeader,
   PanelFormSection,
+  PlayIcon,
 } from '@finos/legend-art';
 import {
   assertErrorThrown,
-  generateEnumerableNameFromToken,
-  guaranteeNonNullable,
+  filterByType,
   prettyCONSTName,
+  returnUndefOnError,
   uniq,
 } from '@finos/legend-shared';
-import {
-  type StoreTestDataState,
-  type MappingTestableState,
-  type MappingTestableQueryState,
-  type MappingTestState,
-  type MappingTestableDataState,
-  type MappingTestSuiteState,
-  MAPPING_TEST_SUITE_TYPE,
-  MappingQueryTestSuiteState,
-  MappingDataTestState,
-  MappingDataTestSuiteState,
-  MappingQueryTestState,
+import type {
+  StoreTestDataState,
+  MappingTestableState,
+  MappingTestState,
+  MappingTestSuiteState,
+  CreateSuiteState,
 } from '../../../../stores/editor/editor-state/element-editor-state/mapping/testable/MappingTestableState.js';
-import { useApplicationStore } from '@finos/legend-application';
+import {
+  useApplicationNavigationContext,
+  useApplicationStore,
+} from '@finos/legend-application';
 import { flowResult } from 'mobx';
 import {
   QueryBuilderTextEditorMode,
@@ -95,23 +90,23 @@ import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
-import { TESTABLE_TEST_TAB } from '../../../../stores/editor/editor-state/element-editor-state/testable/TestableEditorState.js';
-import {
-  atomicTest_setDoc,
-  testAssertion_setId,
-} from '../../../../stores/graph-modifier/Testable_GraphModifierHelper.js';
+import { atomicTest_setDoc } from '../../../../stores/graph-modifier/Testable_GraphModifierHelper.js';
 import {
   RenameModal,
+  SharedDataElementModal,
   TestAssertionEditor,
-  TestAssertionItem,
 } from '../testable/TestableSharedComponents.js';
 import { EmbeddedDataEditor } from '../data-editor/EmbeddedDataEditor.js';
 import {
   TESTABLE_RESULT,
   getTestableResultFromTestResult,
+  getTestableResultFromTestResults,
 } from '../../../../stores/editor/sidebar-state/testable/GlobalTestRunnerState.js';
 import { getTestableResultIcon } from '../../side-bar/testable/GlobalTestRunner.js';
-import { validateTestableId } from '../../../../stores/editor/utils/TestableUtils.js';
+import {
+  EmbeddedDataCreatorFromEmbeddedData,
+  validateTestableId,
+} from '../../../../stores/editor/utils/TestableUtils.js';
 import { getMappingStores } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 import { EmbeddedDataType } from '../../../../stores/editor/editor-state/ExternalFormatState.js';
@@ -121,49 +116,26 @@ import {
   getPackageableElementOptionFormatter,
   type PackageableElementOption,
 } from '@finos/legend-lego/graph-editor';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 
-const SOURCE_CLASS_FORM_TITLE = 'Source Class To Add Data';
-const SOURCE_CLASS_FORM_PROMPT = 'Source class to provide test data for';
-const TARGET_CLASS_FORM_TITLE = 'Target Class To Test';
-const TARGET_CLASS_FORM_PROMPT =
-  'Mapped class for which you would like to build test query';
 interface ClassSelectOption {
   label: string;
   value: Class;
 }
 
 const CreateTestSuiteModal = observer(
-  (props: { mappingTestableState: MappingTestableState }) => {
-    const { mappingTestableState } = props;
+  (props: { creatorState: CreateSuiteState }) => {
+    const { creatorState } = props;
+    const mappingTestableState = creatorState.mappingTestableState;
     const mappingEditorState = mappingTestableState.mappingEditorState;
     const mapping = mappingEditorState.mapping;
-    const creatorState = mappingTestableState.createSuiteState;
     const editorStore = mappingEditorState.editorStore;
-    // quick funcs
-    const getDefaultSuite = (
-      val: Class | undefined,
-    ): MAPPING_TEST_SUITE_TYPE => {
-      if (val) {
-        const rootSetImpl = getRootSetImplementation(mapping, val);
-        if (
-          rootSetImpl instanceof RelationalInstanceSetImplementation ||
-          rootSetImpl instanceof EmbeddedRelationalInstanceSetImplementation ||
-          rootSetImpl instanceof EmbeddedRelationalInstanceSetImplementation
-        ) {
-          return MAPPING_TEST_SUITE_TYPE.DATA;
-        } else {
-          return MAPPING_TEST_SUITE_TYPE.QUERY;
-        }
-      }
-      return MAPPING_TEST_SUITE_TYPE.QUERY;
-    };
     // Class mapping selector
     const compatibleClasses = getMappingCompatibleClasses(
       mapping,
       editorStore.graphManagerState.usableClasses,
     );
     const inputRef = useRef<HTMLInputElement>(null);
-
     const handleEnter = (): void => inputRef.current?.focus();
     const mappedClassOptions = uniq(compatibleClasses)
       .map((e) => ({
@@ -181,38 +153,33 @@ const CreateTestSuiteModal = observer(
         }
       : null;
     // init states
-    const [suiteType, setSuiteType] = useState(getDefaultSuite(selectedClass));
     const [suiteName, setSuiteName] = useState<string | undefined>(undefined);
     const [testName, setTestName] = useState<string | undefined>(undefined);
-
     const isValid = selectedClass && suiteName && testName;
     const changeClassOption = (val: ClassSelectOption | null): void => {
       if (val?.value) {
         setSelectedClass(val.value);
-        setSuiteType(getDefaultSuite(val.value));
       } else {
         setSelectedClass(undefined);
-        setSuiteType(getDefaultSuite(undefined));
       }
     };
-
     // model
-    const close = (): void => creatorState.setShowModal(false);
+    const close = (): void => mappingTestableState.closeCreateModal();
     const create = (): void => {
       if (selectedClass && suiteName && testName) {
         flowResult(
           creatorState.createAndAddTestSuite(
             selectedClass,
-            suiteType,
             suiteName,
             testName,
           ),
         ).catch(editorStore.applicationStore.alertUnhandledError);
       }
     };
+
     return (
       <Dialog
-        open={creatorState.showModal}
+        open={true}
         onClose={close}
         TransitionProps={{
           onEnter: handleEnter,
@@ -294,83 +261,54 @@ const CreateTestModal = observer(
   (props: { mappingSuiteState: MappingTestSuiteState }) => {
     const { mappingSuiteState } = props;
     const mapping = mappingSuiteState.mappingTestableState.mapping;
-    const editorStore =
-      mappingSuiteState.mappingTestableState.mappingEditorState.editorStore;
+    const suite = mappingSuiteState.suite;
+    const testData = suite.tests.filter(filterByType(MappingTest))[0]
+      ?.storeTestData[0];
+    const editorStore = mappingSuiteState.editorStore;
+    // test name
+    const [id, setId] = useState<string | undefined>(undefined);
+    const isValid = id && !id.includes(' ');
+    const errorMessage = validateTestableId(
+      id,
+      suite.tests.map((t) => t.id),
+    );
+    const mappedClassSelectorRef = useRef<SelectComponent>(null);
+
+    // const firstTest = mapp
     // Class mapping selector
     const compatibleClasses = getMappingCompatibleClasses(
       mapping,
       editorStore.graphManagerState.usableClasses,
     );
-    const suite = mappingSuiteState.suite;
-    const getDefaultTestName = (
-      useClass: boolean,
-      _class: Class | undefined,
-    ): string => {
-      if (useClass && _class) {
-        return `${_class.name}_test`;
-      }
-      return 'test';
-    };
-    // class
+    const mappedClassOptions = uniq(compatibleClasses)
+      .map((e) => ({
+        label: e.name,
+        value: e,
+      }))
+      .sort(compareLabelFn);
+
+    // class if required
     const [selectedClass, setSelectedClass] = useState<Class | undefined>(
-      mappingSuiteState.getDefaultClass(),
+      compatibleClasses[0],
     );
+    const changeClassOption = (val: ClassSelectOption | null): void => {
+      setSelectedClass(val?.value);
+    };
     const selectedClassOption = selectedClass
       ? {
           value: selectedClass,
           label: selectedClass.name,
         }
       : null;
-
-    // id
-    const [id, setId] = useState(
-      generateEnumerableNameFromToken(
-        suite.tests.map((e) => e.id),
-        getDefaultTestName(
-          mappingSuiteState instanceof MappingDataTestSuiteState,
-          selectedClass,
-        ),
-      ),
-    );
-
-    const changeClassOption = (val: ClassSelectOption | null): void => {
-      setSelectedClass(val?.value);
-      setId(
-        generateEnumerableNameFromToken(
-          suite.tests.map((e) => e.id),
-          getDefaultTestName(
-            mappingSuiteState instanceof MappingDataTestSuiteState,
-            selectedClass,
-          ),
-        ),
-      );
-    };
-
-    const isValid = id && !id.includes(' ');
-
-    const mappedClassSelectorRef = useRef<SelectComponent>(null);
-    const mappedClassOptions = uniq(compatibleClasses)
-      .map((e) => ({
-        label: e.name,
-        value: e,
-      }))
-      .sort(compareLabelFn);
-
     // model
     const close = (): void => mappingSuiteState.setShowModal(false);
     const create = (): void => {
-      mappingSuiteState.addNewTest(id, selectedClass);
-      close();
+      if (id) {
+        mappingSuiteState.addNewTest(id, selectedClass);
+        close();
+      }
     };
 
-    const modalTitle =
-      mappingSuiteState instanceof MappingDataTestSuiteState
-        ? TARGET_CLASS_FORM_TITLE
-        : SOURCE_CLASS_FORM_TITLE;
-    const modalPrompt =
-      mappingSuiteState instanceof MappingDataTestSuiteState
-        ? TARGET_CLASS_FORM_PROMPT
-        : SOURCE_CLASS_FORM_PROMPT;
     return (
       <Dialog
         open={mappingSuiteState.showCreateModal}
@@ -378,39 +316,37 @@ const CreateTestModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="search-modal">
-          <ModalTitle title="Create Test" />
+        <Modal darkMode={true}>
+          <ModalHeader>
+            <ModalTitle title="Create Mapping Test" />
+          </ModalHeader>
           <ModalBody>
             <PanelFormTextField
               name="Name"
               prompt=""
               value={id}
               update={(value: string | undefined): void => setId(value ?? '')}
-              errorMessage={
-                id.includes(' ')
-                  ? `Suite name can't contain spaces`
-                  : !id
-                  ? `Suite name is required`
-                  : undefined
-              }
+              errorMessage={errorMessage}
             />
-            <div className="panel__content__form__section">
-              <div className="panel__content__form__section__header__label">
-                {modalTitle}
-              </div>
-              <div className="panel__content__form__section__header__prompt">
-                {modalPrompt}
+            {!testData && (
+              <div className="panel__content__form__section">
+                <div className="panel__content__form__section__header__label">
+                  Class Mapping
+                </div>
+                <div className="panel__content__form__section__header__prompt">
+                  Mapped Class for which you would like to build test suite for
+                </div>
+                <CustomSelectorInput
+                  ref={mappedClassSelectorRef}
+                  options={mappedClassOptions}
+                  onChange={changeClassOption}
+                  value={selectedClassOption}
+                  darkMode={true}
+                  placeholder="Choose a class..."
+                  isClearable={true}
+                />
               </div>
-              <CustomSelectorInput
-                ref={mappedClassSelectorRef}
-                options={mappedClassOptions}
-                onChange={changeClassOption}
-                value={selectedClassOption}
-                darkMode={true}
-                placeholder="Choose a class..."
-                isClearable={true}
-              />
-            </div>
+            )}
           </ModalBody>
           <ModalFooter>
             <ModalFooterButton
@@ -432,8 +368,9 @@ interface StoreSelectOption {
 }
 
 const CreateStoreTestDataModal = observer(
-  (props: { mappingTestableDataState: MappingTestableDataState }) => {
-    const { mappingTestableDataState } = props;
+  (props: { mappingTestState: MappingTestState }) => {
+    const { mappingTestState } = props;
+    const mappingTestableDataState = mappingTestState.dataState;
     const editorStore = mappingTestableDataState.editorStore;
     const mapping = mappingTestableDataState.mappingTestableState.mapping;
     const isReadOnly =
@@ -565,6 +502,7 @@ const CreateStoreTestDataModal = observer(
                 ref={mappedStoreRef}
                 options={selectedStoreOptions}
                 onChange={changeStoreOption}
+                formatOptionLabel={getPackageableElementOptionFormatter({})}
                 value={selectedStoreOption}
                 darkMode={true}
                 placeholder="Choose a store..."
@@ -622,15 +560,15 @@ const CreateStoreTestDataModal = observer(
   },
 );
 
-const MappingTestableQueryEditor = observer(
+const MappingTestSuiteQueryEditor = observer(
   (props: {
-    testableQueryState: MappingTestableQueryState;
+    testSuiteState: MappingTestSuiteState;
     mappingTestableState: MappingTestableState;
     isReadOnly: boolean;
   }) => {
-    const { testableQueryState, mappingTestableState, isReadOnly } = props;
+    const { testSuiteState, mappingTestableState, isReadOnly } = props;
+    const testableQueryState = testSuiteState.queryState;
     const mapping = mappingTestableState.mapping;
-    const queryState = testableQueryState;
     const editorStore = mappingTestableState.mappingEditorState.editorStore;
     const applicationStore = useApplicationStore();
 
@@ -664,7 +602,9 @@ const MappingTestableQueryEditor = observer(
                     async (): Promise<void> => {
                       try {
                         const rawLambda = queryBuilderState.buildQuery();
-                        await flowResult(queryState.updateLamba(rawLambda));
+                        await flowResult(
+                          testableQueryState.updateLamba(rawLambda),
+                        );
                         applicationStore.notificationService.notifySuccess(
                           `Mapping testable query is updated`,
                         );
@@ -692,13 +632,13 @@ const MappingTestableQueryEditor = observer(
                 },
               },
             ],
-            disableCompile: isStubbed_RawLambda(queryState.query),
+            disableCompile: isStubbed_RawLambda(testableQueryState.query),
           }),
         );
       });
 
     const clearQuery = applicationStore.guardUnhandledError(() =>
-      flowResult(queryState.updateLamba(stub_RawLambda())),
+      flowResult(testableQueryState.updateLamba(stub_RawLambda())),
     );
 
     return (
@@ -748,11 +688,11 @@ const MappingTestableQueryEditor = observer(
             </div>
           </div>
         </div>
-        {!isStubbed_RawLambda(queryState.query) && (
+        {!isStubbed_RawLambda(testableQueryState.query) && (
           <PanelContent>
             <div className="mapping-test-editor__query-panel__query">
               <CodeEditor
-                inputValue={queryState.lambdaString}
+                inputValue={testableQueryState.lambdaString}
                 isReadOnly={true}
                 language={CODE_EDITOR_LANGUAGE.PURE}
                 hideMinimap={true}
@@ -765,140 +705,87 @@ const MappingTestableQueryEditor = observer(
   },
 );
 
-const MappingTestAssertionsEditor = observer(
-  (props: { mappingDataTestState: MappingTestState }) => {
-    const { mappingDataTestState } = props;
-    const editorStore = mappingDataTestState.editorStore;
-    const mappingEditorState =
-      mappingDataTestState.mappingTestableState.mappingEditorState;
-    const isReadOnly = mappingEditorState.isReadOnly;
-    const addAssertion = (): void => mappingDataTestState.addAssertion();
-    const runTest = (): void => {
-      flowResult(mappingDataTestState.runTest()).catch(
-        editorStore.applicationStore.alertUnhandledError,
-      );
-    };
-    const renameAssertion = (val: string): void =>
-      testAssertion_setId(
-        guaranteeNonNullable(mappingDataTestState.assertionToRename),
-        val,
-      );
-    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 />
-                    </div>
-                    <div>{mappingDataTestState.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>
-                    <div>{mappingDataTestState.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>
-                    <div>{mappingDataTestState.assertionFailed}</div>
-                  </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>
-                {mappingDataTestState.assertionEditorStates.map(
-                  (assertionState) => (
-                    <TestAssertionItem
-                      key={assertionState.assertion.id}
-                      testableTestState={mappingDataTestState}
-                      testAssertionEditorState={assertionState}
-                      isReadOnly={isReadOnly}
-                    />
-                  ),
-                )}
-              </div>
-              {mappingDataTestState.assertionToRename && (
-                <RenameModal
-                  val={mappingDataTestState.assertionToRename.id}
-                  isReadOnly={isReadOnly}
-                  showModal={true}
-                  closeModal={(): void =>
-                    mappingDataTestState.setAssertionToRename(undefined)
-                  }
-                  setValue={renameAssertion}
-                  errorMessageFunc={(_val: string | undefined) =>
-                    validateTestableId(_val, undefined)
-                  }
-                />
-              )}
-            </ResizablePanel>
-            <ResizablePanelSplitter>
-              <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
-            </ResizablePanelSplitter>
-            <ResizablePanel>
-              {mappingDataTestState.selectedAsertionState && (
-                <TestAssertionEditor
-                  testAssertionState={
-                    mappingDataTestState.selectedAsertionState
-                  }
-                />
-              )}
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </div>
-      </div>
-    );
-  },
-);
-
 const StoreTestDataEditor = observer(
   (props: {
-    mappingTestableDataState: MappingTestableDataState;
+    mappingTestState: MappingTestState;
     storeTestDataState: StoreTestDataState;
   }) => {
-    const { mappingTestableDataState, storeTestDataState } = props;
+    const { mappingTestState, storeTestDataState } = props;
     const isReadOnly =
-      mappingTestableDataState.mappingTestableState.mappingEditorState
-        .isReadOnly;
+      mappingTestState.mappingTestableState.mappingEditorState.isReadOnly;
+    const dataElements =
+      storeTestDataState.editorStore.graphManagerState.graph.dataElements;
+    const data = storeTestDataState.storeTestData.data;
+    const isUsingReference = data instanceof DataElementReference;
+    const open = (): void => storeTestDataState.setDataElementModal(true);
+    const close = (): void => storeTestDataState.setDataElementModal(false);
+    const changeToUseMyOwn = (): void => {
+      if (isUsingReference) {
+        const newBare = returnUndefOnError(() =>
+          data.accept_EmbeddedDataVisitor(
+            new EmbeddedDataCreatorFromEmbeddedData(),
+          ),
+        );
+        if (newBare) {
+          storeTestDataState.changeEmbeddedData(newBare);
+        }
+      }
+    };
+
+    const handler = (val: DataElement): void => {
+      const value = new DataElementReference();
+      value.dataElement = PackageableElementExplicitReference.create(val);
+      storeTestDataState.changeEmbeddedData(value);
+    };
     return (
       <div className="service-test-data-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">
-              test data input
+              input data
             </div>
           </div>
+          <div className="panel__header__actions">
+            {isUsingReference ? (
+              <button
+                className="panel__header__action service-execution-editor__test-data__generate-btn"
+                onClick={changeToUseMyOwn}
+                disabled={!isUsingReference}
+                title="Use own data"
+                tabIndex={-1}
+              >
+                <div className="service-execution-editor__test-data__generate-btn__label">
+                  <div className="service-execution-editor__test-data__generate-btn__label__title">
+                    Own Data
+                  </div>
+                </div>
+              </button>
+            ) : (
+              <button
+                className="panel__header__action service-execution-editor__test-data__generate-btn"
+                onClick={open}
+                title="Use Shared Data via Defined Data Element"
+                disabled={!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>
+
+        {storeTestDataState.dataElementModal && (
+          <SharedDataElementModal
+            isReadOnly={false}
+            editorStore={storeTestDataState.editorStore}
+            close={close}
+            handler={handler}
+          />
+        )}
         <EmbeddedDataEditor
           isReadOnly={isReadOnly}
           embeddedDataEditorState={storeTestDataState.embeddedEditorState}
@@ -908,69 +795,36 @@ const StoreTestDataEditor = observer(
   },
 );
 
-const MappingTestableStoreDataEditor = observer(
-  (props: { mappingTestableDataState: MappingTestableDataState }) => {
-    const { mappingTestableDataState } = props;
+const MappingTestEditor = observer(
+  (props: { mappingTestState: MappingTestState }) => {
+    const { mappingTestState } = props;
+    const mappingTest = mappingTestState.test;
+    const mappingTestableDataState = mappingTestState.dataState;
     const addStoreTestData = (): void => {
       mappingTestableDataState.setShowModal(true);
     };
-    return (
-      <div className="service-test-data-editor panel">
-        {mappingTestableDataState.dataHolder.storeTestData.length ? (
-          <>
-            <PanelLoadingIndicator
-              isLoading={Boolean(
-                mappingTestableDataState.selectedDataState
-                  ?.generatingTestDataSate.isInProgress,
-              )}
-            />
-            {mappingTestableDataState.selectedDataState && (
-              <StoreTestDataEditor
-                storeTestDataState={mappingTestableDataState.selectedDataState}
-                mappingTestableDataState={mappingTestableDataState}
-              />
-            )}
-          </>
-        ) : (
-          <BlankPanelPlaceholder
-            text="Add Store Test Data"
-            onClick={addStoreTestData}
-            clickActionType="add"
-            tooltipText="Click to add store test data"
-          />
-        )}
-        {mappingTestableDataState.showNewModal && (
-          <CreateStoreTestDataModal
-            mappingTestableDataState={mappingTestableDataState}
-          />
-        )}
-      </div>
-    );
-  },
-);
 
-const MappingTestEditor = observer(
-  (props: { mappingTestState: MappingTestState }) => {
-    const { mappingTestState } = props;
-    const selectedTab = mappingTestState.selectedTab;
-    const isReadOnly =
-      mappingTestState.mappingTestableState.mappingEditorState.isReadOnly;
-    const renderMappingSetupTestEditor = (): React.ReactNode => {
-      const test = mappingTestState.test;
-      return (
-        <div className="panel mapping-testable-editorr">
+    return (
+      <div className="service-test-editor panel">
+        <div className="panel mapping-testable-editor">
           <div className="mapping-testable-editor__content">
             <ResizablePanelGroup orientation="horizontal">
-              <ResizablePanel size={150}>
+              <ResizablePanel size={120}>
                 <div className="service-test-data-editor panel">
                   <div className="service-test-editor__setup__configuration">
-                    <PanelFormTextField
-                      name="Test Documentation"
-                      value={test.doc}
-                      update={(value: string | undefined): void =>
-                        atomicTest_setDoc(test, value)
-                      }
-                    />
+                    <div className="panel__content__form__section">
+                      <div className="panel__content__form__section__header__label">
+                        Test Documentation
+                      </div>
+                      <textarea
+                        className="panel__content__form__section__textarea mapping-testable-editor__doc__textarea"
+                        spellCheck={false}
+                        value={mappingTest.doc}
+                        onChange={(event) => {
+                          atomicTest_setDoc(mappingTest, event.target.value);
+                        }}
+                      />
+                    </div>
                   </div>
                 </div>
               </ResizablePanel>
@@ -978,54 +832,53 @@ const MappingTestEditor = observer(
                 <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
               </ResizablePanelSplitter>
               <ResizablePanel>
-                {mappingTestState instanceof MappingQueryTestState && (
-                  <MappingTestableQueryEditor
-                    testableQueryState={mappingTestState.queryState}
-                    mappingTestableState={mappingTestState.mappingTestableState}
-                    isReadOnly={isReadOnly}
-                  />
-                )}
-                {mappingTestState instanceof MappingDataTestState && (
-                  <MappingTestableStoreDataEditor
-                    mappingTestableDataState={mappingTestState.dataState}
-                  />
-                )}
+                <ResizablePanelGroup orientation="vertical">
+                  <ResizablePanel>
+                    <div className="service-test-data-editor panel">
+                      {mappingTestableDataState.dataHolder.storeTestData
+                        .length ? (
+                        <>
+                          {mappingTestableDataState.selectedDataState && (
+                            <StoreTestDataEditor
+                              storeTestDataState={
+                                mappingTestableDataState.selectedDataState
+                              }
+                              mappingTestState={mappingTestState}
+                            />
+                          )}
+                        </>
+                      ) : (
+                        <BlankPanelPlaceholder
+                          text="Add Store Test Data"
+                          onClick={addStoreTestData}
+                          clickActionType="add"
+                          tooltipText="Click to add store test data"
+                        />
+                      )}
+                      {mappingTestableDataState.showNewModal && (
+                        <CreateStoreTestDataModal
+                          mappingTestState={mappingTestState}
+                        />
+                      )}
+                    </div>
+                  </ResizablePanel>
+                  <ResizablePanelSplitter>
+                    <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+                  </ResizablePanelSplitter>
+                  <ResizablePanel>
+                    {mappingTestState.selectedAsertionState && (
+                      <TestAssertionEditor
+                        testAssertionState={
+                          mappingTestState.selectedAsertionState
+                        }
+                      />
+                    )}
+                  </ResizablePanel>
+                </ResizablePanelGroup>
               </ResizablePanel>
             </ResizablePanelGroup>
           </div>
         </div>
-      );
-    };
-    return (
-      <div className="service-test-editor panel">
-        <div className="panel__header">
-          <div className="panel__header service-test-editor__header--with-tabs">
-            <div className="uml-element-editor__tabs">
-              {Object.values(TESTABLE_TEST_TAB).map((tab) => (
-                <div
-                  key={tab}
-                  onClick={(): void => mappingTestState.setSelectedTab(tab)}
-                  className={clsx('service-test-editor__tab', {
-                    'service-test-editor__tab--active':
-                      tab === mappingTestState.selectedTab,
-                  })}
-                >
-                  {prettyCONSTName(tab)}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-        <div className="service-test-editor">
-          {selectedTab === TESTABLE_TEST_TAB.SETUP &&
-            renderMappingSetupTestEditor()}
-
-          {selectedTab === TESTABLE_TEST_TAB.ASSERTION && (
-            <MappingTestAssertionsEditor
-              mappingDataTestState={mappingTestState}
-            />
-          )}
-        </div>
       </div>
     );
   },
@@ -1096,6 +949,11 @@ const MappingTestItem = observer(
     const rename = (): void => {
       suiteState.mappingTestableState.setRenameComponent(mappingTest);
     };
+    const runTest = (): void => {
+      flowResult(mappingTestState.runTest()).catch(
+        mappingTestState.editorStore.applicationStore.alertUnhandledError,
+      );
+    };
     return (
       <ContextMenu
         className={clsx(
@@ -1130,6 +988,17 @@ const MappingTestItem = observer(
           <div className="testable-test-explorer__item__label__text">
             {mappingTest.id}
           </div>
+          <div className="mapping-test-explorer__item__actions">
+            <button
+              className="mapping-test-explorer__item__action mapping-test-explorer__run-test-btn"
+              onClick={runTest}
+              disabled={mappingTestState.runningTestAction.isInProgress}
+              tabIndex={-1}
+              title={`Run ${mappingTestState.test.id}`}
+            >
+              {<PlayIcon />}
+            </button>
+          </div>
         </button>
       </ContextMenu>
     );
@@ -1154,25 +1023,6 @@ const MappingTestSuiteEditor = observer(
         editorStore.applicationStore.alertUnhandledError,
       );
     };
-    const renderMappingTestSuiteDriver = (): React.ReactNode => {
-      if (mappingTestSuiteState instanceof MappingDataTestSuiteState) {
-        return (
-          <MappingTestableStoreDataEditor
-            mappingTestableDataState={mappingTestSuiteState.dataState}
-          />
-        );
-      } else if (mappingTestSuiteState instanceof MappingQueryTestSuiteState) {
-        return (
-          <MappingTestableQueryEditor
-            key={mappingTestSuiteState.queryState.uuid}
-            testableQueryState={mappingTestSuiteState.queryState}
-            mappingTestableState={mappingTestSuiteState.mappingTestableState}
-            isReadOnly={isReadOnly}
-          />
-        );
-      }
-      return null;
-    };
     const renderMappingTestEditor = (): React.ReactNode => {
       if (selectedTestState) {
         return <MappingTestEditor mappingTestState={selectedTestState} />;
@@ -1191,14 +1041,19 @@ const MappingTestSuiteEditor = observer(
     return (
       <ResizablePanelGroup orientation="horizontal">
         <ResizablePanel size={300} minSize={28}>
-          {renderMappingTestSuiteDriver()}
+          <MappingTestSuiteQueryEditor
+            key={mappingTestSuiteState.queryState.uuid}
+            testSuiteState={mappingTestSuiteState}
+            mappingTestableState={mappingTestSuiteState.mappingTestableState}
+            isReadOnly={isReadOnly}
+          />
         </ResizablePanel>
         <ResizablePanelSplitter>
           <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
         </ResizablePanelSplitter>
         <ResizablePanel minSize={56}>
           <ResizablePanelGroup orientation="vertical">
-            <ResizablePanel size={300} minSize={28}>
+            <ResizablePanel size={200} minSize={28}>
               <div className="binding-editor__header">
                 <div className="binding-editor__header__title">
                   <div className="panel__header__title__content">Tests</div>
@@ -1224,7 +1079,7 @@ const MappingTestSuiteEditor = observer(
                     className="panel__header__action"
                     tabIndex={-1}
                     onClick={addTest}
-                    title="Add Mapping Suite"
+                    title="Add Mapping Test"
                   >
                     <PlusIcon />
                   </button>
@@ -1266,18 +1121,24 @@ const MappingTestSuiteItem = observer(
       useState(false);
     const isReadOnly = mappingTestableState.mappingEditorState.isReadOnly;
     const openSuite = (): void => mappingTestableState.changeSuite(suite);
+    const results = mappingTestableState.testableResults?.filter(
+      (t) => t.parentSuite?.id === suite.id,
+    );
+    const isRunning =
+      mappingTestableState.isRunningTestableSuitesState.isInProgress ||
+      (mappingTestableState.isRunningFailingSuitesState.isInProgress &&
+        mappingTestableState.failingSuites.includes(suite)) ||
+      mappingTestableState.runningSuite === suite;
     const isActive = mappingTestableState.selectedTestSuite?.suite === suite;
-    // const _testableResult = getTestableResultFromTestResult(
-    //   serviceTestState.testResultState.result,
-    // );
-    // const testableResult = isRunning
-    //   ? TESTABLE_RESULT.IN_PROGRESS
-    //   : _testableResult;
-    // const resultIcon = getTestableResultIcon(testableResult);
+    const _testableResult = getTestableResultFromTestResults(results);
+    const testableResult = isRunning
+      ? TESTABLE_RESULT.IN_PROGRESS
+      : _testableResult;
+    const resultIcon = getTestableResultIcon(testableResult);
     const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
     const add = (): void => {
-      mappingTestableState.createSuiteState.setShowModal(true);
+      mappingTestableState.openCreateModal();
     };
     const _delete = (): void => {
       mappingTestableState.deleteTestSuite(suite);
@@ -1285,6 +1146,11 @@ const MappingTestSuiteItem = observer(
     const rename = (): void => {
       mappingTestableState.setRenameComponent(suite);
     };
+    const runSuite = (): void => {
+      flowResult(mappingTestableState.runSuite(suite)).catch(
+        mappingTestableState.editorStore.applicationStore.alertUnhandledError,
+      );
+    };
     return (
       <ContextMenu
         className={clsx(
@@ -1314,11 +1180,22 @@ const MappingTestSuiteItem = observer(
           tabIndex={-1}
         >
           <div className="testable-test-explorer__item__label__icon">
-            {/* {resultIcon} */}
+            {resultIcon}
           </div>
           <div className="testable-test-explorer__item__label__text">
             {suite.id}
           </div>
+          <div className="mapping-test-explorer__item__actions">
+            <button
+              className="mapping-test-explorer__item__action mapping-test-explorer__run-test-btn"
+              onClick={runSuite}
+              disabled={isRunning}
+              tabIndex={-1}
+              title={`Run ${suite.id}`}
+            >
+              {<PlayIcon />}
+            </button>
+          </div>
         </button>
       </ContextMenu>
     );
@@ -1335,10 +1212,9 @@ export const MappingTestableEditor = observer(
     const isReadOnly = mappingEditorState.isReadOnly;
     const suites = mappingTestableState.mapping.tests;
     const selectedSuiteState = mappingTestableState.selectedTestSuite;
-    const addSuite = (): void =>
-      mappingTestableState.createSuiteState.setShowModal(true);
+    const addSuite = (): void => mappingTestableState.openCreateModal();
     const runSuites = (): void => {
-      mappingTestableState.runAllSuites();
+      mappingTestableState.runTestable();
     };
     const runFailingTests = (): void => {
       mappingTestableState.runAllFailingSuites();
@@ -1363,6 +1239,10 @@ export const MappingTestableEditor = observer(
     const renameTestingComponent = (val: string): void => {
       mappingTestableState.renameTestableComponent(val);
     };
+
+    useApplicationNavigationContext(
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_TEST_EDITOR,
+    );
     return (
       <div className="service-test-suite-editor panel">
         <div className="service-test-suite-editor">
@@ -1439,8 +1319,10 @@ export const MappingTestableEditor = observer(
               </div>
             </ResizablePanel>
           </ResizablePanelGroup>
-          {mappingTestableState.createSuiteState.showModal && (
-            <CreateTestSuiteModal mappingTestableState={mappingTestableState} />
+          {mappingTestableState.createSuiteState && (
+            <CreateTestSuiteModal
+              creatorState={mappingTestableState.createSuiteState}
+            />
           )}
           {mappingTestableState.testableComponentToRename && (
             <RenameModal