@finos/legend-application-query 12.0.7 → 12.0.8

package/src/components/QueryEditor.tsx

@@ -18,7 +18,6 @@ import {
   type SelectComponent,
   Dialog,
   PanelLoadingIndicator,
-  SaveIcon,
   BlankPanelContent,
   clsx,
   SearchIcon,
@@ -43,10 +42,15 @@ import {
   ManageSearchIcon,
   LightBulbIcon,
   EmptyLightBulbIcon,
+  SaveCurrIcon,
+  SaveAsIcon,
+  ExclamationTriangleIcon,
+  PanelListItem,
+  Button,
 } from '@finos/legend-art';
 import { debounce } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import {
   type MappingQueryCreatorPathParams,
   type ExistingQueryEditorPathParams,
@@ -58,10 +62,11 @@ import {
 } from '../__lib__/LegendQueryNavigation.js';
 import {
   type QueryEditorStore,
-  ExistingQueryEditorStore,
-  QueryExportState,
+  QuerySaveAsState,
   createViewProjectHandler,
   createViewSDLCProjectHandler,
+  QuerySaveState,
+  QueryRenameState,
 } from '../stores/QueryEditorStore.js';
 import {
   LEGEND_APPLICATION_COLOR_THEME,
@@ -82,68 +87,105 @@ import {
   QueryBuilderNavigationBlocker,
   type QueryBuilderState,
 } from '@finos/legend-query-builder';
+import type { QueryEditorHelpMenuEntry } from '../stores/LegendQueryApplicationPlugin.js';
+import { QUERY_DOCUMENTATION_KEY } from '../application/LegendQueryDocumentation.js';
+import { LegendQueryTelemetryHelper } from '../__lib__/LegendQueryTelemetryHelper.js';
 
-const QueryExportDialogContent = observer(
-  (props: { exportState: QueryExportState }) => {
-    const { exportState } = props;
+const QuerySaveAsDialogContent = observer(
+  (props: { saveAsState: QuerySaveAsState }) => {
+    const { saveAsState } = props;
     const applicationStore = useApplicationStore();
-    const allowCreate = exportState.allowPersist;
-    const allowSave = exportState.allowPersist && exportState.allowUpdate;
-    const create = applicationStore.guardUnhandledError(() =>
-      exportState.persistQuery(true),
-    );
-    const save = applicationStore.guardUnhandledError(() =>
-      exportState.persistQuery(false),
-    );
+    const create = (): void => {
+      flowResult(saveAsState.createQuery(true)).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
+
+    const isExistingQueryName = saveAsState.editorStore.existingQueryName;
 
     // name
     const nameInputRef = useRef<HTMLInputElement>(null);
-    const changeName: React.ChangeEventHandler<HTMLInputElement> = (event) =>
-      exportState.setQueryName(event.target.value);
+
+    const debouncedLoadQueries = useMemo(
+      () =>
+        debounce((input: string): void => {
+          flowResult(
+            saveAsState.editorStore.searchExistingQueryName(input),
+          ).catch(applicationStore.alertUnhandledError);
+        }, 500),
+      [applicationStore, saveAsState.editorStore],
+    );
+
+    const changeName: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      saveAsState.setQueryName(event.target.value);
+    };
 
     useEffect(() => {
       nameInputRef.current?.focus();
     }, []);
 
+    useEffect(() => {
+      const searchText = saveAsState.queryName;
+      debouncedLoadQueries.cancel();
+      debouncedLoadQueries(searchText);
+    }, [
+      saveAsState.queryName,
+      debouncedLoadQueries,
+      saveAsState.editorStore.queryLoaderState.queries,
+    ]);
+
     return (
       <>
         <ModalBody>
           <PanelLoadingIndicator
-            isLoading={exportState.persistQueryState.isInProgress}
-          />
-          <input
-            ref={nameInputRef}
-            className="input input--dark"
-            spellCheck={false}
-            value={exportState.queryName}
-            onChange={changeName}
+            isLoading={saveAsState.createQueryState.isInProgress}
           />
+          <PanelListItem>
+            <div className="input--with-validation">
+              <input
+                ref={nameInputRef}
+                className={clsx('input input--dark', {
+                  'input--caution': isExistingQueryName,
+                })}
+                spellCheck={false}
+                value={saveAsState.queryName}
+                onChange={changeName}
+              />
+              {isExistingQueryName && (
+                <div
+                  className="input--with-validation__caution"
+                  title={`Query named '${isExistingQueryName}' already exists`}
+                >
+                  <ExclamationTriangleIcon className="input--with-validation__caution__indicator" />
+                </div>
+              )}
+            </div>
+          </PanelListItem>
         </ModalBody>
         <ModalFooter>
-          {allowSave && <ModalFooterButton text="Save" onClick={save} />}
-          <button
-            className="btn modal__footer__close-btn btn--dark"
-            // TODO?: we should probably annotate here why,
-            // when we disable this action
-            disabled={!allowCreate}
+          <ModalFooterButton
+            text="Create Query"
+            title={
+              !saveAsState.allowPersist
+                ? `Cannot create new query`
+                : 'Create new query'
+            }
             onClick={create}
-          >
-            Create
-          </button>
+          />
         </ModalFooter>
       </>
     );
   },
 );
 
-const QueryExport = observer(() => {
+const QuerySaveDialog = observer(() => {
   const editorStore = useQueryEditorStore();
-  const exportState = editorStore.exportState;
-  const close = (): void => editorStore.setExportState(undefined);
+  const saveAsState = editorStore.saveAsState;
+  const close = (): void => editorStore.setSaveAsState(undefined);
 
   return (
     <Dialog
-      open={Boolean(exportState)}
+      open={Boolean(saveAsState)}
       onClose={close}
       classes={{
         root: 'editor-modal__root-container',
@@ -152,8 +194,8 @@ const QueryExport = observer(() => {
       }}
     >
       <Modal darkMode={true} className="query-export">
-        <ModalHeader title="save query" />
-        {exportState && <QueryExportDialogContent exportState={exportState} />}
+        <ModalHeader title={'Create New Query'} />
+        {saveAsState && <QuerySaveAsDialogContent saveAsState={saveAsState} />}
       </Modal>
     </Dialog>
   );
@@ -166,6 +208,7 @@ const QueryLoader = observer(
   }) => {
     const { editorStore, queryBuilderState } = props;
     const applicationStore = useApplicationStore();
+
     const queryFinderRef = useRef<SelectComponent>(null);
     const searchInputRef = useRef<HTMLInputElement>(null);
     const [selectedQueryID, setSelectedQueryID] = useState('');
@@ -372,10 +415,22 @@ const QueryLoader = observer(
   },
 );
 
+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;
     const editorStore = useQueryEditorStore();
+    const renameState = editorStore.renameState;
     const applicationStore = useLegendQueryApplicationStore();
 
     // actions
@@ -383,6 +438,9 @@ const QueryEditorHeaderContent = observer(
       editorStore.queryLoaderState.setIsQueryLoaderOpen(true);
     };
     const viewProject = (): void => {
+      LegendQueryTelemetryHelper.logEvent_QueryViewProjectLaunched(
+        editorStore.applicationStore.telemetryService,
+      );
       const { groupId, artifactId, versionId } = editorStore.getProjectInfo();
       createViewProjectHandler(applicationStore)(
         groupId,
@@ -392,6 +450,9 @@ const QueryEditorHeaderContent = observer(
       );
     };
     const viewSDLCProject = (): void => {
+      LegendQueryTelemetryHelper.logEvent_QueryViewSdlcProjectLaunched(
+        editorStore.applicationStore.telemetryService,
+      );
       const { groupId, artifactId } = editorStore.getProjectInfo();
       createViewSDLCProjectHandler(
         applicationStore,
@@ -408,11 +469,58 @@ const QueryEditorHeaderContent = observer(
         { persist: true },
       );
     };
+
+    const renameRef = useRef<HTMLInputElement>(null);
+
+    const updateQuery = (): void => {
+      queryBuilderState
+        .saveQuery(async (lambda: RawLambda) => {
+          editorStore.setRenameState(
+            new QueryRenameState(
+              editorStore,
+              queryBuilderState,
+              lambda,
+              await editorStore.getExportConfiguration(lambda, {
+                update: true,
+              }),
+            ),
+          );
+        })
+        .then(() => {
+          renameRef.current?.select();
+        })
+        .catch(applicationStore.alertUnhandledError);
+    };
+
+    const renameQuery = applicationStore.guardUnhandledError(async () => {
+      await renameState?.renameQuery();
+    });
+
     const saveQuery = (): void => {
       queryBuilderState
         .saveQuery(async (lambda: RawLambda) => {
-          editorStore.setExportState(
-            new QueryExportState(
+          editorStore.setSaveState(
+            new QuerySaveState(
+              editorStore,
+              queryBuilderState,
+              lambda,
+              await editorStore.getExportConfiguration(lambda, {
+                update: true,
+              }),
+            ),
+          );
+          flowResult(editorStore.saveState?.saveQuery()).catch(
+            applicationStore.alertUnhandledError,
+          );
+        })
+        .catch(applicationStore.alertUnhandledError);
+    };
+
+    const saveAsQuery = (): void => {
+      queryBuilderState
+        .saveQuery(async (lambda: RawLambda) => {
+          editorStore.setSaveAsState(
+            new QuerySaveAsState(
               editorStore,
               queryBuilderState,
               lambda,
@@ -423,26 +531,123 @@ const QueryEditorHeaderContent = observer(
         .catch(applicationStore.alertUnhandledError);
     };
 
+    const toggleAssistant = (): void =>
+      applicationStore.assistantService.toggleAssistant();
+
+    const queryDocEntry = applicationStore.documentationService.getDocEntry(
+      QUERY_DOCUMENTATION_KEY.TUTORIAL_QUERY_BUILDER,
+    );
+
+    const openQueryTutorial = (): void => {
+      if (queryDocEntry?.url) {
+        applicationStore.navigationService.navigator.visitAddress(
+          queryDocEntry.url,
+        );
+      }
+    };
+
+    const changeQueryName: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => renameState?.setQueryName(event.target.value);
+
+    const onEnter: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      if (event.code === 'Enter') {
+        renameQuery();
+      }
+    };
+
+    const debouncedLoadQueries = useMemo(
+      () =>
+        debounce((input: string): void => {
+          flowResult(
+            renameState?.editorStore.searchExistingQueryName(input),
+          ).catch(applicationStore.alertUnhandledError);
+        }, 500),
+      [applicationStore, renameState?.editorStore],
+    );
+
+    useEffect(() => {
+      if (renameState && renameState.queryName !== editorStore.title) {
+        const searchText = renameState.queryName;
+        debouncedLoadQueries.cancel();
+        debouncedLoadQueries(searchText);
+      }
+    }, [
+      renameState,
+      debouncedLoadQueries,
+      editorStore.title,
+      renameState?.queryName,
+    ]);
+
+    const isExistingQueryName = renameState?.editorStore.existingQueryName;
+
+    const extraHelpMenuContentItems = applicationStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap((plugin) => plugin.getExtraQueryEditorHelpMenuEntries?.() ?? [])
+      .map((item) => <>{HelpMenuContentItemRenderer(item)}</>);
+
     return (
       <div className="query-editor__header__content">
-        <div className="query-editor__header__content__main" />
+        {renameState ? (
+          <div className="query-editor__header__content__main query-editor__header__content__title">
+            <PanelListItem>
+              <div className="input--with-validation">
+                <input
+                  title="Query title rename"
+                  ref={renameRef}
+                  className={clsx('input input--dark', {
+                    'input--caution': isExistingQueryName,
+                  })}
+                  onChange={changeQueryName}
+                  onKeyDown={onEnter}
+                  value={renameState.queryName}
+                  placeholder="Search"
+                />
+                {isExistingQueryName && (
+                  <div
+                    className="input--with-validation__caution"
+                    title={`Query named '${isExistingQueryName}' already exists`}
+                  >
+                    <ExclamationTriangleIcon className="input--with-validation__caution__indicator" />
+                  </div>
+                )}
+              </div>
+              <button
+                className={clsx('input__btn', {
+                  'btn--icon__caution': isExistingQueryName,
+                })}
+                onClick={renameQuery}
+                title="Rename Query"
+              >
+                <CheckIcon />
+              </button>
+            </PanelListItem>
+          </div>
+        ) : (
+          <div
+            className="query-editor__header__content__main query-editor__header__content__title"
+            title="Query title"
+          >
+            {editorStore.title}
+          </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
+          {applicationStore.pluginManager
+            .getApplicationPlugins()
+            .flatMap(
+              (plugin) =>
+                plugin.getExtraQueryEditorActionConfigurations?.(editorStore) ??
+                [],
+            )
+            .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..."
           >
@@ -450,22 +655,69 @@ const QueryEditorHeaderContent = observer(
             <div className="query-editor__header__action__label">
               Load Query
             </div>
-          </button>
+          </Button>
 
-          <button
+          <Button
             className="query-editor__header__action btn--dark"
-            tabIndex={-1}
-            disabled={editorStore.isSaveActionDisabled}
+            disabled={
+              editorStore.isSaveActionDisabled ||
+              !editorStore.title ||
+              queryBuilderState.saveQueryProgressState.isInProgress
+            }
             onClick={saveQuery}
             title="Save query"
           >
-            <SaveIcon />
-
+            <SaveCurrIcon />
+            <div className="query-editor__header__action__label">Save</div>
+          </Button>
+          <Button
+            className="query-editor__header__action btn--dark"
+            disabled={editorStore.isSaveActionDisabled}
+            onClick={saveAsQuery}
+            title="Save as new query"
+          >
+            <SaveAsIcon />
             <div className="query-editor__header__action__label">
-              Save Query
+              Save As...
             </div>
-          </button>
+          </Button>
+
+          <DropdownMenu
+            className="query-editor__header__action btn--dark"
+            disabled={editorStore.isViewProjectActionDisabled}
+            content={
+              <MenuContent>
+                {extraHelpMenuContentItems}
+                {queryDocEntry && (
+                  <MenuContentItem onClick={openQueryTutorial}>
+                    <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                    <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                      Open Documentation
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                )}
 
+                <MenuContentItem onClick={toggleAssistant}>
+                  <MenuContentItemIcon>
+                    {!applicationStore.assistantService.isHidden ? (
+                      <CheckIcon />
+                    ) : null}
+                  </MenuContentItemIcon>
+                  <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                    Show Virtual Assistant
+                  </MenuContentItemLabel>
+                </MenuContentItem>
+              </MenuContent>
+            }
+          >
+            <div
+              className=" query-editor__header__action__label"
+              title="See more options"
+            >
+              Help
+            </div>
+            <CaretDownIcon />
+          </DropdownMenu>
           {editorStore.queryLoaderState.isQueryLoaderOpen && (
             <QueryLoader
               editorStore={editorStore}
@@ -499,14 +751,21 @@ const QueryEditorHeaderContent = observer(
                   disabled={editorStore.isViewProjectActionDisabled}
                   onClick={viewProject}
                 >
-                  Project
+                  Go to Project
                 </MenuContentItem>
                 <MenuContentItem
                   className="query-editor__header__action__options"
                   disabled={editorStore.isViewProjectActionDisabled}
                   onClick={viewSDLCProject}
                 >
-                  SDLC project
+                  Go to SDLC project
+                </MenuContentItem>
+                <MenuContentItem
+                  className="query-editor__header__action__options"
+                  onClick={updateQuery}
+                  disabled={!editorStore.title}
+                >
+                  Rename Query
                 </MenuContentItem>
               </MenuContent>
             }
@@ -515,12 +774,12 @@ const QueryEditorHeaderContent = observer(
               className="query-editor__header__action__label"
               title="See more options"
             >
-              Go to...
+              More Actions...
             </div>
             <CaretDownIcon />
           </DropdownMenu>
 
-          {editorStore.exportState && <QueryExport />}
+          {editorStore.saveAsState && <QuerySaveDialog />}
         </div>
       </div>
     );
@@ -574,15 +833,15 @@ export const QueryEditor = observer(() => {
             }}
             content={
               <MenuContent>
+                <MenuContentItem onClick={goToQuerySetup}>
+                  Back to query setup
+                </MenuContentItem>
                 <MenuContentItem
                   disabled={!appDocUrl}
                   onClick={goToDocumentation}
                 >
                   See Documentation
                 </MenuContentItem>
-                <MenuContentItem onClick={goToQuerySetup}>
-                  Back to query setup
-                </MenuContentItem>
                 <MenuContentDivider />
                 <MenuContentItem disabled={true}>Settings</MenuContentItem>
                 <MenuContentItem

package/src/components/QuerySetup.tsx

@@ -40,7 +40,11 @@ import {
   QuerySetupLandingPageStore,
   type BaseQuerySetupStore,
 } from '../stores/QuerySetupStore.js';
-import type { StoreProjectData } from '@finos/legend-server-depot';
+import {
+  MASTER_SNAPSHOT_ALIAS,
+  SNAPSHOT_VERSION_ALIAS,
+  type StoreProjectData,
+} from '@finos/legend-server-depot';
 import { useApplicationStore } from '@finos/legend-application';
 import { useLegendQueryApplicationStore } from './LegendQueryFrameworkProvider.js';
 import type { QuerySetupActionConfiguration } from '../stores/LegendQueryApplicationPlugin.js';
@@ -54,10 +58,18 @@ export const buildProjectOption = (
 });
 
 export type VersionOption = { label: string; value: string };
-export const buildVersionOption = (version: string): VersionOption => ({
-  label: version,
-  value: version,
-});
+export const buildVersionOption = (version: string): VersionOption => {
+  if (version === MASTER_SNAPSHOT_ALIAS) {
+    return {
+      label: SNAPSHOT_VERSION_ALIAS,
+      value: version,
+    };
+  }
+  return {
+    label: version,
+    value: version,
+  };
+};
 
 const QuerySetupLandingPageStoreContext = createContext<
   QuerySetupLandingPageStore | undefined

package/src/index.ts

@@ -37,7 +37,7 @@ export {
   createViewSDLCProjectHandler,
   QueryEditorStore,
   ExistingQueryEditorStore,
-  type QueryExportConfiguration,
+  type QueryPersistConfiguration,
 } from './stores/QueryEditorStore.js';
 
 // components

package/src/stores/LegendQueryApplicationPlugin.ts

@@ -19,7 +19,10 @@ import type { Query } from '@finos/legend-graph';
 import type { QueryBuilderState } from '@finos/legend-query-builder';
 import type React from 'react';
 import type { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
-import type { ExistingQueryEditorStore } from './QueryEditorStore.js';
+import type {
+  ExistingQueryEditorStore,
+  QueryEditorStore,
+} from './QueryEditorStore.js';
 import type { QuerySetupLandingPageStore } from './QuerySetupStore.js';
 
 export enum QuerySetupActionTag {
@@ -53,14 +56,21 @@ export type ExistingQueryEditorStateBuilder = (
   editorStore: ExistingQueryEditorStore,
 ) => QueryBuilderState | undefined;
 
-export type ExistingQueryEditorActionRendererConfiguration = {
+export type QueryEditorActionConfiguration = {
   key: string;
   renderer: (
-    editorStore: ExistingQueryEditorStore,
+    editorStore: QueryEditorStore,
     queryBuilderState: QueryBuilderState,
   ) => React.ReactNode | undefined;
 };
 
+export type QueryEditorHelpMenuEntry = {
+  title?: string;
+  label: string;
+  onClick: () => void;
+  icon?: React.ReactNode;
+};
+
 export abstract class LegendQueryApplicationPlugin extends LegendApplicationPlugin {
   /**
    * This helps to better type-check for this empty abtract type
@@ -77,13 +87,20 @@ export abstract class LegendQueryApplicationPlugin extends LegendApplicationPlug
    */
   getExtraQuerySetupActionConfigurations?(): QuerySetupActionConfiguration[];
 
+  /**
+   * Get the list of help items for query.
+   */
+  getExtraQueryEditorHelpMenuEntries?(): QueryEditorHelpMenuEntry[];
+
   /**
    * Get the list of existing query editor state builders.
    */
   getExtraExistingQueryEditorStateBuilders?(): ExistingQueryEditorStateBuilder[];
 
   /**
-   * Get the list of renderer configurations for existing query editor actions.
+   * Get the list of query editor action renderer configurations.
    */
-  getExtraExistingQueryActionRendererConfiguration?(): ExistingQueryEditorActionRendererConfiguration[];
+  getExtraQueryEditorActionConfigurations?(
+    editorStore: QueryEditorStore,
+  ): QueryEditorActionConfiguration[];
 }