@finos/legend-application-studio 15.2.0 → 16.0.0

package/src/components/editor/Editor.tsx

@@ -16,8 +16,6 @@
 
 import { Fragment, useState, useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useResizeDetector } from 'react-resize-detector';
 import type { Location } from 'history';
 import {
@@ -56,6 +54,7 @@ import {
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { WorkspaceSyncConflictResolver } from './side-bar/WorkspaceSyncConflictResolver.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
+import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
 
 export const Editor = withEditorStore(
   observer(() => {
@@ -232,86 +231,85 @@ export const Editor = withEditorStore(
     );
 
     return (
-      <DndProvider backend={HTML5Backend}>
-        <div className="app__page">
-          <div className="editor">
-            {promptComponent}
-            <GlobalHotKeys
-              keyMap={hotkeyMapping}
-              handlers={hotkeyHandlers}
-              allowChanges={true}
-            >
-              <div className="editor__body">
-                <ActivityBar />
-                <Backdrop className="backdrop" open={editorStore.backdrop} />
-                <div ref={ref} className="editor__content-container">
-                  <div className="editor__content">
-                    <ResizablePanelGroup orientation="vertical">
-                      <ResizablePanel
-                        {...getControlledResizablePanelProps(
-                          editorStore.sideBarDisplayState.size === 0,
-                          {
-                            onStopResize: resizeSideBar,
-                            size: editorStore.sideBarDisplayState.size,
-                          },
-                        )}
-                        direction={1}
-                      >
-                        <SideBar />
-                      </ResizablePanel>
-                      <ResizablePanelSplitter />
-                      <ResizablePanel minSize={300}>
-                        <ResizablePanelGroup orientation="horizontal">
-                          <ResizablePanel
-                            {...getControlledResizablePanelProps(
-                              editorStore.auxPanelDisplayState.isMaximized,
-                            )}
-                          >
-                            {(isResolvingConflicts || editable) &&
-                              editorStore.isInFormMode && <EditPanel />}
-                            {editable && editorStore.isInGrammarTextMode && (
-                              <GrammarTextEditor />
-                            )}
-                            {!editable && <EditPanelSplashScreen />}
-                          </ResizablePanel>
-                          <ResizablePanelSplitter>
-                            <ResizablePanelSplitterLine
-                              color={
-                                editorStore.auxPanelDisplayState.isMaximized
-                                  ? 'transparent'
-                                  : 'var(--color-dark-grey-250)'
-                              }
-                            />
-                          </ResizablePanelSplitter>
-                          <ResizablePanel
-                            {...getControlledResizablePanelProps(
-                              editorStore.auxPanelDisplayState.size === 0,
-                              {
-                                onStopResize: resizeAuxPanel,
-                                size: editorStore.auxPanelDisplayState.size,
-                              },
-                            )}
-                            direction={-1}
-                          >
-                            <AuxiliaryPanel />
-                          </ResizablePanel>
-                        </ResizablePanelGroup>
-                      </ResizablePanel>
-                    </ResizablePanelGroup>
-                  </div>
+      <div className="app__page">
+        <div className="editor">
+          {promptComponent}
+          <GlobalHotKeys
+            keyMap={hotkeyMapping}
+            handlers={hotkeyHandlers}
+            allowChanges={true}
+          >
+            <div className="editor__body">
+              <ActivityBar />
+              <Backdrop className="backdrop" open={editorStore.backdrop} />
+              <div ref={ref} className="editor__content-container">
+                <div className="editor__content">
+                  <ResizablePanelGroup orientation="vertical">
+                    <ResizablePanel
+                      {...getControlledResizablePanelProps(
+                        editorStore.sideBarDisplayState.size === 0,
+                        {
+                          onStopResize: resizeSideBar,
+                          size: editorStore.sideBarDisplayState.size,
+                        },
+                      )}
+                      direction={1}
+                    >
+                      <SideBar />
+                    </ResizablePanel>
+                    <ResizablePanelSplitter />
+                    <ResizablePanel minSize={300}>
+                      <ResizablePanelGroup orientation="horizontal">
+                        <ResizablePanel
+                          {...getControlledResizablePanelProps(
+                            editorStore.auxPanelDisplayState.isMaximized,
+                          )}
+                        >
+                          {(isResolvingConflicts || editable) &&
+                            editorStore.isInFormMode && <EditPanel />}
+                          {editable && editorStore.isInGrammarTextMode && (
+                            <GrammarTextEditor />
+                          )}
+                          {!editable && <EditPanelSplashScreen />}
+                        </ResizablePanel>
+                        <ResizablePanelSplitter>
+                          <ResizablePanelSplitterLine
+                            color={
+                              editorStore.auxPanelDisplayState.isMaximized
+                                ? 'transparent'
+                                : 'var(--color-dark-grey-250)'
+                            }
+                          />
+                        </ResizablePanelSplitter>
+                        <ResizablePanel
+                          {...getControlledResizablePanelProps(
+                            editorStore.auxPanelDisplayState.size === 0,
+                            {
+                              onStopResize: resizeAuxPanel,
+                              size: editorStore.auxPanelDisplayState.size,
+                            },
+                          )}
+                          direction={-1}
+                        >
+                          <AuxiliaryPanel />
+                        </ResizablePanel>
+                      </ResizablePanelGroup>
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
                 </div>
               </div>
-              {extraEditorExtensionComponents}
-              <StatusBar actionsDisabled={!editable} />
-              {editable && <ProjectSearchCommand />}
-              {editorStore.localChangesState.workspaceSyncState
-                .workspaceSyncConflictResolutionState.showModal && (
-                <WorkspaceSyncConflictResolver />
-              )}
-            </GlobalHotKeys>
-          </div>
+            </div>
+            <StatusBar actionsDisabled={!editable} />
+            {editable && <ProjectSearchCommand />}
+            {editorStore.localChangesState.workspaceSyncState
+              .workspaceSyncConflictResolutionState.showModal && (
+              <WorkspaceSyncConflictResolver />
+            )}
+            <EmbeddedQueryBuilder />
+            {extraEditorExtensionComponents}
+          </GlobalHotKeys>
         </div>
-      </DndProvider>
+      </div>
     );
   }),
 );

package/src/components/editor/edit-panel/GrammarTextEditor.tsx

@@ -98,9 +98,12 @@ import {
   MAPPING_WITH_M2M_CLASS_MAPPING_SNIPPET,
   MAPPING_WITH_ENUMERATION_MAPPING_SNIPPET,
   MAPPING_WITH_RELATIONAL_CLASS_MAPPING_SNIPPET,
+  POST_PROCESSOR_RELATIONAL_DATABASE_CONNECTION_SNIPPET,
+  createConnectionSnippetWithPostProcessorSuggestionSnippet,
 } from '../../../stores/LegendStudioCodeSnippets.js';
 import type { DSLData_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSLData_LegendStudioApplicationPlugin_Extension.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
+import type { StoreRelational_LegendStudioApplicationPlugin_Extension } from '../../../stores/StoreRelational_LegendStudioApplicationPlugin_Extension.js';
 
 const getSectionParserNameFromLineText = (
   lineText: string,
@@ -523,6 +526,14 @@ const getParserElementSnippetSuggestions = (
       ];
     }
     case PURE_PARSER.CONNECTION: {
+      const embeddedPostProcessorSnippetSuggestions = editorStore.pluginManager
+        .getApplicationPlugins()
+        .flatMap(
+          (plugin) =>
+            (
+              plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+            ).getExtraPostProcessorSnippetSuggestions?.() ?? [],
+        );
       return [
         {
           text: PURE_CONNECTION_NAME.JSON_MODEL_CONNECTION,
@@ -544,7 +555,18 @@ const getParserElementSnippetSuggestions = (
           description: 'relational database connection',
           insertText: RELATIONAL_DATABASE_CONNECTION_SNIPPET,
         },
-        // TODO: extension mehcanism for connection and relational database connection
+        {
+          text: PURE_CONNECTION_NAME.RELATIONAL_DATABASE_CONNECTION,
+          description: 'relational database connection with post-processor',
+          insertText: POST_PROCESSOR_RELATIONAL_DATABASE_CONNECTION_SNIPPET,
+        },
+        ...embeddedPostProcessorSnippetSuggestions.map((suggestion) => ({
+          text: PURE_CONNECTION_NAME.RELATIONAL_DATABASE_CONNECTION,
+          description: suggestion.description,
+          insertText: createConnectionSnippetWithPostProcessorSuggestionSnippet(
+            suggestion.text,
+          ),
+        })),
       ];
     }
     case PURE_PARSER.RUNTIME: {
@@ -822,7 +844,7 @@ export const GrammarTextEditor = observer(() => {
       (plugin) =>
         (
           plugin as DSL_LegendStudioApplicationPlugin_Extension
-        ).getExtraPureGrammarTextEditorDnDTypes?.() ?? [],
+        ).getExtraPureGrammarTextEditorDragElementTypes?.() ?? [],
     );
   const handleDrop = useCallback(
     (item: ElementDragSource): void => {

package/src/components/editor/edit-panel/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -1343,13 +1343,13 @@ const PostProcessorRelationalConnectionEditor = observer(
                     renderEditorPostProcessor(
                       connectionValueState,
                       postProcessorState.postProcessor,
-                      true,
+                      isReadOnly,
                       plugins,
                     )}
                   {!postProcessorState && (
                     <BlankPanelContent>
                       {!postProcessors.length
-                        ? 'Addddd a post-processor'
+                        ? 'Add a post-processor'
                         : 'Select a post-processor to view'}
                     </BlankPanelContent>
                   )}

package/src/components/editor/edit-panel/connection-editor/post-processor-editor/MapperPostProcessorEditor.tsx

@@ -239,6 +239,7 @@ export const MapperPostProcessorEditor = observer(
                           mapper_setTo(selectedMapper, value ?? '')
                         }
                       />
+
                       {selectedSchemaNameMapper && (
                         <>
                           <PanelTextEditor

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionBuilder.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Fragment, useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { flowResult } from 'mobx';
 import {
   Dialog,
@@ -38,6 +38,7 @@ import {
   RefreshIcon,
   RobotIcon,
   PanelDropZone,
+  PencilIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -52,7 +53,12 @@ import {
   type MappingElementDragSource,
   CORE_DND_TYPE,
 } from '../../../../stores/shared/DnDUtil.js';
-import { guaranteeType, uniq } from '@finos/legend-shared';
+import {
+  assertErrorThrown,
+  guaranteeType,
+  hashObject,
+  uniq,
+} from '@finos/legend-shared';
 import {
   type MappingExecutionState,
   MappingExecutionEmptyInputDataState,
@@ -78,13 +84,14 @@ import {
   isStubbed_RawLambda,
 } from '@finos/legend-graph';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLMapping_LegendStudioApplicationPlugin_Extension.js';
 import { objectInputData_setData } from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
 import { flatData_setData } from '../../../../stores/graphModifier/StoreFlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
 } from '../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
+import type { QueryBuilderState } from '@finos/legend-query-builder';
 
 interface ClassMappingSelectOption {
   label: string;
@@ -179,17 +186,76 @@ const MappingExecutionQueryEditor = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
 
-    const extraQueryEditorActions = editorStore.pluginManager
-      .getApplicationPlugins()
-      .flatMap(
-        (plugin) =>
-          (
-            plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
-          ).getExtraMappingExecutionQueryEditorActionConfigurations?.() ?? [],
-      )
-      .map((config) => (
-        <Fragment key={config.key}>{config.renderer(executionState)}</Fragment>
-      ));
+    // actions
+    const editWithQueryBuilder = applicationStore.guardUnhandledError(
+      async () => {
+        const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+        await flowResult(
+          embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+            setupQueryBuilderState: (): QueryBuilderState => {
+              const queryBuilderState = new MappingExecutionQueryBuilderState(
+                executionState.mappingEditorState.mapping,
+                embeddedQueryBuilderState.editorStore.applicationStore,
+                embeddedQueryBuilderState.editorStore.graphManagerState,
+              );
+              queryBuilderState.initializeWithQuery(
+                executionState.queryState.query,
+              );
+              queryBuilderState.changeDetectionState.setQueryHashCode(
+                hashObject(executionState.queryState.query),
+              );
+              queryBuilderState.changeDetectionState.setIsEnabled(true);
+              return queryBuilderState;
+            },
+            actionConfigs: [
+              {
+                key: 'save-query-btn',
+                renderer: (
+                  queryBuilderState: QueryBuilderState,
+                ): React.ReactNode => {
+                  const save = applicationStore.guardUnhandledError(
+                    async (): Promise<void> => {
+                      try {
+                        const rawLambda = queryBuilderState.buildQuery();
+                        await flowResult(
+                          executionState.queryState.updateLamba(rawLambda),
+                        );
+                        applicationStore.notifySuccess(
+                          `Mapping execution 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}
+                      onClick={save}
+                    >
+                      Save Query
+                    </button>
+                  );
+                },
+              },
+            ],
+            disableCompile: isStubbed_RawLambda(
+              executionState.queryState.query,
+            ),
+          }),
+        );
+      },
+    );
 
     // Class mapping selector
     const [openClassMappingSelectorModal, setOpenClassMappingSelectorModal] =
@@ -309,7 +375,14 @@ const MappingExecutionQueryEditor = observer(
             <div className="panel__header__title__label">query</div>
           </div>
           <div className="panel__header__actions">
-            {extraQueryEditorActions}
+            <button
+              className="panel__header__action"
+              tabIndex={-1}
+              onClick={editWithQueryBuilder}
+              title="Edit query..."
+            >
+              <PencilIcon />
+            </button>
             <button
               className="panel__header__action"
               tabIndex={-1}

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionQueryBuilder.tsx

@@ -0,0 +1,93 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import {
+  buildElementOption,
+  getPackageableElementOptionFormatter,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { CustomSelectorInput, PURE_MappingIcon } from '@finos/legend-art';
+import { getMappingCompatibleClasses } from '@finos/legend-graph';
+import { QueryBuilderClassSelector } from '@finos/legend-query-builder';
+import type { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
+
+/**
+ * This setup panel supports limited cascading, we will only show:
+ * - For class selector: the list of compatible class with the specified mapping
+ */
+const MappingExecutionQueryBuilderSetupPanelContent = observer(
+  (props: { queryBuilderState: MappingExecutionQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+
+    // mapping
+    const selectedMappingOption = buildElementOption(
+      queryBuilderState.executionMapping,
+    );
+
+    // class
+    const classes = getMappingCompatibleClasses(
+      queryBuilderState.executionMapping,
+      queryBuilderState.graphManagerState.usableClasses,
+    );
+
+    return (
+      <>
+        <div className="query-builder__setup__config-group">
+          <div className="query-builder__setup__config-group__header">
+            <div className="query-builder__setup__config-group__header__title">
+              execution context
+            </div>
+          </div>
+          <div className="query-builder__setup__config-group__content">
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="mapping"
+              >
+                <PURE_MappingIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                disabled={true}
+                options={[]}
+                value={selectedMappingOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                formatOptionLabel={getPackageableElementOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+          </div>
+        </div>
+        <QueryBuilderClassSelector
+          queryBuilderState={queryBuilderState}
+          classes={classes}
+          noMatchMessage="No compatible class found for specified mapping"
+        />
+      </>
+    );
+  },
+);
+
+export const renderMappingExecutionQueryBuilderSetupPanelContent = (
+  queryBuilderState: MappingExecutionQueryBuilderState,
+): React.ReactNode => (
+  <MappingExecutionQueryBuilderSetupPanelContent
+    queryBuilderState={queryBuilderState}
+  />
+);

package/src/components/editor/edit-panel/mapping-editor/MappingTestEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Fragment, useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type MappingTestState,
@@ -45,6 +45,7 @@ import {
   WrenchIcon,
   PauseCircleIcon,
   PanelDropZone,
+  PencilIcon,
 } from '@finos/legend-art';
 import { useDrop } from 'react-dnd';
 import {
@@ -55,6 +56,8 @@ import {
   IllegalStateError,
   guaranteeType,
   tryToFormatLosslessJSONString,
+  hashObject,
+  assertErrorThrown,
 } from '@finos/legend-shared';
 import {
   EDITOR_LANGUAGE,
@@ -84,12 +87,13 @@ import {
   DEPRECATED__validate_MappingTestAssert,
 } from '@finos/legend-graph';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLMapping_LegendStudioApplicationPlugin_Extension.js';
 import { flatData_setData } from '../../../../stores/graphModifier/StoreFlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
 } from '../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+import type { QueryBuilderState } from '@finos/legend-query-builder';
+import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 
 const MappingTestQueryEditor = observer(
   (props: { testState: MappingTestState; isReadOnly: boolean }) => {
@@ -98,19 +102,73 @@ const MappingTestQueryEditor = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
 
-    const extraQueryEditorActions = editorStore.pluginManager
-      .getApplicationPlugins()
-      .flatMap(
-        (plugin) =>
-          (
-            plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
-          ).getExtraMappingTestQueryEditorActionConfigurations?.() ?? [],
-      )
-      .map((config) => (
-        <Fragment key={config.key}>
-          {config.renderer(testState, isReadOnly)}
-        </Fragment>
-      ));
+    // actions
+    const editWithQueryBuilder = applicationStore.guardUnhandledError(
+      async () => {
+        const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+        await flowResult(
+          embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+            setupQueryBuilderState: (): QueryBuilderState => {
+              const queryBuilderState = new MappingExecutionQueryBuilderState(
+                testState.mappingEditorState.mapping,
+                embeddedQueryBuilderState.editorStore.applicationStore,
+                embeddedQueryBuilderState.editorStore.graphManagerState,
+              );
+              queryBuilderState.initializeWithQuery(testState.queryState.query);
+              queryBuilderState.changeDetectionState.setQueryHashCode(
+                hashObject(testState.queryState.query),
+              );
+              queryBuilderState.changeDetectionState.setIsEnabled(true);
+              return queryBuilderState;
+            },
+            actionConfigs: [
+              {
+                key: 'save-query-btn',
+                renderer: (
+                  queryBuilderState: QueryBuilderState,
+                ): React.ReactNode => {
+                  const save = applicationStore.guardUnhandledError(
+                    async (): Promise<void> => {
+                      try {
+                        const rawLambda = queryBuilderState.buildQuery();
+                        await flowResult(
+                          testState.queryState.updateLamba(rawLambda),
+                        );
+                        applicationStore.notifySuccess(
+                          `Mapping test 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(testState.queryState.query),
+          }),
+        );
+      },
+    );
 
     // Class mapping selector
     const [openClassMappingSelectorModal, setOpenClassMappingSelectorModal] =
@@ -203,7 +261,14 @@ const MappingTestQueryEditor = observer(
             <div className="panel__header__title__label">query</div>
           </div>
           <div className="panel__header__actions">
-            {extraQueryEditorActions}
+            <button
+              className="panel__header__action"
+              tabIndex={-1}
+              onClick={editWithQueryBuilder}
+              title="Edit query..."
+            >
+              <PencilIcon />
+            </button>
             <button
               className="panel__header__action"
               tabIndex={-1}