@finos/legend-query-builder 0.2.1 → 0.2.2

package/lib/stores/workflows/ServiceQueryBuilderState.js

@@ -20,17 +20,21 @@ import { renderServiceQueryBuilderSetupPanelContent } from '../../components/wor
 import { QueryBuilderState } from '../QueryBuilderState.js';
 export class ServiceQueryBuilderState extends QueryBuilderState {
     service;
+    usableServices;
     executionContexts = [];
+    onServiceChange;
     onExecutionContextChange;
     TEMPORARY__setupPanelContentRenderer = () => renderServiceQueryBuilderSetupPanelContent(this);
     selectedExecutionContext;
-    constructor(applicationStore, graphManagerState, service, executionContextKey, onExecutionContextChange) {
+    constructor(applicationStore, graphManagerState, service, usableServices, executionContextKey, onServiceChange, onExecutionContextChange) {
         super(applicationStore, graphManagerState);
         makeObservable(this, {
             selectedExecutionContext: observable,
             setSelectedExecutionContext: action,
         });
         this.service = service;
+        this.usableServices = usableServices;
+        this.onServiceChange = onServiceChange;
         this.onExecutionContextChange = onExecutionContextChange;
         if (service.execution instanceof PureSingleExecution) {
             this.mapping = service.execution.mapping.value;

package/lib/stores/workflows/ServiceQueryBuilderState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceQueryBuilderState.js","sourceRoot":"","sources":["../../../src/stores/workflows/ServiceQueryBuilderState.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ServiceQueryBuilderState.js","sourceRoot":"","sources":["../../../src/stores/workflows/ServiceQueryBuilderState.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -44,33 +44,31 @@
     "@ag-grid-community/client-side-row-model": "28.2.0",
     "@ag-grid-community/core": "28.2.0",
     "@ag-grid-community/react": "28.2.0",
-    "@finos/legend-application": "9.0.1",
-    "@finos/legend-art": "4.0.1",
-    "@finos/legend-graph": "18.0.1",
-    "@finos/legend-server-depot": "4.1.1",
-    "@finos/legend-shared": "6.1.4",
-    "@finos/legend-storage": "3.0.13",
+    "@finos/legend-application": "10.0.0",
+    "@finos/legend-art": "4.1.0",
+    "@finos/legend-graph": "19.0.0",
+    "@finos/legend-server-depot": "4.1.2",
+    "@finos/legend-shared": "6.1.5",
+    "@finos/legend-storage": "3.0.14",
     "@testing-library/react": "13.4.0",
     "@types/papaparse": "5.3.5",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
-    "date-fns": "2.29.3",
     "mobx": "6.6.2",
     "mobx-react-lite": "3.4.0",
-    "monaco-editor": "0.34.0",
+    "monaco-editor": "0.34.1",
     "papaparse": "5.3.2",
     "react": "18.2.0",
     "react-dnd": "16.0.1",
     "react-dom": "18.2.0",
-    "react-hotkeys": "2.0.0",
-    "serializr": "2.0.5"
+    "serializr": "3.0.1"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.20",
-    "@jest/globals": "29.1.2",
+    "@finos/legend-dev-utils": "2.0.21",
+    "@jest/globals": "29.2.1",
     "cross-env": "7.0.3",
     "eslint": "8.25.0",
-    "jest": "29.1.2",
+    "jest": "29.2.1",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",
     "sass": "1.55.0",
@@ -83,6 +81,7 @@
     "directory": "build/publishContent"
   },
   "extensions": {
+    "applicationPlugin": "@finos/legend-application-plugin-query-builder",
     "graphManagerPreset": "@finos/legend-graph-manager-preset-query-builder",
     "pureProtocolProcessorPlugin": "@finos/legend-pure-protocol-processor-plugin-query-builder",
     "pureGraphManagerPlugin": "@finos/legend-pure-graph-manager-plugin-query-builder"

package/src/components/QueryBuilder.tsx

@@ -15,10 +15,8 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { GlobalHotKeys } from 'react-hotkeys';
 import {
   clsx,
-  Backdrop,
   HammerIcon,
   ResizablePanelGroup,
   ResizablePanel,
@@ -31,7 +29,6 @@ import {
   MenuContentItemLabel,
   CheckIcon,
   CaretDownIcon,
-  CogIcon,
   DiffIcon,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
@@ -45,20 +42,19 @@ import { QueryBuilderFetchStructurePanel } from './fetch-structure/QueryBuilderF
 import { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
 import { flowResult } from 'mobx';
 import { QueryBuilderUnsupportedQueryEditor } from './QueryBuilderUnsupportedQueryEditor.js';
-import { useApplicationStore } from '@finos/legend-application';
+import {
+  BackdropContainer,
+  useApplicationStore,
+  useCommands,
+} from '@finos/legend-application';
 import { QueryBuilderParametersPanel } from './QueryBuilderParametersPanel.js';
 import { QueryBuilderPostFilterPanel } from './fetch-structure/QueryBuilderPostFilterPanel.js';
 import { QueryBuilderFunctionsExplorerPanel } from './explorer/QueryBuilderFunctionsExplorerPanel.js';
-import { QueryBuilderProjectionState } from '../stores/fetch-structure/projection/QueryBuilderProjectionState.js';
+import { QueryBuilderTDSState } from '../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { QueryBuilderDiffViewPanel } from './QueryBuilderDiffPanel.js';
 
-enum QUERY_BUILDER_HOTKEY {
-  COMPILE = 'COMPILE',
-}
-
-const QUERY_BUILDER_HOTKEY_MAP = Object.freeze({
-  [QUERY_BUILDER_HOTKEY.COMPILE]: 'f9',
-});
+export const QUERY_BUILDER_BACKDROP_CONTAINER_ID =
+  'query-builder.backdrop-container';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -158,23 +154,8 @@ const QueryBuilderStatusBar = observer(
 export const QueryBuilder = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
-    const applicationStore = useApplicationStore();
     const isQuerySupported = queryBuilderState.isQuerySupported;
 
-    // Hotkeys
-    const keyMap = {
-      [QUERY_BUILDER_HOTKEY.COMPILE]: [QUERY_BUILDER_HOTKEY_MAP.COMPILE],
-    };
-    const handlers = {
-      [QUERY_BUILDER_HOTKEY.COMPILE]: (
-        event: KeyboardEvent | undefined,
-      ): void => {
-        event?.preventDefault();
-        flowResult(queryBuilderState.compileQuery()).catch(
-          applicationStore.alertUnhandledError,
-        );
-      },
-    };
     const toggleShowFunctionPanel = (): void => {
       queryBuilderState.setShowFunctionsExplorerPanel(
         !queryBuilderState.showFunctionsExplorerPanel,
@@ -188,153 +169,102 @@ export const QueryBuilder = observer(
     const toggleShowPostFilterPanel = (): void => {
       if (
         queryBuilderState.fetchStructureState.implementation instanceof
-        QueryBuilderProjectionState
+        QueryBuilderTDSState
       ) {
-        const projectionState =
-          queryBuilderState.fetchStructureState.implementation;
-        projectionState.setShowPostFilterPanel(
-          !projectionState.showPostFilterPanel,
-        );
+        const tdsState = queryBuilderState.fetchStructureState.implementation;
+        tdsState.setShowPostFilterPanel(!tdsState.showPostFilterPanel);
       }
     };
 
-    // settings
-    // NOTE: this is temporary until we find a better home for these settings in query builder
-    const engineConfig =
-      queryBuilderState.graphManagerState.graphManager.TEMPORARY__getEngineConfig();
-    const toggleEngineClientRequestPayloadCompression = (): void =>
-      engineConfig.setUseClientRequestPayloadCompression(
-        !engineConfig.useClientRequestPayloadCompression,
-      );
+    useCommands(queryBuilderState);
 
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER}
         className="query-builder"
       >
-        <div className="query-builder__sub-header">
-          <div className="query-builder__sub-header__actions">
-            <DropdownMenu
-              className="query-builder__sub-header__custom-action"
-              content={
-                <MenuContent>
-                  <MenuContentItem
-                    onClick={toggleShowFunctionPanel}
-                    disabled={!queryBuilderState.isQuerySupported}
-                  >
-                    <MenuContentItemIcon>
-                      {queryBuilderState.showFunctionsExplorerPanel ? (
-                        <CheckIcon />
-                      ) : null}
-                    </MenuContentItemIcon>
-                    <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                      Show Function(s)
-                    </MenuContentItemLabel>
-                  </MenuContentItem>
-                  {/* TODO?: consider hiding this menu option when the fetch-structure is not projection */}
-                  {!queryBuilderState.isParameterSupportDisabled && (
-                    <MenuContentItem
-                      onClick={toggleShowParameterPanel}
-                      disabled={
-                        !queryBuilderState.isQuerySupported ||
-                        queryBuilderState.parametersState.parameterStates
-                          .length > 0
-                      }
-                    >
-                      <MenuContentItemIcon>
-                        {queryBuilderState.showParametersPanel ? (
-                          <CheckIcon />
-                        ) : null}
-                      </MenuContentItemIcon>
-                      <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                        Show Parameter(s)
-                      </MenuContentItemLabel>
-                    </MenuContentItem>
-                  )}
-                  <MenuContentItem
-                    onClick={toggleShowPostFilterPanel}
-                    disabled={
-                      !queryBuilderState.isQuerySupported ||
-                      !(
-                        queryBuilderState.fetchStructureState
-                          .implementation instanceof QueryBuilderProjectionState
-                      ) ||
-                      Array.from(
-                        queryBuilderState.fetchStructureState.implementation.postFilterState.nodes.values(),
-                      ).length > 0
-                    }
-                  >
-                    <MenuContentItemIcon>
-                      {queryBuilderState.fetchStructureState
-                        .implementation instanceof
-                        QueryBuilderProjectionState &&
-                      queryBuilderState.fetchStructureState.implementation
-                        .showPostFilterPanel ? (
-                        <CheckIcon />
-                      ) : null}
-                    </MenuContentItemIcon>
-                    <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                      Show Post-Filter
-                    </MenuContentItemLabel>
-                  </MenuContentItem>
-                </MenuContent>
-              }
-              menuProps={{
-                anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                transformOrigin: { vertical: 'top', horizontal: 'right' },
-                elevation: 7,
-              }}
-            >
-              <button
-                className="query-builder__sub-header__custom-action__label"
-                title="Show Advanced Menu..."
-              >
-                Advanced
-              </button>
-              <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
-            </DropdownMenu>
-          </div>
-        </div>
-        <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
-          <Backdrop
-            className="backdrop"
-            open={queryBuilderState.showBackdrop}
-          />
+        <BackdropContainer elementID={QUERY_BUILDER_BACKDROP_CONTAINER_ID} />
+        <div className="query-builder__body">
           <div className="query-builder__content">
-            <div className="query-builder__activity-bar">
-              <div className="query-builder__activity-bar__items"></div>
-              <DropdownMenu
-                className="query-builder__activity-bar__setting"
-                content={
-                  <MenuContent>
-                    <MenuContentItem
-                      onClick={toggleEngineClientRequestPayloadCompression}
-                    >
-                      <MenuContentItemIcon>
-                        {engineConfig.useClientRequestPayloadCompression ? (
-                          <CheckIcon />
-                        ) : null}
-                      </MenuContentItemIcon>
-                      <MenuContentItemLabel>
-                        Compress request payload
-                      </MenuContentItemLabel>
-                    </MenuContentItem>
-                  </MenuContent>
-                }
-                menuProps={{
-                  anchorOrigin: { vertical: 'center', horizontal: 'center' },
-                  transformOrigin: { vertical: 'bottom', horizontal: 'left' },
-                  elevation: 7,
-                }}
-              >
-                <button
-                  className="query-builder__activity-bar__item"
-                  tabIndex={-1}
-                  title="Settings..."
+            <div className="query-builder__sub-header">
+              <div className="query-builder__sub-header__actions">
+                <DropdownMenu
+                  className="query-builder__sub-header__custom-action"
+                  title="Show Advanced Menu..."
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        onClick={toggleShowFunctionPanel}
+                        disabled={!queryBuilderState.isQuerySupported}
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.showFunctionsExplorerPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Function(s)
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      {/* TODO?: consider hiding this menu option when the fetch-structure is not tds */}
+                      {!queryBuilderState.isParameterSupportDisabled && (
+                        <MenuContentItem
+                          onClick={toggleShowParameterPanel}
+                          disabled={
+                            !queryBuilderState.isQuerySupported ||
+                            queryBuilderState.parametersState.parameterStates
+                              .length > 0
+                          }
+                        >
+                          <MenuContentItemIcon>
+                            {queryBuilderState.showParametersPanel ? (
+                              <CheckIcon />
+                            ) : null}
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                            Show Parameter(s)
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                      )}
+                      <MenuContentItem
+                        onClick={toggleShowPostFilterPanel}
+                        disabled={
+                          !queryBuilderState.isQuerySupported ||
+                          !(
+                            queryBuilderState.fetchStructureState
+                              .implementation instanceof QueryBuilderTDSState
+                          ) ||
+                          Array.from(
+                            queryBuilderState.fetchStructureState.implementation.postFilterState.nodes.values(),
+                          ).length > 0
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.fetchStructureState
+                            .implementation instanceof QueryBuilderTDSState &&
+                          queryBuilderState.fetchStructureState.implementation
+                            .showPostFilterPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Post-Filter
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                    transformOrigin: { vertical: 'top', horizontal: 'right' },
+                    elevation: 7,
+                  }}
                 >
-                  <CogIcon />
-                </button>
-              </DropdownMenu>
+                  <div className="query-builder__sub-header__custom-action__label">
+                    Advanced
+                  </div>
+                  <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
+                </DropdownMenu>
+              </div>
             </div>
             <div className="query-builder__main">
               <ResizablePanelGroup orientation="horizontal">
@@ -394,8 +324,7 @@ export const QueryBuilder = observer(
                       <ResizablePanel minSize={300}>
                         {(!(
                           queryBuilderState.fetchStructureState
-                            .implementation instanceof
-                          QueryBuilderProjectionState
+                            .implementation instanceof QueryBuilderTDSState
                         ) ||
                           !queryBuilderState.fetchStructureState.implementation
                             .showPostFilterPanel) && (
@@ -404,8 +333,7 @@ export const QueryBuilder = observer(
                           />
                         )}
                         {queryBuilderState.fetchStructureState
-                          .implementation instanceof
-                          QueryBuilderProjectionState &&
+                          .implementation instanceof QueryBuilderTDSState &&
                           queryBuilderState.fetchStructureState.implementation
                             .showPostFilterPanel && (
                             <ResizablePanelGroup orientation="horizontal">
@@ -443,11 +371,11 @@ export const QueryBuilder = observer(
               </ResizablePanelGroup>
             </div>
           </div>
-          <QueryBuilderStatusBar queryBuilderState={queryBuilderState} />
           {queryBuilderState.textEditorState.mode && (
             <QueryBuilderTextEditor queryBuilderState={queryBuilderState} />
           )}
-        </GlobalHotKeys>
+        </div>
+        <QueryBuilderStatusBar queryBuilderState={queryBuilderState} />
       </div>
     );
   },

package/src/components/QueryBuilderDiffPanel.tsx

@@ -15,6 +15,7 @@
  */
 
 import {
+  createPassThroughOnKeyHandler,
   EDITOR_LANGUAGE,
   EDITOR_THEME,
   TAB_SIZE,
@@ -24,7 +25,6 @@ import {
   baseTextEditorSettings,
   clsx,
   Dialog,
-  disableEditorHotKeys,
   disposeDiffEditor,
   useResizeDetector,
 } from '@finos/legend-art';
@@ -35,7 +35,6 @@ import {
   type QueryBuilderDiffViewState,
   QueryBuilderDiffViewMode,
 } from '../stores/QueryBuilderChangeDetectionState.js';
-import { prettyCONSTName } from '@finos/legend-shared';
 import { pruneSourceInformation } from '@finos/legend-graph';
 
 const TextDiffView = observer(
@@ -71,7 +70,7 @@ const TextDiffView = observer(
           readOnly: true,
           wordWrap: 'on',
         });
-        disableEditorHotKeys(_editor);
+        _editor.getOriginalEditor().onKeyDown(createPassThroughOnKeyHandler());
         setEditor(_editor);
       }
     }, [applicationStore, editor]);
@@ -147,7 +146,7 @@ export const QueryBuilderDiffViewPanel = observer(
                   })}
                   key={mode}
                 >
-                  {prettyCONSTName(mode)}
+                  {mode}
                 </button>
               ))}
             </div>

package/src/components/QueryBuilderNavigationBlocker.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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 {
+  ActionAlertActionType,
+  ActionAlertType,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+
+export const QueryBuilderNavigationBlocker = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+
+    useEffect(() => {
+      applicationStore.navigator.blockNavigation(
+        [(): boolean => queryBuilderState.changeDetectionState.hasChanged],
+        (onProceed: () => void): void => {
+          applicationStore.setActionAlertInfo({
+            // TODO?: should we make this message generic like the `BeforeUnloadEvent` message?
+            message:
+              'Unsaved changes to your query will be lost if you continue. Do you still want to proceed?',
+            type: ActionAlertType.CAUTION,
+            actions: [
+              {
+                label: 'Proceed',
+                type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+                handler: (): void => onProceed(),
+              },
+              {
+                label: 'Abort',
+                type: ActionAlertActionType.PROCEED,
+                default: true,
+              },
+            ],
+          });
+        },
+      );
+      return (): void => {
+        applicationStore.navigator.unblockNavigation();
+      };
+    }, [applicationStore, queryBuilderState]);
+
+    return null;
+  },
+);