@finos/legend-query-builder 2.1.6 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "2.1.6",
+  "version": "3.0.0",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -20,6 +20,7 @@
   "type": "module",
   "exports": {
     ".": "./lib/index.js",
+    "./test": "./lib/__test__.js",
     "./lib/index.css": "./lib/index.css"
   },
   "module": "lib/index.js",
@@ -41,15 +42,15 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "14.0.3",
-    "@finos/legend-art": "7.0.0",
-    "@finos/legend-graph": "27.0.2",
-    "@finos/legend-lego": "0.1.3",
-    "@finos/legend-server-depot": "4.4.14",
-    "@finos/legend-shared": "8.2.0",
-    "@finos/legend-storage": "3.0.48",
+    "@finos/legend-application": "15.0.0",
+    "@finos/legend-art": "7.0.1",
+    "@finos/legend-graph": "28.0.0",
+    "@finos/legend-lego": "0.1.5",
+    "@finos/legend-server-depot": "5.0.0",
+    "@finos/legend-shared": "9.0.0",
+    "@finos/legend-storage": "3.0.49",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.0.34",
+    "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
     "mathjs": "11.8.0",
     "mobx": "6.9.0",
@@ -62,7 +63,7 @@
     "sql-formatter": "12.2.0"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.53",
+    "@finos/legend-dev-utils": "2.0.54",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
     "eslint": "8.38.0",

package/src/__test__.ts

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+export { TEST__setUpQueryBuilder } from './components/__test-utils__/QueryBuilderComponentTestUtils.js';

package/src/components/QueryBuilder.tsx

@@ -49,7 +49,7 @@ import { QueryBuilderTextEditor } from './QueryBuilderTextEditor.js';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { QueryBuilderTextEditorMode } from '../stores/QueryBuilderTextEditorState.js';
 import { QueryBuilderFetchStructurePanel } from './fetch-structure/QueryBuilderFetchStructurePanel.js';
