refactor code in to separate out logic for FormMode and TextMode (#1898)

finos · Mar 16, 2023 · cc0030d · cc0030d
1 parent 100ddfd
commit cc0030d
Show file tree

Hide file tree

Showing 52 changed files with 1,665 additions and 1,312 deletions.
diff --git a/.changeset/poor-bobcats-beam.md b/.changeset/poor-bobcats-beam.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-application-studio': patch
+---
diff --git a/.changeset/violet-icons-lick.md b/.changeset/violet-icons-lick.md
@@ -0,0 +1,4 @@
+---
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-graph': patch
+---
diff --git a/packages/legend-application-studio/src/components/__tests__/ClassQueryBuilder.test.tsx b/packages/legend-application-studio/src/components/__tests__/ClassQueryBuilder.test.tsx
@@ -27,7 +27,7 @@ import {
   TEST__openElementFromExplorerTree,
   TEST__setUpEditorWithDefaultSDLCData,
 } from '../EditorComponentTestUtils.js';
-import { FormModeCompilationOutcome } from '../../stores/EditorGraphState.js';
+import { GraphCompilationOutcome } from '../../stores/EditorGraphState.js';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
 import { queryClass } from '../editor/edit-panel/uml-editor/ClassQueryBuilder.js';
 import { extractElementNameFromPath } from '@finos/legend-graph';
@@ -94,12 +94,13 @@ describe(
           },
         );
 
