@finos/legend-application-query 5.2.6 → 6.0.0

package/src/components/QueryEditor.tsx

@@ -33,10 +33,10 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useParams } from 'react-router';
 import {
-  type CreateQueryPathParams,
+  type MappingQueryCreatorPathParams,
   type ExistingQueryEditorPathParams,
-  type ServiceQueryEditorPathParams,
-  type ServiceQueryEditorQueryParams,
+  type ServiceQueryCreatorPathParams,
+  type ServiceQueryCreatorQueryParams,
   LEGEND_QUERY_ROUTE_PATTERN,
   LEGEND_QUERY_QUERY_PARAM_TOKEN,
   LEGEND_QUERY_PATH_PARAM_TOKEN,
@@ -44,17 +44,17 @@ import {
 } from '../stores/LegendQueryRouter.js';
 import {
   type QueryEditorStore,
-  CreateQueryEditorStore,
+  MappingQueryCreatorStore,
   ExistingQueryEditorStore,
   QueryExportState,
-  ServiceQueryEditorStore,
+  ServiceQueryCreatorStore,
 } from '../stores/QueryEditorStore.js';
-import { QueryBuilder } from './QueryBuilder.js';
+import { QueryBuilder } from './query-builder/QueryBuilder.js';
 import { useApplicationStore } from '@finos/legend-application';
 import {
-  CreateQueryEditorStoreProvider,
+  MappingQueryCreatorStoreProvider,
   ExistingQueryEditorStoreProvider,
-  ServiceQueryEditorStoreProvider,
+  ServiceQueryCreatorStoreProvider,
   useQueryEditorStore,
 } from './QueryEditorStoreProvider.js';
 import {
@@ -63,6 +63,7 @@ import {
 } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
 import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
+import type { QueryBuilderState } from '../stores/query-builder/QueryBuilderState.js';
 
 const QueryExportDialogContent = observer(
   (props: { exportState: QueryExportState }) => {
@@ -158,13 +159,13 @@ const renderQueryEditorHeaderLabel = (
         {editorStore.query.name}
       </div>
     );
-  } else if (editorStore instanceof CreateQueryEditorStore) {
+  } else if (editorStore instanceof MappingQueryCreatorStore) {
     return (
       <div className="query-editor__header__label query-editor__header__label--create-query">
         New Query
       </div>
     );
-  } else if (editorStore instanceof ServiceQueryEditorStore) {
+  } else if (editorStore instanceof ServiceQueryCreatorStore) {
     return (
       <div className="query-editor__header__label query-editor__header__label--service-query">
         <RobotIcon className="query-editor__header__label__icon" />
@@ -189,82 +190,86 @@ const renderQueryEditorHeaderLabel = (
   return null;
 };
 
-const QueryEditorHeaderContent = observer(() => {
-  const editorStore = useQueryEditorStore();
-  const applicationStore = useLegendQueryApplicationStore();
-  const viewQueryProject = (): void => {
-    const { groupId, artifactId, versionId } = editorStore.getProjectInfo();
-    applicationStore.navigator.openNewWindow(
-      generateStudioProjectViewUrl(
-        applicationStore.config.studioUrl,
-        groupId,
-        artifactId,
-        versionId,
-        undefined,
-      ),
-    );
-  };
-  const toggleLightDarkTheme = (): void =>
-    applicationStore.TEMPORARY__setIsLightThemeEnabled(
-      !applicationStore.TEMPORARY__isLightThemeEnabled,
-    );
-  const saveQuery = (): void => {
-    editorStore.queryBuilderState
-      .saveQuery(async (lambda: RawLambda) => {
-        editorStore.setExportState(
-          new QueryExportState(
-            editorStore,
-            lambda,
-            await editorStore.getExportConfiguration(lambda),
-          ),
-        );
-      })
-      .catch(applicationStore.alertUnhandledError);
-  };
+const QueryEditorHeaderContent = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const editorStore = useQueryEditorStore();
+    const applicationStore = useLegendQueryApplicationStore();
+    const viewQueryProject = (): void => {
+      const { groupId, artifactId, versionId } = editorStore.getProjectInfo();
+      applicationStore.navigator.openNewWindow(
+        generateStudioProjectViewUrl(
+          applicationStore.config.studioUrl,
+          groupId,
+          artifactId,
+          versionId,
+          undefined,
+        ),
+      );
+    };
+    const toggleLightDarkTheme = (): void =>
+      applicationStore.TEMPORARY__setIsLightThemeEnabled(
+        !applicationStore.TEMPORARY__isLightThemeEnabled,
+      );
+    const saveQuery = (): void => {
+      queryBuilderState
+        .saveQuery(async (lambda: RawLambda) => {
+          editorStore.setExportState(
+            new QueryExportState(
+              editorStore,
+              queryBuilderState,
+              lambda,
+              await editorStore.getExportConfiguration(lambda),
+            ),
+          );
+        })
+        .catch(applicationStore.alertUnhandledError);
+    };
 
-  return (
-    <div className="query-editor__header__content">
-      <div className="query-editor__header__content__main">
-        {renderQueryEditorHeaderLabel(editorStore)}
-      </div>
-      <div className="query-editor__header__actions">
-        <button
-          className="query-editor__header__action query-editor__header__action--simple btn--dark"
-          tabIndex={-1}
-          title="View project"
-          onClick={viewQueryProject}
-        >
-          <ExternalLinkSquareIcon />
-        </button>
-        {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
+    return (
+      <div className="query-editor__header__content">
+        <div className="query-editor__header__content__main">
+          {renderQueryEditorHeaderLabel(editorStore)}
+        </div>
+        <div className="query-editor__header__actions">
           <button
             className="query-editor__header__action query-editor__header__action--simple btn--dark"
             tabIndex={-1}
-            title="Toggle Light/Dark Theme"
-            onClick={toggleLightDarkTheme}
+            title="View project"
+            onClick={viewQueryProject}
           >
-            {applicationStore.TEMPORARY__isLightThemeEnabled ? (
-              <EmptyLightBulbIcon />
-            ) : (
-              <LightBulbIcon />
-            )}
+            <ExternalLinkSquareIcon />
           </button>
-        )}
-        <button
-          className="query-editor__header__action btn--dark"
-          tabIndex={-1}
-          onClick={saveQuery}
-        >
-          <div className="query-editor__header__action__icon">
-            <SaveIcon />
-            <QueryExport />
-          </div>
-          <div className="query-editor__header__action__label">Save</div>
-        </button>
+          {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
+            <button
+              className="query-editor__header__action query-editor__header__action--simple btn--dark"
+              tabIndex={-1}
+              title="Toggle Light/Dark Theme"
+              onClick={toggleLightDarkTheme}
+            >
+              {applicationStore.TEMPORARY__isLightThemeEnabled ? (
+                <EmptyLightBulbIcon />
+              ) : (
+                <LightBulbIcon />
+              )}
+            </button>
+          )}
+          <button
+            className="query-editor__header__action btn--dark"
+            tabIndex={-1}
+            onClick={saveQuery}
+          >
+            <div className="query-editor__header__action__icon">
+              <SaveIcon />
+              <QueryExport />
+            </div>
+            <div className="query-editor__header__action__label">Save</div>
+          </button>
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 export const QueryEditor = observer(() => {
   const applicationStore = useApplicationStore();
@@ -305,14 +310,18 @@ export const QueryEditor = observer(() => {
           >
             <ArrowLeftIcon />
           </button>
-          {!isLoadingEditor && <QueryEditorHeaderContent />}
+          {!isLoadingEditor && editorStore.queryBuilderState && (
+            <QueryEditorHeaderContent
+              queryBuilderState={editorStore.queryBuilderState}
+            />
+          )}
         </div>
         <div className="query-editor__content">
           <PanelLoadingIndicator isLoading={isLoadingEditor} />
-          {!isLoadingEditor && (
+          {!isLoadingEditor && editorStore.queryBuilderState && (
             <QueryBuilder queryBuilderState={editorStore.queryBuilderState} />
           )}
-          {isLoadingEditor && (
+          {(isLoadingEditor || !editorStore.queryBuilderState) && (
             <BlankPanelContent>
               {editorStore.initState.message ??
                 editorStore.graphManagerState.systemBuildState.message ??
@@ -338,46 +347,40 @@ export const ExistingQueryEditor = observer(() => {
   );
 });
 
-export const ServiceQueryEditor = observer(() => {
+export const ServiceQueryCreator = observer(() => {
   const applicationStore = useApplicationStore();
-  const params = useParams<ServiceQueryEditorPathParams>();
+  const params = useParams<ServiceQueryCreatorPathParams>();
   const gav = params[LEGEND_QUERY_PATH_PARAM_TOKEN.GAV];
   const servicePath = params[LEGEND_QUERY_PATH_PARAM_TOKEN.SERVICE_PATH];
-  const executionKey = getQueryParameters<ServiceQueryEditorQueryParams>(
+  const executionKey = getQueryParameters<ServiceQueryCreatorQueryParams>(
     applicationStore.navigator.getCurrentLocation(),
     true,
   )[LEGEND_QUERY_QUERY_PARAM_TOKEN.SERVICE_EXECUTION_KEY];
 
   return (
-    <ServiceQueryEditorStoreProvider
+    <ServiceQueryCreatorStoreProvider
       gav={gav}
       servicePath={servicePath}
       executionKey={executionKey}
     >
       <QueryEditor />
-    </ServiceQueryEditorStoreProvider>
+    </ServiceQueryCreatorStoreProvider>
   );
 });
 
-export const CreateQueryEditor = observer(() => {
-  const applicationStore = useApplicationStore();
-  const params = useParams<CreateQueryPathParams>();
+export const MappingQueryCreator = observer(() => {
+  const params = useParams<MappingQueryCreatorPathParams>();
   const gav = params[LEGEND_QUERY_PATH_PARAM_TOKEN.GAV];
   const mappingPath = params[LEGEND_QUERY_PATH_PARAM_TOKEN.MAPPING_PATH];
   const runtimePath = params[LEGEND_QUERY_PATH_PARAM_TOKEN.RUNTIME_PATH];
-  const classPath = getQueryParameters<ServiceQueryEditorQueryParams>(
-    applicationStore.navigator.getCurrentLocation(),
-    true,
-  )[LEGEND_QUERY_QUERY_PARAM_TOKEN.SERVICE_EXECUTION_KEY];
 
   return (
-    <CreateQueryEditorStoreProvider
+    <MappingQueryCreatorStoreProvider
       gav={gav}
       mappingPath={mappingPath}
       runtimePath={runtimePath}
-      classPath={classPath}
     >
       <QueryEditor />
-    </CreateQueryEditorStoreProvider>
+    </MappingQueryCreatorStoreProvider>
   );
 });

package/src/components/QueryEditorComponentTestUtils.tsx

@@ -22,6 +22,7 @@ import {
   type TEMPORARY__JestMock,
   MOBX__disableSpyOrMock,
   MOBX__enableSpyOrMock,
+  guaranteeNonNullable,
 } from '@finos/legend-shared';
 import {
   type GraphManagerState,
@@ -46,11 +47,12 @@ import { TEST__getTestLegendQueryApplicationConfig } from '../stores/QueryEditor
 import { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
 import { ExistingQueryEditor } from './QueryEditor.js';
 import { generateExistingQueryEditorRoute } from '../stores/LegendQueryRouter.js';
-import { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from './query-builder/QueryBuilder_TestID.js';
 import type { Entity } from '@finos/legend-storage';
 import { ExistingQueryEditorStore } from '../stores/QueryEditorStore.js';
 import { LegendQueryBaseStoreProvider } from './LegendQueryBaseStoreProvider.js';
 import type { LegendQueryApplicationStore } from '../stores/LegendQueryBaseStore.js';
+import type { QueryBuilderState } from '../stores/query-builder/QueryBuilderState.js';
 
 export const TEST__LegendQueryBaseStoreProvider: React.FC<{
   children: React.ReactNode;
@@ -98,7 +100,10 @@ export const TEST__setUpQueryEditor = async (
   mappingPath: string,
   runtimePath: string,
   rawMappingModelCoverageAnalysisResult?: RawMappingModelCoverageAnalysisResult,
-): Promise<RenderResult> => {
+): Promise<{
+  renderResult: RenderResult;
+  queryBuilderState: QueryBuilderState;
+}> => {
   const projectData = {
     id: 'test-id',
     groupId: 'test.group',
@@ -117,11 +122,12 @@ export const TEST__setUpQueryEditor = async (
   lightQuery.owner = 'test-artifact';
   lightQuery.isCurrentUserQuery = true;
 
-  await MOCK__editorStore.graphManagerState.initializeSystem();
-  await MOCK__editorStore.graphManagerState.graphManager.buildGraph(
-    MOCK__editorStore.graphManagerState.graph,
+  const graphManagerState = MOCK__editorStore.graphManagerState;
+  await graphManagerState.initializeSystem();
+  await graphManagerState.graphManager.buildGraph(
+    graphManagerState.graph,
     entities,
-    MOCK__editorStore.graphManagerState.graphBuildState,
+    graphManagerState.graphBuildState,
   );
 
   const query = new Query();
@@ -133,10 +139,10 @@ export const TEST__setUpQueryEditor = async (
   query.owner = lightQuery.owner;
   query.isCurrentUserQuery = lightQuery.isCurrentUserQuery;
   query.mapping = PackageableElementExplicitReference.create(
-    MOCK__editorStore.graphManagerState.graph.getMapping(mappingPath),
+    graphManagerState.graph.getMapping(mappingPath),
   );
   query.runtime = PackageableElementExplicitReference.create(
-    MOCK__editorStore.graphManagerState.graph.getRuntime(runtimePath),
+    graphManagerState.graph.getRuntime(runtimePath),
   );
   query.content = 'some content';
 
@@ -145,29 +151,25 @@ export const TEST__setUpQueryEditor = async (
     .spyOn(MOCK__editorStore.depotServerClient, 'getProject')
     .mockResolvedValue(projectData);
   jest
-    .spyOn(MOCK__editorStore.graphManagerState.graphManager, 'getLightQuery')
+    .spyOn(graphManagerState.graphManager, 'getLightQuery')
     .mockResolvedValue(lightQuery);
   jest
-    .spyOn(MOCK__editorStore.graphManagerState.graphManager, 'pureCodeToLambda')
+    .spyOn(graphManagerState.graphManager, 'pureCodeToLambda')
     .mockResolvedValue(new RawLambda(lambda.parameters, lambda.body));
   jest
-    .spyOn(MOCK__editorStore.graphManagerState.graphManager, 'getQuery')
+    .spyOn(graphManagerState.graphManager, 'getQuery')
     .mockResolvedValue(query);
   if (rawMappingModelCoverageAnalysisResult) {
     jest
-      .spyOn(
-        MOCK__editorStore.graphManagerState.graphManager,
-        'analyzeMappingModelCoverage',
-      )
+      .spyOn(graphManagerState.graphManager, 'analyzeMappingModelCoverage')
       .mockResolvedValue(
-        MOCK__editorStore.graphManagerState.graphManager.buildMappingModelCoverageAnalysisResult(
+        graphManagerState.graphManager.buildMappingModelCoverageAnalysisResult(
           rawMappingModelCoverageAnalysisResult,
         ),
       );
   }
   MOCK__editorStore.buildGraph = jest.fn<TEMPORARY__JestMock>();
-  MOCK__editorStore.graphManagerState.graphManager.initialize =
-    jest.fn<TEMPORARY__JestMock>();
+  graphManagerState.graphManager.initialize = jest.fn<TEMPORARY__JestMock>();
   MOBX__disableSpyOrMock();
 
   const history = createMemoryHistory({
@@ -194,5 +196,12 @@ export const TEST__setUpQueryEditor = async (
   await waitFor(() =>
     renderResult.getByTestId(QUERY_BUILDER_TEST_ID.QUERY_BUILDER),
   );
-  return renderResult;
+
+  return {
+    renderResult,
+    queryBuilderState: guaranteeNonNullable(
+      MOCK__editorStore.queryBuilderState,
+      `Query builder state should have been initialized`,
+    ),
+  };
 };

package/src/components/QueryEditorStoreProvider.tsx

@@ -19,9 +19,9 @@ import { useLocalObservable } from 'mobx-react-lite';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import {
   type QueryEditorStore,
-  CreateQueryEditorStore,
+  MappingQueryCreatorStore,
   ExistingQueryEditorStore,
-  ServiceQueryEditorStore,
+  ServiceQueryCreatorStore,
 } from '../stores/QueryEditorStore.js';
 import {
   parseGAVCoordinates,
@@ -59,20 +59,19 @@ export const ExistingQueryEditorStoreProvider: React.FC<{
   );
 };
 
-export const CreateQueryEditorStoreProvider: React.FC<{
+export const MappingQueryCreatorStoreProvider: React.FC<{
   children: React.ReactNode;
   gav: string;
   mappingPath: string;
   runtimePath: string;
-  classPath: string | undefined;
-}> = ({ children, gav, mappingPath, runtimePath, classPath }) => {
+}> = ({ children, gav, mappingPath, runtimePath }) => {
   const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
   const baseStore = useLegendQueryBaseStore();
   const store = useLocalObservable(
     () =>
-      new CreateQueryEditorStore(
+      new MappingQueryCreatorStore(
         applicationStore,
         depotServerClient,
         baseStore.pluginManager,
@@ -81,7 +80,6 @@ export const CreateQueryEditorStoreProvider: React.FC<{
         versionId,
         mappingPath,
         runtimePath,
-        classPath,
       ),
   );
   return (
@@ -91,7 +89,7 @@ export const CreateQueryEditorStoreProvider: React.FC<{
   );
 };
 
-export const ServiceQueryEditorStoreProvider: React.FC<{
+export const ServiceQueryCreatorStoreProvider: React.FC<{
   children: React.ReactNode;
   gav: string;
   servicePath: string;
@@ -103,7 +101,7 @@ export const ServiceQueryEditorStoreProvider: React.FC<{
   const baseStore = useLegendQueryBaseStore();
   const store = useLocalObservable(
     () =>
-      new ServiceQueryEditorStore(
+      new ServiceQueryCreatorStore(
         applicationStore,
         depotServerClient,
         baseStore.pluginManager,

package/src/components/QuerySetup.tsx

@@ -38,16 +38,16 @@ import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  generateCreateQueryEditorRoute,
+  generateMappingQueryCreatorRoute,
   generateExistingQueryEditorRoute,
-  generateServiceQueryEditorRoute,
+  generateServiceQueryCreatorRoute,
 } from '../stores/LegendQueryRouter.js';
 import {
   type QuerySetupState,
   type ServiceExecutionOption,
-  CreateQuerySetupState,
-  ExistingQuerySetupState,
-  ServiceQuerySetupState,
+  CreateMappingQuerySetupState,
+  EditExistingQuerySetupState,
+  LoadServiceQuerySetupState,
 } from '../stores/QuerySetupStore.js';
 import {
   useQuerySetupStore,
@@ -76,8 +76,8 @@ const buildQueryOption = (query: LightQuery): QueryOption => ({
   value: query,
 });
 
-const ExistingQuerySetup = observer(
-  (props: { querySetupState: ExistingQuerySetupState }) => {
+const EditExistingQuerySetup = observer(
+  (props: { querySetupState: EditExistingQuerySetupState }) => {
     const { querySetupState } = props;
     const applicationStore = useApplicationStore();
     const setupStore = useQuerySetupStore();
@@ -273,8 +273,8 @@ const buildVersionOption = (version: string): VersionOption => ({
   value: version,
 });
 
-const ServiceQuerySetup = observer(
-  (props: { querySetupState: ServiceQuerySetupState }) => {
+const LoadServiceQuerySetup = observer(
+  (props: { querySetupState: LoadServiceQuerySetupState }) => {
     const { querySetupState } = props;
     const applicationStore = useApplicationStore();
     const setupStore = useQuerySetupStore();
@@ -290,7 +290,7 @@ const ServiceQuerySetup = observer(
         querySetupState.currentServiceExecutionOption
       ) {
         applicationStore.navigator.goTo(
-          generateServiceQueryEditorRoute(
+          generateServiceQueryCreatorRoute(
             querySetupState.currentProject.groupId,
             querySetupState.currentProject.artifactId,
             querySetupState.currentVersionId,
@@ -510,8 +510,8 @@ const ServiceQuerySetup = observer(
   },
 );
 
-const CreateQuerySetup = observer(
-  (props: { querySetupState: CreateQuerySetupState }) => {
+const CreateMappingQuerySetup = observer(
+  (props: { querySetupState: CreateMappingQuerySetupState }) => {
     const { querySetupState } = props;
     const applicationStore = useApplicationStore();
     const setupStore = useQuerySetupStore();
@@ -528,7 +528,7 @@ const CreateQuerySetup = observer(
         querySetupState.currentRuntime
       ) {
         applicationStore.navigator.goTo(
-          generateCreateQueryEditorRoute(
+          generateMappingQueryCreatorRoute(
             querySetupState.currentProject.groupId,
             querySetupState.currentProject.artifactId,
             querySetupState.currentVersionId,
@@ -805,11 +805,11 @@ const QuerySetupLandingPage = observer(() => {
       <Fragment key={config.key}>{config.renderer(setupStore)}</Fragment>
     ));
   const editQuery = (): void =>
-    setupStore.setSetupState(new ExistingQuerySetupState(setupStore));
+    setupStore.setSetupState(new EditExistingQuerySetupState(setupStore));
   const loadServiceQuery = (): void =>
-    setupStore.setSetupState(new ServiceQuerySetupState(setupStore));
-  const createQuery = (): void =>
-    setupStore.setSetupState(new CreateQuerySetupState(setupStore));
+    setupStore.setSetupState(new LoadServiceQuerySetupState(setupStore));
+  const createMappingQuery = (): void =>
+    setupStore.setSetupState(new CreateMappingQuerySetupState(setupStore));
 
   useEffect(() => {
     setupStore.initialize();
@@ -854,13 +854,13 @@ const QuerySetupLandingPage = observer(() => {
               </button>
               <button
                 className="query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--create-query"
-                onClick={createQuery}
+                onClick={createMappingQuery}
               >
                 <div className="query-setup__landing-page__option__icon">
                   <PlusIcon />
                 </div>
                 <div className="query-setup__landing-page__option__label">
-                  Create a new query
+                  Create new query on a mapping
                 </div>
               </button>
             </div>
@@ -878,12 +878,12 @@ export const QuerySetup = withQuerySetupStore(
     const renderQuerySetupScreen = (
       setupState: QuerySetupState,
     ): React.ReactNode => {
-      if (setupState instanceof ExistingQuerySetupState) {
-        return <ExistingQuerySetup querySetupState={setupState} />;
-      } else if (setupState instanceof ServiceQuerySetupState) {
-        return <ServiceQuerySetup querySetupState={setupState} />;
-      } else if (setupState instanceof CreateQuerySetupState) {
-        return <CreateQuerySetup querySetupState={setupState} />;
+      if (setupState instanceof EditExistingQuerySetupState) {
+        return <EditExistingQuerySetup querySetupState={setupState} />;
+      } else if (setupState instanceof LoadServiceQuerySetupState) {
+        return <LoadServiceQuerySetup querySetupState={setupState} />;
+      } else if (setupState instanceof CreateMappingQuerySetupState) {
+        return <CreateMappingQuerySetup querySetupState={setupState} />;
       }
       const extraQuerySetupRenderers = setupStore.pluginManager
         .getApplicationPlugins()