@finos/legend-application-query 5.2.8 → 6.0.0

package/src/components/QuerySetup.tsx

@@ -38,16 +38,16 @@ import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  generateCreateQueryEditorRoute,
+  generateMappingQueryCreatorRoute,
   generateExistingQueryEditorRoute,
-  generateServiceQueryEditorRoute,
+  generateServiceQueryCreatorRoute,
 } from '../stores/LegendQueryRouter.js';
 import {
   type QuerySetupState,
   type ServiceExecutionOption,
-  CreateQuerySetupState,
-  ExistingQuerySetupState,
-  ServiceQuerySetupState,
+  CreateMappingQuerySetupState,
+  EditExistingQuerySetupState,
+  LoadServiceQuerySetupState,
 } from '../stores/QuerySetupStore.js';
 import {
   useQuerySetupStore,
@@ -76,8 +76,8 @@ const buildQueryOption = (query: LightQuery): QueryOption => ({
   value: query,
 });
 
-const ExistingQuerySetup = observer(
-  (props: { querySetupState: ExistingQuerySetupState }) => {
+const EditExistingQuerySetup = observer(
+  (props: { querySetupState: EditExistingQuerySetupState }) => {
     const { querySetupState } = props;
     const applicationStore = useApplicationStore();
     const setupStore = useQuerySetupStore();
@@ -273,8 +273,8 @@ const buildVersionOption = (version: string): VersionOption => ({
   value: version,
 });
 
-const ServiceQuerySetup = observer(
-  (props: { querySetupState: ServiceQuerySetupState }) => {
+const LoadServiceQuerySetup = observer(
+  (props: { querySetupState: LoadServiceQuerySetupState }) => {
     const { querySetupState } = props;
     const applicationStore = useApplicationStore();
     const setupStore = useQuerySetupStore();
@@ -290,7 +290,7 @@ const ServiceQuerySetup = observer(
         querySetupState.currentServiceExecutionOption
       ) {
         applicationStore.navigator.goTo(
-          generateServiceQueryEditorRoute(
+          generateServiceQueryCreatorRoute(
             querySetupState.currentProject.groupId,
             querySetupState.currentProject.artifactId,
             querySetupState.currentVersionId,
@@ -510,8 +510,8 @@ const ServiceQuerySetup = observer(
   },
 );
 
-const CreateQuerySetup = observer(
-  (props: { querySetupState: CreateQuerySetupState }) => {
+const CreateMappingQuerySetup = observer(
+  (props: { querySetupState: CreateMappingQuerySetupState }) => {
     const { querySetupState } = props;
     const applicationStore = useApplicationStore();
     const setupStore = useQuerySetupStore();
@@ -528,7 +528,7 @@ const CreateQuerySetup = observer(
         querySetupState.currentRuntime
       ) {
         applicationStore.navigator.goTo(
-          generateCreateQueryEditorRoute(
+          generateMappingQueryCreatorRoute(
             querySetupState.currentProject.groupId,
             querySetupState.currentProject.artifactId,
             querySetupState.currentVersionId,
@@ -805,11 +805,11 @@ const QuerySetupLandingPage = observer(() => {
       <Fragment key={config.key}>{config.renderer(setupStore)}</Fragment>
     ));
   const editQuery = (): void =>
-    setupStore.setSetupState(new ExistingQuerySetupState(setupStore));
+    setupStore.setSetupState(new EditExistingQuerySetupState(setupStore));
   const loadServiceQuery = (): void =>
-    setupStore.setSetupState(new ServiceQuerySetupState(setupStore));
-  const createQuery = (): void =>
-    setupStore.setSetupState(new CreateQuerySetupState(setupStore));
+    setupStore.setSetupState(new LoadServiceQuerySetupState(setupStore));
+  const createMappingQuery = (): void =>
+    setupStore.setSetupState(new CreateMappingQuerySetupState(setupStore));
 
   useEffect(() => {
     setupStore.initialize();
@@ -854,13 +854,13 @@ const QuerySetupLandingPage = observer(() => {
               </button>
               <button
                 className="query-setup__landing-page__option query-setup__landing-page__option--advanced query-setup__landing-page__option--create-query"
-                onClick={createQuery}
+                onClick={createMappingQuery}
               >
                 <div className="query-setup__landing-page__option__icon">
                   <PlusIcon />
                 </div>
                 <div className="query-setup__landing-page__option__label">
-                  Create a new query
+                  Create new query on a mapping
                 </div>
               </button>
             </div>
@@ -878,12 +878,12 @@ export const QuerySetup = withQuerySetupStore(
     const renderQuerySetupScreen = (
       setupState: QuerySetupState,
     ): React.ReactNode => {
-      if (setupState instanceof ExistingQuerySetupState) {
-        return <ExistingQuerySetup querySetupState={setupState} />;
-      } else if (setupState instanceof ServiceQuerySetupState) {
-        return <ServiceQuerySetup querySetupState={setupState} />;
-      } else if (setupState instanceof CreateQuerySetupState) {
-        return <CreateQuerySetup querySetupState={setupState} />;
+      if (setupState instanceof EditExistingQuerySetupState) {
+        return <EditExistingQuerySetup querySetupState={setupState} />;
+      } else if (setupState instanceof LoadServiceQuerySetupState) {
+        return <LoadServiceQuerySetup querySetupState={setupState} />;
+      } else if (setupState instanceof CreateMappingQuerySetupState) {
+        return <CreateMappingQuerySetup querySetupState={setupState} />;
       }
       const extraQuerySetupRenderers = setupStore.pluginManager
         .getApplicationPlugins()

package/src/components/query-builder/QueryBuilder.tsx

@@ -0,0 +1,411 @@
+/**
+ * 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 { GlobalHotKeys } from 'react-hotkeys';
+import {
+  clsx,
+  Backdrop,
+  HammerIcon,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizablePanelSplitter,
+  HackerIcon,
+  DropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  MenuContentItemIcon,
+  MenuContentItemLabel,
+  CheckIcon,
+  CaretDownIcon,
+  CogIcon,
+} from '@finos/legend-art';
+import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
+import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
+import { QueryBuilderSidebar } from './QueryBuilderSideBar.js';
+import { QueryBuilderResultPanel } from './QueryBuilderResultPanel.js';
+import { QueryBuilderTextEditor } from './QueryBuilderTextEditor.js';
+import type { QueryBuilderState } from '../../stores/query-builder/QueryBuilderState.js';
+import { QueryBuilderTextEditorMode } from '../../stores/query-builder/QueryBuilderTextEditorState.js';
+import { QueryBuilderFetchStructurePanel } from './fetch-structure/QueryBuilderFetchStructurePanel.js';
+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 { QueryBuilderParametersPanel } from './QueryBuilderParametersPanel.js';
+import { QueryBuilderPostFilterPanel } from './fetch-structure/QueryBuilderPostFilterPanel.js';
+import { QueryBuilderFunctionsExplorerPanel } from './explorer/QueryBuilderFunctionsExplorerPanel.js';
+import { QueryBuilderProjectionState } from '../../stores/query-builder/fetch-structure/projection/QueryBuilderProjectionState.js';
+
+enum QUERY_BUILDER_HOTKEY {
+  COMPILE = 'COMPILE',
+}
+
+const QUERY_BUILDER_HOTKEY_MAP = Object.freeze({
+  [QUERY_BUILDER_HOTKEY.COMPILE]: 'f9',
+});
+
+const QueryBuilderStatusBar = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+    const openLambdaEditor = (mode: QueryBuilderTextEditorMode): void =>
+      queryBuilderState.textEditorState.openModal(mode);
+    const compile = applicationStore.guardUnhandledError(() =>
+      flowResult(queryBuilderState.compileQuery()),
+    );
+
+    return (
+      <div className="query-builder__status-bar">
+        <div className="query-builder__status-bar__left"></div>
+        <div className="query-builder__status-bar__right">
+          <button
+            className={clsx(
+              'query-builder__status-bar__action query-builder__status-bar__compile-btn',
+              {
+                'query-builder__status-bar__compile-btn--wiggling':
+                  queryBuilderState.queryCompileState.isInProgress,
+              },
+            )}
+            disabled={queryBuilderState.queryCompileState.isInProgress}
+            onClick={compile}
+            tabIndex={-1}
+            title="Compile (F9)"
+          >
+            <HammerIcon />
+          </button>
+          <button
+            className={clsx(
+              'query-builder__status-bar__action query-builder__status-bar__action__toggler',
+            )}
+            onClick={(): void =>
+              openLambdaEditor(QueryBuilderTextEditorMode.JSON)
+            }
+            tabIndex={-1}
+            title="View Query JSON"
+          >{`{ }`}</button>
+          <button
+            className={clsx(
+              'query-builder__status-bar__action query-builder__status-bar__action__toggler',
+            )}
+            onClick={(): void =>
+              openLambdaEditor(QueryBuilderTextEditorMode.TEXT)
+            }
+            tabIndex={-1}
+            title="View Pure Query"
+          >
+            <HackerIcon />
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+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,
+      );
+    };
+    const toggleShowParameterPanel = (): void => {
+      queryBuilderState.setShowParametersPanel(
+        !queryBuilderState.showParametersPanel,
+      );
+    };
+    const toggleShowPostFilterPanel = (): void => {
+      if (
+        queryBuilderState.fetchStructureState.implementation instanceof
+        QueryBuilderProjectionState
+      ) {
+        const projectionState =
+          queryBuilderState.fetchStructureState.implementation;
+        projectionState.setShowPostFilterPanel(
+          !projectionState.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,
+      );
+
+    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.backdrop} />
+          <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..."
+                >
+                  <CogIcon />
+                </button>
+              </DropdownMenu>
+            </div>
+            <div className="query-builder__main">
+              <ResizablePanelGroup orientation="horizontal">
+                <ResizablePanel minSize={120}>
+                  {isQuerySupported ? (
+                    <ResizablePanelGroup orientation="vertical">
+                      <ResizablePanel size={450} minSize={300}>
+                        <QueryBuilderSidebar
+                          queryBuilderState={queryBuilderState}
+                        >
+                          <ResizablePanelGroup orientation="horizontal">
+                            {/* explorer panel */}
+                            <ResizablePanel minSize={40} direction={1}>
+                              <QueryBuilderExplorerPanel
+                                queryBuilderState={queryBuilderState}
+                              />
+                            </ResizablePanel>
+                            {/* functions panel */}
+                            {queryBuilderState.showFunctionsExplorerPanel && (
+                              <ResizablePanelSplitter />
+                            )}
+                            {queryBuilderState.showFunctionsExplorerPanel && (
+                              <ResizablePanel
+                                minSize={40}
+                                direction={
+                                  queryBuilderState.showParametersPanel
+                                    ? [1, -1]
+                                    : -1
+                                }
+                              >
+                                <QueryBuilderFunctionsExplorerPanel
+                                  queryBuilderState={queryBuilderState}
+                                />
+                              </ResizablePanel>
+                            )}
+                            {/* parameters panel */}
+                            {queryBuilderState.showParametersPanel && (
+                              <ResizablePanelSplitter />
+                            )}
+                            {queryBuilderState.showParametersPanel && (
+                              <ResizablePanel minSize={40} direction={-1}>
+                                <QueryBuilderParametersPanel
+                                  queryBuilderState={queryBuilderState}
+                                />
+                              </ResizablePanel>
+                            )}
+                          </ResizablePanelGroup>
+                        </QueryBuilderSidebar>
+                      </ResizablePanel>
+                      <ResizablePanelSplitter />
+                      <ResizablePanel minSize={300}>
+                        <QueryBuilderFetchStructurePanel
+                          queryBuilderState={queryBuilderState}
+                        />
+                      </ResizablePanel>
+                      <ResizablePanelSplitter />
+                      <ResizablePanel minSize={300}>
+                        {(!(
+                          queryBuilderState.fetchStructureState
+                            .implementation instanceof
+                          QueryBuilderProjectionState
+                        ) ||
+                          !queryBuilderState.fetchStructureState.implementation
+                            .showPostFilterPanel) && (
+                          <QueryBuilderFilterPanel
+                            queryBuilderState={queryBuilderState}
+                          />
+                        )}
+                        {queryBuilderState.fetchStructureState
+                          .implementation instanceof
+                          QueryBuilderProjectionState &&
+                          queryBuilderState.fetchStructureState.implementation
+                            .showPostFilterPanel && (
+                            <ResizablePanelGroup orientation="horizontal">
+                              <ResizablePanel minSize={300}>
+                                <QueryBuilderFilterPanel
+                                  queryBuilderState={queryBuilderState}
+                                />
+                              </ResizablePanel>
+                              <ResizablePanelSplitter />
+                              <ResizablePanel>
+                                <QueryBuilderPostFilterPanel
+                                  queryBuilderState={queryBuilderState}
+                                />
+                              </ResizablePanel>
+                            </ResizablePanelGroup>
+                          )}
+                      </ResizablePanel>
+                    </ResizablePanelGroup>
+                  ) : (
+                    <QueryBuilderUnsupportedQueryEditor
+                      queryBuilderState={queryBuilderState}
+                    />
+                  )}
+                </ResizablePanel>
+                {queryBuilderState.isResultPanelHidden ? null : (
+                  <ResizablePanelSplitter />
+                )}
+                {queryBuilderState.isResultPanelHidden ? null : (
+                  <ResizablePanel size={300} minSize={40}>
+                    <QueryBuilderResultPanel
+                      queryBuilderState={queryBuilderState}
+                    />
+                  </ResizablePanel>
+                )}
+              </ResizablePanelGroup>
+            </div>
+          </div>
+          <QueryBuilderStatusBar queryBuilderState={queryBuilderState} />
+          {queryBuilderState.textEditorState.mode && (
+            <QueryBuilderTextEditor queryBuilderState={queryBuilderState} />
+          )}
+        </GlobalHotKeys>
+      </div>
+    );
+  },
+);