@finos/legend-application-query 12.0.9 → 13.0.0

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,
@@ -85,10 +76,11 @@ import { useLegendQueryApplicationStore } from './LegendQueryFrameworkProvider.j
 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(
@@ -201,231 +193,6 @@ const QuerySaveDialog = observer(() => {
   );
 });
 
-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 +202,7 @@ const QueryEditorHeaderContent = observer(
 
     // actions
     const openQueryLoader = (): void => {
-      editorStore.queryLoaderState.setIsQueryLoaderOpen(true);
+      editorStore.queryLoaderState.setQueryLoaderDialogOpen(true);
     };
     const viewProject = (): void => {
       LegendQueryTelemetryHelper.logEvent_QueryViewProjectLaunched(
@@ -492,9 +259,13 @@ const QueryEditorHeaderContent = observer(
         .catch(applicationStore.alertUnhandledError);
     };
 
-    const renameQuery = applicationStore.guardUnhandledError(async () => {
-      await renameState?.renameQuery();
-    });
+    const renameQuery = (): void => {
+      if (renameState?.renameQuery) {
+        flowResult(renameState.renameQuery()).catch(
+          applicationStore.alertUnhandledError,
+        );
+      }
+    };
 
     const saveQuery = (): void => {
       queryBuilderState
@@ -583,8 +354,22 @@ 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 className="query-builder__sub-header__menu-content">
+            {item.label}
+          </MenuContentItemLabel>
+        </MenuContentItem>
+      ));
 
     return (
       <div className="query-editor__header__content">
@@ -711,17 +496,17 @@ 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
@@ -776,7 +561,7 @@ const QueryEditorHeaderContent = observer(
             >
               More Actions...
             </div>
-            <CaretDownIcon />
+            <CaretDownIcon className="query-editor__header__action__dropdown-trigger" />
           </DropdownMenu>
 
           {editorStore.saveAsState && <QuerySaveDialog />}

package/src/components/QueryProductionizerSetup.tsx

@@ -14,20 +14,10 @@
  * limitations under the License.
  */
 
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  BlankPanelContent,
-  clsx,
-  CustomSelectorInput,
-  PanelLoadingIndicator,
-  SearchIcon,
-  type SelectComponent,
-} from '@finos/legend-art';
-import { debounce, guaranteeType } from '@finos/legend-shared';
-import { flowResult } from 'mobx';
+import { ArrowLeftIcon } from '@finos/legend-art';
+import { guaranteeType } from '@finos/legend-shared';
 import { observer, useLocalObservable } from 'mobx-react-lite';
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext } from 'react';
 import { useApplicationStore } from '@finos/legend-application';
 import {
   useLegendQueryApplicationStore,
@@ -35,15 +25,8 @@ import {
 } from './LegendQueryFrameworkProvider.js';
 import { QueryProductionizerSetupStore } from '../stores/QueryProductionizerSetupStore.js';
 import { BaseQuerySetup, BaseQuerySetupStoreContext } from './QuerySetup.js';
-import {
-  buildQueryOption,
-  type QueryOption,
-} from '@finos/legend-query-builder';
 import { generateQuerySetupRoute } from '../__lib__/LegendQueryNavigation.js';
-import {
-  CODE_EDITOR_LANGUAGE,
-  CodeEditor,
-} from '@finos/legend-lego/code-editor';
+import { QueryLoader } from '@finos/legend-query-builder';
 
 const QueryProductionizerSetupStoreProvider: React.FC<{
   children: React.ReactNode;
@@ -74,8 +57,6 @@ const useQueryProductionizerSetupStore = (): QueryProductionizerSetupStore =>
 const QueryProductionizerSetupContent = observer(() => {
   const applicationStore = useApplicationStore();
   const setupStore = useQueryProductionizerSetupStore();
-  const querySearchRef = useRef<SelectComponent>(null);
-  const [searchText, setSearchText] = useState('');
 
   // actions
   const back = (): void => {
@@ -83,53 +64,6 @@ const QueryProductionizerSetupContent = observer(() => {
       generateQuerySetupRoute(),
     );
   };
-  const next = (): void => {
-    if (setupStore.currentQuery) {
-      setupStore
-        .loadQueryProductionizer()
-        .catch(applicationStore.alertUnhandledError);
-    }
-  };
-  const canProceed = setupStore.currentQuery;
-
-  // query
-  const queryOptions = setupStore.queries.map(buildQueryOption);
-  const selectedQueryOption = setupStore.currentQuery
-    ? buildQueryOption(setupStore.currentQuery)
-    : null;
-  const onQueryOptionChange = (option: QueryOption | null): void => {
-    if (option?.value !== setupStore.currentQuery) {
-      setupStore.setCurrentQuery(option?.value.id);
-    }
-  };
-
-  // search text
-  const debouncedLoadQueries = useMemo(
-    () =>
-      debounce((input: string): void => {
-        flowResult(setupStore.loadQueries(input)).catch(
-          applicationStore.alertUnhandledError,
-        );
-      }, 500),
-    [applicationStore, setupStore],
-  );
-  const onSearchTextChange = (value: string): void => {
-    if (value !== searchText) {
-      setSearchText(value);
-      debouncedLoadQueries.cancel();
-      debouncedLoadQueries(value);
-    }
-  };
-
-  useEffect(() => {
-    flowResult(setupStore.loadQueries('')).catch(
-      applicationStore.alertUnhandledError,
-    );
-  }, [setupStore, applicationStore]);
-
-  useEffect(() => {
-    querySearchRef.current?.focus();
-  }, []);
 
   return (
     <div className="query-setup__wizard query-setup__productionize-query">
@@ -144,61 +78,12 @@ const QueryProductionizerSetupContent = observer(() => {
         <div className="query-setup__wizard__header__title">
           Productionizing an existing query...
         </div>
-        <button
-          className={clsx('query-setup__wizard__header__btn', {
-            'query-setup__wizard__header__btn--ready': canProceed,
-          })}
-          onClick={next}
-          disabled={!canProceed}
-          title="Productionize query"
-        >
-          <ArrowRightIcon />
-        </button>
       </div>
-      <div className="query-setup__wizard__content">
-        <div className="query-setup__wizard__group query-setup__wizard__group--inline">
-          <div className="query-setup__wizard__group__title">
-            <SearchIcon />
-          </div>
-          <CustomSelectorInput
-            ref={querySearchRef}
-            className="query-setup__wizard__selector"
-            options={queryOptions}
-            isLoading={setupStore.loadQueriesState.isInProgress}
-            onInputChange={onSearchTextChange}
-            inputValue={searchText}
-            onChange={onQueryOptionChange}
-            value={selectedQueryOption}
-            placeholder="Search for query by name..."
-            isClearable={true}
-            escapeClearsValue={true}
-            darkMode={true}
-          />
-        </div>
-        <div className="query-setup__productionize-query__preview">
-          <PanelLoadingIndicator
-            isLoading={setupStore.loadQueryState.isInProgress}
-          />
-          {setupStore.currentQuery && (
-            <>
-              {!setupStore.currentQueryInfo && (
-                <BlankPanelContent>{`Can't preview query`}</BlankPanelContent>
-              )}
-              {setupStore.currentQueryInfo && (
-                <CodeEditor
-                  inputValue={setupStore.currentQueryInfo.content}
-                  isReadOnly={true}
-                  language={CODE_EDITOR_LANGUAGE.PURE}
-                  showMiniMap={false}
-                  hideGutter={true}
-                />
-              )}
-            </>
-          )}
-          {!setupStore.currentQuery && (
-            <BlankPanelContent>No query to preview</BlankPanelContent>
-          )}
-        </div>
+      <div className="query-setup__productionize-query__content">
+        <QueryLoader
+          queryLoaderState={setupStore.queryLoaderState}
+          loadActionLabel="productionize query"
+        />
       </div>
     </div>
   );