@finos/legend-application-studio 15.2.0 → 16.0.1

package/src/components/editor/edit-panel/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -25,6 +25,9 @@ import { observer } from 'mobx-react-lite';
 import {
   ProjectConfigurationEditorState,
   CONFIGURATION_EDITOR_TAB,
+  DEPENDENCY_INFO_TYPE,
+  getDependencyTreeStringFromInfo,
+  getConflictsString,
 } from '../../../../stores/editor-state/ProjectConfigurationEditorState.js';
 import {
   type SelectComponent,
@@ -36,6 +39,8 @@ import {
   CheckCircleIcon,
   ExclamationCircleIcon,
   ExternalLinkSquareIcon,
+  ArchiveIcon,
+  Dialog,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
@@ -46,6 +51,8 @@ import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   ActionAlertActionType,
   ActionAlertType,
+  EDITOR_LANGUAGE,
+  TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
 import { LEGEND_STUDIO_APP_EVENT } from '../../../../stores/LegendStudioAppEvent.js';
@@ -55,7 +62,9 @@ import {
   type ProjectData,
   compareSemVerVersions,
   generateGAVCoordinates,
+  type ProjectDependencyInfo,
 } from '@finos/legend-server-depot';
+import { generateViewProjectRoute } from '../../../../stores/LegendStudioRouter.js';
 
 interface VersionOption {
   label: string;
@@ -192,14 +201,73 @@ const formatOptionLabel = (option: ProjectOption): React.ReactNode => (
   </div>
 );
 
+const ProjectDependencyInfoModal = observer(
+  (props: {
+    configState: ProjectConfigurationEditorState;
+    info: ProjectDependencyInfo;
+    type: DEPENDENCY_INFO_TYPE;
+  }) => {
+    const { configState, info, type } = props;
+    const closeModal = (): void =>
+      configState.setDependencyInfoModal(undefined);
+    return (
+      <Dialog
+        open={Boolean(configState.dependencyInfoModalType)}
+        onClose={closeModal}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <div className="modal modal--dark editor-modal">
+          <div className="modal__header">
+            <div className="modal__title">{prettyCONSTName(type)}</div>
+          </div>
+          <div className="modal__body">
+            <div className="panel__content">
+              {type === DEPENDENCY_INFO_TYPE.TREE ? (
+                <TextInputEditor
+                  inputValue={getDependencyTreeStringFromInfo(info)}
+                  isReadOnly={true}
+                  language={EDITOR_LANGUAGE.TEXT}
+                  showMiniMap={true}
+                />
+              ) : (
+                <TextInputEditor
+                  inputValue={getConflictsString(info)}
+                  isReadOnly={true}
+                  language={EDITOR_LANGUAGE.TEXT}
+                  showMiniMap={true}
+                />
+              )}
+            </div>
+
+            <div className="modal__footer">
+              <button
+                className="btn modal__footer__close-btn"
+                onClick={closeModal}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);
+
 const ProjectDependencyEditor = observer(
   (props: {
     projectDependency: ProjectDependency;
     deleteValue: () => void;
     isReadOnly: boolean;
+    projects: Map<string, ProjectData>;
   }) => {
     // init
-    const { projectDependency, deleteValue, isReadOnly } = props;
+    const { projectDependency, deleteValue, isReadOnly, projects } = props;
+    const projectDependencyData = projects.get(projectDependency.projectId);
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const projectSelectorRef = useRef<SelectComponent>(null);
@@ -228,6 +296,9 @@ const ProjectDependencyEditor = observer(
         projectDependency.setProjectId(val?.value.coordinates ?? '');
         if (val) {
           projectDependency.setVersionId(val.value.latestVersion);
+          flowResult(configState.fetchDependencyInfo()).catch(
+            applicationStore.alertUnhandledError,
+          );
         }
       }
     };
@@ -258,6 +329,9 @@ const ProjectDependencyEditor = observer(
       ) {
         try {
           projectDependency.setVersionId(val?.value ?? '');
+          flowResult(configState.fetchDependencyInfo()).catch(
+            applicationStore.alertUnhandledError,
+          );
         } catch (error) {
           assertErrorThrown(error);
           applicationStore.log.error(
@@ -267,7 +341,7 @@ const ProjectDependencyEditor = observer(
         }
       }
     };
-    const openProject = (): void => {
+    const openProjectinArchive = (): void => {
       if (!projectDependency.isLegacyDependency) {
         const projectDependencyVersionId =
           projectDependency.versionId === MASTER_SNAPSHOT_ALIAS
@@ -284,6 +358,17 @@ const ProjectDependencyEditor = observer(
         );
       }
     };
+    // NOTE: This assumes that the dependant project is in the same studio instance as the current project
+    // In the future, the studio instance may be part of the project data
+    const openProject = (): void => {
+      if (projectDependencyData) {
+        applicationStore.navigator.openNewWindow(
+          applicationStore.navigator.generateLocation(
+            generateViewProjectRoute(projectDependencyData.projectId),
+          ),
+        );
+      }
+    };
     const projectSelectorPlaceholder = !projectDependency.projectId.length
       ? 'Choose project'
       : versionDisabled
@@ -326,7 +411,8 @@ const ProjectDependencyEditor = observer(
           disabled={
             projectDependency.isLegacyDependency ||
             !selectedProject ||
-            !selectedVersionOption
+            !selectedVersionOption ||
+            !projectDependencyData
           }
           onClick={openProject}
           tabIndex={-1}
@@ -334,6 +420,19 @@ const ProjectDependencyEditor = observer(
         >
           <ExternalLinkSquareIcon />
         </button>
+        <button
+          className="project-dependency-editor__visit-btn btn--dark btn--sm"
+          disabled={
+            projectDependency.isLegacyDependency ||
+            !selectedProject ||
+            !selectedVersionOption
+          }
+          onClick={openProjectinArchive}
+          tabIndex={-1}
+          title={'Open Project in archive'}
+        >
+          <ArchiveIcon />
+        </button>
         <button
           className="project-dependency-editor__remove-btn btn--dark btn--caution"
           disabled={isReadOnly}
@@ -348,6 +447,52 @@ const ProjectDependencyEditor = observer(
   },
 );
 
+const ProjectDependencyActions = observer(
+  (props: { config: ProjectConfigurationEditorState }) => {
+    const { config } = props;
+    const hasConflicts = config.dependencyInfo?.conflicts.length;
+    const viewTree = (): void => {
+      if (config.dependencyInfo) {
+        config.setDependencyInfoModal(DEPENDENCY_INFO_TYPE.TREE);
+      }
+    };
+    const viewConflict = (): void => {
+      if (config.dependencyInfo) {
+        config.setDependencyInfoModal(DEPENDENCY_INFO_TYPE.CONFLICTS);
+      }
+    };
+    return (
+      <div className="project-dependency-editor__info">
+        <button
+          className="project-dependency-editor__tree-btn"
+          tabIndex={-1}
+          onClick={viewTree}
+          disabled={
+            !config.dependencyInfo || !config.dependencyInfo.conflicts.length
+          }
+          title={`View dependency tree`}
+        >
+          View Dependency Tree
+        </button>
+
+        {Boolean(hasConflicts) && (
+          <button
+            className="project-dependency-editor__conflicts-btn"
+            tabIndex={-1}
+            onClick={viewConflict}
+            disabled={
+              !config.dependencyInfo || !config.dependencyInfo.conflicts.length
+            }
+            title={`View any conflcits in your dependencies`}
+          >
+            View Conflicts
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
 export const ProjectConfigurationEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
@@ -376,8 +521,12 @@ export const ProjectConfigurationEditor = observer(() => {
   const currentProjectConfiguration = configState.currentProjectConfiguration;
   const deleteProjectDependency =
     (val: ProjectDependency): (() => void) =>
-    (): void =>
+    (): void => {
       currentProjectConfiguration.deleteProjectDependency(val);
+      flowResult(configState.fetchDependencyInfo()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
   const addValue = (): void => {
     if (!isReadOnly) {
       if (selectedTab === CONFIGURATION_EDITOR_TAB.PROJECT_DEPENDENCIES) {
@@ -389,6 +538,9 @@ export const ProjectConfigurationEditor = observer(() => {
           );
           dependencyToAdd.setVersionId(projectToAdd.latestVersion);
           currentProjectConfiguration.addProjectDependency(dependencyToAdd);
+          flowResult(configState.fetchDependencyInfo()).catch(
+            applicationStore.alertUnhandledError,
+          );
         } else {
           currentProjectConfiguration.addProjectDependency(
             new ProjectDependency(''),
@@ -441,6 +593,9 @@ export const ProjectConfigurationEditor = observer(() => {
       flowResult(configState.fectchAssociatedProjectsAndVersions()).catch(
         applicationStore.alertUnhandledError,
       );
+      flowResult(configState.fetchDependencyInfo()).catch(
+        applicationStore.alertUnhandledError,
+      );
     }
   }, [applicationStore, configState, selectedTab]);
 
@@ -510,6 +665,7 @@ export const ProjectConfigurationEditor = observer(() => {
           )}
           {selectedTab === CONFIGURATION_EDITOR_TAB.PROJECT_DEPENDENCIES && (
             <div className="panel__content__lists">
+              <ProjectDependencyActions config={configState} />
               {currentProjectConfiguration.projectDependencies.map(
                 (projectDependency) => (
                   <ProjectDependencyEditor
@@ -517,11 +673,21 @@ export const ProjectConfigurationEditor = observer(() => {
                     projectDependency={projectDependency}
                     deleteValue={deleteProjectDependency(projectDependency)}
                     isReadOnly={isReadOnly}
+                    projects={configState.projects}
                   />
                 ),
               )}
             </div>
           )}
+
+          {configState.dependencyInfo &&
+            configState.dependencyInfoModalType && (
+              <ProjectDependencyInfoModal
+                configState={configState}
+                info={configState.dependencyInfo}
+                type={configState.dependencyInfoModalType}
+              />
+            )}
         </div>
       </div>
     </div>

package/src/components/editor/edit-panel/service-editor/ServiceExecutionQueryEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import type {
   ServicePureExecutionQueryState,
@@ -34,8 +34,9 @@ import {
   CaretDownIcon,
   MenuContentItem,
   PauseCircleIcon,
+  PencilIcon,
 } from '@finos/legend-art';
-import { debounce } from '@finos/legend-shared';
+import { assertErrorThrown, debounce, hashObject } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -45,8 +46,16 @@ import {
   useApplicationStore,
 } from '@finos/legend-application';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import type { LightQuery } from '@finos/legend-graph';
-import type { DSLService_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLService_LegendStudioApplicationPlugin_Extension.js';
+import {
+  type LightQuery,
+  isStubbed_PackageableElement,
+  isStubbed_RawLambda,
+  KeyedExecutionParameter,
+} from '@finos/legend-graph';
+import {
+  type QueryBuilderState,
+  ServiceQueryBuilderState,
+} from '@finos/legend-query-builder';
 
 const ServiceExecutionResultViewer = observer(
   (props: { executionState: ServicePureExecutionState }) => {
@@ -233,22 +242,101 @@ export const ServiceExecutionQueryEditor = observer(
     isReadOnly: boolean;
   }) => {
     const { executionState, isReadOnly } = props;
-    const queryState = executionState.queryState;
-    const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
-    const extraServiceQueryEditorActions = editorStore.pluginManager
-      .getApplicationPlugins()
-      .flatMap(
-        (plugin) =>
-          (
-            plugin as DSLService_LegendStudioApplicationPlugin_Extension
-          ).getExtraServiceQueryEditorActionConfigurations?.() ?? [],
-      )
-      .map((config) => (
-        <Fragment key={config.key}>
-          {config.renderer(executionState, isReadOnly)}
-        </Fragment>
-      ));
+    const editorStore = useEditorStore();
+    const queryState = executionState.queryState;
+
+    // actions
+    const editWithQueryBuilder = applicationStore.guardUnhandledError(
+      async () => {
+        const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+        executionState.setOpeningQueryEditor(true);
+        const service = executionState.serviceEditorState.service;
+        const selectedExecutionState =
+          executionState.selectedExecutionContextState;
+        if (selectedExecutionState) {
+          const mapping = selectedExecutionState.executionContext.mapping.value;
+          if (!isStubbed_PackageableElement(mapping)) {
+            await flowResult(
+              embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+                setupQueryBuilderState: (): QueryBuilderState => {
+                  const queryBuilderState = new ServiceQueryBuilderState(
+                    embeddedQueryBuilderState.editorStore.applicationStore,
+                    embeddedQueryBuilderState.editorStore.graphManagerState,
+                    service,
+                    selectedExecutionState.executionContext instanceof
+                    KeyedExecutionParameter
+                      ? selectedExecutionState.executionContext.key
+                      : undefined,
+                  );
+                  queryBuilderState.initializeWithQuery(
+                    executionState.execution.func,
+                  );
+                  queryBuilderState.changeDetectionState.setQueryHashCode(
+                    hashObject(executionState.execution.func),
+                  );
+                  queryBuilderState.changeDetectionState.setIsEnabled(true);
+                  return queryBuilderState;
+                },
+                actionConfigs: [
+                  {
+                    key: 'save-query-btn',
+                    renderer: (
+                      queryBuilderState: QueryBuilderState,
+                    ): React.ReactNode => {
+                      const save = applicationStore.guardUnhandledError(
+                        async () => {
+                          try {
+                            const rawLambda = queryBuilderState.buildQuery();
+                            await flowResult(
+                              executionState.queryState.updateLamba(rawLambda),
+                            );
+                            applicationStore.notifySuccess(
+                              `Service query is updated`,
+                            );
+                            queryBuilderState.changeDetectionState.setQueryHashCode(
+                              hashObject(rawLambda),
+                            );
+                            embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
+                              undefined,
+                            );
+                          } catch (error) {
+                            assertErrorThrown(error);
+                            applicationStore.notifyError(
+                              `Can't save query: ${error.message}`,
+                            );
+                          }
+                        },
+                      );
+
+                      return (
+                        <button
+                          className="query-builder__dialog__header__custom-action"
+                          tabIndex={-1}
+                          disabled={isReadOnly}
+                          onClick={save}
+                        >
+                          Save Query
+                        </button>
+                      );
+                    },
+                  },
+                ],
+                disableCompile: isStubbed_RawLambda(
+                  executionState.queryState.query,
+                ),
+              }),
+            );
+            executionState.setOpeningQueryEditor(false);
+            return;
+          }
+        }
+        applicationStore.notifyWarning(
+          'Please specify a mapping and a runtime for the execution context to edit with query builder',
+        );
+        executionState.setOpeningQueryEditor(false);
+      },
+    );
     const importQuery = (): void => {
       queryState.setOpenQueryImporter(true);
     };
@@ -284,7 +372,14 @@ export const ServiceExecutionQueryEditor = observer(
             </div>
           </div>
           <div className="panel__header__actions">
-            {extraServiceQueryEditorActions}
+            <button
+              className="panel__header__action"
+              tabIndex={-1}
+              onClick={editWithQueryBuilder}
+              title="Edit query..."
+            >
+              <PencilIcon />
+            </button>
             <button
               className="panel__header__action"
               onClick={importQuery}

package/src/components/editor/edit-panel/uml-editor/ClassQueryBuilder.tsx

@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  type Class,
+  PackageableElementExplicitReference,
+  PureSingleExecution,
+  Service,
+} from '@finos/legend-graph';
+import {
+  type QueryBuilderState,
+  ClassQueryBuilderState,
+} from '@finos/legend-query-builder';
+import { assertErrorThrown, guaranteeNonNullable } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import type { EditorStore } from '../../../../stores/EditorStore.js';
+import type { EmbeddedQueryBuilderState } from '../../../../stores/EmbeddedQueryBuilderState.js';
+import {
+  service_initNewService,
+  service_setExecution,
+} from '../../../../stores/graphModifier/DSLService_GraphModifierHelper.js';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import { NewServiceModal } from '../service-editor/NewServiceModal.js';
+
+const promoteQueryToService = async (
+  packagePath: string,
+  serviceName: string,
+  embeddedQueryBuilderState: EmbeddedQueryBuilderState,
+  queryBuilderState: QueryBuilderState,
+): Promise<void> => {
+  const editorStore = embeddedQueryBuilderState.editorStore;
+  const applicationStore = editorStore.applicationStore;
+  try {
+    const mapping = guaranteeNonNullable(
+      queryBuilderState.mapping,
+      'Mapping is required to create service execution',
+    );
+    const runtime = guaranteeNonNullable(
+      queryBuilderState.runtimeValue,
+      'Runtime is required to create service execution',
+    );
+    const query = queryBuilderState.buildQuery();
+    const service = new Service(serviceName);
+    service_initNewService(service);
+    service_setExecution(
+      service,
+      new PureSingleExecution(
+        query,
+        service,
+        PackageableElementExplicitReference.create(mapping),
+        runtime,
+      ),
+      editorStore.changeDetectionState.observerContext,
+    );
+    await flowResult(editorStore.addElement(service, packagePath, true));
+    await flowResult(
+      embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(undefined),
+    ).catch(applicationStore.alertUnhandledError);
+    applicationStore.notifySuccess(`Service '${service.name}' created`);
+  } catch (error) {
+    assertErrorThrown(error);
+    applicationStore.notifyError(error);
+  }
+};
+
+const PromoteToServiceQueryBuilderAction = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const editorStore = useEditorStore();
+    const queryBuilderExtension = editorStore.embeddedQueryBuilderState;
+    const [openNewServiceModal, setOpenNewServiceModal] = useState(false);
+    const showNewServiceModal = (): void => setOpenNewServiceModal(true);
+    const closeNewServiceModal = (): void => setOpenNewServiceModal(false);
+    const allowPromoteToService = Boolean(
+      queryBuilderState.mapping && queryBuilderState.runtimeValue,
+    );
+    const promoteToService = async (
+      packagePath: string,
+      serviceName: string,
+    ): Promise<void> => {
+      if (allowPromoteToService) {
+        await promoteQueryToService(
+          packagePath,
+          serviceName,
+          queryBuilderExtension,
+          queryBuilderState,
+        );
+      }
+    };
+    return (
+      <>
+        <button
+          className="query-builder__dialog__header__custom-action"
+          tabIndex={-1}
+          onClick={showNewServiceModal}
+          disabled={!allowPromoteToService}
+        >
+          Promote to Service
+        </button>
+        {queryBuilderState.mapping && (
+          <NewServiceModal
+            mapping={queryBuilderState.mapping}
+            close={closeNewServiceModal}
+            showModal={openNewServiceModal}
+            promoteToService={promoteToService}
+          />
+        )}
+      </>
+    );
+  },
+);
+
+export const queryClass = async (
+  _class: Class,
+  editorStore: EditorStore,
+): Promise<void> => {
+  const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+  await flowResult(
+    embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+      setupQueryBuilderState: () => {
+        const queryBuilderState = new ClassQueryBuilderState(
+          embeddedQueryBuilderState.editorStore.applicationStore,
+          embeddedQueryBuilderState.editorStore.graphManagerState,
+        );
+        queryBuilderState.changeClass(_class);
+        queryBuilderState.propagateClassChange(_class);
+        return queryBuilderState;
+      },
+      // TODO: when we modularize DSL service, we will create an extension
+      // mechanism for this action config
+      // See https://github.com/finos/legend-studio/issues/65
+      actionConfigs: [
+        {
+          key: 'promote-to-service-btn',
+          renderer: (queryBuilderState: QueryBuilderState): React.ReactNode => (
+            <PromoteToServiceQueryBuilderAction
+              queryBuilderState={queryBuilderState}
+            />
+          ),
+        },
+      ],
+    }),
+  );
+};

package/src/components/editor/side-bar/Explorer.tsx

@@ -75,10 +75,12 @@ import {
   isSystemElement,
   isDependencyElement,
   isElementReadOnly,
+  Class,
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/shared/ModelUtil.js';
 import { useLegendStudioApplicationStore } from '../../LegendStudioBaseStoreProvider.js';
+import { queryClass } from '../edit-panel/uml-editor/ClassQueryBuilder.js';
 
 const ElementRenamer = observer(() => {
   const editorStore = useEditorStore();
@@ -198,6 +200,23 @@ const ExplorerContextMenu = observer(
         ? node.packageableElement
         : undefined
       : editorStore.graphManagerState.graph.root;
+    const elementTypes = ([PACKAGEABLE_ELEMENT_TYPE.PACKAGE] as string[])
+      .concat(editorStore.getSupportedElementTypes())
+      .filter(
+        // NOTE: we can only create package in root
+        (type) =>
+          _package !== editorStore.graphManagerState.graph.root ||
+          type === PACKAGEABLE_ELEMENT_TYPE.PACKAGE,
+      );
+
+    // actions
+    const buildQuery = editorStore.applicationStore.guardUnhandledError(
+      async () => {
+        if (node?.packageableElement instanceof Class) {
+          await queryClass(node.packageableElement, editorStore);
+        }
+      },
+    );
     const removeElement = (): void => {
       if (node) {
         flowResult(editorStore.deleteElement(node.packageableElement)).catch(
@@ -237,21 +256,11 @@ const ExplorerContextMenu = observer(
           .catch(applicationStore.alertUnhandledError);
       }
     };
-
     const createNewElement =
       (type: string): (() => void) =>
       (): void =>
         editorStore.newElementState.openModal(type, _package);
 
-    const elementTypes = ([PACKAGEABLE_ELEMENT_TYPE.PACKAGE] as string[])
-      .concat(editorStore.getSupportedElementTypes())
-      .filter(
-        // NOTE: we can only create package in root
-        (type) =>
-          _package !== editorStore.graphManagerState.graph.root ||
-          type === PACKAGEABLE_ELEMENT_TYPE.PACKAGE,
-      );
-
     if (_package && !isReadOnly) {
       return (
         <MenuContent data-testid={LEGEND_STUDIO_TEST_ID.EXPLORER_CONTEXT_MENU}>
@@ -281,6 +290,7 @@ const ExplorerContextMenu = observer(
 
     return (
       <MenuContent data-testid={LEGEND_STUDIO_TEST_ID.EXPLORER_CONTEXT_MENU}>
+        <MenuContentItem onClick={buildQuery}>Query...</MenuContentItem>
         {extraExplorerContextMenuItems}
         {!isReadOnly && node && (
           <>