@finos/legend-application-query 5.0.0

package/src/components/QueryEditor.tsx

@@ -0,0 +1,345 @@
+/**
+ * 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 {
+  Dialog,
+  ArrowLeftIcon,
+  ExternalLinkSquareIcon,
+  PanelLoadingIndicator,
+  RobotIcon,
+  SaveIcon,
+  BlankPanelContent,
+} from '@finos/legend-art';
+import { getQueryParameters } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useRef } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { useParams } from 'react-router';
+import {
+  type CreateQueryPathParams,
+  type ExistingQueryEditorPathParams,
+  type ServiceQueryEditorPathParams,
+  type ServiceQueryEditorQueryParams,
+  LEGEND_QUERY_ROUTE_PATTERN,
+  LEGEND_QUERY_QUERY_PARAM_TOKEN,
+  LEGEND_QUERY_PATH_PARAM_TOKEN,
+  generateStudioProjectViewUrl,
+} from '../stores/LegendQueryRouter.js';
+import {
+  type QueryEditorStore,
+  CreateQueryEditorStore,
+  ExistingQueryEditorStore,
+  QueryExportState,
+  ServiceQueryEditorStore,
+} from '../stores/QueryEditorStore.js';
+import { QueryBuilder } from './QueryBuilder.js';
+import { useApplicationStore } from '@finos/legend-application';
+import {
+  CreateQueryEditorStoreProvider,
+  ExistingQueryEditorStoreProvider,
+  ServiceQueryEditorStoreProvider,
+  useQueryEditorStore,
+} from './QueryEditorStoreProvider.js';
+import {
+  extractElementNameFromPath,
+  type RawLambda,
+} from '@finos/legend-graph';
+import { flowResult } from 'mobx';
+import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
+
+const QueryExportDialogContent = observer(
+  (props: { exportState: QueryExportState }) => {
+    const { exportState } = props;
+    const applicationStore = useApplicationStore();
+    const allowCreate = exportState.allowPersist;
+    const allowSave = exportState.allowPersist && exportState.allowUpdate;
+    const create = applicationStore.guardUnhandledError(() =>
+      exportState.persistQuery(true),
+    );
+    const save = applicationStore.guardUnhandledError(() =>
+      exportState.persistQuery(false),
+    );
+
+    // name
+    const nameInputRef = useRef<HTMLInputElement>(null);
+    const changeName: React.ChangeEventHandler<HTMLInputElement> = (event) =>
+      exportState.setQueryName(event.target.value);
+
+    useEffect(() => {
+      nameInputRef.current?.focus();
+    }, []);
+
+    return (
+      <>
+        <div className="modal__body">
+          <PanelLoadingIndicator
+            isLoading={exportState.persistQueryState.isInProgress}
+          />
+          <input
+            ref={nameInputRef}
+            className="input input--dark"
+            spellCheck={false}
+            value={exportState.queryName}
+            onChange={changeName}
+          />
+        </div>
+        <div className="modal__footer">
+          {allowSave && (
+            <button
+              className="btn modal__footer__close-btn btn--dark"
+              onClick={save}
+            >
+              Save
+            </button>
+          )}
+          <button
+            className="btn modal__footer__close-btn btn--dark"
+            disabled={!allowCreate}
+            onClick={create}
+          >
+            Create
+          </button>
+        </div>
+      </>
+    );
+  },
+);
+
+const QueryExport = observer(() => {
+  const editorStore = useQueryEditorStore();
+  const exportState = editorStore.exportState;
+  const close = (): void => editorStore.setExportState(undefined);
+
+  return (
+    <Dialog
+      open={Boolean(exportState)}
+      onClose={close}
+      classes={{
+        root: 'editor-modal__root-container',
+        container: 'editor-modal__container',
+        paper: 'editor-modal__content',
+      }}
+    >
+      <div className="modal modal--dark query-export">
+        <div className="modal__header">
+          <div className="modal__title">Save Query</div>
+        </div>
+        {exportState && <QueryExportDialogContent exportState={exportState} />}
+      </div>
+    </Dialog>
+  );
+});
+
+const renderQueryEditorHeaderLabel = (
+  editorStore: QueryEditorStore,
+): React.ReactNode => {
+  if (editorStore instanceof ExistingQueryEditorStore) {
+    return (
+      <div className="query-editor__header__label query-editor__header__label--existing-query">
+        {editorStore.query.name}
+      </div>
+    );
+  } else if (editorStore instanceof CreateQueryEditorStore) {
+    return (
+      <div className="query-editor__header__label query-editor__header__label--create-query">
+        New Query
+      </div>
+    );
+  } else if (editorStore instanceof ServiceQueryEditorStore) {
+    return (
+      <div className="query-editor__header__label query-editor__header__label--service-query">
+        <RobotIcon className="query-editor__header__label__icon" />
+        {extractElementNameFromPath(editorStore.servicePath)}
+        {editorStore.executionKey && (
+          <div className="query-editor__header__label__tag">
+            {editorStore.executionKey}
+          </div>
+        )}
+      </div>
+    );
+  }
+  const extraQueryEditorHeaderLabelers = editorStore.pluginManager
+    .getApplicationPlugins()
+    .flatMap((plugin) => plugin.getExtraQueryEditorHeaderLabelers?.() ?? []);
+  for (const labeler of extraQueryEditorHeaderLabelers) {
+    const label = labeler(editorStore);
+    if (label) {
+      return label;
+    }
+  }
+  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 saveQuery = (): void => {
+    editorStore.queryBuilderState
+      .saveQuery(async (lambda: RawLambda) => {
+        editorStore.setExportState(
+          new QueryExportState(
+            editorStore,
+            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>
+        <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>
+  );
+});
+
+export const QueryEditor = observer(() => {
+  const applicationStore = useApplicationStore();
+  const editorStore = useQueryEditorStore();
+  const isLoadingEditor = !editorStore.initState.hasCompleted;
+  const backToMainMenu = (): void =>
+    applicationStore.navigator.goTo(LEGEND_QUERY_ROUTE_PATTERN.SETUP);
+
+  useEffect(() => {
+    flowResult(editorStore.initialize()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  }, [editorStore, applicationStore]);
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div className="query-editor">
+        <div className="query-editor__header">
+          <button
+            className="query-editor__header__back-btn btn--dark"
+            onClick={backToMainMenu}
+            title="Back to Main Menu"
+          >
+            <ArrowLeftIcon />
+          </button>
+          {!isLoadingEditor && <QueryEditorHeaderContent />}
+        </div>
+        <div className="query-editor__content">
+          <PanelLoadingIndicator isLoading={isLoadingEditor} />
+          {!isLoadingEditor && (
+            <QueryBuilder queryBuilderState={editorStore.queryBuilderState} />
+          )}
+          {isLoadingEditor && (
+            <BlankPanelContent>
+              {editorStore.initState.message ??
+                editorStore.graphManagerState.systemBuildState.message ??
+                editorStore.graphManagerState.dependenciesBuildState.message ??
+                editorStore.graphManagerState.generationsBuildState.message ??
+                editorStore.graphManagerState.graphBuildState.message}
+            </BlankPanelContent>
+          )}
+        </div>
+      </div>
+    </DndProvider>
+  );
+});
+
+export const ExistingQueryEditor = observer(() => {
+  const params = useParams<ExistingQueryEditorPathParams>();
+  const queryId = params[LEGEND_QUERY_PATH_PARAM_TOKEN.QUERY_ID];
+
+  return (
+    <ExistingQueryEditorStoreProvider queryId={queryId}>
+      <QueryEditor />
+    </ExistingQueryEditorStoreProvider>
+  );
+});
+
+export const ServiceQueryEditor = observer(() => {
+  const applicationStore = useApplicationStore();
+  const params = useParams<ServiceQueryEditorPathParams>();
+  const gav = params[LEGEND_QUERY_PATH_PARAM_TOKEN.GAV];
+  const servicePath = params[LEGEND_QUERY_PATH_PARAM_TOKEN.SERVICE_PATH];
+  const executionKey = getQueryParameters<ServiceQueryEditorQueryParams>(
+    applicationStore.navigator.getCurrentLocation(),
+    true,
+  )[LEGEND_QUERY_QUERY_PARAM_TOKEN.SERVICE_EXECUTION_KEY];
+
+  return (
+    <ServiceQueryEditorStoreProvider
+      gav={gav}
+      servicePath={servicePath}
+      executionKey={executionKey}
+    >
+      <QueryEditor />
+    </ServiceQueryEditorStoreProvider>
+  );
+});
+
+export const CreateQueryEditor = observer(() => {
+  const applicationStore = useApplicationStore();
+  const params = useParams<CreateQueryPathParams>();
+  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
+      gav={gav}
+      mappingPath={mappingPath}
+      runtimePath={runtimePath}
+      classPath={classPath}
+    >
+      <QueryEditor />
+    </CreateQueryEditorStoreProvider>
+  );
+});

package/src/components/QueryEditorComponentTestUtils.tsx

@@ -0,0 +1,200 @@
+/**
+ * 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 { jest } from '@jest/globals';
+import { type RenderResult, render, waitFor } from '@testing-library/react';
+import { Router } from 'react-router';
+import { createMemoryHistory } from 'history';
+import {
+  type TEMPORARY__JestMock,
+  MOBX__disableSpyOrMock,
+  MOBX__enableSpyOrMock,
+} from '@finos/legend-shared';
+import {
+  type GraphManagerState,
+  Query,
+  LightQuery,
+  RawLambda,
+  PackageableElementExplicitReference,
+  type RawMappingModelCoverageAnalysisResult,
+} from '@finos/legend-graph';
+import {
+  type DepotServerClient,
+  TEST__DepotServerClientProvider,
+  TEST__getTestDepotServerClient,
+} from '@finos/legend-server-depot';
+import {
+  TEST__provideMockedWebApplicationNavigator,
+  TEST__ApplicationStoreProvider,
+  WebApplicationNavigator,
+  TEST__getTestApplicationStore,
+} from '@finos/legend-application';
+import { TEST__getTestLegendQueryApplicationConfig } from '../stores/QueryEditorStoreTestUtils.js';
+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 type { Entity } from '@finos/legend-storage';
+import { ExistingQueryEditorStore } from '../stores/QueryEditorStore.js';
+import { LegendQueryBaseStoreProvider } from './LegendQueryBaseStoreProvider.js';
+import type { LegendQueryApplicationStore } from '../stores/LegendQueryBaseStore.js';
+
+export const TEST__LegendQueryBaseStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => (
+  <LegendQueryBaseStoreProvider
+    pluginManager={LegendQueryPluginManager.create()}
+  >
+    {children}
+  </LegendQueryBaseStoreProvider>
+);
+
+const TEST_QUERY_ID = 'test-query-id';
+
+export const TEST__provideMockedQueryEditorStore = (customization?: {
+  mock?: ExistingQueryEditorStore;
+  applicationStore?: LegendQueryApplicationStore;
+  depotServerClient?: DepotServerClient;
+  graphManagerState?: GraphManagerState;
+  pluginManager?: LegendQueryPluginManager;
+}): ExistingQueryEditorStore => {
+  const pluginManager =
+    customization?.pluginManager ?? LegendQueryPluginManager.create();
+  const value =
+    customization?.mock ??
+    new ExistingQueryEditorStore(
+      customization?.applicationStore ??
+        TEST__getTestApplicationStore(
+          TEST__getTestLegendQueryApplicationConfig(),
+          pluginManager,
+        ),
+      customization?.depotServerClient ?? TEST__getTestDepotServerClient(),
+      pluginManager,
+      TEST_QUERY_ID,
+    );
+  const MOCK__QueryEditorStoreProvider = require('./QueryEditorStoreProvider.js'); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+  MOCK__QueryEditorStoreProvider.useQueryEditorStore = jest.fn();
+  MOCK__QueryEditorStoreProvider.useQueryEditorStore.mockReturnValue(value);
+  return value;
+};
+
+export const TEST__setUpQueryEditor = async (
+  MOCK__editorStore: ExistingQueryEditorStore,
+  entities: Entity[],
+  lambda: RawLambda,
+  mappingPath: string,
+  runtimePath: string,
+  rawMappingModelCoverageAnalysisResult?: RawMappingModelCoverageAnalysisResult,
+): Promise<RenderResult> => {
+  const projectData = {
+    id: 'test-id',
+    groupId: 'test.group',
+    artifactId: 'test-artifact',
+    projectId: 'test-project-id',
+    versions: ['0.0.0'],
+    latestVersion: '0.0.0',
+  };
+
+  const lightQuery = new LightQuery();
+  lightQuery.name = 'MyTestQuery';
+  lightQuery.id = TEST_QUERY_ID;
+  lightQuery.versionId = '0.0.0';
+  lightQuery.groupId = 'test.group';
+  lightQuery.artifactId = 'test-artifact';
+  lightQuery.owner = 'test-artifact';
+  lightQuery.isCurrentUserQuery = true;
+
+  await MOCK__editorStore.graphManagerState.initializeSystem();
+  await MOCK__editorStore.graphManagerState.graphManager.buildGraph(
+    MOCK__editorStore.graphManagerState.graph,
+    entities,
+    MOCK__editorStore.graphManagerState.graphBuildState,
+  );
+
+  const query = new Query();
+  query.name = lightQuery.name;
+  query.id = lightQuery.id;
+  query.versionId = lightQuery.versionId;
+  query.groupId = lightQuery.groupId;
+  query.artifactId = lightQuery.artifactId;
+  query.owner = lightQuery.owner;
+  query.isCurrentUserQuery = lightQuery.isCurrentUserQuery;
+  query.mapping = PackageableElementExplicitReference.create(
+    MOCK__editorStore.graphManagerState.graph.getMapping(mappingPath),
+  );
+  query.runtime = PackageableElementExplicitReference.create(
+    MOCK__editorStore.graphManagerState.graph.getRuntime(runtimePath),
+  );
+  query.content = 'some content';
+
+  MOBX__enableSpyOrMock();
+  jest
+    .spyOn(MOCK__editorStore.depotServerClient, 'getProject')
+    .mockResolvedValue(projectData);
+  jest
+    .spyOn(MOCK__editorStore.graphManagerState.graphManager, 'getLightQuery')
+    .mockResolvedValue(lightQuery);
+  jest
+    .spyOn(MOCK__editorStore.graphManagerState.graphManager, 'pureCodeToLambda')
+    .mockResolvedValue(new RawLambda(lambda.parameters, lambda.body));
+  jest
+    .spyOn(MOCK__editorStore.graphManagerState.graphManager, 'getQuery')
+    .mockResolvedValue(query);
+  if (rawMappingModelCoverageAnalysisResult) {
+    jest
+      .spyOn(
+        MOCK__editorStore.graphManagerState.graphManager,
+        'analyzeMappingModelCoverage',
+      )
+      .mockResolvedValue(
+        MOCK__editorStore.graphManagerState.graphManager.buildMappingModelCoverageAnalysisResult(
+          rawMappingModelCoverageAnalysisResult,
+        ),
+      );
+  }
+  MOCK__editorStore.buildGraph = jest.fn<TEMPORARY__JestMock>();
+  // TODO: we need to think of how we will mock these calls when we modularize
+  // See https://github.com/finos/legend-studio/issues/731
+  MOCK__editorStore.graphManagerState.graphManager.initialize =
+    jest.fn<TEMPORARY__JestMock>();
+  MOBX__disableSpyOrMock();
+
+  const history = createMemoryHistory({
+    initialEntries: [generateExistingQueryEditorRoute(lightQuery.id)],
+  });
+  const navigator = new WebApplicationNavigator(history);
+  MOCK__editorStore.applicationStore.navigator = navigator;
+  TEST__provideMockedWebApplicationNavigator({ mock: navigator });
+
+  const renderResult = render(
+    <Router history={history}>
+      <TEST__ApplicationStoreProvider
+        config={TEST__getTestLegendQueryApplicationConfig()}
+        pluginManager={LegendQueryPluginManager.create()}
+      >
+        <TEST__DepotServerClientProvider>
+          <TEST__LegendQueryBaseStoreProvider>
+            <ExistingQueryEditor />
+          </TEST__LegendQueryBaseStoreProvider>
+        </TEST__DepotServerClientProvider>
+      </TEST__ApplicationStoreProvider>
+    </Router>,
+  );
+  await waitFor(() =>
+    renderResult.getByTestId(QUERY_BUILDER_TEST_ID.QUERY_BUILDER),
+  );
+  return renderResult;
+};

package/src/components/QueryEditorStoreProvider.tsx

@@ -0,0 +1,128 @@
+/**
+ * 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 { createContext, useContext } from 'react';
+import { useLocalObservable } from 'mobx-react-lite';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import {
+  type QueryEditorStore,
+  CreateQueryEditorStore,
+  ExistingQueryEditorStore,
+  ServiceQueryEditorStore,
+} from '../stores/QueryEditorStore.js';
+import {
+  parseGAVCoordinates,
+  useDepotServerClient,
+} from '@finos/legend-server-depot';
+import {
+  useLegendQueryApplicationStore,
+  useLegendQueryBaseStore,
+} from './LegendQueryBaseStoreProvider.js';
+
+export const QueryEditorStoreContext = createContext<
+  QueryEditorStore | undefined
+>(undefined);
+
+export const ExistingQueryEditorStoreProvider: React.FC<{
+  children: React.ReactNode;
+  queryId: string;
+}> = ({ children, queryId }) => {
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useDepotServerClient();
+  const baseStore = useLegendQueryBaseStore();
+  const store = useLocalObservable(
+    () =>
+      new ExistingQueryEditorStore(
+        applicationStore,
+        depotServerClient,
+        baseStore.pluginManager,
+        queryId,
+      ),
+  );
+  return (
+    <QueryEditorStoreContext.Provider value={store}>
+      {children}
+    </QueryEditorStoreContext.Provider>
+  );
+};
+
+export const CreateQueryEditorStoreProvider: React.FC<{
+  children: React.ReactNode;
+  gav: string;
+  mappingPath: string;
+  runtimePath: string;
+  classPath: string | undefined;
+}> = ({ children, gav, mappingPath, runtimePath, classPath }) => {
+  const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useDepotServerClient();
+  const baseStore = useLegendQueryBaseStore();
+  const store = useLocalObservable(
+    () =>
+      new CreateQueryEditorStore(
+        applicationStore,
+        depotServerClient,
+        baseStore.pluginManager,
+        groupId,
+        artifactId,
+        versionId,
+        mappingPath,
+        runtimePath,
+        classPath,
+      ),
+  );
+  return (
+    <QueryEditorStoreContext.Provider value={store}>
+      {children}
+    </QueryEditorStoreContext.Provider>
+  );
+};
+
+export const ServiceQueryEditorStoreProvider: React.FC<{
+  children: React.ReactNode;
+  gav: string;
+  servicePath: string;
+  executionKey: string | undefined;
+}> = ({ children, gav, servicePath, executionKey }) => {
+  const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useDepotServerClient();
+  const baseStore = useLegendQueryBaseStore();
+  const store = useLocalObservable(
+    () =>
+      new ServiceQueryEditorStore(
+        applicationStore,
+        depotServerClient,
+        baseStore.pluginManager,
+        groupId,
+        artifactId,
+        versionId,
+        servicePath,
+        executionKey,
+      ),
+  );
+  return (
+    <QueryEditorStoreContext.Provider value={store}>
+      {children}
+    </QueryEditorStoreContext.Provider>
+  );
+};
+
+export const useQueryEditorStore = (): QueryEditorStore =>
+  guaranteeNonNullable(
+    useContext(QueryEditorStoreContext),
+    `Can't find query editor store in context`,
+  );