@finos/legend-application-studio 28.13.12 → 28.13.14

package/src/components/editor/editor-group/GrammarTextEditor.tsx

@@ -684,9 +684,10 @@ export const GrammarTextEditor = observer(() => {
   >();
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
-  const grammarTextEditorState = editorStore.getGraphEditorMode(
+  const grammarModeState = editorStore.getGraphEditorMode(
     GraphEditGrammarModeState,
-  ).grammarTextEditorState;
+  );
+  const grammarTextEditorState = grammarModeState.grammarTextEditorState;
   const error = editorStore.graphState.error;
   const [elementsFolded, setFoldingElements] = useState(false);
 
@@ -1185,7 +1186,9 @@ export const GrammarTextEditor = observer(() => {
             className="editor-group__text-mode__tab editor-group__text-mode__tab--active"
             content={<GrammarTextEditorHeaderTabContextMenu />}
           >
-            <div className="editor-group__text-mode__tab__label">Text Mode</div>
+            <div className="editor-group__text-mode__tab__label">
+              {grammarModeState.headerLabel}
+            </div>
           </ContextMenu>
         </div>
         <div className="editor-group__header__actions">

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

@@ -51,8 +51,8 @@ import {
 } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import { MappingElementState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingElementState.js';
 import { MappingExplorer } from './MappingExplorer.js';
-import { DEPRECATED__MappingTestEditor } from './DEPRECATED__MappingTestEditor.js';
-import { DEPRECATED__MappingTestState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/DEPRECATED__MappingTestState.js';
+import { DEPRECATED__MappingTestEditor } from './legacy/DEPRECATED__MappingTestEditor.js';
+import { DEPRECATED__MappingTestState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/legacy/DEPRECATED__MappingTestState.js';
 import { MappingTestsExplorer } from './MappingTestsExplorer.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import { MappingExecutionState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionState.js';
@@ -75,6 +75,7 @@ import type { MappingEditorTabState } from '../../../../stores/editor/editor-sta
 import { MappingTestableEditor } from './MappingTestableEditor.js';
 import { DocumentationLink } from '@finos/legend-lego/application';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../__lib__/LegendStudioDocumentation.js';
+import { MappingTestMigrationTool } from './legacy/MappingTestMigrationTool.js';
 
 export const MappingEditorSplashScreen: React.FC = () => {
   const logoWidth = 280;
@@ -400,6 +401,12 @@ export const MappingEditor = observer(() => {
               mappingTestableState={mappingEditorState.mappingTestableState}
             />
           )}
+          {mappingEditorState.migrationState && (
+            <MappingTestMigrationTool
+              mappingEditorState={mappingEditorState}
+              migrationState={mappingEditorState.migrationState}
+            />
+          )}
         </div>
       </div>
     </div>

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

@@ -21,7 +21,7 @@ import {
   type DEPRECATED__MappingTestState,
   MAPPING_TEST_EDITOR_TAB_TYPE,
   TEST_RESULT,
-} from '../../../../stores/editor/editor-state/element-editor-state/mapping/DEPRECATED__MappingTestState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/legacy/DEPRECATED__MappingTestState.js';
 import {
   clsx,
   ContextMenu,
@@ -36,10 +36,10 @@ import {
   ExclamationCircleIcon,
   PauseCircleIcon,
   PanelDropZone,
-  BlankPanelPlaceholder,
   MenuContent,
   MenuContentItem,
   Panel,
+  WarningIcon,
 } from '@finos/legend-art';
 import {
   type MappingElementDragSource,
@@ -47,17 +47,11 @@ import {
 } from '../../../../stores/editor/utils/DnDUtils.js';
 import { ClassMappingSelectorModal } from './MappingExecutionBuilder.js';
 import { flowResult } from 'mobx';
-import { Randomizer } from '@finos/legend-shared';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
 import { SetImplementation } from '@finos/legend-graph';
 import { MappingEditorState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 
-const addTestPromps = [
-  `Let's add some tests!`,
-  `"A test a day keeps the QA away"`,
-];
-
 export const MappingTestExplorerContextMenu = observer(
   forwardRef<
     HTMLDivElement,
@@ -370,6 +364,9 @@ export const MappingTestsExplorer = observer(
     // Class mapping selector
     const [openClassMappingSelectorModal, setOpenClassMappingSelectorModal] =
       useState(false);
+
+    const openMigrationtool = (): void =>
+      mappingEditorState.openMigrationTool();
     const showClassMappingSelectorModal = (): void =>
       setOpenClassMappingSelectorModal(true);
     const hideClassMappingSelectorModal = (): void =>
@@ -416,6 +413,17 @@ export const MappingTestsExplorer = observer(
               </div>
             </div>
             <div className="panel__header__actions">
+              {Boolean(mappingEditorState.mapping.test.length) && (
+                <button
+                  className="panel__header__action"
+                  onClick={openMigrationtool}
+                  disabled={isReadOnly}
+                  tabIndex={-1}
+                  title="Please migrate to new mapping test framework"
+                >
+                  <WarningIcon />
+                </button>
+              )}
               <button
                 className="panel__header__action"
                 onClick={showClassMappingSelectorModal}
@@ -478,24 +486,6 @@ export const MappingTestsExplorer = observer(
                     />
                   ),
                 )}
-              {!isReadOnly &&
-                !mappingEditorState.DEPRECATED_mappingTestStates.length && (
-                  <BlankPanelPlaceholder
-                    text={
-                      new Randomizer().getRandomItemInCollection(
-                        addTestPromps,
-                      ) ??
-                      addTestPromps[0] ??
-                      'Add a mapping test'
-                    }
-                    onClick={showClassMappingSelectorModal}
-                    clickActionType="add"
-                    tooltipText="Drop a mapping element to start testing"
-                    isDropZoneActive={isDragOver && !isReadOnly}
-                    disabled={isReadOnly}
-                    previewText="No test"
-                  />
-                )}
             </div>
           </PanelDropZone>
         </ContextMenu>

package/src/components/editor/editor-group/mapping-editor/{DEPRECATED__MappingTestEditor.tsx → legacy/DEPRECATED__MappingTestEditor.tsx}

@@ -24,7 +24,7 @@ import {
   MappingTestFlatDataInputDataState,
   MappingTestExpectedOutputAssertionState,
   MappingTestRelationalInputDataState,
-} from '../../../../stores/editor/editor-state/element-editor-state/mapping/DEPRECATED__MappingTestState.js';
+} from '../../../../../stores/editor/editor-state/element-editor-state/mapping/legacy/DEPRECATED__MappingTestState.js';
 import {
   clsx,
   PanelLoadingIndicator,
@@ -50,7 +50,7 @@ import { useDrop } from 'react-dnd';
 import {
   type MappingElementDragSource,
   CORE_DND_TYPE,
-} from '../../../../stores/editor/utils/DnDUtils.js';
+} from '../../../../../stores/editor/utils/DnDUtils.js';
 import {
   IllegalStateError,
   guaranteeType,
@@ -65,14 +65,14 @@ import {
 import {
   ClassMappingSelectorModal,
   getRelationalInputTestDataEditorLanguage,
-} from './MappingExecutionBuilder.js';
+} from '../MappingExecutionBuilder.js';
 import { flowResult } from 'mobx';
-import { MappingTestStatusIndicator } from './MappingTestsExplorer.js';
+import { MappingTestStatusIndicator } from '../MappingTestsExplorer.js';
 import {
   getMappingElementSource,
   getMappingElementTarget,
-} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
-import { useEditorStore } from '../../EditorStoreProvider.js';
+} from '../../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
+import { useEditorStore } from '../../../EditorStoreProvider.js';
 import {
   Class,
   SetImplementation,
@@ -82,17 +82,17 @@ import {
   isStubbed_RawLambda,
   DEPRECATED__validate_MappingTestAssert,
 } from '@finos/legend-graph';
-import { flatData_setData } from '../../../../stores/graph-modifier/STO_FlatData_GraphModifierHelper.js';
+import { flatData_setData } from '../../../../../stores/graph-modifier/STO_FlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
-} from '../../../../stores/graph-modifier/STO_Relational_GraphModifierHelper.js';
+} from '../../../../../stores/graph-modifier/STO_Relational_GraphModifierHelper.js';
 import {
   type QueryBuilderState,
   QueryBuilderTextEditorMode,
   ExecutionPlanViewer,
 } from '@finos/legend-query-builder';
-import { MappingExecutionQueryBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
+import { MappingExecutionQueryBuilderState } from '../../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,

package/src/components/editor/editor-group/mapping-editor/legacy/MappingTestMigrationTool.tsx

@@ -0,0 +1,156 @@
+/**
+ * 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 {
+  BaseStepper,
+  BlankPanelContent,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  PanelFormListItems,
+  PanelLoadingIndicator,
+  clsx,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import type { MappingEditorState } from '../../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
+import {
+  MIGRATE_PHASE,
+  type MappingTestMigrationState,
+} from '../../../../../stores/editor/editor-state/element-editor-state/mapping/legacy/MappingTestMigrationState.js';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CodeDiffView,
+} from '@finos/legend-lego/code-editor';
+
+export const MappingTestMigrationTool = observer(
+  (props: {
+    mappingEditorState: MappingEditorState;
+    migrationState: MappingTestMigrationState;
+  }) => {
+    const { mappingEditorState, migrationState } = props;
+    const isLoading =
+      migrationState.confirmationState?.calculatingDiffs.isInProgress;
+    const close = (): void => {
+      mappingEditorState.closeMigrationTool();
+    };
+    const handleBack = (): void => {
+      migrationState.handleBack();
+    };
+    const handleNext = (): void => {
+      migrationState.handleNext();
+    };
+    const disabled =
+      !migrationState.migrateableTests.length &&
+      !migrationState.unSupportedTestsToMigrate.length;
+    return (
+      <Dialog
+        open={true}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal
+          darkMode={true}
+          className={clsx('editor-modal query-builder-text-mode__modal')}
+        >
+          <ModalHeader title="Migrate Legacy Tests"></ModalHeader>
+          <ModalBody>
+            <PanelLoadingIndicator isLoading={Boolean(isLoading)} />
+            <BaseStepper
+              steps={migrationState.steps}
+              activeStep={migrationState.activeStep}
+            />
+            {!disabled ? (
+              <div className="mapping-migration-tool">
+                {migrationState.currentStep === MIGRATE_PHASE.OVERVIEW && (
+                  <>
+                    <PanelFormListItems
+                      title="Migrable Tests"
+                      prompt="tests that can be migrated via migration tool"
+                    >
+                      {migrationState.migrateableTests.map((test) => (
+                        <div
+                          className="panel__content__form__section__list__item"
+                          key={test.name}
+                        >
+                          <div className="panel__content__form__section__list__item__value">
+                            {test.name}
+                          </div>
+                        </div>
+                      ))}
+                    </PanelFormListItems>
+                    <PanelFormListItems
+                      title="Unsupported Tests"
+                      prompt="tests unable to be migrated"
+                    >
+                      {migrationState.unSupportedTestsToMigrate.map((test) => (
+                        <div
+                          className="panel__content__form__section__list__item"
+                          key={test.name}
+                        >
+                          <div className="panel__content__form__section__list__item__value">
+                            {test.name}
+                          </div>
+                        </div>
+                      ))}
+                    </PanelFormListItems>
+                  </>
+                )}
+                {migrationState.currentStep === MIGRATE_PHASE.CONFIRM &&
+                  migrationState.confirmationState && (
+                    <div className="query-builder__diff-panel__content">
+                      <CodeDiffView
+                        language={CODE_EDITOR_LANGUAGE.PURE}
+                        from={migrationState.confirmationState.before ?? ''}
+                        to={migrationState.confirmationState.after ?? ''}
+                      />
+                    </div>
+                  )}
+              </div>
+            ) : (
+              <div className="mapping-migration-tool">
+                <BlankPanelContent>No Migrateable Tests</BlankPanelContent>
+              </div>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              className="query-connection-workflow__actions__action-btn"
+              disabled={migrationState.disableBack || disabled}
+              onClick={handleBack}
+              title="Go to previous step..."
+            >
+              Back
+            </ModalFooterButton>
+            <ModalFooterButton
+              className="query-connection-workflow__actions__action-btn query-connection-workflow__actions__action-btn--primary"
+              disabled={migrationState.disableNext || disabled}
+              onClick={handleNext}
+            >
+              {migrationState.nextText}
+            </ModalFooterButton>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);