@finos/legend-application-query 5.2.8 → 7.0.0

package/src/components/QueryEditor.tsx

@@ -15,6 +15,7 @@
  */
 
 import {
+  type SelectComponent,
   Dialog,
   ArrowLeftIcon,
   ExternalLinkSquareIcon,
@@ -25,44 +26,55 @@ import {
   clsx,
   EmptyLightBulbIcon,
   LightBulbIcon,
+  SearchIcon,
+  TimesIcon,
+  CheckSquareIcon,
+  SquareIcon,
 } from '@finos/legend-art';
-import { getQueryParameters } from '@finos/legend-shared';
+import { debounce, 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 { useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 import {
-  type CreateQueryPathParams,
+  type MappingQueryCreatorPathParams,
   type ExistingQueryEditorPathParams,
-  type ServiceQueryEditorPathParams,
-  type ServiceQueryEditorQueryParams,
+  type ServiceQueryCreatorPathParams,
+  type ServiceQueryCreatorQueryParams,
   LEGEND_QUERY_ROUTE_PATTERN,
   LEGEND_QUERY_QUERY_PARAM_TOKEN,
   LEGEND_QUERY_PATH_PARAM_TOKEN,
   generateStudioProjectViewUrl,
+  generateExistingQueryEditorRoute,
 } from '../stores/LegendQueryRouter.js';
 import {
   type QueryEditorStore,
-  CreateQueryEditorStore,
+  MappingQueryCreatorStore,
   ExistingQueryEditorStore,
   QueryExportState,
-  ServiceQueryEditorStore,
+  ServiceQueryCreatorStore,
 } from '../stores/QueryEditorStore.js';
-import { QueryBuilder } from './QueryBuilder.js';
-import { useApplicationStore } from '@finos/legend-application';
 import {
-  CreateQueryEditorStoreProvider,
+  type ApplicationStore,
+  useApplicationStore,
+} from '@finos/legend-application';
+import {
+  MappingQueryCreatorStoreProvider,
   ExistingQueryEditorStoreProvider,
-  ServiceQueryEditorStoreProvider,
+  ServiceQueryCreatorStoreProvider,
   useQueryEditorStore,
 } from './QueryEditorStoreProvider.js';
 import {
-  extractElementNameFromPath,
   type RawLambda,
+  extractElementNameFromPath,
 } 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,
+} from '@finos/legend-query-builder';
 
 const QueryExportDialogContent = observer(
   (props: { exportState: QueryExportState }) => {
@@ -158,13 +170,13 @@ const renderQueryEditorHeaderLabel = (
         {editorStore.query.name}
       </div>
     );
-  } else if (editorStore instanceof CreateQueryEditorStore) {
+  } else if (editorStore instanceof MappingQueryCreatorStore) {
     return (
       <div className="query-editor__header__label query-editor__header__label--create-query">
         New Query
       </div>
     );
-  } else if (editorStore instanceof ServiceQueryEditorStore) {
+  } else if (editorStore instanceof ServiceQueryCreatorStore) {
     return (
       <div className="query-editor__header__label query-editor__header__label--service-query">
         <RobotIcon className="query-editor__header__label__icon" />
@@ -189,82 +201,311 @@ const renderQueryEditorHeaderLabel = (
   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 QueryLoader = observer(
+  (props: {
+    editorStore: QueryEditorStore;
+    applicationStore: ApplicationStore<
+      LegendQueryApplicationConfig,
+      LegendQueryApplicationPlugin
+    >;
+  }) => {
+    const { editorStore, applicationStore } = props;
+    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(
+      () =>
+        debounce((input: string): void => {
+          flowResult(editorStore.queryLoaderState.loadQueries(input)).catch(
+            applicationStore.alertUnhandledError,
+          );
+        }, 500),
+      [applicationStore, editorStore.queryLoaderState],
     );
-  };
-  const toggleLightDarkTheme = (): void =>
-    applicationStore.TEMPORARY__setIsLightThemeEnabled(
-      !applicationStore.TEMPORARY__isLightThemeEnabled,
+    const onSearchTextChange: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      if (event.target.value !== searchText) {
+        setSearchText(event.target.value);
+        debouncedLoadQueries.cancel();
+        debouncedLoadQueries(event.target.value);
+      }
+    };
+    const clearQuerySearching = (): void => {
+      setSearchText('');
+      debouncedLoadQueries.cancel();
+      debouncedLoadQueries('');
+    };
+
+    useEffect(() => {
+      flowResult(editorStore.queryLoaderState.loadQueries('')).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, editorStore.queryLoaderState]);
+
+    return (
+      <Dialog
+        open={editorStore.queryLoaderState.isQueryLoaderOpen}
+        onClose={closeQueryImporter}
+        TransitionProps={{
+          onEnter: handleEnterQueryImporter,
+        }}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <div className="modal modal--dark search-modal">
+          <div className="modal__title">Load Query</div>
+          <div className="query-editor__query-loader__filter-section">
+            <div className="query-editor__query-loader__filter-section__section__toggler">
+              <button
+                className={clsx(
+                  'query-editor__query-loader__filter-section__section__toggler__btn',
+                  {
+                    'query-editor__query-loader__filter-section__section__toggler__btn--toggled':
+                      isMineOnly,
+                  },
+                )}
+                onClick={toggleIsMineOnly}
+                tabIndex={-1}
+              >
+                {isMineOnly ? <CheckSquareIcon /> : <SquareIcon />}
+              </button>
+              <div
+                className="query-editor__query-loader__filter-section__section__toggler__prompt"
+                onClick={toggleIsMineOnly}
+              >
+                Mine Only
+              </div>
+            </div>
+          </div>
+          <div className="query-editor__query-loader__search-section">
+            <div className="query-editor__query-loader__search-section__input__container">
+              <input
+                ref={searchInputRef}
+                className={clsx(
+                  'query-editor__query-loader__search-section__input input--dark',
+                  {
+                    'query-editor__query-loader__search-section__input--searching':
+                      searchText,
+                  },
+                )}
+                onChange={onSearchTextChange}
+                value={searchText}
+                placeholder="Search a query by name"
+              />
+              {!searchText ? (
+                <div className="query-editor__query-loader__search-section__input__search__icon">
+                  <SearchIcon />
+                </div>
+              ) : (
+                <>
+                  <button
+                    className="query-editor__query-loader__search-section__input__clear-btn"
+                    tabIndex={-1}
+                    onClick={clearQuerySearching}
+                    title="Clear"
+                  >
+                    <TimesIcon />
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+          <div className="query-editor__query-loader__body">
+            {editorStore.queryLoaderState.loadQueriesState.hasCompleted && (
+              <>
+                {editorStore.queryLoaderState.queries.length > 0 && (
+                  <>
+                    <table className="table">
+                      <thead>
+                        <tr>
+                          <th className="table__cell--left">Name</th>
+                          <th className="table__cell--left">Author</th>
+                          <th className="table__cell--left">Version</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {(isMineOnly
+                          ? editorStore.queryLoaderState.queries.filter(
+                              (q) => q.isCurrentUserQuery,
+                            )
+                          : editorStore.queryLoaderState.queries
+                        ).map((query) => (
+                          <tr
+                            key={query.id}
+                            className={clsx(
+                              'query-editor__query-loader__body__table__row',
+                              {
+                                'query-editor__query-loader__body__table__row--selected':
+                                  selectedQueryID === query.id,
+                              },
+                            )}
+                            onClick={(event) => setSelectedQueryID(query.id)}
+                          >
+                            <td className="table__cell--left">{query.name}</td>
+                            <td className="table__cell--left">
+                              {query.owner ?? 'anonymous'}
+                            </td>
+                            <td className="table__cell--left">
+                              {query.versionId}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </>
+                )}
+                {editorStore.queryLoaderState.queries.length === 0 && (
+                  <BlankPanelContent>No query available</BlankPanelContent>
+                )}
+              </>
+            )}
+            {!editorStore.queryLoaderState.loadQueriesState.hasCompleted && (
+              <>
+                <PanelLoadingIndicator
+                  isLoading={
+                    !editorStore.queryLoaderState.loadQueriesState.hasCompleted
+                  }
+                />
+                <BlankPanelContent>Loading queries...</BlankPanelContent>
+              </>
+            )}
+          </div>
+          <div className="search-modal__actions">
+            <button
+              className="btn btn--dark"
+              onClick={loadSelectedQuery}
+              disabled={selectedQueryID === ''}
+            >
+              Load Query
+            </button>
+            <button className="btn btn--dark" onClick={closeQueryImporter}>
+              Close
+            </button>
+          </div>
+        </div>
+      </Dialog>
     );
-  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>
-        {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
+const QueryEditorHeaderContent = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const editorStore = useQueryEditorStore();
+    const applicationStore = useLegendQueryApplicationStore();
+    const openQueryLoader = (): void => {
+      editorStore.queryLoaderState.setIsQueryLoaderOpen(true);
+    };
+    const viewQueryProject = (): void => {
+      const { groupId, artifactId, versionId } = editorStore.getProjectInfo();
+      applicationStore.navigator.openNewWindow(
+        generateStudioProjectViewUrl(
+          applicationStore.config.studioUrl,
+          groupId,
+          artifactId,
+          versionId,
+          undefined,
+        ),
+      );
+    };
+    const toggleLightDarkTheme = (): void =>
+      applicationStore.TEMPORARY__setIsLightThemeEnabled(
+        !applicationStore.TEMPORARY__isLightThemeEnabled,
+      );
+    const saveQuery = (): void => {
+      queryBuilderState
+        .saveQuery(async (lambda: RawLambda) => {
+          editorStore.setExportState(
+            new QueryExportState(
+              editorStore,
+              queryBuilderState,
+              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 btn--dark"
+            tabIndex={-1}
+            onClick={openQueryLoader}
+          >
+            <div className="query-editor__header__action__label">
+              Load Query
+            </div>
+          </button>
           <button
             className="query-editor__header__action query-editor__header__action--simple btn--dark"
             tabIndex={-1}
-            title="Toggle Light/Dark Theme"
-            onClick={toggleLightDarkTheme}
+            title="View project"
+            onClick={viewQueryProject}
           >
-            {applicationStore.TEMPORARY__isLightThemeEnabled ? (
-              <EmptyLightBulbIcon />
-            ) : (
-              <LightBulbIcon />
-            )}
+            <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>
+          {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
+            <button
+              className="query-editor__header__action query-editor__header__action--simple btn--dark"
+              tabIndex={-1}
+              title="Toggle Light/Dark Theme"
+              onClick={toggleLightDarkTheme}
+            >
+              {applicationStore.TEMPORARY__isLightThemeEnabled ? (
+                <EmptyLightBulbIcon />
+              ) : (
+                <LightBulbIcon />
+              )}
+            </button>
+          )}
+          {editorStore.queryLoaderState.isQueryLoaderOpen && (
+            <QueryLoader
+              editorStore={editorStore}
+              applicationStore={applicationStore}
+            />
+          )}
+          <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>
-    </div>
-  );
-});
+    );
+  },
+);
 
 export const QueryEditor = observer(() => {
   const applicationStore = useApplicationStore();
@@ -287,43 +528,45 @@ export const QueryEditor = observer(() => {
   }, [applicationStore.TEMPORARY__isLightThemeEnabled]);
 
   return (
-    <DndProvider backend={HTML5Backend}>
-      <div
-        className={clsx([
-          'query-editor ',
-          {
-            'query-editor--light':
-              applicationStore.TEMPORARY__isLightThemeEnabled,
-          },
-        ])}
-      >
-        <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
+      className={clsx([
+        'query-editor ',
+        {
+          'query-editor--light':
+            applicationStore.TEMPORARY__isLightThemeEnabled,
+        },
+      ])}
+    >
+      <div className="query-editor__header">
+        <button
+          className="query-editor__header__back-btn btn--dark"
+          onClick={backToMainMenu}
+          title="Back to Main Menu"
+        >
+          <ArrowLeftIcon />
+        </button>
+        {!isLoadingEditor && editorStore.queryBuilderState && (
+          <QueryEditorHeaderContent
+            queryBuilderState={editorStore.queryBuilderState}
+          />
+        )}
+      </div>
+      <div className="query-editor__content">
+        <PanelLoadingIndicator isLoading={isLoadingEditor} />
+        {!isLoadingEditor && editorStore.queryBuilderState && (
+          <QueryBuilder queryBuilderState={editorStore.queryBuilderState} />
+        )}
+        {(isLoadingEditor || !editorStore.queryBuilderState) && (
+          <BlankPanelContent>
+            {editorStore.initState.message ??
+              editorStore.graphManagerState.systemBuildState.message ??
+              editorStore.graphManagerState.dependenciesBuildState.message ??
+              editorStore.graphManagerState.generationsBuildState.message ??
+              editorStore.graphManagerState.graphBuildState.message}
+          </BlankPanelContent>
+        )}
       </div>
-    </DndProvider>
+    </div>
   );
 });
 
@@ -338,46 +581,40 @@ export const ExistingQueryEditor = observer(() => {
   );
 });
 
-export const ServiceQueryEditor = observer(() => {
+export const ServiceQueryCreator = observer(() => {
   const applicationStore = useApplicationStore();
-  const params = useParams<ServiceQueryEditorPathParams>();
+  const params = useParams<ServiceQueryCreatorPathParams>();
   const gav = params[LEGEND_QUERY_PATH_PARAM_TOKEN.GAV];
   const servicePath = params[LEGEND_QUERY_PATH_PARAM_TOKEN.SERVICE_PATH];
-  const executionKey = getQueryParameters<ServiceQueryEditorQueryParams>(
+  const executionKey = getQueryParameters<ServiceQueryCreatorQueryParams>(
     applicationStore.navigator.getCurrentLocation(),
     true,
   )[LEGEND_QUERY_QUERY_PARAM_TOKEN.SERVICE_EXECUTION_KEY];
 
   return (
-    <ServiceQueryEditorStoreProvider
+    <ServiceQueryCreatorStoreProvider
       gav={gav}
       servicePath={servicePath}
       executionKey={executionKey}
     >
       <QueryEditor />
-    </ServiceQueryEditorStoreProvider>
+    </ServiceQueryCreatorStoreProvider>
   );
 });
 
-export const CreateQueryEditor = observer(() => {
-  const applicationStore = useApplicationStore();
-  const params = useParams<CreateQueryPathParams>();
+export const MappingQueryCreator = observer(() => {
+  const params = useParams<MappingQueryCreatorPathParams>();
   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
+    <MappingQueryCreatorStoreProvider
       gav={gav}
       mappingPath={mappingPath}
       runtimePath={runtimePath}
-      classPath={classPath}
     >
       <QueryEditor />
-    </CreateQueryEditorStoreProvider>
+    </MappingQueryCreatorStoreProvider>
   );
 });