@finos/legend-application-studio 28.3.5 → 28.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.3.5",
+  "version": "28.4.1",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -45,21 +45,21 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.38",
-    "@finos/legend-art": "7.0.38",
-    "@finos/legend-graph": "31.1.9",
-    "@finos/legend-lego": "1.1.25",
-    "@finos/legend-query-builder": "4.3.9",
-    "@finos/legend-server-depot": "6.0.28",
-    "@finos/legend-server-sdlc": "5.1.2",
-    "@finos/legend-server-showcase": "0.0.8",
-    "@finos/legend-shared": "10.0.24",
-    "@finos/legend-storage": "3.0.74",
+    "@finos/legend-application": "15.0.40",
+    "@finos/legend-art": "7.0.40",
+    "@finos/legend-graph": "31.2.0",
+    "@finos/legend-lego": "1.1.27",
+    "@finos/legend-query-builder": "4.5.0",
+    "@finos/legend-server-depot": "6.0.29",
+    "@finos/legend-server-sdlc": "5.1.3",
+    "@finos/legend-server-showcase": "0.0.9",
+    "@finos/legend-shared": "10.0.25",
+    "@finos/legend-storage": "3.0.75",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.2.20",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "fast-xml-parser": "4.2.7",
-    "mobx": "6.10.0",
+    "mobx": "6.10.2",
     "mobx-react-lite": "3.4.3",
     "mobx-utils": "6.0.8",
     "monaco-editor": "0.41.0",
@@ -68,18 +68,18 @@
     "react-dnd": "16.0.1",
     "react-dom": "18.2.0",
     "serializr": "3.0.2",
-    "yaml": "2.3.1"
+    "yaml": "2.3.2"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.78",
-    "@jest/globals": "29.6.3",
+    "@finos/legend-dev-utils": "2.0.79",
+    "@jest/globals": "29.6.4",
     "cross-env": "7.0.3",
