@finos/legend-application-query 12.0.9 → 13.0.1

package/src/components/QueryProductionizerSetup.tsx

@@ -14,20 +14,10 @@
  * limitations under the License.
  */
 
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  BlankPanelContent,
-  clsx,
-  CustomSelectorInput,
-  PanelLoadingIndicator,
-  SearchIcon,
-  type SelectComponent,
-} from '@finos/legend-art';
-import { debounce, guaranteeType } from '@finos/legend-shared';
-import { flowResult } from 'mobx';
+import { ArrowLeftIcon } from '@finos/legend-art';
+import { guaranteeType } from '@finos/legend-shared';
 import { observer, useLocalObservable } from 'mobx-react-lite';
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext } from 'react';
 import { useApplicationStore } from '@finos/legend-application';
 import {
   useLegendQueryApplicationStore,
@@ -35,15 +25,8 @@ import {
 } from './LegendQueryFrameworkProvider.js';
 import { QueryProductionizerSetupStore } from '../stores/QueryProductionizerSetupStore.js';
 import { BaseQuerySetup, BaseQuerySetupStoreContext } from './QuerySetup.js';
-import {
-  buildQueryOption,
-  type QueryOption,
-} from '@finos/legend-query-builder';
 import { generateQuerySetupRoute } from '../__lib__/LegendQueryNavigation.js';
-import {
-  CODE_EDITOR_LANGUAGE,
-  CodeEditor,
-} from '@finos/legend-lego/code-editor';
+import { QueryLoader } from '@finos/legend-query-builder';
 
 const QueryProductionizerSetupStoreProvider: React.FC<{
   children: React.ReactNode;
@@ -74,8 +57,6 @@ const useQueryProductionizerSetupStore = (): QueryProductionizerSetupStore =>
 const QueryProductionizerSetupContent = observer(() => {
   const applicationStore = useApplicationStore();
   const setupStore = useQueryProductionizerSetupStore();
-  const querySearchRef = useRef<SelectComponent>(null);
-  const [searchText, setSearchText] = useState('');
 
   // actions
   const back = (): void => {
@@ -83,53 +64,6 @@ const QueryProductionizerSetupContent = observer(() => {
       generateQuerySetupRoute(),
     );
   };
-  const next = (): void => {
-    if (setupStore.currentQuery) {
-      setupStore
-        .loadQueryProductionizer()
-        .catch(applicationStore.alertUnhandledError);
-    }
-  };
-  const canProceed = setupStore.currentQuery;
-
-  // query
-  const queryOptions = setupStore.queries.map(buildQueryOption);
-  const selectedQueryOption = setupStore.currentQuery
-    ? buildQueryOption(setupStore.currentQuery)
-    : null;
-  const onQueryOptionChange = (option: QueryOption | null): void => {
-    if (option?.value !== setupStore.currentQuery) {
-      setupStore.setCurrentQuery(option?.value.id);
-    }
-  };
-
-  // search text
-  const debouncedLoadQueries = useMemo(
-    () =>
-      debounce((input: string): void => {
-        flowResult(setupStore.loadQueries(input)).catch(
-          applicationStore.alertUnhandledError,
-        );
-      }, 500),
-    [applicationStore, setupStore],
-  );
-  const onSearchTextChange = (value: string): void => {
-    if (value !== searchText) {
-      setSearchText(value);
-      debouncedLoadQueries.cancel();
-      debouncedLoadQueries(value);
-    }
-  };
-
-  useEffect(() => {
-    flowResult(setupStore.loadQueries('')).catch(
-      applicationStore.alertUnhandledError,
-    );
-  }, [setupStore, applicationStore]);
-
-  useEffect(() => {
-    querySearchRef.current?.focus();
-  }, []);
 
   return (
     <div className="query-setup__wizard query-setup__productionize-query">
@@ -144,61 +78,12 @@ const QueryProductionizerSetupContent = observer(() => {
         <div className="query-setup__wizard__header__title">
           Productionizing an existing query...
         </div>
-        <button
-          className={clsx('query-setup__wizard__header__btn', {
-            'query-setup__wizard__header__btn--ready': canProceed,
-          })}
-          onClick={next}
-          disabled={!canProceed}
-          title="Productionize query"
-        >
-          <ArrowRightIcon />
-        </button>
       </div>
-      <div className="query-setup__wizard__content">
-        <div className="query-setup__wizard__group query-setup__wizard__group--inline">
-          <div className="query-setup__wizard__group__title">
-            <SearchIcon />
-          </div>
-          <CustomSelectorInput
-            ref={querySearchRef}
-            className="query-setup__wizard__selector"
-            options={queryOptions}
-            isLoading={setupStore.loadQueriesState.isInProgress}
-            onInputChange={onSearchTextChange}
-            inputValue={searchText}
-            onChange={onQueryOptionChange}
-            value={selectedQueryOption}
-            placeholder="Search for query by name..."
-            isClearable={true}
-            escapeClearsValue={true}
-            darkMode={true}
-          />
-        </div>
-        <div className="query-setup__productionize-query__preview">
-          <PanelLoadingIndicator
-            isLoading={setupStore.loadQueryState.isInProgress}
-          />
-          {setupStore.currentQuery && (
-            <>
-              {!setupStore.currentQueryInfo && (
-                <BlankPanelContent>{`Can't preview query`}</BlankPanelContent>
-              )}
-              {setupStore.currentQueryInfo && (
-                <CodeEditor
-                  inputValue={setupStore.currentQueryInfo.content}
-                  isReadOnly={true}
-                  language={CODE_EDITOR_LANGUAGE.PURE}
-                  showMiniMap={false}
-                  hideGutter={true}
-                />
-              )}
-            </>
-          )}
-          {!setupStore.currentQuery && (
-            <BlankPanelContent>No query to preview</BlankPanelContent>
-          )}
-        </div>
+      <div className="query-setup__productionize-query__content">
+        <QueryLoader
+          queryLoaderState={setupStore.queryLoaderState}
+          loadActionLabel="productionize query"
+        />
       </div>
     </div>
   );

package/src/components/QuerySetup.tsx

@@ -34,7 +34,7 @@ import {
 } from '@finos/legend-art';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { observer, useLocalObservable } from 'mobx-react-lite';
-import React, { createContext, useContext, useEffect } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 import { LEGEND_QUERY_SETUP_QUERY_PARAM_TOKEN } from '../__lib__/LegendQueryNavigation.js';
 import {
   QuerySetupLandingPageStore,

package/src/index.ts

@@ -21,7 +21,10 @@ export * from './application/LegendQueryPluginManager.js';
 
 export * from './__lib__/LegendQueryEvent.js';
 export * from './__lib__/LegendQueryEventHelper.js';
-export { generateExistingQueryEditorRoute } from './__lib__/LegendQueryNavigation.js';
+export {
+  generateExistingQueryEditorRoute,
+  generateServiceQueryCreatorRoute,
+} from './__lib__/LegendQueryNavigation.js';
 
 export {
   useLegendQueryApplicationStore,

package/src/stores/EditExistingQuerySetupStore.ts

@@ -14,33 +14,18 @@
  * limitations under the License.
  */
 
-import {
-  DEFAULT_TYPEAHEAD_SEARCH_LIMIT,
-  DEFAULT_TYPEAHEAD_SEARCH_MINIMUM_SEARCH_LENGTH,
-} from '@finos/legend-application';
-import {
-  QuerySearchSpecification,
-  type LightQuery,
-  type QueryInfo,
-} from '@finos/legend-graph';
+import { QueryLoaderState } from '@finos/legend-query-builder';
+import { BaseQuerySetupStore } from './QuerySetupStore.js';
 import type { DepotServerClient } from '@finos/legend-server-depot';
-import {
-  ActionState,
-  assertErrorThrown,
-  type GeneratorFn,
-} from '@finos/legend-shared';
-import { action, flow, makeObservable, observable } from 'mobx';
+import { quantifyList } from '@finos/legend-shared';
+import { LegendQueryUserDataHelper } from '../__lib__/LegendQueryUserDataHelper.js';
 import type { LegendQueryApplicationStore } from './LegendQueryBaseStore.js';
-import { BaseQuerySetupStore } from './QuerySetupStore.js';
+import type { LightQuery } from '@finos/legend-graph';
+import { generateExistingQueryEditorRoute } from '../__lib__/LegendQueryNavigation.js';
+import { LegendQueryTelemetryHelper } from '../__lib__/LegendQueryTelemetryHelper.js';
 
 export class EditExistingQuerySetupStore extends BaseQuerySetupStore {
-  readonly loadQueriesState = ActionState.create();
-  readonly loadQueryState = ActionState.create();
-
-  queries: LightQuery[] = [];
-  currentQuery?: LightQuery | undefined;
-  currentQueryInfo?: QueryInfo | undefined;
-  showCurrentUserQueriesOnly = false;
+  readonly queryLoaderState: QueryLoaderState;
 
   constructor(
     applicationStore: LegendQueryApplicationStore,
@@ -48,69 +33,51 @@ export class EditExistingQuerySetupStore extends BaseQuerySetupStore {
   ) {
     super(applicationStore, depotServerClient);
 
-    makeObservable(this, {
-      queries: observable,
-      currentQuery: observable,
-      currentQueryInfo: observable,
-      showCurrentUserQueriesOnly: observable,
-      setShowCurrentUserQueriesOnly: action,
-      setCurrentQuery: flow,
-      loadQueries: flow,
-    });
-  }
-
-  setShowCurrentUserQueriesOnly(val: boolean): void {
-    this.showCurrentUserQueriesOnly = val;
-  }
-
-  *setCurrentQuery(queryId: string | undefined): GeneratorFn<void> {
-    if (queryId) {
-      try {
-        this.loadQueryState.inProgress();
-        this.currentQuery =
-          (yield this.graphManagerState.graphManager.getLightQuery(
-            queryId,
-          )) as LightQuery;
-        const queryInfo =
-          (yield this.graphManagerState.graphManager.getQueryInfo(
-            queryId,
-          )) as QueryInfo;
-        queryInfo.content =
-          (yield this.graphManagerState.graphManager.prettyLambdaContent(
-            queryInfo.content,
-          )) as string;
-        this.currentQueryInfo = queryInfo;
-      } catch (error) {
-        assertErrorThrown(error);
-        this.applicationStore.notificationService.notifyError(error);
-      } finally {
-        this.loadQueryState.reset();
-      }
-    } else {
-      this.currentQuery = undefined;
-    }
-  }
-
-  *loadQueries(searchText: string): GeneratorFn<void> {
-    const isValidSearchString =
-      searchText.length >= DEFAULT_TYPEAHEAD_SEARCH_MINIMUM_SEARCH_LENGTH;
-    this.loadQueriesState.inProgress();
-    try {
-      const searchSpecification = new QuerySearchSpecification();
-      searchSpecification.searchTerm = isValidSearchString
-        ? searchText
-        : undefined;
-      searchSpecification.limit = DEFAULT_TYPEAHEAD_SEARCH_LIMIT;
-      searchSpecification.showCurrentUserQueriesOnly =
-        this.showCurrentUserQueriesOnly;
-      this.queries = (yield this.graphManagerState.graphManager.searchQueries(
-        searchSpecification,
-      )) as LightQuery[];
-      this.loadQueriesState.pass();
-    } catch (error) {
-      assertErrorThrown(error);
-      this.applicationStore.notificationService.notifyError(error);
-      this.loadQueriesState.fail();
-    }
+    this.queryLoaderState = new QueryLoaderState(
+      applicationStore,
+      this.graphManagerState,
+      {
+        loadQuery: (query: LightQuery): void => {
+          this.queryLoaderState.setQueryLoaderDialogOpen(false);
+          this.applicationStore.navigationService.navigator.goToLocation(
+            generateExistingQueryEditorRoute(query.id),
+            { ignoreBlocking: true },
+          );
+        },
+        fetchDefaultQueries: () =>
+          this.graphManagerState.graphManager.getQueries(
+            LegendQueryUserDataHelper.getRecentlyViewedQueries(
+              this.applicationStore.userDataService,
+            ),
+          ),
+        generateDefaultQueriesSummaryText: (queries) =>
+          queries.length
+            ? `Showing ${quantifyList(
+                queries,
+                'recently viewed query',
+                'recently viewed queries',
+              )}`
+            : `No recently viewed queries`,
+        onQueryDeleted: (query): void =>
+          LegendQueryUserDataHelper.removeRecentlyViewedQuery(
+            this.applicationStore.userDataService,
+            query.id,
+          ),
+        onQueryRenamed: (query): void => {
+          LegendQueryTelemetryHelper.logEvent_RenameQuerySucceeded(
+            applicationStore.telemetryService,
+            {
+              query: {
+                id: query.id,
+                name: query.name,
+                groupId: query.groupId,
+                artifactId: query.artifactId,
+                versionId: query.versionId,
+              },
+            },
+          );
+        },
+      },
+    );
   }
 }

package/src/stores/LegendQueryApplicationPlugin.ts

@@ -64,7 +64,8 @@ export type QueryEditorActionConfiguration = {
   ) => React.ReactNode | undefined;
 };
 
-export type QueryEditorHelpMenuEntry = {
+export type QueryEditorHelpMenuActionConfiguration = {
+  key: string;
   title?: string;
   label: string;
   onClick: () => void;
@@ -88,9 +89,9 @@ export abstract class LegendQueryApplicationPlugin extends LegendApplicationPlug
   getExtraQuerySetupActionConfigurations?(): QuerySetupActionConfiguration[];
 
   /**
-   * Get the list of help items for query.
+   * Get the list of query editor help menu action configurations.
    */
-  getExtraQueryEditorHelpMenuEntries?(): QueryEditorHelpMenuEntry[];
+  getExtraQueryEditorHelpMenuActionConfigurations?(): QueryEditorHelpMenuActionConfiguration[];
 
   /**
    * Get the list of existing query editor state builders.