@finos/legend-application-query 13.4.12 → 13.4.14

package/src/components/QueryEditor.tsx

@@ -21,7 +21,6 @@ import {
   DropdownMenu,
   MenuContent,
   MenuContentItem,
-  CaretDownIcon,
   MenuIcon,
   MenuContentDivider,
   MenuContentItemIcon,
@@ -33,21 +32,17 @@ import {
   ModalFooter,
   ModalTitle,
   ModalFooterButton,
-  ManageSearchIcon,
-  LightBulbIcon,
-  EmptyLightBulbIcon,
-  SaveCurrIcon,
-  SaveAsIcon,
   ExclamationTriangleIcon,
   PanelListItem,
-  Button,
   clsx,
   ModalHeaderActions,
   TimesIcon,
   Panel,
   PanelFullContent,
   CustomSelectorInput,
-  ArrowCircleUpIcon,
+  PencilIcon,
+  MoonIcon,
+  SunIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
@@ -59,13 +54,8 @@ import {
   LEGEND_QUERY_ROUTE_PATTERN_TOKEN,
   generateQuerySetupRoute,
   generateExistingQueryEditorRoute,
-  generateMappingQueryCreatorRoute,
 } from '../__lib__/LegendQueryNavigation.js';
-import {
-  createViewProjectHandler,
-  createViewSDLCProjectHandler,
-  ExistingQueryEditorStore,
-} from '../stores/QueryEditorStore.js';
+import { ExistingQueryEditorStore } from '../stores/QueryEditorStore.js';
 import {
   LEGEND_APPLICATION_COLOR_THEME,
   useApplicationStore,
@@ -78,7 +68,6 @@ import {
   useQueryEditorStore,
 } from './QueryEditorStoreProvider.js';
 import { flowResult } from 'mobx';
-import { useLegendQueryApplicationStore } from './LegendQueryFrameworkProvider.js';
 import {
   QueryBuilder,
   QueryBuilderNavigationBlocker,
@@ -86,33 +75,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 +257,7 @@ const SaveQueryDialog = observer(
   },
 );
 
-const QueryEditorExistingQueryHeader = observer(
+export const QueryEditorExistingQueryHeader = observer(
   (props: {
     queryBuilderState: QueryBuilderState;
     existingEditorStore: ExistingQueryEditorStore;
@@ -386,6 +362,12 @@ const QueryEditorExistingQueryHeader = observer(
             title="Double-click to rename query"
           >
             {existingEditorStore.lightQuery.name}
+            <button
+              className="panel__content__form__section__list__item__edit-btn"
+              onClick={enableRename}
+            >
+              <PencilIcon />
+            </button>
           </div>
         )}
         {existingEditorStore.updateState.saveModal && (
@@ -576,435 +558,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 +582,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 =
@@ -1033,6 +593,15 @@ export const QueryEditor = observer(() => {
       !engineConfig.useClientRequestPayloadCompression,
     );
 
+  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 },
+    );
+  };
+
   useEffect(() => {
     flowResult(editorStore.initialize()).catch(
       applicationStore.alertUnhandledError,
@@ -1041,60 +610,80 @@ export const QueryEditor = observer(() => {
 
   return (
     <div className="query-editor">
-      <div className="query-editor__header">
-        <div className="query-editor__header__menu">
-          <DropdownMenu
-            className="query-editor__header__menu-item"
-            menuProps={{
-              anchorOrigin: { vertical: 'top', horizontal: 'right' },
-              transformOrigin: { vertical: 'top', horizontal: 'left' },
-              elevation: 7,
-            }}
-            content={
-              <MenuContent>
-                <MenuContentItem onClick={goToQuerySetup}>
-                  Back to query setup
-                </MenuContentItem>
-                <MenuContentItem
-                  disabled={!appDocUrl}
-                  onClick={goToDocumentation}
-                >
-                  Documentation
-                </MenuContentItem>
-                {docLinks?.map((entry) => (
+      <div className="query-editor__logo-header">
+        <div className="query-editor__logo-header__combo">
+          <div className="query-editor__logo-header__combo__menu">
+            <DropdownMenu
+              className="query-editor__logo-header__combo__menu-item"
+              menuProps={{
+                anchorOrigin: { vertical: 'top', horizontal: 'right' },
+                transformOrigin: { vertical: 'top', horizontal: 'left' },
+                elevation: 7,
+              }}
+              content={
+                <MenuContent>
+                  <MenuContentItem onClick={goToQuerySetup}>
+                    Back to query setup
+                  </MenuContentItem>
+                  <MenuContentItem onClick={goToReleaseLog}>
+                    Legend Query Release Log
+                  </MenuContentItem>
                   <MenuContentItem
-                    key={entry.key}
-                    onClick={(): void => goToDocLink(entry.url)}
+                    disabled={!appDocUrl}
+                    onClick={goToDocumentation}
                   >
-                    {entry.label}
+                    Documentation
                   </MenuContentItem>
-                ))}
-                <MenuContentDivider />
-                <MenuContentItem disabled={true}>Settings</MenuContentItem>
-                <MenuContentItem
-                  onClick={toggleEngineClientRequestPayloadCompression}
-                >
-                  <MenuContentItemIcon>
-                    {engineConfig.useClientRequestPayloadCompression ? (
-                      <CheckIcon />
-                    ) : null}
-                  </MenuContentItemIcon>
-                  <MenuContentItemLabel>
-                    Compress request payload
-                  </MenuContentItemLabel>
-                </MenuContentItem>
-              </MenuContent>
-            }
-          >
-            <MenuIcon />
-          </DropdownMenu>
+                  {docLinks?.map((entry) => (
+                    <MenuContentItem
+                      key={entry.key}
+                      onClick={(): void => goToDocLink(entry.url)}
+                    >
+                      {entry.label}
+                    </MenuContentItem>
+                  ))}
+                  <MenuContentDivider />
+                  <MenuContentItem disabled={true}>Settings</MenuContentItem>
+                  <MenuContentItem
+                    onClick={toggleEngineClientRequestPayloadCompression}
+                  >
+                    <MenuContentItemIcon>
+                      {engineConfig.useClientRequestPayloadCompression ? (
+                        <CheckIcon />
+                      ) : null}
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Compress request payload
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                </MenuContent>
+              }
+            >
+              <MenuIcon />
+            </DropdownMenu>
+          </div>
+          <div className="query-editor__logo-header__combo__name">
+            Legend Query
+          </div>
         </div>
-        {!isLoadingEditor && editorStore.queryBuilderState && (
-          <QueryEditorHeaderContent
-            queryBuilderState={editorStore.queryBuilderState}
-          />
-        )}
+        <button
+          title="Toggle light/dark mode"
+          onClick={TEMPORARY__toggleLightDarkMode}
+          className="query-editor__header__action query-editor__header__action__theme-toggler"
+        >
+          {applicationStore.layoutService
+            .TEMPORARY__isLightColorThemeEnabled ? (
+            <>
+              <SunIcon className="query-editor__header__action__icon--bulb--light" />
+            </>
+          ) : (
+            <>
+              <MoonIcon className="query-editor__header__action__icon--bulb--dark" />
+            </>
+          )}
+        </button>
       </div>
+
       <div className="query-editor__content">
         <PanelLoadingIndicator isLoading={isLoadingEditor} />
         {!isLoadingEditor && editorStore.queryBuilderState && (
@@ -1122,6 +711,21 @@ export const QueryEditor = observer(() => {
             />
           )}
       </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>
   );
 });