@finos/legend-application-query 12.0.9 → 13.0.1

package/src/components/QueryEditor.tsx

@@ -15,15 +15,9 @@
  */
 
 import {
-  type SelectComponent,
   Dialog,
   PanelLoadingIndicator,
   BlankPanelContent,
-  clsx,
-  SearchIcon,
-  TimesIcon,
-  CheckSquareIcon,
-  SquareIcon,
   DropdownMenu,
   MenuContent,
   MenuContentItem,
@@ -37,7 +31,6 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
-  ModalTitle,
   ModalFooterButton,
   ManageSearchIcon,
   LightBulbIcon,
@@ -47,21 +40,19 @@ import {
   ExclamationTriangleIcon,
   PanelListItem,
   Button,
+  clsx,
 } from '@finos/legend-art';
-import { debounce } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useEffect, useMemo, useRef } from 'react';
 import {
   type MappingQueryCreatorPathParams,
   type ExistingQueryEditorPathParams,
   type ServiceQueryCreatorPathParams,
   LEGEND_QUERY_QUERY_PARAM_TOKEN,
   LEGEND_QUERY_ROUTE_PATTERN_TOKEN,
-  generateExistingQueryEditorRoute,
   generateQuerySetupRoute,
 } from '../__lib__/LegendQueryNavigation.js';
 import {
-  type QueryEditorStore,
   QuerySaveAsState,
   createViewProjectHandler,
   createViewSDLCProjectHandler,
@@ -79,16 +70,16 @@ import {
   ServiceQueryCreatorStoreProvider,
   useQueryEditorStore,
 } from './QueryEditorStoreProvider.js';
-import type { RawLambda } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
 import { useLegendQueryApplicationStore } from './LegendQueryFrameworkProvider.js';
 import {
   QueryBuilder,
   QueryBuilderNavigationBlocker,
+  QueryLoaderDialog,
   type QueryBuilderState,
 } from '@finos/legend-query-builder';
-import type { QueryEditorHelpMenuEntry } from '../stores/LegendQueryApplicationPlugin.js';
 import { QUERY_DOCUMENTATION_KEY } from '../application/LegendQueryDocumentation.js';
+import { debounce } from '@finos/legend-shared';
 import { LegendQueryTelemetryHelper } from '../__lib__/LegendQueryTelemetryHelper.js';
 
 const QuerySaveAsDialogContent = observer(
@@ -194,238 +185,13 @@ const QuerySaveDialog = observer(() => {
       }}
     >
       <Modal darkMode={true} className="query-export">
-        <ModalHeader title={'Create New Query'} />
+        <ModalHeader title="Create New Query" />
         {saveAsState && <QuerySaveAsDialogContent saveAsState={saveAsState} />}
       </Modal>
     </Dialog>
   );
 });
 
-const QueryLoader = observer(
-  (props: {
-    editorStore: QueryEditorStore;
-    queryBuilderState: QueryBuilderState;
-  }) => {
-    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('');
-
-    // search text
-    const debouncedLoadQueries = useMemo(
-      () =>
-        debounce((input: string): void => {
-          flowResult(editorStore.queryLoaderState.loadQueries(input)).catch(
-            applicationStore.alertUnhandledError,
-          );
-        }, 500),
-      [applicationStore, editorStore.queryLoaderState],
-    );
-    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('');
-    };
-    const toggleShowCurrentUserQueriesOnly = (): void => {
-      editorStore.queryLoaderState.setShowCurrentUserQueriesOnly(
-        !editorStore.queryLoaderState.showCurrentUserQueriesOnly,
-      );
-      setIsMineOnly(!isMineOnly);
-      debouncedLoadQueries.cancel();
-      debouncedLoadQueries(searchText);
-    };
-
-    useEffect(() => {
-      flowResult(editorStore.queryLoaderState.loadQueries('')).catch(
-        applicationStore.alertUnhandledError,
-      );
-    }, [applicationStore, editorStore.queryLoaderState]);
-
-    // actions
-    const loadQuery = (): void => {
-      if (selectedQueryID) {
-        queryBuilderState.changeDetectionState.alertUnsavedChanges(() => {
-          editorStore.queryLoaderState.setIsQueryLoaderOpen(false);
-          applicationStore.navigationService.navigator.goToLocation(
-            generateExistingQueryEditorRoute(selectedQueryID),
-            { ignoreBlocking: true },
-          );
-        });
-      }
-    };
-
-    // life-cycle
-    const close = (): void => {
-      editorStore.queryLoaderState.setIsQueryLoaderOpen(false);
-      editorStore.queryLoaderState.reset();
-    };
-    const onEnter = (): void => queryFinderRef.current?.focus();
-
-    return (
-      <Dialog
-        open={editorStore.queryLoaderState.isQueryLoaderOpen}
-        onClose={close}
-        TransitionProps={{
-          onEnter,
-        }}
-        classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
-      >
-        <Modal darkMode={true} className="search-modal">
-          <ModalTitle title="Load Query" />
-          <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={toggleShowCurrentUserQueriesOnly}
-                tabIndex={-1}
-              >
-                {isMineOnly ? <CheckSquareIcon /> : <SquareIcon />}
-              </button>
-              <div
-                className="query-editor__query-loader__filter-section__section__toggler__prompt"
-                onClick={toggleShowCurrentUserQueriesOnly}
-              >
-                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>
-                        {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={loadQuery}
-              disabled={selectedQueryID === ''}
-            >
-              Load Query
-            </button>
-            <button className="btn btn--dark" onClick={close}>
-              Close
-            </button>
-          </div>
-        </Modal>
-      </Dialog>
-    );
-  },
-);
-
-const HelpMenuContentItemRenderer = (
-  props: QueryEditorHelpMenuEntry,
-): React.ReactElement => (
-  <MenuContentItem title={props.title ?? ''} onClick={props.onClick}>
-    {props.icon && <MenuContentItemIcon>{props.icon}</MenuContentItemIcon>}
-    <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-      {props.label}
-    </MenuContentItemLabel>
-  </MenuContentItem>
-);
-
 const QueryEditorHeaderContent = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
