@finos/legend-application-query 7.0.0 → 8.0.0

package/src/components/QuerySetup.tsx

@@ -22,12 +22,14 @@ import {
   clsx,
   CustomSelectorInput,
   PanelLoadingIndicator,
-  PencilIcon,
   PlusIcon,
   RobotIcon,
   SearchIcon,
   UserIcon,
   QuestionCircleIcon,
+  DroidIcon,
+  createFilter,
+  ManageSearchIcon,
 } from '@finos/legend-art';
 import {
   debounce,
@@ -47,7 +49,9 @@ import {
   type ServiceExecutionOption,
   CreateMappingQuerySetupState,
   EditExistingQuerySetupState,
-  LoadServiceQuerySetupState,
+  CloneServiceQuerySetupState,
+  UpdateExistingServiceQuerySetupState,
+  LoadProjectServiceQuerySetupState,
 } from '../stores/QuerySetupStore.js';
 import {
   useQuerySetupStore,
@@ -57,8 +61,8 @@ import {
   type ProjectData,
   LATEST_VERSION_ALIAS,
   SNAPSHOT_VERSION_ALIAS,
-  compareSemVerVersions,
 } from '@finos/legend-server-depot';
+import { compareSemVerVersions } from '@finos/legend-storage';
 import type {
   LightQuery,
   Mapping,
@@ -69,6 +73,12 @@ import {
   useApplicationStore,
   buildElementOption,
 } from '@finos/legend-application';
+import {
+  type ServiceOption,
+  buildServiceOption,
+  formatServiceOptionLabel,
+} from '@finos/legend-query-builder';
+import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
 
 type QueryOption = { label: string; value: LightQuery };
 const buildQueryOption = (query: LightQuery): QueryOption => ({
@@ -85,7 +95,6 @@ const EditExistingQuerySetup = observer(
     const [searchText, setSearchText] = useState('');
     const back = (): void => {
       setupStore.setSetupState(undefined);
-      querySetupState.setCurrentQuery(undefined);
     };
     const next = (): void => {
       if (querySetupState.currentQuery) {
@@ -97,16 +106,6 @@ const EditExistingQuerySetup = observer(
     };
     const canProceed = querySetupState.currentQuery;
 
-    // show current user queries only
-    const toggleShowCurrentUserQueriesOnly = (): void => {
-      querySetupState.setShowCurrentUserQueriesOnly(
-        !querySetupState.showCurrentUserQueriesOnly,
-      );
-      flowResult(querySetupState.loadQueries(searchText)).catch(
-        applicationStore.alertUnhandledError,
-      );
-    };
-
     // query
     const queryOptions = querySetupState.queries.map(buildQueryOption);
     const selectedQueryOption = querySetupState.currentQuery
@@ -185,6 +184,15 @@ const EditExistingQuerySetup = observer(
       }
     };
 
+    // show current user queries only
+    const toggleShowCurrentUserQueriesOnly = (): void => {
+      querySetupState.setShowCurrentUserQueriesOnly(
+        !querySetupState.showCurrentUserQueriesOnly,
+      );
+      debouncedLoadQueries.cancel();
+      debouncedLoadQueries(searchText);
+    };
+
     useEffect(() => {
       flowResult(querySetupState.loadQueries('')).catch(
         applicationStore.alertUnhandledError,
@@ -214,7 +222,7 @@ const EditExistingQuerySetup = observer(
             })}
             onClick={next}
             disabled={!canProceed}
-            title="Proceed"
+            title="Edit query"
           >
             <ArrowRightIcon />
           </button>
@@ -261,6 +269,101 @@ const EditExistingQuerySetup = observer(
   },
 );
 
+export const UpdateExistingServiceQuerySetup = observer(
+  (props: { querySetupState: UpdateExistingServiceQuerySetupState }) => {
+    const { querySetupState } = props;
+    const applicationStore = useLegendQueryApplicationStore();
+    const setupStore = useQuerySetupStore();
+    const serviceSearchRef = useRef<SelectComponent>(null);
+    const [searchText, setSearchText] = useState('');
+
+    const back = (): void => {
+      setupStore.setSetupState(undefined);
+    };
+
+    const serviceOptions = querySetupState.services.map(buildServiceOption);
+    const onServiceOptionChange = (option: ServiceOption): void => {
+      querySetupState
+        .loadServiceUpdater(option.value)
+        .catch(applicationStore.alertUnhandledError);
+    };
+    const serviceFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: ServiceOption): string =>
+        // NOTE: account for label, path, and URL pattern
+        `${option.label} - ${option.value.urlPattern ?? ''} - ${
+          option.value.path
+        }`,
+    });
+
+    // search text
+    const debouncedLoadServices = useMemo(
+      () =>
+        debounce((input: string): void => {
+          flowResult(querySetupState.loadServices(input)).catch(
+            applicationStore.alertUnhandledError,
+          );
+        }, 500),
+      [applicationStore, querySetupState],
+    );
+    const onSearchTextChange = (value: string): void => {
+      if (value !== searchText) {
+        setSearchText(value);
+        debouncedLoadServices.cancel();
+        debouncedLoadServices(value);
+      }
+    };
+
+    useEffect(() => {
+      flowResult(querySetupState.loadServices('')).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [querySetupState, applicationStore]);
+
+    useEffect(() => {
+      serviceSearchRef.current?.focus();
+    }, []);
+
+    return (
+      <div className="query-setup__wizard query-setup__existing-service-query">
+        <div className="query-setup__wizard__header query-setup__existing-service-query__header">
+          <button
+            className="query-setup__wizard__header__btn"
+            onClick={back}
+            title="Back to Main Menu"
+          >
+            <ArrowLeftIcon />
+          </button>
+          <div className="query-setup__wizard__header__title">
+            Updating an existing service query...
+          </div>
+        </div>
+        <div className="query-setup__wizard__content">
+          <div className="query-setup__wizard__group query-setup__wizard__group--inline query-setup__existing-service-query__search-bar">
+            <div className="query-setup__wizard__group__title">
+              <SearchIcon />
+            </div>
+            <CustomSelectorInput
+              ref={serviceSearchRef}
+              className="query-setup__wizard__selector"
+              options={serviceOptions}
+              isLoading={querySetupState.loadServicesState.isInProgress}
+              onInputChange={onSearchTextChange}
+              inputValue={searchText}
+              onChange={onServiceOptionChange}
+              placeholder="Search for service..."
+              darkMode={true}
+              filterOption={serviceFilterOption}
+              formatOptionLabel={formatServiceOptionLabel}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
 type ProjectOption = { label: string; value: ProjectData };
 const buildProjectOption = (project: ProjectData): ProjectOption => ({
   label: `${project.groupId}.${project.artifactId}`,
@@ -273,15 +376,79 @@ const buildVersionOption = (version: string): VersionOption => ({
   value: version,
 });
 
-const LoadServiceQuerySetup = observer(
-  (props: { querySetupState: LoadServiceQuerySetupState }) => {
+const LoadProjectServiceQuerySetup = observer(
+  (props: { querySetupState: LoadProjectServiceQuerySetupState }) => {
+    const { querySetupState } = props;
+    const applicationStore = useApplicationStore();
+    const setupStore = useQuerySetupStore();
+    const back = (): void => {
+      setupStore.setSetupState(undefined);
+    };
+
+    // project
+    const projectOptions = querySetupState.projects.map(buildProjectOption);
+    const projectSelectorPlaceholder = querySetupState.loadProjectsState
+      .isInProgress
+      ? 'Loading projects'
+      : querySetupState.loadProjectsState.hasFailed
+      ? 'Error fetching projects'
+      : querySetupState.projects.length
+      ? 'Choose a project'
+      : 'You have no projects, please create or acquire access for at least one';
+    const onProjectOptionChange = (option: ProjectOption): void => {
+      querySetupState
+        .loadProjectServiceUpdater(option.value)
+        .catch(applicationStore.alertUnhandledError);
+    };
+
+    useEffect(() => {
+      flowResult(querySetupState.loadProjects()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [querySetupState, applicationStore]);
+
+    return (
+      <div className="query-setup__wizard query-setup__existing-service-query">
+        <div className="query-setup__wizard__header query-setup__service-query__header">
+          <button
+            className="query-setup__wizard__header__btn"
+            onClick={back}
+            title="Back to Main Menu"
+          >
+            <ArrowLeftIcon />
+          </button>
+          <div className="query-setup__wizard__header__title">
+            Load service query from a project...
+          </div>
+        </div>
+        <div className="query-setup__wizard__content">
+          <div className="query-setup__wizard__group query-setup__wizard__group--inline query-setup__existing-service-query__search-bar">
+            <CustomSelectorInput
+              className="query-setup__wizard__selector"
+              options={projectOptions}
+              disabled={
+                querySetupState.loadProjectsState.isInProgress ||
+                !projectOptions.length
+              }
+              isLoading={querySetupState.loadProjectsState.isInProgress}
+              onChange={onProjectOptionChange}
+              placeholder={projectSelectorPlaceholder}
+              darkMode={true}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const CloneServiceQuerySetup = observer(
+  (props: { querySetupState: CloneServiceQuerySetupState }) => {
     const { querySetupState } = props;
     const applicationStore = useApplicationStore();
     const setupStore = useQuerySetupStore();
     const back = (): void => {
       setupStore.setSetupState(undefined);
-      querySetupState.setCurrentVersionId(undefined);
-      querySetupState.setCurrentProject(undefined);
     };
     const next = (): void => {
       if (
@@ -412,7 +579,7 @@ const LoadServiceQuerySetup = observer(
             <ArrowLeftIcon />
           </button>
           <div className="query-setup__wizard__header__title">
-            Loading a service query...
+            Clone an existing service query...
           </div>
           <button
             className={clsx('query-setup__wizard__header__btn', {
@@ -420,7 +587,7 @@ const LoadServiceQuerySetup = observer(
             })}
             onClick={next}
             disabled={!canProceed}
-            title="Proceed"
+            title="Create a new query"
           >
             <ArrowRightIcon />
           </button>
@@ -517,8 +684,6 @@ const CreateMappingQuerySetup = observer(
     const setupStore = useQuerySetupStore();
     const back = (): void => {
       setupStore.setSetupState(undefined);
-      querySetupState.setCurrentVersionId(undefined);
-      querySetupState.setCurrentProject(undefined);
     };
     const next = (): void => {
       if (
@@ -678,7 +843,7 @@ const CreateMappingQuerySetup = observer(
             })}
             onClick={next}
             disabled={!canProceed}
-            title="Proceed"
+            title="Create a new query"
           >
             <ArrowRightIcon />
           </button>
@@ -806,10 +971,16 @@ const QuerySetupLandingPage = observer(() => {
     ));
   const editQuery = (): void =>
     setupStore.setSetupState(new EditExistingQuerySetupState(setupStore));
-  const loadServiceQuery = (): void =>
-    setupStore.setSetupState(new LoadServiceQuerySetupState(setupStore));
+  const updateServiceQuery = (): void =>
+    setupStore.setSetupState(
+      new UpdateExistingServiceQuerySetupState(setupStore),
+    );
+  const cloneServiceQuery = (): void =>
+    setupStore.setSetupState(new CloneServiceQuerySetupState(setupStore));
   const createMappingQuery = (): void =>
     setupStore.setSetupState(new CreateMappingQuerySetupState(setupStore));
+  const loadServiceQueryFromProject = (): void =>
+    setupStore.setSetupState(new LoadProjectServiceQuerySetupState(setupStore));
 
   useEffect(() => {
     setupStore.initialize();
@@ -834,33 +1005,55 @@ const QuerySetupLandingPage = observer(() => {
                 onClick={editQuery}
               >
                 <div className="query-setup__landing-page__option__icon">
-                  <PencilIcon className="query-setup__landing-page__icon--edit" />
+                  <ManageSearchIcon className="query-setup__landing-page__icon--search" />
                 </div>
                 <div className="query-setup__landing-page__option__label">
                   Load an existing query
                 </div>
               </button>
               {extraQuerySetupOptions}
+              <button
+                className="query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--create-query"
+                onClick={createMappingQuery}
+              >
+                <div className="query-setup__landing-page__option__icon">
+                  <PlusIcon />
+                </div>
+                <div className="query-setup__landing-page__option__label">
+                  Create new query on a mapping
+                </div>
+              </button>
               <button
                 className="query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--service-query"
-                onClick={loadServiceQuery}
+                onClick={cloneServiceQuery}
               >
                 <div className="query-setup__landing-page__option__icon">
                   <RobotIcon />
                 </div>
                 <div className="query-setup__landing-page__option__label">
-                  Load query from a service
+                  Clone an existing service query
                 </div>
               </button>
               <button
-                className="query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--create-query"
-                onClick={createMappingQuery}
+                className="query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--service-query"
+                onClick={updateServiceQuery}
               >
                 <div className="query-setup__landing-page__option__icon">
-                  <PlusIcon />
+                  <DroidIcon />
                 </div>
                 <div className="query-setup__landing-page__option__label">
-                  Create new query on a mapping
+                  Update an existing service query
+                </div>
+              </button>
+              <button
+                className="query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--service-query"
+                onClick={loadServiceQueryFromProject}
+              >
+                <div className="query-setup__landing-page__option__icon">
+                  <DroidIcon />
+                </div>
+                <div className="query-setup__landing-page__option__label">
+                  Load service query from a project
                 </div>
               </button>
             </div>
@@ -880,10 +1073,14 @@ export const QuerySetup = withQuerySetupStore(
     ): React.ReactNode => {
       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} />;
+      } else if (setupState instanceof CloneServiceQuerySetupState) {
+        return <CloneServiceQuerySetup querySetupState={setupState} />;
+      } else if (setupState instanceof UpdateExistingServiceQuerySetupState) {
+        return <UpdateExistingServiceQuerySetup querySetupState={setupState} />;
+      } else if (setupState instanceof LoadProjectServiceQuerySetupState) {
+        return <LoadProjectServiceQuerySetup querySetupState={setupState} />;
       }
       const extraQuerySetupRenderers = setupStore.pluginManager
         .getApplicationPlugins()

package/src/components/QuerySetupStoreProvider.tsx

@@ -19,10 +19,7 @@ import { useLocalObservable } from 'mobx-react-lite';
 import { QuerySetupStore } from '../stores/QuerySetupStore.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useDepotServerClient } from '@finos/legend-server-depot';
-import {
-  useLegendQueryApplicationStore,
-  useLegendQueryBaseStore,
-} from './LegendQueryBaseStoreProvider.js';
+import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
 
 const QuerySetupStoreContext = createContext<QuerySetupStore | undefined>(
   undefined,
@@ -33,14 +30,8 @@ export const QuerySetupStoreProvider: React.FC<{
 }> = ({ children }) => {
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
-  const baseStore = useLegendQueryBaseStore();
   const store = useLocalObservable(
-    () =>
-      new QuerySetupStore(
-        applicationStore,
-        depotServerClient,
-        baseStore.pluginManager,
-      ),
+    () => new QuerySetupStore(applicationStore, depotServerClient),
   );
   return (
     <QuerySetupStoreContext.Provider value={store}>

package/src/stores/LegendQueryBaseStore.ts

@@ -18,11 +18,10 @@ import type { DepotServerClient } from '@finos/legend-server-depot';
 import type { ApplicationStore } from '@finos/legend-application';
 import type { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
 import type { LegendQueryApplicationConfig } from '../application/LegendQueryApplicationConfig.js';
-import type { LegendQueryApplicationPlugin } from './LegendQueryApplicationPlugin.js';
 
 export type LegendQueryApplicationStore = ApplicationStore<
   LegendQueryApplicationConfig,
-  LegendQueryApplicationPlugin
+  LegendQueryPluginManager
 >;
 
 export class LegendQueryBaseStore {
@@ -33,11 +32,10 @@ export class LegendQueryBaseStore {
   constructor(
     applicationStore: LegendQueryApplicationStore,
     depotServerClient: DepotServerClient,
-    pluginManager: LegendQueryPluginManager,
   ) {
     this.applicationStore = applicationStore;
     this.depotServerClient = depotServerClient;
-    this.pluginManager = pluginManager;
+    this.pluginManager = applicationStore.pluginManager;
 
     // Register plugins
     this.depotServerClient.setTracerService(

package/src/stores/LegendQueryRouter.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { generateGAVCoordinates } from '@finos/legend-server-depot';
+import { generateGAVCoordinates } from '@finos/legend-storage';
 import { generatePath } from 'react-router';
 
 export enum LEGEND_QUERY_PATH_PARAM_TOKEN {
@@ -95,7 +95,10 @@ export interface ExistingQueryEditorPathParams {
   [LEGEND_QUERY_PATH_PARAM_TOKEN.QUERY_ID]: string;
 }
 
-export const generateStudioProjectViewUrl = (
+/**
+ * @external_application_navigation This depends on Legend Studio routing and is hardcoded so it's potentially brittle
+ */
+export const EXTERNAL_APPLICATION_NAVIGATION__generateStudioProjectViewUrl = (
   studioUrl: string,
   groupId: string,
   artifactId: string,
@@ -107,3 +110,26 @@ export const generateStudioProjectViewUrl = (
     artifactId,
     versionId,
   )}${entityPath ? `/entity/${entityPath}` : ''}`;
+
+/**
+ * @external_application_navigation This depends on Legend Studio routing and is hardcoded so it's potentially brittle
+ */
+export const EXTERNAL_APPLICATION_NAVIGATION__generateStudioUpdateExistingServiceQueryUrl =
+  (
+    studioUrl: string,
+    groupId: string,
+    artifactId: string,
+    servicePath: string,
+  ): string =>
+    `${studioUrl}/extensions/update-service-query/${servicePath}@${generateGAVCoordinates(
+      groupId,
+      artifactId,
+      undefined,
+    )}`;
+
+/**
+ * @external_application_navigation This depends on Legend Studio routing and is hardcoded so it's potentially brittle
+ */
+export const EXTERNAL_APPLICATION_NAVIGATION__generateStudioUpdateProjectServiceQueryUrl =
+  (studioUrl: string, projectId: string): string =>
+    `${studioUrl}/extensions/update-project-service-query/${projectId}`;

package/src/stores/QueryEditorStore.ts

@@ -57,10 +57,9 @@ import {
   generateServiceQueryCreatorRoute,
 } from './LegendQueryRouter.js';
 import { LEGEND_QUERY_APP_EVENT } from '../LegendQueryAppEvent.js';
-import type { Entity } from '@finos/legend-storage';
+import type { Entity, ProjectGAVCoordinates } from '@finos/legend-storage';
 import {
   type DepotServerClient,
-  type ProjectGAVCoordinates,
   ProjectData,
 } from '@finos/legend-server-depot';
 import { TAB_SIZE, APPLICATION_EVENT } from '@finos/legend-application';
@@ -204,18 +203,20 @@ export class QueryExportState {
 }
 
 export class QueryLoaderState {
-  editorStore: QueryEditorStore;
-  isQueryLoaderOpen = false;
+  readonly editorStore: QueryEditorStore;
   loadQueriesState = ActionState.create();
   queries: LightQuery[] = [];
+  isQueryLoaderOpen = false;
+  showCurrentUserQueriesOnly = false;
 
   constructor(editorStore: QueryEditorStore) {
     makeObservable(this, {
       isQueryLoaderOpen: observable,
       queries: observable,
-      loadQueriesState: observable,
+      showCurrentUserQueriesOnly: observable,
       setIsQueryLoaderOpen: action,
       setQueries: action,
+      setShowCurrentUserQueriesOnly: action,
       loadQueries: flow,
     });
     this.editorStore = editorStore;
@@ -229,6 +230,10 @@ export class QueryLoaderState {
     this.queries = val;
   }
 
+  setShowCurrentUserQueriesOnly(val: boolean): void {
+    this.showCurrentUserQueriesOnly = val;
+  }
+
   *loadQueries(searchText: string): GeneratorFn<void> {
     const isValidSearchString =
       searchText.length >= QUERY_BUILDER_SEARCH_TEXT_MIN_LENGTH;
@@ -239,6 +244,8 @@ export class QueryLoaderState {
         ? searchText
         : undefined;
       searchSpecification.limit = QUERY_BUILDER_QUERY_LOAD_MAX_AMOUNT;
+      searchSpecification.showCurrentUserQueriesOnly =
+        this.showCurrentUserQueriesOnly;
       this.queries =
         (yield this.editorStore.graphManagerState.graphManager.searchQueries(
           searchSpecification,
@@ -266,7 +273,6 @@ export abstract class QueryEditorStore {
   constructor(
     applicationStore: LegendQueryApplicationStore,
     depotServerClient: DepotServerClient,
-    pluginManager: LegendQueryPluginManager,
   ) {
     makeObservable(this, {
       exportState: observable,
@@ -278,10 +284,10 @@ export abstract class QueryEditorStore {
 
     this.applicationStore = applicationStore;
     this.depotServerClient = depotServerClient;
-    this.pluginManager = pluginManager;
+    this.pluginManager = applicationStore.pluginManager;
     this.graphManagerState = new GraphManagerState(
-      this.pluginManager,
-      this.applicationStore.log,
+      applicationStore.pluginManager,
+      applicationStore.log,
     );
     this.queryLoaderState = new QueryLoaderState(this);
   }
@@ -458,14 +464,13 @@ export class MappingQueryCreatorStore extends QueryEditorStore {
   constructor(
     applicationStore: LegendQueryApplicationStore,
     depotServerClient: DepotServerClient,
-    pluginManager: LegendQueryPluginManager,
     groupId: string,
     artifactId: string,
     versionId: string,
     mappingPath: string,
     runtimePath: string,
   ) {
-    super(applicationStore, depotServerClient, pluginManager);
+    super(applicationStore, depotServerClient);
 
     this.groupId = groupId;
     this.artifactId = artifactId;
@@ -521,7 +526,6 @@ export class MappingQueryCreatorStore extends QueryEditorStore {
         ),
       ),
     );
-
     return queryBuilderState;
   }
 
@@ -547,14 +551,13 @@ export class ServiceQueryCreatorStore extends QueryEditorStore {
   constructor(
     applicationStore: LegendQueryApplicationStore,
     depotServerClient: DepotServerClient,
-    pluginManager: LegendQueryPluginManager,
     groupId: string,
     artifactId: string,
     versionId: string,
     servicePath: string,
     executionKey: string | undefined,
   ) {
-    super(applicationStore, depotServerClient, pluginManager);
+    super(applicationStore, depotServerClient);
 
     this.groupId = groupId;
     this.artifactId = artifactId;
@@ -625,10 +628,9 @@ export class ExistingQueryEditorStore extends QueryEditorStore {
   constructor(
     applicationStore: LegendQueryApplicationStore,
     depotServerClient: DepotServerClient,
-    pluginManager: LegendQueryPluginManager,
     queryId: string,
   ) {
-    super(applicationStore, depotServerClient, pluginManager);
+    super(applicationStore, depotServerClient);
 
     makeObservable<ExistingQueryEditorStore, '_query'>(this, {
       _query: observable,

package/src/stores/QueryEditorStoreTestUtils.ts

@@ -28,6 +28,7 @@ const TEST_DATA__appConfig = {
   },
   studio: {
     url: 'http://testStudioUrl',
+    instances: [],
   },
 };