@finos/legend-application-query 7.0.0 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-query",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "Legend Query application core",
   "keywords": [
     "legend",
@@ -43,15 +43,15 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "7.2.0",
-    "@finos/legend-art": "3.2.0",
-    "@finos/legend-graph": "15.0.0",
-    "@finos/legend-query-builder": "0.0.1",
-    "@finos/legend-server-depot": "3.0.11",
-    "@finos/legend-shared": "6.1.1",
-    "@finos/legend-storage": "3.0.10",
+    "@finos/legend-application": "8.0.0",
+    "@finos/legend-art": "3.2.2",
+    "@finos/legend-graph": "16.0.0",
+    "@finos/legend-query-builder": "0.1.0",
+    "@finos/legend-server-depot": "4.0.0",
+    "@finos/legend-shared": "6.1.2",
+    "@finos/legend-storage": "3.0.11",
     "@testing-library/react": "13.4.0",
-    "@types/react": "18.0.20",
+    "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
     "@types/react-router-dom": "5.3.3",
     "history": "5.3.0",
@@ -65,14 +65,14 @@
     "serializr": "2.0.5"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.16",
+    "@finos/legend-dev-utils": "2.0.17",
     "@jest/globals": "29.0.3",
     "cross-env": "7.0.3",
-    "eslint": "8.23.1",
+    "eslint": "8.24.0",
     "jest": "29.0.3",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",
-    "sass": "1.54.9",
+    "sass": "1.55.0",
     "typescript": "4.8.3"
   },
   "peerDependencies": {

package/src/application/LegendQuery.tsx

@@ -79,10 +79,7 @@ export class LegendQuery extends LegendApplication {
             config={this.config}
             pluginManager={this.pluginManager}
           >
-            <LegendQueryApplication
-              config={this.config}
-              pluginManager={this.pluginManager}
-            />
+            <LegendQueryApplication config={this.config} />
           </ApplicationStoreProvider>
         </WebApplicationNavigatorProvider>
       </BrowserRouter>,

package/src/application/LegendQueryApplicationConfig.ts

@@ -17,6 +17,7 @@
 import {
   assertNonNullable,
   guaranteeNonEmptyString,
+  guaranteeNonNullable,
   SerializationFactory,
   type PlainObject,
 } from '@finos/legend-shared';
@@ -52,21 +53,23 @@ class LegendQueryApplicationCoreOptions {
   }
 }
 
+type LegendStudioApplicationInstanceConfigurationData = {
+  sdlcProjectIDPrefix: string;
+  url: string;
+};
+
 export interface LegendQueryApplicationConfigurationData
   extends LegendApplicationConfigurationData {
   appName: string;
   env: string;
   depot: {
     url: string;
-    /**
-     * This is needed since some of our legacy infrastructure does not yet support
-     * the new API calls, we need to update them to use the latest version of
-     * finos/legend-depot though
-     */
-    TEMPORARY__useLegacyDepotServerAPIRoutes?: boolean;
   };
   engine: { url: string; queryUrl?: string };
-  studio: { url: string };
+  studio: {
+    url: string;
+    instances: LegendStudioApplicationInstanceConfigurationData[];
+  };
 }
 
 export class LegendQueryApplicationConfig extends LegendApplicationConfig {
@@ -76,13 +79,15 @@ export class LegendQueryApplicationConfig extends LegendApplicationConfig {
   readonly engineQueryServerUrl?: string | undefined;
   readonly depotServerUrl: string;
   readonly studioUrl: string;
-  readonly TEMPORARY__useLegacyDepotServerAPIRoutes?: boolean | undefined;
+  readonly studioInstances: LegendStudioApplicationInstanceConfigurationData[] =
+    [];
 
   constructor(
     input: LegendApplicationConfigurationInput<LegendQueryApplicationConfigurationData>,
   ) {
     super(input);
 
+    // engine
     assertNonNullable(
       input.configData.engine,
       `Can't configure application: 'engine' field is missing`,
@@ -92,17 +97,32 @@ export class LegendQueryApplicationConfig extends LegendApplicationConfig {
       `Can't configure application: 'engine.url' field is missing or empty`,
     );
     this.engineQueryServerUrl = input.configData.engine.queryUrl;
+
+    // depot
+    assertNonNullable(
+      input.configData.depot,
+      `Can't configure application: 'depot' field is missing`,
+    );
     this.depotServerUrl = guaranteeNonEmptyString(
       input.configData.depot.url,
       `Can't configure application: 'depot.url' field is missing or empty`,
     );
+
+    // studio
+    assertNonNullable(
+      input.configData.studio,
+      `Can't configure application: 'studio' field is missing`,
+    );
     this.studioUrl = guaranteeNonEmptyString(
       input.configData.studio.url,
       `Can't configure application: 'studio.url' field is missing or empty`,
     );
-    this.TEMPORARY__useLegacyDepotServerAPIRoutes =
-      input.configData.depot.TEMPORARY__useLegacyDepotServerAPIRoutes;
+    this.studioInstances = guaranteeNonNullable(
+      input.configData.studio.instances,
+      `Can't configure application: 'studio.instances' field is missing`,
+    );
 
+    // options
     this.options = LegendQueryApplicationCoreOptions.create(
       (input.configData.extensions?.core ??
         {}) as PlainObject<LegendQueryApplicationCoreOptions>,

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,6 +30,7 @@ import {
   TimesIcon,
   CheckSquareIcon,
   SquareIcon,
+  ManageSearchIcon,
 } from '@finos/legend-art';
 import { debounce, getQueryParameters } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -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 {
@@ -70,11 +71,11 @@ import {
 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,
 } from '@finos/legend-query-builder';
+import type { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
 
 const QueryExportDialogContent = observer(
   (props: { exportState: QueryExportState }) => {
@@ -206,7 +207,7 @@ const QueryLoader = observer(
     editorStore: QueryEditorStore;
     applicationStore: ApplicationStore<
       LegendQueryApplicationConfig,
-      LegendQueryApplicationPlugin
+      LegendQueryPluginManager
     >;
   }) => {
     const { editorStore, applicationStore } = props;
@@ -215,22 +216,7 @@ const QueryLoader = observer(
     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 +241,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 +256,30 @@ const QueryLoader = observer(
       );
     }, [applicationStore, editorStore.queryLoaderState]);
 
+    // actions
+    const loadQuery = (): void => {
+      if (selectedQueryID) {
+        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 +296,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 +356,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 +400,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 +420,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 +437,7 @@ const QueryEditorHeaderContent = observer(
         ),
       );
     };
-    const toggleLightDarkTheme = (): void =>
+    const toggleLightDarkMode = (): void =>
       applicationStore.TEMPORARY__setIsLightThemeEnabled(
         !applicationStore.TEMPORARY__isLightThemeEnabled,
       );
@@ -457,13 +466,18 @@ const QueryEditorHeaderContent = observer(
             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}
+              applicationStore={applicationStore}
+            />
+          )}
           <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 +486,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 +498,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,