@finos/legend-application-studio 13.0.0

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestDataEditor.tsx

@@ -0,0 +1,428 @@
+/**
+ * Copyright (c) 2020-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 {
+  clsx,
+  ContextMenu,
+  CustomSelectorInput,
+  Dialog,
+  MaskIcon,
+  MenuContent,
+  MenuContentItem,
+  PanelLoadingIndicator,
+  PlusIcon,
+  PURE_ConnectionIcon,
+  RefreshIcon,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+} from '@finos/legend-art';
+import type {
+  IdentifiedConnection,
+  ConnectionTestData,
+  DataElement,
+} from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import { forwardRef, useState } from 'react';
+import type {
+  ConnectionTestDataState,
+  ServiceTestDataState,
+} from '../../../../../stores/editor-state/element-editor-state/service/testable/ServiceTestDataState.js';
+import type { EmbeddedDataTypeOption } from '../../../../../stores/editor-state/element-editor-state/data/DataEditorState.js';
+import { EmbeddedDataEditor } from '../../data-editor/EmbeddedDataEditor.js';
+import { EmbeddedDataType } from '../../../../../stores/editor-state/ExternalFormatState.js';
+import { flowResult } from 'mobx';
+import { buildElementOption } from '@finos/legend-application';
+import { prettyCONSTName } from '@finos/legend-shared';
+import type { DSLData_LegendStudioApplicationPlugin_Extension } from '../../../../../stores/DSLData_LegendStudioApplicationPlugin_Extension.js';
+
+export const ConnectionTestDataEditor = observer(
+  (props: { connectionTestDataState: ConnectionTestDataState }) => {
+    const { connectionTestDataState } = props;
+    const isReadOnly =
+      connectionTestDataState.testDataState.testSuiteState.testableState
+        .serviceEditorState.isReadOnly;
+    // test data
+    const anonymizeGeneratedData =
+      connectionTestDataState.anonymizeGeneratedData;
+    const toggleAnonymizeGeneratedData = (): void => {
+      connectionTestDataState.setAnonymizeGeneratedData(
+        !anonymizeGeneratedData,
+      );
+    };
+    const generateTestData = (): void => {
+      flowResult(connectionTestDataState.generateTestData()).catch(
+        connectionTestDataState.editorStore.applicationStore
+          .alertUnhandledError,
+      );
+    };
+    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">
+              embedded data
+            </div>
+          </div>
+          <div className="panel__header__actions">
+            <div
+              className={clsx('panel__content__form__section__toggler', {
+                'panel__content__form__section__toggler--disabled': isReadOnly,
+              })}
+              onClick={toggleAnonymizeGeneratedData}
+            >
+              <button
+                className={clsx(
+                  'btn--sm service-execution-editor__test-data__anonymize-btn',
+                  {
+                    'service-execution-editor__test-data__anonymize-btn--active':
+                      anonymizeGeneratedData,
+                  },
+                )}
+                disabled={isReadOnly}
+                tabIndex={-1}
+                title={`[${
+                  anonymizeGeneratedData ? 'on' : 'off'
+                }] Anonymize Test Data`}
+              >
+                <MaskIcon />
+              </button>
+            </div>
+            <button
+              className="panel__header__action service-execution-editor__test-data__generate-btn"
+              onClick={generateTestData}
+              title="Generate test data if possible"
+              disabled={
+                connectionTestDataState.generatingTestDataSate.isInProgress
+              }
+              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>
+            </button>
+          </div>
+        </div>
+        <EmbeddedDataEditor
+          isReadOnly={isReadOnly}
+          embeddedDataEditorState={connectionTestDataState.embeddedEditorState}
+        />
+      </div>
+    );
+  },
+);
+
+const ConnectionTestDataContextMenu = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      connectionTestData: ConnectionTestData;
+      deleteConnectionData: () => void;
+    }
+  >(function TestContainerContextMenu(props, ref) {
+    const { deleteConnectionData } = props;
+    const remove = (): void => deleteConnectionData();
+
+    return (
+      <MenuContent ref={ref}>
+        <MenuContentItem onClick={remove}>Delete</MenuContentItem>
+      </MenuContent>
+    );
+  }),
+);
+
+const ConnectionTestDataItem = observer(
+  (props: {
+    serviceTestDataState: ServiceTestDataState;
+    connectionTestData: ConnectionTestData;
+  }) => {
+    const { connectionTestData, serviceTestDataState } = props;
+    const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
+      useState(false);
+    const isReadOnly =
+      serviceTestDataState.testSuiteState.testableState.serviceEditorState
+        .isReadOnly;
+    const openConnectionTestData = (): void =>
+      serviceTestDataState.openConnectionTestData(connectionTestData);
+    const isActive =
+      serviceTestDataState.selectedDataState?.connectionData ===
+      connectionTestData;
+    const deleteConnectionTestData = (): void =>
+      serviceTestDataState.deleteConnectionTestData(connectionTestData);
+    const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
+    const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
+    return (
+      <ContextMenu
+        className={clsx(
+          'testable-test-assertion-explorer__item',
+          {
+            'testable-test-assertion-explorer__item--selected-from-context-menu':
+              !isActive && isSelectedFromContextMenu,
+          },
+          { 'testable-test-assertion-explorer__item--active': isActive },
+        )}
+        disabled={isReadOnly}
+        content={
+          <ConnectionTestDataContextMenu
+            connectionTestData={connectionTestData}
+            deleteConnectionData={deleteConnectionTestData}
+          />
+        }
+        menuProps={{ elevation: 7 }}
+        onOpen={onContextMenuOpen}
+        onClose={onContextMenuClose}
+      >
+        <button
+          className={clsx('testable-test-assertion-explorer__item__label')}
+          onClick={openConnectionTestData}
+          tabIndex={-1}
+        >
+          <div className="testable-test-assertion-explorer__item__label__icon testable-test-assertion-explorer__test-result-indicator__container">
+            <PURE_ConnectionIcon />
+          </div>
+          <div className="testable-test-assertion-explorer__item__label__text">
+            {connectionTestData.connectionId}
+          </div>
+        </button>
+      </ContextMenu>
+    );
+  },
+);
+
+export const NewConnectionDataModal = observer(
+  (props: { testDataState: ServiceTestDataState }) => {
+    const { testDataState } = props;
+    const dataElementOptions = testDataState.editorStore.dataOptions;
+    const newConnectionState = testDataState.newConnectionDataState;
+    const dataElement = newConnectionState.dataElement;
+    const selectedOption = dataElement ? buildElementOption(dataElement) : null;
+    const onDataElementChange = (val: {
+      label: string;
+      value?: DataElement;
+    }): void => {
+      if (val.value !== selectedOption?.value && val.value) {
+        newConnectionState.setDataElement(val.value);
+      }
+    };
+    const isReadOnly =
+      testDataState.testSuiteState.testableState.serviceEditorState.isReadOnly;
+    const closeModal = (): void => newConnectionState.setModal(false);
+    const connectionOptions = testDataState.allIdentifiedConnections.map(
+      (e) => ({
+        label: e.id,
+        value: e,
+      }),
+    );
+    const selectedConnection = newConnectionState.connection
+      ? {
+          label: newConnectionState.connection.id,
+          value: newConnectionState.connection,
+        }
+      : undefined;
+    const isDisabled =
+      isReadOnly ||
+      !testDataState.allIdentifiedConnections.length ||
+      Boolean(
+        testDataState.testData.connectionsTestData.find(
+          (c) => c.connectionId === selectedConnection?.value.id,
+        ),
+      );
+    const handleSubmit = (): void => {
+      const connection = newConnectionState.connection;
+      const data = newConnectionState.embeddedDataType;
+      if (connection && data) {
+        testDataState.createConnectionTestData();
+        closeModal();
+      }
+    };
+    const onConnectionSelectionChange = (val: {
+      label: string;
+      value?: IdentifiedConnection;
+    }): void => {
+      if (val.value === undefined) {
+        newConnectionState.setConnection(undefined);
+      } else if (val.value !== selectedConnection?.value) {
+        newConnectionState.setConnection(val.value);
+      }
+    };
+    // external format
+    const selectedEmbeddedType = newConnectionState.embeddedDataType
+      ? {
+          label: prettyCONSTName(newConnectionState.embeddedDataType.label),
+          value: newConnectionState.embeddedDataType.value,
+        }
+      : undefined;
+    const extraOptionTypes = testDataState.editorStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap(
+        (plugin) =>
+          (
+            plugin as DSLData_LegendStudioApplicationPlugin_Extension
+          ).getExtraEmbeddedDataTypeOptions?.() ?? [],
+      );
+    const embeddedOptions = [
+      ...Object.values(EmbeddedDataType).map((typeOption) => ({
+        label: prettyCONSTName(typeOption),
+        value: typeOption,
+      })),
+      ...extraOptionTypes,
+    ];
+    const onEmbeddedTypeChange = (val: EmbeddedDataTypeOption | null): void => {
+      if (!val) {
+        newConnectionState.setEmbeddedDataType(undefined);
+      } else {
+        newConnectionState.setEmbeddedDataType(val);
+      }
+    };
+
+    return (
+      <Dialog
+        open={newConnectionState.showModal}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <form
+          onSubmit={handleSubmit}
+          className="modal modal--dark search-modal"
+        >
+          <div className="modal__title">Create a connection test data</div>
+          <div className="explorer__new-element-modal__driver">
+            <CustomSelectorInput
+              className="explorer__new-element-modal__driver__dropdown"
+              options={connectionOptions}
+              onChange={onConnectionSelectionChange}
+              value={selectedConnection}
+              isClearable={false}
+              darkMode={true}
+            />
+          </div>
+          <div className="explorer__new-element-modal__driver">
+            <CustomSelectorInput
+              className="explorer__new-element-modal__driver__dropdown"
+              options={embeddedOptions}
+              onChange={onEmbeddedTypeChange}
+              value={selectedEmbeddedType}
+              isClearable={false}
+              darkMode={true}
+            />
+          </div>
+          {selectedEmbeddedType?.value === EmbeddedDataType.DATA_ELEMENT && (
+            <div className="explorer__new-element-modal__driver">
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown data-element-reference-editor__value__dropdown"
+                disabled={isReadOnly}
+                options={dataElementOptions}
+                onChange={onDataElementChange}
+                value={selectedOption}
+                darkMode={true}
+              />
+            </div>
+          )}
+          <div className="search-modal__actions">
+            <button
+              type="button"
+              className="btn btn--dark"
+              onClick={closeModal}
+            >
+              Cancel
+            </button>
+            <button className="btn btn--dark" disabled={isDisabled}>
+              Create
+            </button>
+          </div>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
+export const ServiceTestDataEditor = observer(
+  (props: { testDataState: ServiceTestDataState }) => {
+    const { testDataState } = props;
+    const testData = testDataState.testData;
+    const newConnectionDataState = testDataState.newConnectionDataState;
+    const addConnectionTestData = (): void => {
+      testDataState.newConnectionDataState.openModal();
+    };
+    return (
+      <div className="service-test-data-editor panel">
+        <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">
+              data
+            </div>
+          </div>
+        </div>
+        <div className="service-test-data-editor__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 test data
+                  </div>
+                </div>
+                <div className="panel__header__actions">
+                  <button
+                    className="panel__header__action"
+                    tabIndex={-1}
+                    onClick={addConnectionTestData}
+                    title="Add Connection Test Data"
+                  >
+                    <PlusIcon />
+                  </button>
+                </div>
+              </div>
+              <div>
+                {testData.connectionsTestData.map((connectionTestData) => (
+                  <ConnectionTestDataItem
+                    key={connectionTestData.connectionId}
+                    serviceTestDataState={testDataState}
+                    connectionTestData={connectionTestData}
+                  />
+                ))}
+              </div>
+            </ResizablePanel>
+            <ResizablePanelSplitter>
+              <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+            </ResizablePanelSplitter>
+            <ResizablePanel minSize={600}>
+              <PanelLoadingIndicator
+                isLoading={Boolean(
+                  testDataState.selectedDataState?.generatingTestDataSate
+                    .isInProgress,
+                )}
+              />
+              {testDataState.selectedDataState && (
+                <ConnectionTestDataEditor
+                  connectionTestDataState={testDataState.selectedDataState}
+                />
+              )}
+              {newConnectionDataState.showModal && (
+                <NewConnectionDataModal testDataState={testDataState} />
+              )}
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestableEditor.tsx

@@ -0,0 +1,232 @@
+/**
+ * Copyright (c) 2020-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 {
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+  clsx,
+  PlusIcon,
+  ContextMenu,
+  Dialog,
+  BlankPanelPlaceholder,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import type { ServiceTestSuite } from '@finos/legend-graph';
+import { ServiceTestDataEditor } from './ServiceTestDataEditor.js';
+import { ServiceTestsEditor } from './ServiceTestsEditor.js';
+import { forwardRef, useState } from 'react';
+import { testSuite_setId } from '../../../../../stores/graphModifier/Testable_GraphModifierHelper.js';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import type {
+  ServiceTestableState,
+  ServiceTestSuiteState,
+} from '../../../../../stores/editor-state/element-editor-state/service/testable/ServiceTestableState.js';
+
+export const ServiceTestSuiteEditor = observer(
+  (props: { serviceTestSuiteState: ServiceTestSuiteState }) => {
+    const { serviceTestSuiteState } = props;
+    return (
+      <div className="service-test-suite-editor">
+        <ResizablePanelGroup orientation="horizontal">
+          <ResizablePanel size={300} minSize={28}>
+            <ServiceTestDataEditor
+              testDataState={serviceTestSuiteState.testDataState}
+            />
+          </ResizablePanel>
+          <ResizablePanelSplitter>
+            <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+          </ResizablePanelSplitter>
+          <ResizablePanel minSize={56}>
+            <ServiceTestsEditor suiteState={serviceTestSuiteState} />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);
+
+const ServiceSuiteHeaderTabContextMenu = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      testSuite: ServiceTestSuite;
+      testableState: ServiceTestableState;
+    }
+  >(function MappingEditorHeaderTabContextMenu(props, ref) {
+    const { testSuite, testableState } = props;
+    const deleteSuite = (): void => testableState.deleteSuite(testSuite);
+    const rename = (): void => testableState.setSuiteToRename(testSuite);
+
+    return (
+      <div ref={ref} className="mapping-editor__header__tab__context-menu">
+        <button
+          className="mapping-editor__header__tab__context-menu__item"
+          onClick={rename}
+        >
+          Rename
+        </button>
+        <button
+          className="mapping-editor__header__tab__context-menu__item"
+          onClick={deleteSuite}
+        >
+          Delete
+        </button>
+      </div>
+    );
+  }),
+);
+
+export const RenameModal = observer(
+  (props: {
+    val: string;
+    isReadOnly: boolean;
+    setValue: (val: string) => void;
+    showModal: boolean;
+    closeModal: () => void;
+  }) => {
+    const { val, isReadOnly, showModal, closeModal, setValue } = props;
+    const [inputValue, setInputValue] = useState(val);
+    const handleSubmit = (): void => {
+      setValue(inputValue);
+      closeModal();
+    };
+    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      setInputValue(event.target.value);
+    };
+    return (
+      <Dialog
+        open={showModal}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <form
+          onSubmit={handleSubmit}
+          className="modal modal--dark search-modal"
+        >
+          <div className="modal__title">Rename</div>
+          <div>
+            <input
+              className="panel__content__form__section__input"
+              spellCheck={false}
+              disabled={isReadOnly}
+              value={inputValue}
+              onChange={changeValue}
+            />
+          </div>
+          <div className="search-modal__actions">
+            <button className="btn btn--dark" disabled={isReadOnly}>
+              Rename
+            </button>
+          </div>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
+export const ServiceTestableEditor = observer(
+  (props: { serviceTestableState: ServiceTestableState }) => {
+    const { serviceTestableState } = props;
+    const serviceEditorState = serviceTestableState.serviceEditorState;
+    const service = serviceEditorState.service;
+    const selectedSuite = serviceTestableState.selectedSuiteState?.suite;
+    const changeSuite = (suite: ServiceTestSuite): void => {
+      serviceTestableState.changeSuite(suite);
+    };
+    const addSuite = (): void => serviceTestableState.addTestSuite();
+    const isReadOnly = serviceEditorState.isReadOnly;
+    const renameSuite = (val: string): void =>
+      testSuite_setId(
+        guaranteeNonNullable(serviceTestableState.suiteToRename),
+        val,
+      );
+    return (
+      <div className="service-test-suite-editor panel">
+        <div className="panel__header">
+          {service.tests.length ? (
+            <div className="panel__header service-test-suite-editor__header service-test-suite-editor__header--with-tabs">
+              <div className="uml-element-editor__tabs">
+                {service.tests.map((suite) => (
+                  <div
+                    key={suite.id}
+                    onClick={(): void => changeSuite(suite)}
+                    className={clsx('service-test-suite-editor__tab', {
+                      'service-test-suite-editor__tab--active':
+                        suite === selectedSuite,
+                    })}
+                  >
+                    <ContextMenu
+                      className="mapping-editor__header__tab__content"
+                      content={
+                        <ServiceSuiteHeaderTabContextMenu
+                          testableState={serviceTestableState}
+                          testSuite={suite}
+                        />
+                      }
+                    >
+                      {suite.id}
+                    </ContextMenu>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div></div>
+          )}
+          <div className="panel__header__actions">
+            <button
+              className="panel__header__action"
+              tabIndex={-1}
+              onClick={addSuite}
+              title="Add Service Suite"
+            >
+              <PlusIcon />
+            </button>
+          </div>
+        </div>
+        <div className="service-test-suite-editor panel">
+          {serviceTestableState.selectedSuiteState && (
+            <ServiceTestSuiteEditor
+              serviceTestSuiteState={serviceTestableState.selectedSuiteState}
+            />
+          )}
+          {!service.tests.length && (
+            <BlankPanelPlaceholder
+              placeholderText="Add Test Suite"
+              onClick={addSuite}
+              clickActionType="add"
+              tooltipText="Click to add test"
+            />
+          )}
+          {serviceTestableState.suiteToRename && (
+            <RenameModal
+              val={serviceTestableState.suiteToRename.id}
+              isReadOnly={isReadOnly}
+              showModal={true}
+              closeModal={(): void =>
+                serviceTestableState.setSuiteToRename(undefined)
+              }
+              setValue={renameSuite}
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);