-    "eslint": "8.47.0",
-    "jest": "29.6.3",
+    "eslint": "8.48.0",
+    "jest": "29.6.4",
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.1",
     "sass": "1.66.1",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   },
   "peerDependencies": {
     "react": "^18.0.0"

package/src/application/LegendStudioApplicationConfig.ts

@@ -27,12 +27,14 @@ import {
   assertNonNullable,
   guaranteeNonEmptyString,
   SerializationFactory,
+  usingModelSchema,
 } from '@finos/legend-shared';
 import {
   LegendApplicationConfig,
   type LegendApplicationConfigurationInput,
   type LegendApplicationConfigurationData,
 } from '@finos/legend-application';
+import { QueryBuilderConfig } from '@finos/legend-query-builder';
 
 export class ServiceRegistrationEnvironmentConfig {
   env!: string;
@@ -99,6 +101,11 @@ class LegendStudioApplicationCoreOptions {
   TEMPORARY__serviceRegistrationConfig: ServiceRegistrationEnvironmentConfig[] =
     [];
 
+  /**
+   * Config specific to query builder
+   */
+  queryBuilderConfig: QueryBuilderConfig | undefined;
+
   private static readonly serialization = new SerializationFactory(
     createModelSchema(LegendStudioApplicationCoreOptions, {
       enableGraphBuilderStrictMode: optional(primitive()),
@@ -110,6 +117,9 @@ class LegendStudioApplicationCoreOptions {
       TEMPORARY__serviceRegistrationConfig: list(
         object(ServiceRegistrationEnvironmentConfig),
       ),
+      queryBuilderConfig: optional(
+        usingModelSchema(QueryBuilderConfig.serialization.schema),
+      ),
     }),
   );
 

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

@@ -1083,6 +1083,7 @@ export const FunctionEditor = observer(() => {
           embeddedQueryBuilderState.editorStore.applicationStore,
           embeddedQueryBuilderState.editorStore.graphManagerState,
           functionEditorState.functionElement,
+          editorStore.applicationStore.config.options.queryBuilderConfig,
         );
         functionQueryBuilderState.initializeWithQuery(
           new RawLambda(

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

@@ -26,6 +26,8 @@ import {
   clsx,
   WordWrapIcon,
   MoreHorizontalIcon,
+  FoldIcon,
+  UnfoldIcon,
   PanelContent,
   MenuContent,
   MenuContentItem,
@@ -686,6 +688,7 @@ export const GrammarTextEditor = observer(() => {
     GraphEditGrammarModeState,
   ).grammarTextEditorState;
   const error = editorStore.graphState.error;
+  const [elementsFolded, setFoldingElements] = useState(false);
 
   const forcedCursorPosition = grammarTextEditorState.forcedCursorPosition;
   const value = normalizeLineEnding(grammarTextEditorState.graphGrammarText);
@@ -974,12 +977,172 @@ export const GrammarTextEditor = observer(() => {
       );
   }
 
+  function toggleAutoFoldingElements(): void {
+    const autoFoldingElements = editorStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap(
+        (plugin) =>
+          (
+            plugin as DSL_LegendStudioApplicationPlugin_Extension
+          ).getAutoFoldingCandidateToken?.() ?? [],
+      );
+    const foldingClass = editor?.getContribution('editor.contrib.folding');
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (foldingClass as any).getFoldingModel().then(
+      (foldingModel: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _regions: any;
+        onDidChange: (arg0: () => void) => void;
+        getRegionAtLine: (arg0: unknown) => unknown;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        getAllRegionsAtLine(arg0: unknown): any;
+        toggleCollapseState: (arg0: unknown) => unknown;
+      }) => {
+        const model = editor?.getModel();
+        const toggleFoldingLines: number[] = [];
+        model?.getLinesContent().forEach((line, j) => {
+          autoFoldingElements.forEach((elementName) => {
+            if (line.match(new RegExp(`^${elementName}`))) {
+              toggleFoldingLines.push(j + 2);
+            }
+          });
+        });
+        let allElementsFolded = true;
+        toggleFoldingLines.forEach((foldingLineRegion, i) => {
+          if (foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]) {
+            if (
+              foldingModel._regions.isCollapsed(
+                foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]
+                  .regionIndex,
+              ) === false
+            ) {
+              allElementsFolded = false;
+            }
+          }
+        });
+
+        setFoldingElements(!allElementsFolded);
+
+        toggleFoldingLines.forEach((foldingLineRegion, i) => {
+          if (foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]) {
+            if (
+              foldingModel._regions.isCollapsed(
+                foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]
+                  .regionIndex,
+              ) !== elementsFolded
+            ) {
+              foldingModel.toggleCollapseState(
+                foldingModel.getAllRegionsAtLine(foldingLineRegion),
+              );
+            }
+          }
+        });
+      },
+    );
+  }
+
   useEffect(() => {
     if (editor && forcedCursorPosition) {
       moveCursorToPosition(editor, forcedCursorPosition);
     }
   }, [editor, forcedCursorPosition]);
 
+  useEffect(() => {
+    if (editor) {
+      const autoFoldingElements = editorStore.pluginManager
+        .getApplicationPlugins()
+        .flatMap(
+          (plugin) =>
+            (
+              plugin as DSL_LegendStudioApplicationPlugin_Extension
+            ).getAutoFoldingCandidateToken?.() ?? [],
+        );
+      const foldingClass = editor.getContribution('editor.contrib.folding');
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (foldingClass as any).getFoldingModel().then(
+        (foldingModel: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          _regions: any;
+          onDidChange: (arg0: () => void) => void;
+          getRegionAtLine: (arg0: unknown) => unknown;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          getAllRegionsAtLine(arg0: unknown): any;
+          toggleCollapseState: (arg0: unknown) => unknown;
+        }) => {
+          foldingModel.onDidChange(() => {
+            const model = editor.getModel();
+            const toggleFoldingLines: number[] = [];
+            model?.getLinesContent().forEach((line, j) => {
+              autoFoldingElements.forEach((elementName) => {
+                if (line.match(new RegExp(`^${elementName}`))) {
+                  toggleFoldingLines.push(j + 2);
+                }
+              });
+            });
+            let allElementsFolded = true;
+            toggleFoldingLines.forEach((foldingLineRegion, i) => {
+              if (foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]) {
+                if (
+                  foldingModel._regions.isCollapsed(
+                    foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]
+                      .regionIndex,
+                  ) === false
+                ) {
+                  allElementsFolded = false;
+                }
+              }
+            });
+
+            setFoldingElements(!allElementsFolded);
+          });
+        },
+      );
+    }
+  });
+
+  useEffect(() => {
+    if (editor) {
+      const autoFoldingElements = editorStore.pluginManager
+        .getApplicationPlugins()
+        .flatMap(
+          (plugin) =>
+            (
+              plugin as DSL_LegendStudioApplicationPlugin_Extension
+            ).getAutoFoldingCandidateToken?.() ?? [],
+        );
+      const foldingClass = editor.getContribution('editor.contrib.folding');
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (foldingClass as any)
+        .getFoldingModel()
+        .then(
+          (foldingModel: {
+            onDidChange: (arg0: () => void) => void;
+            getRegionAtLine: (arg0: unknown) => unknown;
+            getAllRegionsAtLine(arg0: unknown): unknown;
+            toggleCollapseState: (arg0: unknown) => unknown;
+          }) => {
+            const model = editor.getModel();
+            const foldingLines: number[] = [];
+            model?.getLinesContent().forEach((line, j) => {
+              autoFoldingElements.forEach((elementName) => {
+                if (line.match(new RegExp(`^${elementName}`))) {
+                  foldingLines.push(j + 2);
+                }
+              });
+            });
+            foldingLines.forEach((foldingLineRegion, i) => {
+              foldingModel.toggleCollapseState(
+                foldingModel.getAllRegionsAtLine(foldingLineRegion),
+              );
+            });
+          },
+        );
+    }
+  }, [editor, editorStore.pluginManager]);
+
   // NOTE: dispose the editor to prevent potential memory-leak
   useEffect(
     () => (): void => {
@@ -1036,6 +1199,23 @@ export const GrammarTextEditor = observer(() => {
           >
             <WordWrapIcon className="editor-group__icon__word-wrap" />
           </button>
+          <button
+            className={clsx('editor-group__header__action', {
+              'editor-group__header__action--active': elementsFolded,
+            })}
+            onClick={toggleAutoFoldingElements}
+            tabIndex={-1}
+            title={`${
+              !elementsFolded ? 'Unfold' : 'Fold'
+            } auto-folding elements`}
+          >
+            {!elementsFolded && (
+              <UnfoldIcon className="editor-group__icon__word-wrap" />
+            )}
+            {elementsFolded && (
+              <FoldIcon className="editor-group__icon__word-wrap" />
+            )}
+          </button>
         </div>
       </div>
       <PanelContent className="editor-group__content">

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

@@ -117,6 +117,7 @@ const MappingTestQueryEditor = observer(
                 embeddedQueryBuilderState.editorStore.applicationStore,
                 embeddedQueryBuilderState.editorStore.graphManagerState,
                 testState.mappingEditorState.mapping,
+                editorStore.applicationStore.config.options.queryBuilderConfig,
               );
               queryBuilderState.initializeWithQuery(testState.queryState.query);
               if (openInTextMode) {

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

@@ -210,6 +210,7 @@ const MappingExecutionQueryEditor = observer(
                 embeddedQueryBuilderState.editorStore.applicationStore,
                 embeddedQueryBuilderState.editorStore.graphManagerState,
                 executionState.mappingEditorState.mapping,
+                editorStore.applicationStore.config.options.queryBuilderConfig,
               );
               queryBuilderState.initializeWithQuery(
                 executionState.queryState.query,

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

@@ -594,6 +594,7 @@ const MappingTestSuiteQueryEditor = observer(
                 embeddedQueryBuilderState.editorStore.applicationStore,
                 embeddedQueryBuilderState.editorStore.graphManagerState,
                 mapping,
+                editorStore.applicationStore.config.options.queryBuilderConfig,
               );
               queryBuilderState.initializeWithQuery(testableQueryState.query);
               if (openInTextMode) {

package/src/components/editor/editor-group/service-editor/ServiceExecutionQueryEditor.tsx

@@ -135,6 +135,9 @@ export const ServiceExecutionQueryEditor = observer(
                 KeyedExecutionParameter
                   ? selectedExecutionState.executionContext.key
                   : undefined,
+                undefined,
+                undefined,
+                embeddedQueryBuilderState.editorStore.applicationStore.config.options.queryBuilderConfig,
               );
               queryBuilderState.initializeWithQuery(
                 executionState.execution.func,
@@ -463,6 +466,9 @@ export const queryService = async (
           service,
           undefined,
           selectedExec,
+          undefined,
+          undefined,
+          embeddedQueryBuilderState.editorStore.applicationStore.config.options.queryBuilderConfig,
         );
         if (execution) {
           queryBuilderState.initializeWithQuery(execution.func);

package/src/components/editor/editor-group/uml-editor/ClassQueryBuilder.tsx

@@ -379,6 +379,7 @@ export const queryClass = async (
         const queryBuilderState = new ClassQueryBuilderState(
           embeddedQueryBuilderState.editorStore.applicationStore,
           embeddedQueryBuilderState.editorStore.graphManagerState,
+          editorStore.applicationStore.config.options.queryBuilderConfig,
         );
         queryBuilderState.changeClass(_class);
         queryBuilderState.propagateClassChange(_class);

package/src/stores/LegendStudioApplicationPlugin.ts

@@ -326,4 +326,10 @@ export interface DSL_LegendStudioApplicationPlugin_Extension
    * (e.g. Class, Enum in ###Pure)
    */
   getExtraPureGrammarParserElementSnippetSuggestionsGetters?(): PureGrammarParserElementSnippetSuggestionsGetter[];
+
+  /**
+   * Get a string of the Pure grammar element name for auto-folding the element
+   * (e.g. Diagram, or Text)
+   */
+  getAutoFoldingCandidateToken?(): string[];
 }

package/src/stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.ts

@@ -15,7 +15,10 @@
  */
 
 import type { GenericLegendApplicationStore } from '@finos/legend-application';
-import { QueryBuilderState } from '@finos/legend-query-builder';
+import {
+  type QueryBuilderConfig,
+  QueryBuilderState,
+} from '@finos/legend-query-builder';
 import type { GraphManagerState, Mapping } from '@finos/legend-graph';
 import { renderMappingExecutionQueryBuilderSetupPanelContent } from '../../../../../components/editor/editor-group/mapping-editor/MappingExecutionQueryBuilder.js';
 
@@ -29,8 +32,9 @@ export class MappingExecutionQueryBuilderState extends QueryBuilderState {
     applicationStore: GenericLegendApplicationStore,
     graphManagerState: GraphManagerState,
     mapping: Mapping,
+    config: QueryBuilderConfig | undefined,
   ) {
-    super(applicationStore, graphManagerState);
+    super(applicationStore, graphManagerState, config);
     this.executionMapping = mapping;
     this.executionContextState.mapping = mapping;
   }