-import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
+import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
 import { flowResult } from 'mobx';
 import { QueryBuilderUnsupportedQueryEditor } from './QueryBuilderUnsupportedQueryEditor.js';
 import {
@@ -67,9 +67,9 @@ import { QueryBuilderPostTDSPanel } from './fetch-structure/QueryBuilderPostTDSP
 import { QueryBuilderWatermarkEditor } from './watermark/QueryBuilderWatermark.js';
 import { QueryBuilderConstantExpressionPanel } from './QueryBuilderConstantExpressionPanel.js';
 import { QueryBuilder_LegendApplicationPlugin } from './QueryBuilder_LegendApplicationPlugin.js';
-import { QUERY_BUILDER_SETTING_KEY } from '../application/QueryBuilderSetting.js';
+import { QUERY_BUILDER_SETTING_KEY } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './QueryBuilderComponentElement.js';
-import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../application/QueryBuilderDocumentation.js';
+import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -15,10 +15,10 @@
  */
 
 import {
-  type PackageableElementOption,
   buildElementOption,
   getPackageableElementOptionFormatter,
-} from '@finos/legend-application';
+  type PackageableElementOption,
+} from '@finos/legend-lego/graph-editor';
 import {
   BlankPanelPlaceholder,
   CustomSelectorInput,
@@ -49,8 +49,8 @@ import { buildDefaultInstanceValue } from '../stores/shared/ValueSpecificationEd
 import { variableExpression_setName } from '../stores/shared/ValueSpecificationModifierHelper.js';
 import { BasicValueSpecificationEditor } from './shared/BasicValueSpecificationEditor.js';
 import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
-import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
-import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../application/QueryBuilderDocumentation.js';
+import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
+import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
 
 // NOTE: We currently only allow constant variables for primitive types of multiplicity ONE.
 // This is why we don't show multiplicity in the editor.
@@ -153,7 +153,6 @@ const QueryBuilderConstantExpressionEditor = observer(
                   darkMode:
                     !applicationStore.layoutService
                       .TEMPORARY__isLightColorThemeEnabled,
-                  graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
             </PanelFormSection>

package/src/components/QueryBuilderDiffPanel.tsx

@@ -14,90 +14,21 @@
  * limitations under the License.
  */
 
-import {
-  CODE_EDITOR_LANGUAGE,
-  CODE_EDITOR_THEME,
-  TAB_SIZE,
-  useApplicationStore,
-} from '@finos/legend-application';
-import { clsx, Dialog, useResizeDetector, Button } from '@finos/legend-art';
+import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
+import { clsx, Dialog, Button } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import { editor as monacoEditorAPI } from 'monaco-editor';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect } from 'react';
 import {
   type QueryBuilderDiffViewState,
   QueryBuilderDiffViewMode,
 } from '../stores/QueryBuilderChangeDetectionState.js';
 import { pruneSourceInformation } from '@finos/legend-graph';
 import {
-  disposeDiffCodeEditor,
-  getBaseCodeEditorOptions,
+  CODE_EDITOR_LANGUAGE,
+  CodeDiffView,
+  JSONDiffView,
 } from '@finos/legend-lego/code-editor';
 
-const TextDiffView = observer(
-  (props: {
-    language: CODE_EDITOR_LANGUAGE;
-    from?: string | undefined;
-    to?: string | undefined;
-  }) => {
-    const { from, to, language } = props;
-    const applicationStore = useApplicationStore();
-    const [editor, setEditor] =
-      useState<monacoEditorAPI.IStandaloneDiffEditor>();
-    const editorRef = useRef<HTMLDivElement>(null);
-    const originalText = from ?? '';
-    const modifiedText = to ?? '';
-
-    const { ref, width, height } = useResizeDetector<HTMLDivElement>();
-
-    useEffect(() => {
-      if (width !== undefined && height !== undefined) {
-        editor?.layout({ width, height });
-      }
-    }, [editor, width, height]);
-
-    useEffect(() => {
-      if (!editor && editorRef.current) {
-        const element = editorRef.current;
-        const _editor = monacoEditorAPI.createDiffEditor(element, {
-          ...getBaseCodeEditorOptions(),
-          theme: applicationStore.layoutService
-            .TEMPORARY__isLightColorThemeEnabled
-            ? CODE_EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
-            : CODE_EDITOR_THEME.LEGEND,
-          readOnly: true,
-          wordWrap: 'on',
-        });
-        setEditor(_editor);
-      }
-    }, [applicationStore, editor]);
-
-    if (editor) {
-      const originalModel = monacoEditorAPI.createModel(originalText, language);
-      const modifiedModel = monacoEditorAPI.createModel(modifiedText, language);
-      editor.setModel({
-        original: originalModel,
-        modified: modifiedModel,
-      });
-    }
-
-    useEffect(
-      () => (): void => {
-        if (editor) {
-          disposeDiffCodeEditor(editor);
-        }
-      },
-      [editor],
-    ); // dispose editor
-
-    return (
-      <div ref={ref} className="code-editor__container">
-        <div className="code-editor__body" ref={editorRef} />
-      </div>
-    );
-  },
-);
-
 export const QueryBuilderDiffViewPanel = observer(
   (props: { diffViewState: QueryBuilderDiffViewState }) => {
     const { diffViewState } = props;
@@ -149,15 +80,14 @@ export const QueryBuilderDiffViewPanel = observer(
             </div>
             <div className="query-builder__diff-panel__content">
               {diffViewState.mode === QueryBuilderDiffViewMode.GRAMMAR && (
-                <TextDiffView
+                <CodeDiffView
                   language={CODE_EDITOR_LANGUAGE.PURE}
                   from={fromGrammarText}
                   to={toGrammarText}
                 />
               )}
               {diffViewState.mode === QueryBuilderDiffViewMode.JSON && (
-                <TextDiffView
-                  language={CODE_EDITOR_LANGUAGE.JSON}
+                <JSONDiffView
                   from={JSON.stringify(
                     {
                       parameters: diffViewState.initialQuery.parameters
@@ -172,7 +102,7 @@ export const QueryBuilderDiffViewPanel = observer(
                         : undefined,
                     },
                     null,
-                    TAB_SIZE,
+                    DEFAULT_TAB_SIZE,
                   )}
                   to={JSON.stringify(
                     {
@@ -188,7 +118,7 @@ export const QueryBuilderDiffViewPanel = observer(
                         : undefined,
                     },
                     null,
-                    TAB_SIZE,
+                    DEFAULT_TAB_SIZE,
                   )}
                 />
               )}

package/src/components/QueryBuilderParametersPanel.tsx

@@ -39,20 +39,20 @@ import {
   Multiplicity,
   getMultiplicityPrettyDescription,
 } from '@finos/legend-graph';
-import {
-  type PackageableElementOption,
-  buildElementOption,
-  getPackageableElementOptionFormatter,
-  useApplicationStore,
-} from '@finos/legend-application';
+import { useApplicationStore } from '@finos/legend-application';
 import { generateEnumerableNameFromToken } from '@finos/legend-shared';
 import { DEFAULT_VARIABLE_NAME } from '../stores/QueryBuilderConfig.js';
 import { variableExpression_setName } from '../stores/shared/ValueSpecificationModifierHelper.js';
 import { LambdaParameterState } from '../stores/shared/LambdaParameterState.js';
 import { LambdaParameterValuesEditor } from './shared/LambdaParameterValuesEditor.js';
 import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
-import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
-import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../application/QueryBuilderDocumentation.js';
+import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
+import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
+import {
+  buildElementOption,
+  getPackageableElementOptionFormatter,
+  type PackageableElementOption,
+} from '@finos/legend-lego/graph-editor';
 
 type MultiplicityOption = { label: string; value: Multiplicity };
 
@@ -182,7 +182,6 @@ const VariableExpressionEditor = observer(
                   darkMode:
                     !applicationStore.layoutService
                       .TEMPORARY__isLightColorThemeEnabled,
-                  graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
             </div>

package/src/components/QueryBuilderResultPanel.tsx

@@ -45,8 +45,7 @@ import {
 import {
   ActionAlertActionType,
   ActionAlertType,
-  CODE_EDITOR_LANGUAGE,
-  TAB_SIZE,
+  DEFAULT_TAB_SIZE,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
@@ -57,7 +56,7 @@ import {
   prettyDuration,
   prettyCONSTName,
 } from '@finos/legend-shared';
-import { forwardRef, useState } from 'react';
+import { type MutableRefObject, forwardRef, useRef } from 'react';
 import {
   QueryBuilderDerivationProjectionColumnState,
   QueryBuilderProjectionColumnState,
@@ -82,19 +81,22 @@ import {
   instanceValue_setValues,
 } from '../stores/shared/ValueSpecificationModifierHelper.js';
 import { PARAMETER_SUBMIT_ACTION } from '../stores/shared/LambdaParameterState.js';
-import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
+import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
 import {
   DataGrid,
   type DataGridCellMouseOverEvent,
 } from '@finos/legend-lego/data-grid';
-import { CodeEditor } from '@finos/legend-lego/code-editor';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CodeEditor,
+} from '@finos/legend-lego/code-editor';
 import { ExecutionPlanViewer } from './execution-plan/ExecutionPlanViewer.js';
 
 const QueryBuilderGridResultContextMenu = observer(
   forwardRef<
     HTMLDivElement,
     {
-      event: DataGridCellMouseOverEvent | null;
+      event: MutableRefObject<DataGridCellMouseOverEvent | null>;
       tdsState: QueryBuilderTDSState;
     }
   >(function QueryBuilderResultContextMenu(props, ref) {
@@ -108,10 +110,10 @@ const QueryBuilderGridResultContextMenu = observer(
     const postFilterState = tdsState.postFilterState;
     const projectionColumnState = guaranteeNonNullable(
       tdsState.projectionColumns
-        .filter((c) => c.columnName === event?.column.getColId())
+        .filter((c) => c.columnName === event.current?.column.getColId())
         .concat(
           tdsState.aggregationState.columns
-            .filter((c) => c.columnName === event?.column.getColId())
+            .filter((c) => c.columnName === event.current?.column.getColId())
             .map((ag) => ag.projectionColumnState),
         )[0],
     );
@@ -142,7 +144,7 @@ const QueryBuilderGridResultContextMenu = observer(
     const updateFilterConditionValue = (
       conditionValue: InstanceValue,
     ): void => {
-      if (event?.value !== null) {
+      if (event.current?.value !== null) {
         instanceValue_setValue(
           conditionValue,
           conditionValue instanceof EnumValueInstanceValue
@@ -151,10 +153,10 @@ const QueryBuilderGridResultContextMenu = observer(
                   (
                     conditionValue.genericType?.ownerReference
                       .value as Enumeration
-                  ).values.filter((v) => v.name === event?.value)[0],
+                  ).values.filter((v) => v.name === event.current?.value)[0],
                 ),
               )
-            : event?.value,
+            : event.current?.value,
           0,
           tdsState.queryBuilderState.observerContext,
         );
@@ -221,7 +223,7 @@ const QueryBuilderGridResultContextMenu = observer(
           (conditionState.value instanceof EnumValueInstanceValue
             ? conditionState.value.values.map((ef) => ef.value.name)
             : conditionState.value.values
-          ).includes(event?.value);
+          ).includes(event.current?.value);
         if (!doesValueAlreadyExist) {
           const currentValueSpecificaton = conditionState.value;
           const newValueSpecification =
@@ -249,7 +251,7 @@ const QueryBuilderGridResultContextMenu = observer(
                 : (v as InstanceValue).values,
             )
             .flat()
-            .includes(event?.value);
+            .includes(event.current?.value);
         if (!doesValueAlreadyExist) {
           const newValueSpecification = (
             isFilterBy ? postFilterEqualOperator : postFilterNotEqualOperator
@@ -285,12 +287,14 @@ const QueryBuilderGridResultContextMenu = observer(
     };
 
     const handleCopyCellValue = applicationStore.guardUnhandledError(() =>
-      applicationStore.clipboardService.copyTextToClipboard(event?.value),
+      applicationStore.clipboardService.copyTextToClipboard(
+        event.current?.value,
+      ),
     );
 
     const handleCopyRowValue = applicationStore.guardUnhandledError(() =>
       applicationStore.clipboardService.copyTextToClipboard(
-        Object.values(event?.data).toString(),
+        Object.values(event.current?.data).toString(),
       ),
     );
 
@@ -330,8 +334,9 @@ const QueryBuilderGridResult = observer(
     const { executionResult, queryBuilderState } = props;
     const fetchStructureImplementation =
       queryBuilderState.fetchStructureState.implementation;
-    const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
-      useState<DataGridCellMouseOverEvent | null>(null);
+    const cellDoubleClickedEvent = useRef<DataGridCellMouseOverEvent | null>(
+      null,
+    );
     const columns = executionResult.result.columns;
     const rowData = executionResult.result.rows.map((_row, rowIdx) => {
       const row: PlainObject = {};
@@ -381,7 +386,7 @@ const QueryBuilderGridResult = observer(
           // in. hence why we set the cell every time we mouse over
           // rather than making user click multiple times.
           onCellMouseOver={(event): void => {
-            setCellDoubleClickedEvent(event);
+            cellDoubleClickedEvent.current = event;
           }}
           suppressFieldDotNotation={true}
           columnDefs={columns.map((colName) => ({
@@ -425,7 +430,7 @@ const QueryBuilderResultValues = observer(
         inputValue={JSON.stringify(
           extractExecutionResultValues(executionResult),
           null,
-          TAB_SIZE,
+          DEFAULT_TAB_SIZE,
         )}
         isReadOnly={true}
       />

package/src/components/QueryBuilderSideBar.tsx

@@ -26,7 +26,7 @@ import {
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
-import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
+import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
 import {
   type Class,
   type Mapping,
@@ -41,14 +41,13 @@ import {
   VARIABLE_REFERENCE_TOKEN,
   isElementDeprecated,
   PrimitiveType,
-  type PureModel,
 } from '@finos/legend-graph';
+import { useApplicationStore } from '@finos/legend-application';
 import {
-  type PackageableElementOption,
-  getPackageableElementOptionFormatter,
   buildElementOption,
-  useApplicationStore,
-} from '@finos/legend-application';
+  getPackageableElementOptionFormatter,
+  type PackageableElementOption,
+} from '@finos/legend-lego/graph-editor';
 import { MilestoningParametersEditor } from './explorer/QueryBuilderMilestoningEditor.js';
 
 export const getParameterValue = (
@@ -188,7 +187,6 @@ export const QueryBuilderClassSelector = observer(
                 darkMode:
                   !applicationStore.layoutService
                     .TEMPORARY__isLightColorThemeEnabled,
-                graph: queryBuilderState.graphManagerState.graph,
               })}
             />
             {queryBuilderState.isQuerySupported && (
@@ -226,7 +224,6 @@ export const buildRuntimeValueOption = (
 
 export const getRuntimeOptionFormatter = (props: {
   darkMode?: boolean;
-  pureModel: PureModel;
 }): ((option: { value: Runtime }) => React.ReactNode) =>
   function RuntimeOptionLabel(option: { value: Runtime }): React.ReactNode {
     if (option.value instanceof RuntimePointer) {
@@ -351,7 +348,6 @@ const BasicQueryBuilderSetup = observer(
                   darkMode:
                     !applicationStore.layoutService
                       .TEMPORARY__isLightColorThemeEnabled,
-                  graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
             </div>
@@ -386,7 +382,6 @@ const BasicQueryBuilderSetup = observer(
                   darkMode:
                     !applicationStore.layoutService
                       .TEMPORARY__isLightColorThemeEnabled,
-                  pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />
             </div>

package/src/components/QueryBuilderTextEditor.tsx

@@ -31,12 +31,12 @@ import {
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { QueryBuilderTextEditorMode } from '../stores/QueryBuilderTextEditorState.js';
 import { flowResult } from 'mobx';
+import { useApplicationStore } from '@finos/legend-application';
+import { LambdaEditor } from './shared/LambdaEditor.js';
 import {
   CODE_EDITOR_LANGUAGE,
-  useApplicationStore,
-} from '@finos/legend-application';
-import { LambdaEditor } from './shared/LambdaEditor.js';
-import { CodeEditor } from '@finos/legend-lego/code-editor';
+  CodeEditor,
+} from '@finos/legend-lego/code-editor';
 
 export const QueryBuilderTextEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {

package/src/components/QueryBuilderUnsupportedQueryEditor.tsx

@@ -29,7 +29,7 @@ import {
 import { QueryBuilderSidebar } from './QueryBuilderSideBar.js';
 import { QueryBuilderParametersPanel } from './QueryBuilderParametersPanel.js';
 
-const QueryBuilderUnsupportedQueryEditPanel = observer(
+const QueryBuilderUnsupportedQueryViewer = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     const queryUnsupportedState = queryBuilderState.unsupportedQueryState;
@@ -77,7 +77,7 @@ export const QueryBuilderUnsupportedQueryEditor = observer(
         </ResizablePanel>
         <ResizablePanelSplitter />
         <ResizablePanel>
-          <QueryBuilderUnsupportedQueryEditPanel
+          <QueryBuilderUnsupportedQueryViewer
             queryBuilderState={queryBuilderState}
           />
         </ResizablePanel>

package/src/components/QueryBuilder_LegendApplicationPlugin.ts

@@ -24,7 +24,7 @@ import {
   type LegendApplicationSetup,
 } from '@finos/legend-application';
 import packageJson from '../../package.json';
-import { QUERY_BUILDER_SETTING_CONFIG } from '../application/QueryBuilderSetting.js';
+import { QUERY_BUILDER_SETTING_CONFIG } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMMAND_CONFIG } from '../stores/QueryBuilderCommand.js';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { configureDataGridComponent } from '@finos/legend-lego/data-grid';

package/src/components/{QueryBuilderComponentTestUtils.tsx → __test-utils__/QueryBuilderComponentTestUtils.tsx}

@@ -15,7 +15,8 @@
  */
 
 import { type RenderResult, render, waitFor } from '@testing-library/react';
-import { createSpy, LogService } from '@finos/legend-shared';
+import { LogService } from '@finos/legend-shared';
+import { createSpy } from '@finos/legend-shared/test';
 import {
   type RawMappingModelCoverageAnalysisResult,
   type RawLambda,
@@ -24,24 +25,23 @@ import {
   RuntimePointer,
 } from '@finos/legend-graph';
 import {
-  TEST__ApplicationStoreProvider,
-  TEST__getGenericApplicationConfig,
-  TEST__LegendApplicationPluginManager,
-  TEST__provideMockedApplicationStore,
-  WebApplicationNavigator,
-  TEST__provideMockedWebApplicationNavigator,
-  LegendApplicationComponentFrameworkProvider,
-  Router,
-  createMemoryHistory,
+  ApplicationStoreProvider,
+  ApplicationFrameworkProvider,
+  ApplicationStore,
 } from '@finos/legend-application';
+import { TEST__BrowserEnvironmentProvider } from '@finos/legend-application/test';
 import type { Entity } from '@finos/legend-storage';
-import { QueryBuilder } from './QueryBuilder.js';
+import { QueryBuilder } from '../QueryBuilder.js';
 import {
   type QueryBuilderState,
   INTERNAL__BasicQueryBuilderState,
-} from '../stores/QueryBuilderState.js';
-import { QueryBuilder_GraphManagerPreset } from '../graphManager/QueryBuilder_GraphManagerPreset.js';
-import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
+} from '../../stores/QueryBuilderState.js';
+import { QueryBuilder_GraphManagerPreset } from '../../graph-manager/QueryBuilder_GraphManagerPreset.js';
+import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
+import {
+  TEST__LegendApplicationPluginManager,
+  TEST__getGenericApplicationConfig,
+} from '../../stores/__test-utils__/QueryBuilderStateTestUtils.js';
 
 export const TEST__setUpQueryBuilder = async (
   entities: Entity[],
@@ -53,12 +53,15 @@ export const TEST__setUpQueryBuilder = async (
   renderResult: RenderResult;
   queryBuilderState: QueryBuilderState;
 }> => {
-  const pluginManager = TEST__LegendApplicationPluginManager.create();
-  pluginManager.usePresets([new QueryBuilder_GraphManagerPreset()]).install();
+  const MOCK__pluginManager = TEST__LegendApplicationPluginManager.create();
+  MOCK__pluginManager.usePresets([
+    new QueryBuilder_GraphManagerPreset(),
+  ]).install();
   const graphManagerState = new GraphManagerState(
-    pluginManager,
+    MOCK__pluginManager,
     new LogService(),
   );
+
   await graphManagerState.initializeSystem();
   await graphManagerState.graphManager.buildGraph(
     graphManagerState.graph,
@@ -66,18 +69,13 @@ export const TEST__setUpQueryBuilder = async (
     graphManagerState.graphBuildState,
   );
 
-  const history = createMemoryHistory();
-  const navigator = new WebApplicationNavigator(history);
-  TEST__provideMockedWebApplicationNavigator({ mock: navigator });
-
-  const applicationStore = TEST__provideMockedApplicationStore(
+  const MOCK__applicationStore = new ApplicationStore(
     TEST__getGenericApplicationConfig(),
-    pluginManager,
-    { navigator },
+    MOCK__pluginManager,
   );
 
   const queryBuilderState = new INTERNAL__BasicQueryBuilderState(
-    applicationStore,
+    MOCK__applicationStore,
     graphManagerState,
   );
   const mapping = graphManagerState.graph.getMapping(mappingPath);
@@ -103,16 +101,13 @@ export const TEST__setUpQueryBuilder = async (
   }
 
   const renderResult = render(
-    <Router history={history}>
-      <TEST__ApplicationStoreProvider
-        config={TEST__getGenericApplicationConfig()}
-        pluginManager={pluginManager}
-      >
-        <LegendApplicationComponentFrameworkProvider>
+    <ApplicationStoreProvider store={MOCK__applicationStore}>
+      <TEST__BrowserEnvironmentProvider>
+        <ApplicationFrameworkProvider>
           <QueryBuilder queryBuilderState={queryBuilderState} />
-        </LegendApplicationComponentFrameworkProvider>
-      </TEST__ApplicationStoreProvider>
-    </Router>,
+        </ApplicationFrameworkProvider>
+      </TEST__BrowserEnvironmentProvider>
+    </ApplicationStoreProvider>,
   );
 
   await waitFor(() =>