@finos/legend-application-studio 28.21.22 → 28.21.24

package/src/components/editor/editor-group/ingest-editor/IngestDefinitionEditor.tsx

@@ -30,8 +30,13 @@ import {
   EyeIcon,
   ModalHeaderActions,
   CustomSelectorInput,
+  FlaskIcon,
+  clsx,
 } from '@finos/legend-art';
-import { IngestDefinitionEditorState } from '../../../../stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
+import {
+  INGEST_DEFINITION_TAB,
+  IngestDefinitionEditorState,
+} from '../../../../stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
 import React, { useEffect, useState } from 'react';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
@@ -44,6 +49,7 @@ import {
   LineageViewerContent,
 } from '@finos/legend-query-builder';
 import type { MatViewDataSet } from '@finos/legend-graph';
+import { IngestTestableEditor } from './testable/IngestTestableEditor.js';
 
 export const IngestLineageModal = observer(
   (props: { ingestDefinitionEditorState: IngestDefinitionEditorState }) => {
@@ -171,6 +177,19 @@ export const IngestDefinitionEditor = observer(() => {
     );
   const ingestDef = ingestDefinitionEditorState.ingest;
   const isValidForLineage = ingestDefinitionEditorState.validForLineageViewer;
+  const selectedTab = ingestDefinitionEditorState.selectedTab;
+
+  const sidebarTabs = [
+    {
+      label: INGEST_DEFINITION_TAB.DEFINITION,
+      icon: <EyeIcon />,
+    },
+    {
+      label: INGEST_DEFINITION_TAB.TESTING,
+      icon: <FlaskIcon />,
+    },
+  ];
+
   useEffect(() => {
     ingestDefinitionEditorState.generateElementGrammar();
   }, [ingestDefinitionEditorState]);
@@ -195,44 +214,81 @@ export const IngestDefinitionEditor = observer(() => {
   };
 
   return (
-    <div className="data-product-editor">
-      <PanelHeader
-        title="Ingest"
-        titleContent={ingestDef.name}
-        darkMode={true}
-        isReadOnly={true}
-      ></PanelHeader>
-      <PanelContent>
-        <PanelHeader title="deployment" darkMode={true}>
-          <PanelHeaderActions>
-            <div className="panel__header__actions">
-              <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+    <div className="ingest-definition-editor">
+      <div className="panel">
+        <PanelHeader
+          title="Ingest"
+          titleContent={ingestDef.name}
+          darkMode={true}
+          isReadOnly={true}
+        />
+        <div className="panel ingest-definition-editor__content-panel">
+          <div className="ingest-definition-editor__activity-bar">
+            <div className="ingest-definition-editor__activity-bar__items">
+              {sidebarTabs.map((activity) => (
                 <button
-                  className="btn__dropdown-combo__label"
-                  onClick={viewLineage}
+                  key={activity.label}
+                  className={clsx(
+                    'ingest-definition-editor__activity-bar__item',
+                    {
+                      'ingest-definition-editor__activity-bar__item--active':
+                        selectedTab === activity.label,
+                    },
+                  )}
+                  onClick={() =>
+                    ingestDefinitionEditorState.setSelectedTab(activity.label)
+                  }
                   tabIndex={-1}
-                  disabled={!isValidForLineage}
+                  title={activity.label}
                 >
-                  <EyeIcon className="btn__dropdown-combo__label__icon" />
-                  <div className="btn__dropdown-combo__label__title">
-                    Lineage
-                  </div>
+                  {activity.icon}
+                  {activity.label}
                 </button>
-              </div>
+              ))}
             </div>
-          </PanelHeaderActions>
-        </PanelHeader>
-        <PanelContent>
-          <CodeEditor
-            inputValue={ingestDefinitionEditorState.textContent}
-            isReadOnly={true}
-            language={CODE_EDITOR_LANGUAGE.PURE}
-          />
-        </PanelContent>
-        <IngestLineageModal
-          ingestDefinitionEditorState={ingestDefinitionEditorState}
-        />
-      </PanelContent>
+          </div>
+          <div className="panel ingest-definition-editor__main-panel">
+            {selectedTab === INGEST_DEFINITION_TAB.DEFINITION && (
+              <PanelContent>
+                <PanelHeader title="deployment" darkMode={true}>
+                  <PanelHeaderActions>
+                    <div className="panel__header__actions">
+                      <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+                        <button
+                          className="btn__dropdown-combo__label"
+                          onClick={viewLineage}
+                          tabIndex={-1}
+                          disabled={!isValidForLineage}
+                        >
+                          <EyeIcon className="btn__dropdown-combo__label__icon" />
+                          <div className="btn__dropdown-combo__label__title">
+                            Lineage
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                  </PanelHeaderActions>
+                </PanelHeader>
+                <PanelContent>
+                  <CodeEditor
+                    inputValue={ingestDefinitionEditorState.textContent}
+                    isReadOnly={true}
+                    language={CODE_EDITOR_LANGUAGE.PURE}
+                  />
+                </PanelContent>
+                <IngestLineageModal
+                  ingestDefinitionEditorState={ingestDefinitionEditorState}
+                />
+              </PanelContent>
+            )}
+            {selectedTab === INGEST_DEFINITION_TAB.TESTING && (
+              <IngestTestableEditor
+                testableState={ingestDefinitionEditorState.ingestTestableState}
+              />
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   );
 });

package/src/components/editor/editor-group/ingest-editor/testable/IngestTestableEditor.tsx

@@ -0,0 +1,418 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { flowResult } from 'mobx';
+import {
+  BlankPanelPlaceholder,
+  clsx,
+  ContextMenu,
+  CustomSelectorInput,
+  Dialog,
+  MenuContent,
+  MenuContentItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  ModalTitle,
+  Panel,
+  PanelFormTextField,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  PlusIcon,
+} from '@finos/legend-art';
+import type {
+  IngestTestableState,
+  IngestTestSuiteState,
+} from '../../../../../stores/editor/editor-state/element-editor-state/ingest/IngestTestableState.js';
+import { forwardRef, useRef, useState } from 'react';
+import { useEditorStore } from '../../../EditorStoreProvider.js';
+import { validateTestableId } from '../../../../../stores/editor/utils/TestableUtils.js';
+import { RenameModal } from '../../testable/TestableSharedComponents.js';
+import type { IngestTestSuite } from '@finos/legend-graph';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { testSuite_setId } from '../../../../../stores/graph-modifier/Testable_GraphModifierHelper.js';
+import { LakehouseTestSuiteEditor } from '../../testable/LakehouseTestableEditor.js';
+
+// ─── Create Suite Modal ───────────────────────────────────────────────────────
+
+interface ItemOption {
+  value: string;
+  label: string;
+}
+
+const CreateSuiteModal = observer(
+  (props: { testableState: IngestTestableState; onClose: () => void }) => {
+    const { testableState, onClose } = props;
+    const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const [testName, setTestName] = useState<string | undefined>(undefined);
+    const [datasetName, setDatasetName] = useState<string | undefined>(
+      testableState.datasetNames[0],
+    );
+
+    const existingIds = testableState.ingest.tests.map((suite) => suite.id);
+    const generateSuiteName = (): string => {
+      let idx = 1;
+      while (existingIds.includes(`suite_${idx}`)) {
+        idx++;
+      }
+      return `suite_${idx}`;
+    };
+
+    const testError = validateTestableId(testName, undefined);
+    const datasetOptions: ItemOption[] = testableState.datasetNames.map(
+      (name) => ({
+        value: name,
+        label: name,
+      }),
+    );
+
+    const selectedDatasetOption =
+      datasetOptions.find((option) => option.value === datasetName) ?? null;
+
+    const isValid = testName && !testError && datasetName;
+
+    const create = (): void => {
+      if (!testName || !datasetName) {
+        return;
+      }
+      flowResult(
+        testableState.createSuite(generateSuiteName(), testName, datasetName),
+      )
+        .then((error) => {
+          if (error) {
+            applicationStore.notificationService.notifyError(error);
+          } else {
+            onClose();
+          }
+        })
+        .catch(applicationStore.alertUnhandledError);
+    };
+
+    return (
+      <Dialog
+        open={true}
+        onClose={onClose}
+        classes={{ container: 'search-modal__container' }}
+        slotProps={{
+          transition: { onEnter: () => inputRef.current?.focus() },
+          paper: { classes: { root: 'search-modal__inner-container' } },
+        }}
+      >
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
+          <ModalHeader>
+            <ModalTitle title="Create Test Suite" />
+          </ModalHeader>
+          <ModalBody>
+            <PanelFormTextField
+              ref={inputRef}
+              name="Test Name"
+              prompt="Name for the first test in this suite"
+              placeholder="e.g. test_1"
+              value={testName}
+              update={(value): void => setTestName(value ?? '')}
+              errorMessage={testError}
+            />
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                MatView Dataset
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                Select the MatView dataset tested by this first test
+              </div>
+              <CustomSelectorInput
+                options={datasetOptions}
+                onChange={(option: ItemOption | null): void =>
+                  setDatasetName(option?.value)
+                }
+                value={selectedDatasetOption}
+                placeholder="Select dataset..."
+                isClearable={false}
+                darkMode={true}
+                disabled={datasetOptions.length === 0}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              disabled={!isValid}
+              title={!isValid ? 'Fill in all required fields' : 'Create Suite'}
+              onClick={create}
+              text="Create"
+            />
+            <ModalFooterButton
+              onClick={onClose}
+              text="Close"
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+// ─── Create Test Modal ────────────────────────────────────────────────────────
+
+const CreateTestModal = observer(
+  (props: { suiteState: IngestTestSuiteState; onClose: () => void }) => {
+    const { suiteState, onClose } = props;
+    const editorStore = suiteState.editorStore;
+    const applicationStore = editorStore.applicationStore;
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const existingIds = suiteState.suite.tests.map((test) => test.id);
+    const [testName, setTestName] = useState<string | undefined>(undefined);
+    const [datasetName, setDatasetName] = useState<string | undefined>(
+      suiteState.testableState.datasetNames[0],
+    );
+    const testNameError = validateTestableId(testName, existingIds);
+
+    const datasetOptions: ItemOption[] =
+      suiteState.testableState.datasetNames.map((name) => ({
+        value: name,
+        label: name,
+      }));
+    const selectedDatasetOption =
+      datasetOptions.find((option) => option.value === datasetName) ?? null;
+
+    const isValid = testName && !testNameError && datasetName;
+
+    const create = (): void => {
+      if (!testName || !datasetName) {
+        return;
+      }
+      flowResult(suiteState.addNewTest(testName, datasetName))
+        .then((error) => {
+          if (error) {
+            applicationStore.notificationService.notifyError(error);
+          } else {
+            onClose();
+          }
+        })
+        .catch(applicationStore.alertUnhandledError);
+    };
+
+    return (
+      <Dialog
+        open={true}
+        onClose={onClose}
+        classes={{ container: 'search-modal__container' }}
+        slotProps={{
+          transition: { onEnter: () => inputRef.current?.focus() },
+          paper: { classes: { root: 'search-modal__inner-container' } },
+        }}
+      >
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
+          <ModalHeader>
+            <ModalTitle title={`Add Test to "${suiteState.suite.id}"`} />
+          </ModalHeader>
+          <ModalBody>
+            <PanelFormTextField
+              ref={inputRef}
+              name="Test Name"
+              prompt="Unique identifier for the test"
+              placeholder="e.g. test_1"
+              value={testName}
+              update={(value): void => setTestName(value ?? '')}
+              errorMessage={testNameError}
+            />
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                MatView Dataset
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                Select which MatView dataset this test will verify
+              </div>
+              <CustomSelectorInput
+                options={datasetOptions}
+                onChange={(option: ItemOption | null): void =>
+                  setDatasetName(option?.value)
+                }
+                value={selectedDatasetOption}
+                placeholder="Select dataset..."
+                isClearable={false}
+                darkMode={true}
+                disabled={datasetOptions.length === 0}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              disabled={!isValid}
+              title={!isValid ? 'Fill in all required fields' : 'Create Test'}
+              onClick={create}
+              text="Create"
+            />
+            <ModalFooterButton
+              onClick={onClose}
+              text="Close"
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+// ─── Suite Tab Context Menu ───────────────────────────────────────────────────
+
+const SuiteHeaderTabContextMenu = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      testSuite: IngestTestSuite;
+      testableState: IngestTestableState;
+    }
+  >(function SuiteHeaderTabContextMenu(props, ref) {
+    const { testSuite, testableState } = props;
+    const deleteSuite = (): void => {
+      const suiteState = testableState.suiteStates.find(
+        (state) => state.suite === testSuite,
+      );
+      if (suiteState) {
+        testableState.deleteSuite(suiteState);
+      }
+    };
+    const rename = (): void => testableState.setSuiteToRename(testSuite);
+
+    return (
+      <MenuContent ref={ref}>
+        <MenuContentItem onClick={rename}>Rename</MenuContentItem>
+        <MenuContentItem onClick={deleteSuite}>Delete</MenuContentItem>
+      </MenuContent>
+    );
+  }),
+);
+
+// ─── Main Testing Tab ─────────────────────────────────────────────────────────
+
+export const IngestTestableEditor = observer(
+  (props: { testableState: IngestTestableState }) => {
+    const { testableState } = props;
+    const selectedSuiteState = testableState.selectedSuiteState;
+    const isReadOnly = testableState.ingestDefinitionEditorState.isReadOnly;
+    const ingest = testableState.ingest;
+
+    const addSuite = (): void => {
+      testableState.setShowCreateSuiteModal(true);
+    };
+
+    const changeSuite = (suite: IngestTestSuite): void => {
+      testableState.changeSuite(suite);
+    };
+
+    const renameSuite = (value: string): void =>
+      testSuite_setId(guaranteeNonNullable(testableState.suiteToRename), value);
+
+    return (
+      <Panel className="service-test-suite-editor">
+        {testableState.showCreateSuiteModal && (
+          <CreateSuiteModal
+            testableState={testableState}
+            onClose={(): void => testableState.setShowCreateSuiteModal(false)}
+          />
+        )}
+
+        {testableState.showCreateTestModal && selectedSuiteState && (
+          <CreateTestModal
+            suiteState={selectedSuiteState}
+            onClose={(): void => testableState.setShowCreateTestModal(false)}
+          />
+        )}
+
+        <PanelHeader>
+          {ingest.tests.length ? (
+            <PanelHeader className="service-test-suite-editor__header service-test-suite-editor__header--with-tabs">
+              <div className="uml-element-editor__tabs">
+                {ingest.tests.map((suite) => (
+                  <div
+                    key={suite.id}
+                    onClick={(): void => changeSuite(suite)}
+                    className={clsx('service-test-suite-editor__tab', {
+                      'service-test-suite-editor__tab--active':
+                        selectedSuiteState?.suite === suite,
+                    })}
+                  >
+                    <ContextMenu
+                      className="mapping-editor__header__tab__content"
+                      content={
+                        <SuiteHeaderTabContextMenu
+                          testableState={testableState}
+                          testSuite={suite}
+                        />
+                      }
+                    >
+                      {suite.id}
+                    </ContextMenu>
+                  </div>
+                ))}
+              </div>
+            </PanelHeader>
+          ) : (
+            <div></div>
+          )}
+          <PanelHeaderActions>
+            <PanelHeaderActionItem onClick={addSuite} title="Add Test Suite">
+              <PlusIcon />
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
+        <Panel className="service-test-suite-editor">
+          {selectedSuiteState && (
+            <LakehouseTestSuiteEditor
+              suiteState={selectedSuiteState}
+              testableState={testableState}
+              isReadOnly={isReadOnly}
+            />
+          )}
+          {!ingest.tests.length && (
+            <BlankPanelPlaceholder
+              text="Add Test Suite"
+              onClick={addSuite}
+              clickActionType="add"
+              tooltipText="Click to add test suite"
+            />
+          )}
+          {testableState.suiteToRename && (
+            <RenameModal
+              val={testableState.suiteToRename.id}
+              isReadOnly={isReadOnly}
+              showModal={true}
+              closeModal={(): void => testableState.setSuiteToRename(undefined)}
+              setValue={renameSuite}
+            />
+          )}
+        </Panel>
+      </Panel>
+    );
+  },
+);