@finos/legend-application-query 5.2.8 → 7.0.0

package/src/components/QueryBuilder.tsx

@@ -1,412 +0,0 @@
-/**
- * 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 { QueryBuilderSetupPanel } from './QueryBuilderSetupPanel.js';
-import { QueryBuilderResultPanel } from './QueryBuilderResultPanel.js';
-import { QueryBuilderTextEditor } from './QueryBuilderTextEditor.js';
-import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
-import { QueryTextEditorMode } from '../stores/QueryTextEditorState.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 { QueryBuilderParameterPanel } from './QueryBuilderParameterPanel.js';
-import { QueryBuilderPostFilterPanel } from './fetch-structure/QueryBuilderPostFilterPanel.js';
-import { QueryBuilderFunctionsExplorerPanel } from './explorer/QueryBuilderFunctionsExplorerPanel.js';
-import { QueryBuilderProjectionState } from '../stores/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: QueryTextEditorMode): void =>
-      queryBuilderState.queryTextEditorState.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.isCompiling,
-              },
-            )}
-            disabled={queryBuilderState.isCompiling}
-            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(QueryTextEditorMode.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(QueryTextEditorMode.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.setShowFunctionPanel(
-        !queryBuilderState.showFunctionPanel,
-      );
-    };
-    const toggleShowParameterPanel = (): void => {
-      queryBuilderState.setShowParameterPanel(
-        !queryBuilderState.showParameterPanel,
-      );
-    };
-    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}>
-                    <MenuContentItemIcon>
-                      {queryBuilderState.showFunctionPanel ? (
-                        <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 */}
-                  <MenuContentItem
-                    onClick={toggleShowParameterPanel}
-                    disabled={
-                      queryBuilderState.queryParametersState.parameterStates
-                        .length > 0
-                    }
-                  >
-                    <MenuContentItemIcon>
-                      {queryBuilderState.showParameterPanel ? (
-                        <CheckIcon />
-                      ) : null}
-                    </MenuContentItemIcon>
-                    <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                      Show Parameter(s)
-                    </MenuContentItemLabel>
-                  </MenuContentItem>
-                  <MenuContentItem
-                    onClick={toggleShowPostFilterPanel}
-                    disabled={
-                      !(
-                        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}>
-                        <ResizablePanelGroup orientation="horizontal">
-                          {queryBuilderState.querySetupState.showSetupPanel && (
-                            <ResizablePanel minSize={40} direction={1}>
-                              <QueryBuilderSetupPanel
-                                queryBuilderState={queryBuilderState}
-                              />
-                            </ResizablePanel>
-                          )}
-                          {!queryBuilderState.querySetupState
-                            .showSetupPanel && (
-                            <ResizablePanel
-                              minSize={40}
-                              size={40}
-                              direction={1}
-                            >
-                              <QueryBuilderSetupPanel
-                                queryBuilderState={queryBuilderState}
-                              />
-                            </ResizablePanel>
-                          )}
-                          <ResizablePanelSplitter />
-                          <ResizablePanel minSize={40} direction={[1, -1]}>
-                            <QueryBuilderExplorerPanel
-                              queryBuilderState={queryBuilderState}
-                            />
-                          </ResizablePanel>
-                          <ResizablePanelSplitter />
-                          {queryBuilderState.showFunctionPanel && (
-                            <ResizablePanel
-                              minSize={40}
-                              direction={
-                                queryBuilderState.showParameterPanel
-                                  ? [1, -1]
-                                  : -1
-                              }
-                            >
-                              <QueryBuilderFunctionsExplorerPanel
-                                queryBuilderState={queryBuilderState}
-                              />
-                            </ResizablePanel>
-                          )}
-                          {queryBuilderState.showFunctionPanel &&
-                          queryBuilderState.showParameterPanel ? (
-                            <ResizablePanelSplitter />
-                          ) : null}
-                          {queryBuilderState.showParameterPanel && (
-                            <ResizablePanel minSize={40} direction={-1}>
-                              <QueryBuilderParameterPanel
-                                queryBuilderState={queryBuilderState}
-                              />
-                            </ResizablePanel>
-                          )}
-                        </ResizablePanelGroup>
-                      </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.mode.isResultPanelHidden ? null : (
-                  <ResizablePanelSplitter />
-                )}
-                {queryBuilderState.mode.isResultPanelHidden ? null : (
-                  <ResizablePanel size={300} minSize={40}>
-                    <QueryBuilderResultPanel
-                      queryBuilderState={queryBuilderState}
-                    />
-                  </ResizablePanel>
-                )}
-              </ResizablePanelGroup>
-            </div>
-          </div>
-          <QueryBuilderStatusBar queryBuilderState={queryBuilderState} />
-          {queryBuilderState.queryTextEditorState.mode && (
-            <QueryBuilderTextEditor queryBuilderState={queryBuilderState} />
-          )}
-        </GlobalHotKeys>
-      </div>
-    );
-  },
-);