@@ -435,7 +201,7 @@ const QueryEditorHeaderContent = observer(
 
     // actions
     const openQueryLoader = (): void => {
-      editorStore.queryLoaderState.setIsQueryLoaderOpen(true);
+      editorStore.queryLoaderState.setQueryLoaderDialogOpen(true);
     };
     const viewProject = (): void => {
       LegendQueryTelemetryHelper.logEvent_QueryViewProjectLaunched(
@@ -472,64 +238,69 @@ const QueryEditorHeaderContent = observer(
 
     const renameRef = useRef<HTMLInputElement>(null);
 
-    const updateQuery = (): void => {
-      queryBuilderState
-        .saveQuery(async (lambda: RawLambda) => {
+    const updateQuery = applicationStore.guardUnhandledError(
+      async (): Promise<void> => {
+        try {
+          const lambda = queryBuilderState.buildQuery();
           editorStore.setRenameState(
             new QueryRenameState(
               editorStore,
               queryBuilderState,
               lambda,
-              await editorStore.getExportConfiguration(lambda, {
+              await editorStore.getPersistConfiguration(lambda, {
                 update: true,
               }),
             ),
           );
-        })
-        .then(() => {
           renameRef.current?.select();
-        })
-        .catch(applicationStore.alertUnhandledError);
-    };
-
-    const renameQuery = applicationStore.guardUnhandledError(async () => {
-      await renameState?.renameQuery();
-    });
+        } catch {
+          // do nothing
+        }
+      },
+    );
 
-    const saveQuery = (): void => {
-      queryBuilderState
-        .saveQuery(async (lambda: RawLambda) => {
+    const saveQuery = applicationStore.guardUnhandledError(
+      async (): Promise<void> => {
+        try {
+          const lambda = queryBuilderState.buildQuery();
           editorStore.setSaveState(
             new QuerySaveState(
               editorStore,
               queryBuilderState,
               lambda,
-              await editorStore.getExportConfiguration(lambda, {
+              await editorStore.getPersistConfiguration(lambda, {
                 update: true,
               }),
             ),
           );
-          flowResult(editorStore.saveState?.saveQuery()).catch(
+          await flowResult(editorStore.saveState?.saveQuery()).catch(
             applicationStore.alertUnhandledError,
           );
-        })
-        .catch(applicationStore.alertUnhandledError);
-    };
+        } catch {
+          // do nothing
+        }
+      },
+    );
 
-    const saveAsQuery = (): void => {
-      queryBuilderState
-        .saveQuery(async (lambda: RawLambda) => {
+    const saveAsQuery = applicationStore.guardUnhandledError(
+      async (): Promise<void> => {
+        try {
+          const lambda = queryBuilderState.buildQuery();
           editorStore.setSaveAsState(
             new QuerySaveAsState(
               editorStore,
               queryBuilderState,
               lambda,
-              await editorStore.getExportConfiguration(lambda),
+              await editorStore.getPersistConfiguration(lambda, {
+                update: true,
+              }),
             ),
           );
-        })
-        .catch(applicationStore.alertUnhandledError);
-    };
+        } catch {
+          // do nothing
+        }
+      },
+    );
 
     const toggleAssistant = (): void =>
       applicationStore.assistantService.toggleAssistant();
@@ -546,6 +317,14 @@ const QueryEditorHeaderContent = observer(
       }
     };
 
+    const renameQuery = (): void => {
+      if (renameState) {
+        flowResult(renameState.renameQuery()).catch(
+          applicationStore.alertUnhandledError,
+        );
+      }
+    };
+
     const changeQueryName: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => renameState?.setQueryName(event.target.value);
@@ -583,8 +362,20 @@ const QueryEditorHeaderContent = observer(
 
     const extraHelpMenuContentItems = applicationStore.pluginManager
       .getApplicationPlugins()
-      .flatMap((plugin) => plugin.getExtraQueryEditorHelpMenuEntries?.() ?? [])
-      .map((item) => <>{HelpMenuContentItemRenderer(item)}</>);
+      .flatMap(
+        (plugin) =>
+          plugin.getExtraQueryEditorHelpMenuActionConfigurations?.() ?? [],
+      )
+      .map((item) => (
+        <MenuContentItem
+          key={item.key}
+          title={item.title ?? ''}
+          onClick={item.onClick}
+        >
+          {item.icon && <MenuContentItemIcon>{item.icon}</MenuContentItemIcon>}
+          <MenuContentItemLabel>{item.label}</MenuContentItemLabel>
+        </MenuContentItem>
+      ));
 
     return (
       <div className="query-editor__header__content">
@@ -606,7 +397,7 @@ const QueryEditorHeaderContent = observer(
                 {isExistingQueryName && (
                   <div
                     className="input--with-validation__caution"
-                    title={`Query named '${isExistingQueryName}' already exists`}
+                    title={`Query with name '${isExistingQueryName}' already exists`}
                   >
                     <ExclamationTriangleIcon className="input--with-validation__caution__indicator" />
                   </div>
@@ -662,7 +453,7 @@ const QueryEditorHeaderContent = observer(
             disabled={
               editorStore.isSaveActionDisabled ||
               !editorStore.title ||
-              queryBuilderState.saveQueryProgressState.isInProgress
+              Boolean(editorStore.saveState?.saveQueryState.isInProgress)
             }
             onClick={saveQuery}
             title="Save query"
@@ -672,7 +463,10 @@ const QueryEditorHeaderContent = observer(
           </Button>
           <Button
             className="query-editor__header__action btn--dark"
-            disabled={editorStore.isSaveActionDisabled}
+            disabled={
+              editorStore.isSaveActionDisabled ||
+              Boolean(editorStore.saveAsState?.createQueryState.isInProgress)
+            }
             onClick={saveAsQuery}
             title="Save as new query"
           >
@@ -691,7 +485,7 @@ const QueryEditorHeaderContent = observer(
                 {queryDocEntry && (
                   <MenuContentItem onClick={openQueryTutorial}>
                     <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                    <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                    <MenuContentItemLabel>
                       Open Documentation
                     </MenuContentItemLabel>
                   </MenuContentItem>
@@ -703,7 +497,7 @@ const QueryEditorHeaderContent = observer(
                       <CheckIcon />
                     ) : null}
                   </MenuContentItemIcon>
-                  <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                  <MenuContentItemLabel>
                     Show Virtual Assistant
                   </MenuContentItemLabel>
                 </MenuContentItem>
@@ -711,23 +505,23 @@ const QueryEditorHeaderContent = observer(
             }
           >
             <div
-              className=" query-editor__header__action__label"
+              className="query-editor__header__action__label"
               title="See more options"
             >
-              Help
+              Help...
             </div>
-            <CaretDownIcon />
+            <CaretDownIcon className="query-editor__header__action__dropdown-trigger" />
           </DropdownMenu>
-          {editorStore.queryLoaderState.isQueryLoaderOpen && (
-            <QueryLoader
-              editorStore={editorStore}
-              queryBuilderState={queryBuilderState}
+          {editorStore.queryLoaderState.isQueryLoaderDialogOpen && (
+            <QueryLoaderDialog
+              queryLoaderState={editorStore.queryLoaderState}
+              title="Load query"
             />
           )}
           <button
             title="Toggle light/dark mode"
             onClick={TEMPORARY__toggleLightDarkMode}
-            className="query-editor__header__action"
+            className="query-editor__header__action query-editor__header__action__theme-toggler"
           >
             {applicationStore.layoutService
               .TEMPORARY__isLightColorThemeEnabled ? (
@@ -746,6 +540,15 @@ const QueryEditorHeaderContent = observer(
             disabled={editorStore.isViewProjectActionDisabled}
             content={
               <MenuContent>
+                {/* TODO: remove this and move it to inline editing directly on the title */}
+                <MenuContentItem
+                  className="query-editor__header__action__options"
+                  onClick={updateQuery}
+                  disabled={!editorStore.title}
+                >
+                  Rename Query
+                </MenuContentItem>
+
                 <MenuContentItem
                   className="query-editor__header__action__options"
                   disabled={editorStore.isViewProjectActionDisabled}
@@ -760,13 +563,6 @@ const QueryEditorHeaderContent = observer(
                 >
                   Go to SDLC project
                 </MenuContentItem>
-                <MenuContentItem
-                  className="query-editor__header__action__options"
-                  onClick={updateQuery}
-                  disabled={!editorStore.title}
-                >
-                  Rename Query
-                </MenuContentItem>
               </MenuContent>
             }
           >
@@ -776,7 +572,7 @@ const QueryEditorHeaderContent = observer(
             >
               More Actions...
             </div>
-            <CaretDownIcon />
+            <CaretDownIcon className="query-editor__header__action__dropdown-trigger" />
           </DropdownMenu>
 
           {editorStore.saveAsState && <QuerySaveDialog />}