@finos/legend-application-query 7.0.1 → 8.1.0

package/src/components/LegendQueryApplication.tsx

@@ -28,7 +28,6 @@ import {
   generateExtensionUrlPattern,
   LegendApplicationComponentFrameworkProvider,
 } from '@finos/legend-application';
-import type { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
 import type { LegendQueryApplicationConfig } from '../application/LegendQueryApplicationConfig.js';
 import {
   LegendQueryBaseStoreProvider,
@@ -79,21 +78,16 @@ const LegendQueryApplicationRoot = observer(() => {
 });
 
 export const LegendQueryApplication = observer(
-  (props: {
-    config: LegendQueryApplicationConfig;
-    pluginManager: LegendQueryPluginManager;
-  }) => {
-    const { config, pluginManager } = props;
+  (props: { config: LegendQueryApplicationConfig }) => {
+    const { config } = props;
 
     return (
       <DepotServerClientProvider
         config={{
           serverUrl: config.depotServerUrl,
-          TEMPORARY__useLegacyDepotServerAPIRoutes:
-            config.TEMPORARY__useLegacyDepotServerAPIRoutes,
         }}
       >
-        <LegendQueryBaseStoreProvider pluginManager={pluginManager}>
+        <LegendQueryBaseStoreProvider>
           <LegendApplicationComponentFrameworkProvider>
             <LegendQueryApplicationRoot />
           </LegendApplicationComponentFrameworkProvider>

package/src/components/LegendQueryBaseStoreProvider.tsx

@@ -21,7 +21,6 @@ import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useDepotServerClient } from '@finos/legend-server-depot';
 import type { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
 import type { LegendQueryApplicationConfig } from '../application/LegendQueryApplicationConfig.js';
-import type { LegendQueryApplicationPlugin } from '../stores/LegendQueryApplicationPlugin.js';
 import {
   type ApplicationStore,
   useApplicationStore,
@@ -29,12 +28,9 @@ import {
 
 export const useLegendQueryApplicationStore = (): ApplicationStore<
   LegendQueryApplicationConfig,
-  LegendQueryApplicationPlugin
+  LegendQueryPluginManager
 > =>
-  useApplicationStore<
-    LegendQueryApplicationConfig,
-    LegendQueryApplicationPlugin
-  >();
+  useApplicationStore<LegendQueryApplicationConfig, LegendQueryPluginManager>();
 
 const LegendQueryBaseStoreContext = createContext<
   LegendQueryBaseStore | undefined
@@ -42,17 +38,11 @@ const LegendQueryBaseStoreContext = createContext<
 
 export const LegendQueryBaseStoreProvider: React.FC<{
   children: React.ReactNode;
-  pluginManager: LegendQueryPluginManager;
-}> = ({ children, pluginManager }) => {
+}> = ({ children }) => {
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
   const store = useLocalObservable(
-    () =>
-      new LegendQueryBaseStore(
-        applicationStore,
-        depotServerClient,
-        pluginManager,
-      ),
+    () => new LegendQueryBaseStore(applicationStore, depotServerClient),
   );
   return (
     <LegendQueryBaseStoreContext.Provider value={store}>

package/src/components/QueryEditor.tsx

@@ -30,10 +30,11 @@ import {
   TimesIcon,
   CheckSquareIcon,
   SquareIcon,
+  ManageSearchIcon,
 } from '@finos/legend-art';
 import { debounce, getQueryParameters } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 import {
   type MappingQueryCreatorPathParams,
@@ -43,7 +44,7 @@ import {
   LEGEND_QUERY_ROUTE_PATTERN,
   LEGEND_QUERY_QUERY_PARAM_TOKEN,
   LEGEND_QUERY_PATH_PARAM_TOKEN,
-  generateStudioProjectViewUrl,
+  EXTERNAL_APPLICATION_NAVIGATION__generateStudioProjectViewUrl,
   generateExistingQueryEditorRoute,
 } from '../stores/LegendQueryRouter.js';
 import {
@@ -53,10 +54,7 @@ import {
   QueryExportState,
   ServiceQueryCreatorStore,
 } from '../stores/QueryEditorStore.js';
-import {
-  type ApplicationStore,
-  useApplicationStore,
-} from '@finos/legend-application';
+import { useApplicationStore } from '@finos/legend-application';
 import {
   MappingQueryCreatorStoreProvider,
   ExistingQueryEditorStoreProvider,
@@ -69,8 +67,6 @@ import {
 } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
 import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
-import type { LegendQueryApplicationConfig } from '../application/LegendQueryApplicationConfig.js';
-import type { LegendQueryApplicationPlugin } from '../stores/LegendQueryApplicationPlugin.js';
 import {
   QueryBuilder,
   type QueryBuilderState,
@@ -204,33 +200,16 @@ const renderQueryEditorHeaderLabel = (
 const QueryLoader = observer(
   (props: {
     editorStore: QueryEditorStore;
-    applicationStore: ApplicationStore<
-      LegendQueryApplicationConfig,
-      LegendQueryApplicationPlugin
-    >;
+    queryBuilderState: QueryBuilderState;
   }) => {
-    const { editorStore, applicationStore } = props;
+    const { editorStore, queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
     const queryFinderRef = useRef<SelectComponent>(null);
     const searchInputRef = useRef<HTMLInputElement>(null);
     const [selectedQueryID, setSelectedQueryID] = useState('');
     const [isMineOnly, setIsMineOnly] = useState(false);
     const [searchText, setSearchText] = useState('');
-    const closeQueryImporter = (): void => {
-      editorStore.queryLoaderState.setIsQueryLoaderOpen(false);
-    };
-    const handleEnterQueryImporter = (): void =>
-      queryFinderRef.current?.focus();
-    const toggleIsMineOnly = (): void => {
-      setIsMineOnly(!isMineOnly);
-    };
-    const loadSelectedQuery = (): void => {
-      if (selectedQueryID) {
-        editorStore.queryLoaderState.setIsQueryLoaderOpen(false);
-        applicationStore.navigator.jumpTo(
-          generateExistingQueryEditorRoute(selectedQueryID),
-        );
-      }
-    };
+
     // search text
     const debouncedLoadQueries = useMemo(
       () =>
@@ -255,6 +234,14 @@ const QueryLoader = observer(
       debouncedLoadQueries.cancel();
       debouncedLoadQueries('');
     };
+    const toggleShowCurrentUserQueriesOnly = (): void => {
+      editorStore.queryLoaderState.setShowCurrentUserQueriesOnly(
+        !editorStore.queryLoaderState.showCurrentUserQueriesOnly,
+      );
+      setIsMineOnly(!isMineOnly);
+      debouncedLoadQueries.cancel();
+      debouncedLoadQueries(searchText);
+    };
 
     useEffect(() => {
       flowResult(editorStore.queryLoaderState.loadQueries('')).catch(
@@ -262,12 +249,34 @@ const QueryLoader = observer(
       );
     }, [applicationStore, editorStore.queryLoaderState]);
 
+    // actions
+    const loadQuery = (): void => {
+      if (selectedQueryID) {
+        if (queryBuilderState.changeDetectionState.hasChanged) {
+          queryBuilderState.changeDetectionState.alertUnsavedChanges(() => {
+            editorStore.queryLoaderState.setIsQueryLoaderOpen(false);
+            applicationStore.navigator.jumpTo(
+              applicationStore.navigator.generateLocation(
+                generateExistingQueryEditorRoute(selectedQueryID),
+              ),
+            );
+          });
+        }
+      }
+    };
+
+    // life-cycle
+    const close = (): void => {
+      editorStore.queryLoaderState.setIsQueryLoaderOpen(false);
+    };
+    const onEnter = (): void => queryFinderRef.current?.focus();
+
     return (
       <Dialog
         open={editorStore.queryLoaderState.isQueryLoaderOpen}
-        onClose={closeQueryImporter}
+        onClose={close}
         TransitionProps={{
-          onEnter: handleEnterQueryImporter,
+          onEnter,
         }}
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
@@ -284,14 +293,14 @@ const QueryLoader = observer(
                       isMineOnly,
                   },
                 )}
-                onClick={toggleIsMineOnly}
+                onClick={toggleShowCurrentUserQueriesOnly}
                 tabIndex={-1}
               >
                 {isMineOnly ? <CheckSquareIcon /> : <SquareIcon />}
               </button>
               <div
                 className="query-editor__query-loader__filter-section__section__toggler__prompt"
-                onClick={toggleIsMineOnly}
+                onClick={toggleShowCurrentUserQueriesOnly}
               >
                 Mine Only
               </div>
@@ -344,12 +353,7 @@ const QueryLoader = observer(
                         </tr>
                       </thead>
                       <tbody>
-                        {(isMineOnly
-                          ? editorStore.queryLoaderState.queries.filter(
-                              (q) => q.isCurrentUserQuery,
-                            )
-                          : editorStore.queryLoaderState.queries
-                        ).map((query) => (
+                        {editorStore.queryLoaderState.queries.map((query) => (
                           <tr
                             key={query.id}
                             className={clsx(
@@ -393,12 +397,12 @@ const QueryLoader = observer(
           <div className="search-modal__actions">
             <button
               className="btn btn--dark"
-              onClick={loadSelectedQuery}
+              onClick={loadQuery}
               disabled={selectedQueryID === ''}
             >
               Load Query
             </button>
-            <button className="btn btn--dark" onClick={closeQueryImporter}>
+            <button className="btn btn--dark" onClick={close}>
               Close
             </button>
           </div>
@@ -413,13 +417,15 @@ const QueryEditorHeaderContent = observer(
     const { queryBuilderState } = props;
     const editorStore = useQueryEditorStore();
     const applicationStore = useLegendQueryApplicationStore();
+
+    // actions
     const openQueryLoader = (): void => {
       editorStore.queryLoaderState.setIsQueryLoaderOpen(true);
     };
     const viewQueryProject = (): void => {
       const { groupId, artifactId, versionId } = editorStore.getProjectInfo();
       applicationStore.navigator.openNewWindow(
-        generateStudioProjectViewUrl(
+        EXTERNAL_APPLICATION_NAVIGATION__generateStudioProjectViewUrl(
           applicationStore.config.studioUrl,
           groupId,
           artifactId,
@@ -428,7 +434,7 @@ const QueryEditorHeaderContent = observer(
         ),
       );
     };
-    const toggleLightDarkTheme = (): void =>
+    const toggleLightDarkMode = (): void =>
       applicationStore.TEMPORARY__setIsLightThemeEnabled(
         !applicationStore.TEMPORARY__isLightThemeEnabled,
       );
@@ -453,17 +459,35 @@ const QueryEditorHeaderContent = observer(
           {renderQueryEditorHeaderLabel(editorStore)}
         </div>
         <div className="query-editor__header__actions">
+          {editorStore instanceof ExistingQueryEditorStore &&
+            applicationStore.pluginManager
+              .getApplicationPlugins()
+              .flatMap(
+                (plugin) =>
+                  plugin.getExtraExistingQueryActionRendererConfiguration?.() ??
+                  [],
+              )
+              .map((actionConfig) => (
+                <Fragment key={actionConfig.key}>
+                  {actionConfig.renderer(editorStore, queryBuilderState)}
+                </Fragment>
+              ))}
           <button
             className="query-editor__header__action btn--dark"
             tabIndex={-1}
             onClick={openQueryLoader}
+            title="Load query..."
           >
-            <div className="query-editor__header__action__label">
-              Load Query
-            </div>
+            <ManageSearchIcon className="query-editor__header__action__icon--loader" />
           </button>
+          {editorStore.queryLoaderState.isQueryLoaderOpen && (
+            <QueryLoader
+              editorStore={editorStore}
+              queryBuilderState={queryBuilderState}
+            />
+          )}
           <button
-            className="query-editor__header__action query-editor__header__action--simple btn--dark"
+            className="query-editor__header__action btn--dark"
             tabIndex={-1}
             title="View project"
             onClick={viewQueryProject}
@@ -472,10 +496,10 @@ const QueryEditorHeaderContent = observer(
           </button>
           {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
             <button
-              className="query-editor__header__action query-editor__header__action--simple btn--dark"
+              className="query-editor__header__action btn--dark"
               tabIndex={-1}
-              title="Toggle Light/Dark Theme"
-              onClick={toggleLightDarkTheme}
+              title="Toggle light/dark mode"
+              onClick={toggleLightDarkMode}
             >
               {applicationStore.TEMPORARY__isLightThemeEnabled ? (
                 <EmptyLightBulbIcon />
@@ -484,23 +508,15 @@ const QueryEditorHeaderContent = observer(
               )}
             </button>
           )}
-          {editorStore.queryLoaderState.isQueryLoaderOpen && (
-            <QueryLoader
-              editorStore={editorStore}
-              applicationStore={applicationStore}
-            />
-          )}
           <button
             className="query-editor__header__action btn--dark"
             tabIndex={-1}
             onClick={saveQuery}
+            title="Save query"
           >
-            <div className="query-editor__header__action__icon">
-              <SaveIcon />
-              <QueryExport />
-            </div>
-            <div className="query-editor__header__action__label">Save</div>
+            <SaveIcon />
           </button>
+          {editorStore.exportState && <QueryExport />}
         </div>
       </div>
     );

package/src/components/QueryEditorComponentTestUtils.tsx

@@ -57,11 +57,7 @@ import {
 export const TEST__LegendQueryBaseStoreProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => (
-  <LegendQueryBaseStoreProvider
-    pluginManager={LegendQueryPluginManager.create()}
-  >
-    {children}
-  </LegendQueryBaseStoreProvider>
+  <LegendQueryBaseStoreProvider>{children}</LegendQueryBaseStoreProvider>
 );
 
 const TEST_QUERY_ID = 'test-query-id';
@@ -84,7 +80,6 @@ export const TEST__provideMockedQueryEditorStore = (customization?: {
           pluginManager,
         ),
       customization?.depotServerClient ?? TEST__getTestDepotServerClient(),
-      pluginManager,
       TEST_QUERY_ID,
     );
   const MOCK__QueryEditorStoreProvider = require('./QueryEditorStoreProvider.js'); // eslint-disable-line @typescript-eslint/no-unsafe-assignment

package/src/components/QueryEditorStoreProvider.tsx

@@ -23,14 +23,9 @@ import {
   ExistingQueryEditorStore,
   ServiceQueryCreatorStore,
 } from '../stores/QueryEditorStore.js';
-import {
-  parseGAVCoordinates,
-  useDepotServerClient,
-} from '@finos/legend-server-depot';
-import {
-  useLegendQueryApplicationStore,
-  useLegendQueryBaseStore,
-} from './LegendQueryBaseStoreProvider.js';
+import { useDepotServerClient } from '@finos/legend-server-depot';
+import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
+import { parseGAVCoordinates } from '@finos/legend-storage';
 
 export const QueryEditorStoreContext = createContext<
   QueryEditorStore | undefined
@@ -42,13 +37,11 @@ export const ExistingQueryEditorStoreProvider: React.FC<{
 }> = ({ children, queryId }) => {
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
-  const baseStore = useLegendQueryBaseStore();
   const store = useLocalObservable(
     () =>
       new ExistingQueryEditorStore(
         applicationStore,
         depotServerClient,
-        baseStore.pluginManager,
         queryId,
       ),
   );
@@ -68,13 +61,11 @@ export const MappingQueryCreatorStoreProvider: React.FC<{
   const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
-  const baseStore = useLegendQueryBaseStore();
   const store = useLocalObservable(
     () =>
       new MappingQueryCreatorStore(
         applicationStore,
         depotServerClient,
-        baseStore.pluginManager,
         groupId,
         artifactId,
         versionId,
@@ -98,13 +89,11 @@ export const ServiceQueryCreatorStoreProvider: React.FC<{
   const { groupId, artifactId, versionId } = parseGAVCoordinates(gav);
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
-  const baseStore = useLegendQueryBaseStore();
   const store = useLocalObservable(
     () =>
       new ServiceQueryCreatorStore(
         applicationStore,
         depotServerClient,
-        baseStore.pluginManager,
         groupId,
         artifactId,
         versionId,