-        const MOCK__globalCompileInFormModeFn = createMock();
-        MOCK__editorStore.graphState.globalCompileInFormMode =
-          MOCK__globalCompileInFormModeFn;
-        MOCK__globalCompileInFormModeFn.mockResolvedValue(
-          FormModeCompilationOutcome.SUCCEEDED,
+        const MOCK__GlobalCompileInFormModeFn = createMock();
+        MOCK__editorStore.graphEditorMode.globalCompile =
+          MOCK__GlobalCompileInFormModeFn;
+        MOCK__editorStore.graphState.setMostRecentCompilationOutcome(
+          GraphCompilationOutcome.SUCCEEDED,
         );
+
         MOCK__editorStore.graphManagerState.graphManager.analyzeMappingModelCoverage =
           createMock();
         MockedMonacoEditorInstance.getValue.mockReturnValue('');

diff --git a/packages/legend-application-studio/src/components/__tests__/EmbeddedQueryBuilder.test.tsx b/packages/legend-application-studio/src/components/__tests__/EmbeddedQueryBuilder.test.tsx
@@ -23,7 +23,7 @@ import {
   TEST__openElementFromExplorerTree,
   TEST__setUpEditorWithDefaultSDLCData,
 } from '../EditorComponentTestUtils.js';
-import { FormModeCompilationOutcome } from '../../stores/EditorGraphState.js';
+import { GraphCompilationOutcome } from '../../stores/EditorGraphState.js';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
 import { TEST__buildQueryBuilderMockedEditorStore } from './EmbeddedQueryBuilderTestUtils.js';
 
@@ -200,11 +200,11 @@ test(integrationTest('Open query builder by querying a class'), async () => {
     { entities },
   );
 
-  const MOCK__globalCompileInFormModeFn = createMock();
-  MOCK__editorStore.graphState.globalCompileInFormMode =
-    MOCK__globalCompileInFormModeFn;
-  MOCK__globalCompileInFormModeFn.mockResolvedValue(
-    FormModeCompilationOutcome.SUCCEEDED,
+  const MOCK__GlobalCompileInFormModeFn = createMock();
+  MOCK__editorStore.graphEditorMode.globalCompile =
+    MOCK__GlobalCompileInFormModeFn;
+  MOCK__editorStore.graphState.setMostRecentCompilationOutcome(
+    GraphCompilationOutcome.SUCCEEDED,
   );
   MOCK__editorStore.graphManagerState.graphManager.analyzeMappingModelCoverage =
     createMock();
@@ -237,11 +237,11 @@ test(
       { entities },
     );
 
-    const MOCK__globalCompileInFormModeFn = createMock();
-    MOCK__editorStore.graphState.globalCompileInFormMode =
-      MOCK__globalCompileInFormModeFn;
-    MOCK__globalCompileInFormModeFn.mockResolvedValue(
-      FormModeCompilationOutcome.SUCCEEDED,
+    const MOCK__GlobalCompileInFormModeFn = createMock();
+    MOCK__editorStore.graphEditorMode.globalCompile =
+      MOCK__GlobalCompileInFormModeFn;
+    MOCK__editorStore.graphState.setMostRecentCompilationOutcome(
+      GraphCompilationOutcome.SUCCEEDED,
     );
     MOCK__editorStore.graphManagerState.graphManager.lambdasToPureCode =
       createMock();
@@ -276,11 +276,11 @@ test(
       { entities },
     );
 
-    const MOCK__globalCompileInFormModeFn = createMock();
-    MOCK__editorStore.graphState.globalCompileInFormMode =
-      MOCK__globalCompileInFormModeFn;
-    MOCK__globalCompileInFormModeFn.mockResolvedValue(
-      FormModeCompilationOutcome.SUCCEEDED,
+    const MOCK__GlobalCompileInFormModeFn = createMock();
+    MOCK__editorStore.graphEditorMode.globalCompile =
+      MOCK__GlobalCompileInFormModeFn;
+    MOCK__editorStore.graphState.setMostRecentCompilationOutcome(
+      GraphCompilationOutcome.SUCCEEDED,
     );
     MOCK__editorStore.graphManagerState.graphManager.lambdasToPureCode =
       createMock();
@@ -308,11 +308,11 @@ test(
       { entities },
     );
 
-    const MOCK__globalCompileInFormModeFn = createMock();
-    MOCK__editorStore.graphState.globalCompileInFormMode =
-      MOCK__globalCompileInFormModeFn;
-    MOCK__globalCompileInFormModeFn.mockResolvedValue(
-      FormModeCompilationOutcome.SUCCEEDED,
+    const MOCK__GlobalCompileInFormModeFn = createMock();
+    MOCK__editorStore.graphEditorMode.globalCompile =
+      MOCK__GlobalCompileInFormModeFn;
+    MOCK__editorStore.graphState.setMostRecentCompilationOutcome(
+      GraphCompilationOutcome.SUCCEEDED,
     );
     MOCK__editorStore.graphManagerState.graphManager.lambdasToPureCode =
       createMock();

diff --git a/...ages/legend-application-studio/src/components/__tests__/LegendStudioExplorerTree.test.tsx b/...ages/legend-application-studio/src/components/__tests__/LegendStudioExplorerTree.test.tsx
@@ -26,7 +26,7 @@ import {
   TEST__openElementFromExplorerTree,
   TEST__setUpEditorWithDefaultSDLCData,
 } from '../EditorComponentTestUtils.js';
-import { FormModeCompilationOutcome } from '../../stores/EditorGraphState.js';
+import { GraphCompilationOutcome } from '../../stores/EditorGraphState.js';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
 import { extractElementNameFromPath } from '@finos/legend-graph';
 import TEST_DATA__ClassQueryBuilder from './TEST_DATA__ClassQueryBuilderModel.json';
@@ -41,11 +41,11 @@ test(integrationTest('Test Explorer tree context menu '), async () => {
     },
   );
   const classPath = 'model::Person';
-  const MOCK__globalCompileInFormModeFn = createMock();
-  MOCK__editorStore.graphState.globalCompileInFormMode =
-    MOCK__globalCompileInFormModeFn;
-  MOCK__globalCompileInFormModeFn.mockResolvedValue(
-    FormModeCompilationOutcome.SUCCEEDED,
+  const MOCK__GlobalCompileInFormModeFn = createMock();
+  MOCK__editorStore.graphEditorMode.globalCompile =
+    MOCK__GlobalCompileInFormModeFn;
+  MOCK__editorStore.graphState.setMostRecentCompilationOutcome(
+    GraphCompilationOutcome.SUCCEEDED,
   );
   MOCK__editorStore.graphManagerState.graphManager.analyzeMappingModelCoverage =
     createMock();

diff --git a/packages/legend-application-studio/src/components/editor/Editor.tsx b/packages/legend-application-studio/src/components/editor/Editor.tsx
@@ -48,6 +48,7 @@ import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { WorkspaceSyncConflictResolver } from './side-bar/WorkspaceSyncConflictResolver.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
 import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
+import { GRAPH_EDITOR_MODE } from '../../stores/EditorConfig.js';
 
 export const Editor = withEditorStore(
   observer(() => {
@@ -204,10 +205,13 @@ export const Editor = withEditorStore(
                           : {})}
                       >
                         {(isResolvingConflicts || editable) &&
-                          editorStore.isInFormMode && <EditPanel />}
-                        {editable && editorStore.isInGrammarTextMode && (
-                          <GrammarTextEditor />
-                        )}
+                          editorStore.graphEditorMode.mode ===
+                            GRAPH_EDITOR_MODE.FORM && <EditPanel />}
+                        {editable &&
+                          editorStore.graphEditorMode.mode ===
+                            GRAPH_EDITOR_MODE.GRAMMAR_TEXT && (
+                            <GrammarTextEditor />
+                          )}
                         {!editable && <EditPanelSplashScreen />}
                       </ResizablePanel>
                       <ResizablePanelSplitter>

diff --git a/packages/legend-application-studio/src/components/editor/StatusBar.tsx b/packages/legend-application-studio/src/components/editor/StatusBar.tsx
@@ -30,7 +30,11 @@ import {
   WarningIcon,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
-import { ACTIVITY_MODE, AUX_PANEL_MODE } from '../../stores/EditorConfig.js';
+import {
+  ACTIVITY_MODE,
+  AUX_PANEL_MODE,
+  GRAPH_EDITOR_MODE,
+} from '../../stores/EditorConfig.js';
 import {
   generateSetupRoute,
   type WorkspaceEditorPathParams,
@@ -136,12 +140,8 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
   const handleTextModeClick = applicationStore.guardUnhandledError(() =>
     flowResult(editorStore.toggleTextMode()),
   );
-  const compile = applicationStore.guardUnhandledError(
-    editorStore.isInGrammarTextMode
-      ? () => flowResult(editorStore.graphState.globalCompileInTextMode())
-      : async () => {
-          await flowResult(editorStore.graphState.globalCompileInFormMode());
-        },
+  const compile = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.graphEditorMode.globalCompile()),
   );
   const generate = applicationStore.guardUnhandledError(() =>
     flowResult(editorStore.graphState.graphGenerationState.globalGenerate()),
@@ -380,7 +380,8 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
             'editor__status-bar__action editor__status-bar__action__toggler',
             {
               'editor__status-bar__action editor__status-bar__action__toggler--active':
-                editorStore.isInGrammarTextMode,
+                editorStore.graphEditorMode.mode ===
+                GRAPH_EDITOR_MODE.GRAMMAR_TEXT,
             },
           )}
           disabled={actionsDisabled}

diff --git a/packages/legend-application-studio/src/components/editor/aux-panel/Problems.tsx b/packages/legend-application-studio/src/components/editor/aux-panel/Problems.tsx
@@ -26,20 +26,14 @@ import {
 import { useEditorStore } from '../EditorStoreProvider.js';
 import type { Problem } from '../../../stores/EditorGraphState.js';
 import { CompilationWarning, EngineError } from '@finos/legend-graph';
+import { GRAPH_EDITOR_MODE } from '../../../stores/EditorConfig.js';
 
 const ProblemItem = observer((props: { problem: Problem }) => {
   const { problem } = props;
   const editorStore = useEditorStore();
   const isStale = editorStore.graphState.areProblemsStale;
-  const goToSource = (): void => {
-    // NOTE: in text mode, we allow click to go to position even when the problems might already be stale
-    if (editorStore.isInGrammarTextMode && problem.sourceInformation) {
-      editorStore.grammarTextEditorState.setForcedCursorPosition({
-        lineNumber: problem.sourceInformation.startLine,
-        column: problem.sourceInformation.startColumn,
-      });
-    }
-  };
+  const goToSource = (): void =>
+    editorStore.graphEditorMode.goToProblem(problem);
 
   return (
     <PanelListItem>
@@ -64,7 +58,8 @@ const ProblemItem = observer((props: { problem: Problem }) => {
         </div>
         {problem.sourceInformation && (
           <div className="auxiliary-panel__problem__source">
-            {editorStore.isInGrammarTextMode &&
+            {editorStore.graphEditorMode.mode ===
+              GRAPH_EDITOR_MODE.GRAMMAR_TEXT &&
               `[Ln ${problem.sourceInformation.startLine}, Col ${problem.sourceInformation.startColumn}]`}
           </div>
         )}

diff --git a/...s/legend-application-studio/src/components/editor/command-center/ProjectSearchCommand.tsx b/...s/legend-application-studio/src/components/editor/command-center/ProjectSearchCommand.tsx
@@ -76,10 +76,7 @@ export const ProjectSearchCommand = observer(() => {
       closeModal();
       // NOTE: since it takes time to close the modal, this will prevent any auto-focus effort when we open a new element
       // to fail as the focus is still trapped in this modal, we need to use `setTimeout` here
-      setTimeout(
-        () => editorStore.tabManagerState.openElementEditor(val.value),
-        0,
-      );
+      setTimeout(() => editorStore.graphEditorMode.openElement(val.value), 0);
     }
   };
   const handleEnter = (): void => {

diff --git a/packages/legend-application-studio/src/components/editor/edit-panel/FileGenerationViewer.tsx b/packages/legend-application-studio/src/components/editor/edit-panel/FileGenerationViewer.tsx
@@ -43,7 +43,7 @@ export const FileGenerationViewer = observer(() => {
       )
     : undefined;
   const visitFileGeneration = (fg: FileGenerationSpecification): void =>
-    editorStore.tabManagerState.openElementEditor(fg);
+    editorStore.graphEditorMode.openElement(fg);
 
   return (
     <div className="file-generation-viewer">

diff --git a/packages/legend-application-studio/src/components/editor/edit-panel/FunctionEditor.tsx b/packages/legend-application-studio/src/components/editor/edit-panel/FunctionEditor.tsx
@@ -201,7 +201,7 @@ const ParameterBasicEditor = observer(
     };
     const openElement = (): void => {
       if (!(paramType instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           paramType instanceof Unit ? paramType.measure : paramType,
         );
       }
@@ -456,7 +456,7 @@ const ReturnTypeEditor = observer(
 
     const openElement = (): void => {
       if (!(returnType.value instanceof PrimitiveType)) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           returnType.value instanceof Unit
             ? returnType.value.measure
             : returnType.value,

diff --git a/...end-application-studio/src/components/editor/edit-panel/GenerationSpecificationEditor.tsx b/...end-application-studio/src/components/editor/edit-panel/GenerationSpecificationEditor.tsx
@@ -99,7 +99,7 @@ const ModelGenerationItem = observer(
     const deleteNode = (): void =>
       specState.deleteGenerationTreeNode(generationTreeNode);
     const visitModelGeneration = (): void =>
-      editorStore.tabManagerState.openElementEditor(modelGeneration);
+      editorStore.graphEditorMode.openElement(modelGeneration);
     // generation id
     const isUnique =
       specState.spec.generationNodes.filter(
@@ -368,7 +368,7 @@ const FileGenerationItem = observer(
         fileGeneraitonRef,
       );
     const visitFileGen = (): void =>
-      editorStore.tabManagerState.openElementEditor(fileGeneration);
+      editorStore.graphEditorMode.openElement(fileGeneration);
     return (
       <div className="generation-spec-file-generation-editor__item">
         <div className="btn--sm generation-spec-file-generation-editor__item__label">

diff --git a/packages/legend-application-studio/src/components/editor/edit-panel/GrammarTextEditor.tsx b/packages/legend-application-studio/src/components/editor/edit-panel/GrammarTextEditor.tsx
@@ -110,6 +110,7 @@ import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../store
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import type { STO_Relational_LegendStudioApplicationPlugin_Extension } from '../../../stores/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
 import { LEGEND_STUDIO_SETTINGS_KEY } from '../../../stores/LegendStudioStorage.js';
+import { GraphEditGrammarModeState } from '../../../stores/GraphEditGrammarModeState.js';
 
 export const GrammarTextEditorHeaderTabContextMenu = observer(
   forwardRef<HTMLDivElement, { children?: React.ReactNode }>(
@@ -684,7 +685,9 @@ export const GrammarTextEditor = observer(() => {
   >();
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
-  const grammarTextEditorState = editorStore.grammarTextEditorState;
+  const grammarTextEditorState = editorStore.getGraphEditorMode(
+    GraphEditGrammarModeState,
+  ).grammarTextEditorState;
   const currentElementLabelRegexString =
     grammarTextEditorState.currentElementLabelRegexString;
   const error = editorStore.graphState.error;
@@ -1043,7 +1046,9 @@ export const GrammarTextEditor = observer(() => {
           <div className="edit-panel__text-mode__tab">
             <button
               className="edit-panel__text-mode__tab__label"
-              disabled={editorStore.graphState.isApplicationLeavingTextMode}
+              disabled={
+                editorStore.graphState.isApplicationLeavingGraphEditMode
+              }
               onClick={leaveTextMode}
               tabIndex={-1}
               title="Click to exit text mode and go back to form mode"

diff --git a/packages/legend-application-studio/src/components/editor/edit-panel/RuntimeEditor.tsx b/packages/legend-application-studio/src/components/editor/edit-panel/RuntimeEditor.tsx
@@ -580,7 +580,7 @@ const IdentifiedConnectionEditor = observer(
     };
     const visitConnection = (): void => {
       if (identifiedConnection.connection instanceof ConnectionPointer) {
-        editorStore.tabManagerState.openElementEditor(
+        editorStore.graphEditorMode.openElement(
           identifiedConnection.connection.packageableConnection.value,
         );
       }
@@ -844,7 +844,7 @@ const RuntimeMappingEditor = observer(
     const deleteMapping = (): void =>
       runtimeEditorState.deleteMapping(mappingRef);
     const visitMapping = (): void =>
-      editorStore.tabManagerState.openElementEditor(mappingRef.value);
+      editorStore.graphEditorMode.openElement(mappingRef.value);
 
     return (
       <div className="panel__content__form__section__list__item--customized runtime-mapping-editor">

diff --git a/...nd-application-studio/src/components/editor/edit-panel/data-editor/EmbeddedDataEditor.tsx b/...nd-application-studio/src/components/editor/edit-panel/data-editor/EmbeddedDataEditor.tsx
@@ -168,7 +168,7 @@ export const DataElementReferenceDataEditor = observer(
       }
     };
     const visitData = (): void =>
-      editorStore.tabManagerState.openElementEditor(dataElement);
+      editorStore.graphEditorMode.openElement(dataElement);
     return (
       <div className="panel data-element-reference-editor">
         <div className="data-element-reference-editor__header">

diff --git a/...legend-application-studio/src/components/editor/edit-panel/diff-editor/EntityDiffView.tsx b/...legend-application-studio/src/components/editor/edit-panel/diff-editor/EntityDiffView.tsx
@@ -98,7 +98,7 @@ export const EntityDiffView = observer(
     } = diffEditorState;
     const goToElement = (): void => {
       if (diffEditorState.element) {
-        editorStore.tabManagerState.openElementEditor(diffEditorState.element);
+        editorStore.graphEditorMode.openElement(diffEditorState.element);
       }
     };
 

diff --git a/...nd-application-studio/src/components/editor/edit-panel/mapping-editor/MappingExplorer.tsx b/...nd-application-studio/src/components/editor/edit-panel/mapping-editor/MappingExplorer.tsx
@@ -465,7 +465,7 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
     : undefined;
   const visitGenerationParentElement = (): void => {
     if (generationParentElement) {
-      editorStore.tabManagerState.openElementEditor(generationParentElement);
+      editorStore.graphEditorMode.openElement(generationParentElement);
     }
   };
   // explorer tree data

diff --git a/...udio/src/components/editor/edit-panel/mapping-editor/OperationSetImplementationEditor.tsx b/...udio/src/components/editor/edit-panel/mapping-editor/OperationSetImplementationEditor.tsx
@@ -169,7 +169,7 @@ export const OperationSetImplementationEditor = observer(
         const parent = param.setImplementation.value._PARENT;
         // TODO: think more about this flow. Right now we open the mapping element in the parent mapping
         if (parent !== mappingEditorState.element) {
-          editorStore.tabManagerState.openElementEditor(parent);
+          editorStore.graphEditorMode.openElement(parent);
           editorStore.tabManagerState
             .getCurrentEditorState(MappingEditorState)
             .openMappingElement(param.setImplementation.value, false);

diff --git a/...ication-studio/src/components/editor/edit-panel/mapping-editor/PropertyMappingsEditor.tsx b/...ication-studio/src/components/editor/edit-panel/mapping-editor/PropertyMappingsEditor.tsx
@@ -193,7 +193,7 @@ export const PropertyMappingEditor = observer(
             const parent = rootMappingElement._PARENT;
             if (parent !== mappingEditorState.element) {
               // TODO: think more about this flow. Right now we open the mapping element in the parent mapping
-              editorStore.tabManagerState.openElementEditor(parent);
+              editorStore.graphEditorMode.openElement(parent);
               editorStore.tabManagerState
                 .getCurrentEditorState(MappingEditorState)
                 .openMappingElement(rootMappingElement, false);