@finos/legend-application-query 13.4.12 → 13.4.13

package/src/components/QueryEditor.tsx

@@ -21,7 +21,6 @@ import {
   DropdownMenu,
   MenuContent,
   MenuContentItem,
-  CaretDownIcon,
   MenuIcon,
   MenuContentDivider,
   MenuContentItemIcon,
@@ -33,21 +32,14 @@ import {
   ModalFooter,
   ModalTitle,
   ModalFooterButton,
-  ManageSearchIcon,
-  LightBulbIcon,
-  EmptyLightBulbIcon,
-  SaveCurrIcon,
-  SaveAsIcon,
   ExclamationTriangleIcon,
   PanelListItem,
-  Button,
   clsx,
   ModalHeaderActions,
   TimesIcon,
   Panel,
   PanelFullContent,
   CustomSelectorInput,
-  ArrowCircleUpIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
@@ -59,17 +51,9 @@ import {
   LEGEND_QUERY_ROUTE_PATTERN_TOKEN,
   generateQuerySetupRoute,
   generateExistingQueryEditorRoute,
-  generateMappingQueryCreatorRoute,
 } from '../__lib__/LegendQueryNavigation.js';
-import {
-  createViewProjectHandler,
-  createViewSDLCProjectHandler,
-  ExistingQueryEditorStore,
-} from '../stores/QueryEditorStore.js';
-import {
-  LEGEND_APPLICATION_COLOR_THEME,
-  useApplicationStore,
-} from '@finos/legend-application';
+import { ExistingQueryEditorStore } from '../stores/QueryEditorStore.js';
+import { useApplicationStore } from '@finos/legend-application';
 import { useParams } from '@finos/legend-application/browser';
 import {
   MappingQueryCreatorStoreProvider,
@@ -78,7 +62,6 @@ import {
   useQueryEditorStore,
 } from './QueryEditorStoreProvider.js';
 import { flowResult } from 'mobx';
-import { useLegendQueryApplicationStore } from './LegendQueryFrameworkProvider.js';
 import {
   QueryBuilder,
   QueryBuilderNavigationBlocker,
@@ -86,33 +69,20 @@ import {
   QueryBuilderDiffViewPanel,
   type QueryBuilderState,
 } from '@finos/legend-query-builder';
-import { QUERY_DOCUMENTATION_KEY } from '../application/LegendQueryDocumentation.js';
-import { buildUrl, debounce } from '@finos/legend-shared';
-import { LegendQueryTelemetryHelper } from '../__lib__/LegendQueryTelemetryHelper.js';
-import { QUERY_EDITOR_TEST_ID } from '../__lib__/LegendQueryTesting.js';
+
 import {
   compareSemVerVersions,
   generateGAVCoordinates,
-  parseProjectIdentifier,
 } from '@finos/legend-storage';
 import {
+  type Query,
   QueryDataSpaceExecutionContext,
   QueryExplicitExecutionContext,
-  RuntimePointer,
-  type Query,
 } from '@finos/legend-graph';
-import {
-  LATEST_VERSION_ALIAS,
-  StoreProjectData,
-} from '@finos/legend-server-depot';
+import { LATEST_VERSION_ALIAS } from '@finos/legend-server-depot';
 import { buildVersionOption, type VersionOption } from './QuerySetup.js';
 import { QueryEditorExistingQueryVersionRevertModal } from './QueryEdtiorExistingQueryVersionRevertModal.js';
-import {
-  DataSpaceQueryBuilderState,
-  generateDataSpaceTemplateQueryPromotionRoute,
-} from '@finos/legend-extension-dsl-data-space/application';
-import { generateDataSpaceQueryCreatorRoute } from '../__lib__/DSL_DataSpace_LegendQueryNavigation.js';
-import { DataSpaceTemplateQueryCreatorStore } from '../stores/data-space/DataSpaceTemplateQueryCreatorStore.js';
+import { debounce } from '@finos/legend-shared';
 
 const CreateQueryDialog = observer(() => {
   const editorStore = useQueryEditorStore();
@@ -281,7 +251,7 @@ const SaveQueryDialog = observer(
   },
 );
 
-const QueryEditorExistingQueryHeader = observer(
+export const QueryEditorExistingQueryHeader = observer(
   (props: {
     queryBuilderState: QueryBuilderState;
     existingEditorStore: ExistingQueryEditorStore;
@@ -576,435 +546,11 @@ const QueryEditorExistingQueryInfoModal = observer(
   },
 );
 
-const QueryEditorHeaderContent = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const editorStore = useQueryEditorStore();
-    const applicationStore = useLegendQueryApplicationStore();
-    const isExistingQuery = editorStore instanceof ExistingQueryEditorStore;
-    const renameQuery = (): void => {
-      if (editorStore instanceof ExistingQueryEditorStore) {
-        editorStore.updateState.setQueryRenamer(true);
-      }
-    };
-    const showQueryInfo = (): void => {
-      if (editorStore instanceof ExistingQueryEditorStore) {
-        editorStore.updateState.setShowQueryInfo(true);
-      }
-    };
-    // actions
-    const openQueryLoader = (): void => {
-      editorStore.queryLoaderState.setQueryLoaderDialogOpen(true);
-    };
-    const viewProject = (): void => {
-      LegendQueryTelemetryHelper.logEvent_QueryViewProjectLaunched(
-        editorStore.applicationStore.telemetryService,
-      );
-      const { groupId, artifactId, versionId } = editorStore.getProjectInfo();
-      createViewProjectHandler(applicationStore)(
-        groupId,
-        artifactId,
-        versionId,
-        undefined,
-      );
-    };
-    const viewSDLCProject = (): void => {
-      LegendQueryTelemetryHelper.logEvent_QueryViewSdlcProjectLaunched(
-        editorStore.applicationStore.telemetryService,
-      );
-      const { groupId, artifactId } = editorStore.getProjectInfo();
-      createViewSDLCProjectHandler(
-        applicationStore,
-        editorStore.depotServerClient,
-      )(groupId, artifactId, undefined).catch(
-        applicationStore.alertUnhandledError,
-      );
-    };
-    const TEMPORARY__toggleLightDarkMode = (): void => {
-      applicationStore.layoutService.setColorTheme(
-        applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
-          ? LEGEND_APPLICATION_COLOR_THEME.DEFAULT_DARK
-          : LEGEND_APPLICATION_COLOR_THEME.LEGACY_LIGHT,
-        { persist: true },
-      );
-    };
-
-    const openSaveQueryModal = (): void => {
-      if (editorStore instanceof ExistingQueryEditorStore) {
-        editorStore.updateState.showSaveModal();
-      }
-    };
-
-    const handleNewQuery = (): void => {
-      if (editorStore instanceof ExistingQueryEditorStore) {
-        const query = editorStore.query;
-        if (query) {
-          if (queryBuilderState instanceof DataSpaceQueryBuilderState) {
-            editorStore.applicationStore.navigationService.navigator.goToLocation(
-              generateDataSpaceQueryCreatorRoute(
-                query.groupId,
-                query.artifactId,
-                query.versionId,
-                queryBuilderState.dataSpace.path,
-                queryBuilderState.executionContext.name,
-                undefined,
-                undefined,
-              ),
-            );
-          } else {
-            const mapping =
-              editorStore.queryBuilderState?.executionContextState.mapping;
-            const runtime =
-              editorStore.queryBuilderState?.executionContextState.runtimeValue;
-            if (mapping && runtime instanceof RuntimePointer) {
-              editorStore.applicationStore.navigationService.navigator.goToLocation(
-                generateMappingQueryCreatorRoute(
-                  query.groupId,
-                  query.artifactId,
-                  query.versionId,
-                  mapping.path,
-                  runtime.packageableRuntime.value.path,
-                ),
-              );
-            }
-          }
-        }
-      }
-    };
-
-    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 handleQuerySaveAs = (): void => {
-      editorStore.queryCreatorState.open(
-        editorStore instanceof ExistingQueryEditorStore
-          ? editorStore.query
-          : undefined,
-      );
-    };
-
-    const renderQueryTitle = (): React.ReactNode => {
-      if (editorStore instanceof ExistingQueryEditorStore) {
-        return (
-          <QueryEditorExistingQueryHeader
-            queryBuilderState={queryBuilderState}
-            existingEditorStore={editorStore}
-          />
-        );
-      } else if (editorStore instanceof DataSpaceTemplateQueryCreatorStore) {
-        return (
-          <div className="query-editor__dataspace__header">
-            <div className="query-editor__header__content__main query-editor__header__content__title__text query-editor__dataspace__header__title__text">
-              {editorStore.templateQueryTitle}
-            </div>
-            <div className="query-editor__dataspace__header__title__tag">
-              template
-            </div>
-          </div>
-        );
-      }
-
-      return (
-        <div className="query-editor__header__content__main query-editor__header__content__title" />
-      );
-    };
-
-    const extraHelpMenuContentItems = applicationStore.pluginManager
-      .getApplicationPlugins()
-      .flatMap(
-        (plugin) =>
-          plugin.getExtraQueryEditorHelpMenuActionConfigurations?.() ?? [],
-      )
-      .map((item) => (
-        <MenuContentItem
-          key={item.key}
-          title={item.title ?? ''}
-          onClick={() => item.onClick(editorStore)}
-        >
-          {item.icon && <MenuContentItemIcon>{item.icon}</MenuContentItemIcon>}
-          <MenuContentItemLabel>{item.label}</MenuContentItemLabel>
-        </MenuContentItem>
-      ));
-
-    const proceedCuratedTemplateQueryPromotion = async (): Promise<void> => {
-      if (
-        !(
-          editorStore instanceof ExistingQueryEditorStore &&
-          queryBuilderState instanceof DataSpaceQueryBuilderState
-        )
-      ) {
-        return;
-      }
-      // fetch project data
-      const project = StoreProjectData.serialization.fromJson(
-        await editorStore.depotServerClient.getProject(
-          editorStore.lightQuery.groupId,
-          editorStore.lightQuery.artifactId,
-        ),
-      );
-
-      // find the matching SDLC instance
-      const projectIDPrefix = parseProjectIdentifier(project.projectId).prefix;
-      const matchingSDLCEntry =
-        editorStore.applicationStore.config.studioInstances.find(
-          (entry) => entry.sdlcProjectIDPrefix === projectIDPrefix,
-        );
-      if (matchingSDLCEntry) {
-        editorStore.applicationStore.navigationService.navigator.visitAddress(
-          buildUrl([
-            editorStore.applicationStore.config.studioApplicationUrl,
-            generateDataSpaceTemplateQueryPromotionRoute(
-              editorStore.lightQuery.groupId,
-              editorStore.lightQuery.artifactId,
-              editorStore.lightQuery.versionId,
-              queryBuilderState.dataSpace.path,
-              editorStore.lightQuery.id,
-            ),
-          ]),
-        );
-      } else {
-        editorStore.applicationStore.notificationService.notifyWarning(
-          `Can't find the corresponding SDLC instance to productionize the query`,
-        );
-      }
-    };
-
-    const proceedTemplate = (): void => {
-      queryBuilderState.changeDetectionState.alertUnsavedChanges(() => {
-        proceedCuratedTemplateQueryPromotion().catch(
-          editorStore.applicationStore.alertUnhandledError,
-        );
-      });
-    };
-
-    return (
-      <div
-        className="query-editor__header__content"
-        data-testid={QUERY_EDITOR_TEST_ID.QUERY_EDITOR_ACTIONS}
-      >
-        {renderQueryTitle()}
-
-        <div className="query-editor__header__actions">
-          {applicationStore.pluginManager
-            .getApplicationPlugins()
-            .flatMap(
-              (plugin) =>
-                plugin.getExtraQueryEditorActionConfigurations?.(editorStore) ??
-                [],
-            )
-            .map((actionConfig) => (
-              <Fragment key={actionConfig.key}>
-                {actionConfig.renderer(editorStore, queryBuilderState)}
-              </Fragment>
-            ))}
-          <>
-            {editorStore instanceof ExistingQueryEditorStore &&
-              queryBuilderState instanceof DataSpaceQueryBuilderState && (
-                <button
-                  className="query-editor__header__action btn--dark"
-                  tabIndex={-1}
-                  onClick={proceedTemplate}
-                  title={
-                    !(editorStore instanceof ExistingQueryEditorStore)
-                      ? 'Please save your query first before promoting'
-                      : 'Promote Curated Template query...'
-                  }
-                >
-                  <ArrowCircleUpIcon className="query-editor__header__action__icon--productionize" />
-                  <div className="query-editor__header__action__label">
-                    Promote as Template Query
-                  </div>
-                </button>
-              )}
-          </>
-          <Button
-            className="query-editor__header__action btn--dark"
-            disabled={editorStore.isPerformingBlockingAction}
-            onClick={openQueryLoader}
-            title="Load query..."
-          >
-            <ManageSearchIcon className="query-editor__header__action__icon--load" />
-            <div className="query-editor__header__action__label">
-              Load Query
-            </div>
-          </Button>
-
-          {isExistingQuery && (
-            <Button
-              className="query-editor__header__action btn--dark"
-              disabled={editorStore.isPerformingBlockingAction}
-              onClick={handleNewQuery}
-              title="New query"
-            >
-              <SaveCurrIcon />
-              <div className="query-editor__header__action__label">
-                New Query
-              </div>
-            </Button>
-          )}
-          <Button
-            className="query-editor__header__action btn--dark"
-            disabled={
-              !isExistingQuery || editorStore.isPerformingBlockingAction
-            }
-            onClick={openSaveQueryModal}
-            title="Save query"
-          >
-            <SaveCurrIcon />
-            <div className="query-editor__header__action__label">Save</div>
-          </Button>
-          <Button
-            className="query-editor__header__action btn--dark"
-            disabled={editorStore.isPerformingBlockingAction}
-            onClick={handleQuerySaveAs}
-            title="Save as new query"
-          >
-            <SaveAsIcon />
-            <div className="query-editor__header__action__label">
-              Save As...
-            </div>
-          </Button>
-          <DropdownMenu
-            className="query-editor__header__action btn--dark"
-            disabled={editorStore.isViewProjectActionDisabled}
-            content={
-              <MenuContent>
-                {extraHelpMenuContentItems}
-                {queryDocEntry && (
-                  <MenuContentItem onClick={openQueryTutorial}>
-                    <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                    <MenuContentItemLabel>
-                      Open Documentation
-                    </MenuContentItemLabel>
-                  </MenuContentItem>
-                )}
-
-                <MenuContentItem onClick={toggleAssistant}>
-                  <MenuContentItemIcon>
-                    {!applicationStore.assistantService.isHidden ? (
-                      <CheckIcon />
-                    ) : null}
-                  </MenuContentItemIcon>
-                  <MenuContentItemLabel>
-                    Show Virtual Assistant
-                  </MenuContentItemLabel>
-                </MenuContentItem>
-              </MenuContent>
-            }
-          >
-            <div
-              className="query-editor__header__action__label"
-              title="See more options"
-            >
-              Help...
-            </div>
-            <CaretDownIcon className="query-editor__header__action__dropdown-trigger" />
-          </DropdownMenu>
-          {editorStore.queryLoaderState.isQueryLoaderDialogOpen && (
-            <QueryLoaderDialog
-              queryLoaderState={editorStore.queryLoaderState}
-              title="Load query"
-            />
-          )}
-          <button
-            title="Toggle light/dark mode"
-            onClick={TEMPORARY__toggleLightDarkMode}
-            className="query-editor__header__action query-editor__header__action__theme-toggler"
-          >
-            {applicationStore.layoutService
-              .TEMPORARY__isLightColorThemeEnabled ? (
-              <>
-                <LightBulbIcon className="query-editor__header__action__icon--bulb--light" />
-              </>
-            ) : (
-              <>
-                <EmptyLightBulbIcon className="query-editor__header__action__icon--bulb--dark" />
-              </>
-            )}
-          </button>
-
-          <DropdownMenu
-            className="query-editor__header__action btn--medium"
-            disabled={editorStore.isViewProjectActionDisabled}
-            content={
-              <MenuContent>
-                {isExistingQuery && (
-                  <MenuContentItem
-                    className="query-editor__header__action__options"
-                    onClick={renameQuery}
-                    disabled={!isExistingQuery}
-                  >
-                    Rename Query
-                  </MenuContentItem>
-                )}
-                {isExistingQuery && (
-                  <MenuContentItem
-                    className="query-editor__header__action__options"
-                    onClick={showQueryInfo}
-                    disabled={!isExistingQuery}
-                  >
-                    Get Query Info
-                  </MenuContentItem>
-                )}
-                <MenuContentItem
-                  className="query-editor__header__action__options"
-                  disabled={editorStore.isViewProjectActionDisabled}
-                  onClick={viewProject}
-                >
-                  Go to Project
-                </MenuContentItem>
-                <MenuContentItem
-                  className="query-editor__header__action__options"
-                  disabled={editorStore.isViewProjectActionDisabled}
-                  onClick={viewSDLCProject}
-                >
-                  Go to SDLC project
-                </MenuContentItem>
-              </MenuContent>
-            }
-          >
-            <div
-              className="query-editor__header__action__label"
-              title="See more options"
-            >
-              More Actions...
-            </div>
-            <CaretDownIcon className="query-editor__header__action__dropdown-trigger" />
-          </DropdownMenu>
-
-          {editorStore.queryCreatorState.showCreateModal && (
-            <CreateQueryDialog />
-          )}
-          {isExistingQuery &&
-            editorStore.updateState.showQueryInfo &&
-            editorStore.query && (
-              <QueryEditorExistingQueryInfoModal
-                existingEditorStore={editorStore}
-                query={editorStore.query}
-              />
-            )}
-        </div>
-      </div>
-    );
-  },
-);
-
 export const QueryEditor = observer(() => {
   const applicationStore = useApplicationStore();
   const editorStore = useQueryEditorStore();
   const isLoadingEditor = !editorStore.initState.hasCompleted;
+  const isExistingQuery = editorStore instanceof ExistingQueryEditorStore;
 
   // documentation
   const appDocUrl = applicationStore.documentationService.url;
@@ -1024,6 +570,8 @@ export const QueryEditor = observer(() => {
         generateQuerySetupRoute(),
       ),
     );
+  const goToReleaseLog = (): void =>
+    applicationStore.releaseNotesService.setReleaseLog(true);
   // settings
   // NOTE: this is temporary until we find a better home for these settings in query builder
   const engineConfig =
@@ -1041,10 +589,10 @@ export const QueryEditor = observer(() => {
 
   return (
     <div className="query-editor">
-      <div className="query-editor__header">
-        <div className="query-editor__header__menu">
+      <div className="query-editor__logo-header">
+        <div className="query-editor__logo-header__menu">
           <DropdownMenu
-            className="query-editor__header__menu-item"
+            className="query-editor__logo-header__menu-item"
             menuProps={{
               anchorOrigin: { vertical: 'top', horizontal: 'right' },
               transformOrigin: { vertical: 'top', horizontal: 'left' },
@@ -1055,6 +603,9 @@ export const QueryEditor = observer(() => {
                 <MenuContentItem onClick={goToQuerySetup}>
                   Back to query setup
                 </MenuContentItem>
+                <MenuContentItem onClick={goToReleaseLog}>
+                  Legend Query Release Log
+                </MenuContentItem>
                 <MenuContentItem
                   disabled={!appDocUrl}
                   onClick={goToDocumentation}
@@ -1089,11 +640,22 @@ export const QueryEditor = observer(() => {
             <MenuIcon />
           </DropdownMenu>
         </div>
-        {!isLoadingEditor && editorStore.queryBuilderState && (
-          <QueryEditorHeaderContent
-            queryBuilderState={editorStore.queryBuilderState}
+        <div className="query-editor__logo-header__name">Legend Query</div>
+        {editorStore.queryLoaderState.isQueryLoaderDialogOpen && (
+          <QueryLoaderDialog
+            queryLoaderState={editorStore.queryLoaderState}
+            title="Load query"
           />
         )}
+        {editorStore.queryCreatorState.showCreateModal && <CreateQueryDialog />}
+        {isExistingQuery &&
+          editorStore.updateState.showQueryInfo &&
+          editorStore.query && (
+            <QueryEditorExistingQueryInfoModal
+              existingEditorStore={editorStore}
+              query={editorStore.query}
+            />
+          )}
       </div>
       <div className="query-editor__content">
         <PanelLoadingIndicator isLoading={isLoadingEditor} />

package/src/components/__test-utils__/QueryEditorComponentTestUtils.tsx

@@ -43,6 +43,7 @@ import {
 } from '@finos/legend-query-builder';
 import { LegendQueryFrameworkProvider } from '../LegendQueryFrameworkProvider.js';
 import { TEST__BrowserEnvironmentProvider } from '@finos/legend-application/test';
+import { Core_LegendQueryApplicationPlugin } from '../Core_LegendQueryApplicationPlugin.js';
 
 const TEST_QUERY_ID = 'test-query-id';
 export const TEST_QUERY_NAME = 'MyTestQuery';
@@ -55,6 +56,7 @@ export const TEST__provideMockedQueryEditorStore = (customization?: {
 }): ExistingQueryEditorStore => {
   const pluginManager =
     customization?.pluginManager ?? LegendQueryPluginManager.create();
+  pluginManager.usePlugins([new Core_LegendQueryApplicationPlugin()]).install();
   const applicationStore =
     customization?.applicationStore ??
     new ApplicationStore(