@finos/legend-application-query 5.0.0

package/src/components/QueryBuilderSetupPanel.tsx

@@ -0,0 +1,341 @@
+/**
+ * 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 {
+  CustomSelectorInput,
+  createFilter,
+  CogIcon,
+  PURE_ClassIcon,
+  PURE_MappingIcon,
+  PURE_RuntimeIcon,
+  EyeIcon,
+  ClockIcon,
+  clsx,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
+import {
+  type Class,
+  type Mapping,
+  type Runtime,
+  type ValueSpecification,
+  PRIMITIVE_TYPE,
+  LATEST_DATE,
+  MILESTONING_STEREOTYPE,
+  PrimitiveInstanceValue,
+  VariableExpression,
+  getMilestoneTemporalStereotype,
+  PackageableElementExplicitReference,
+  RuntimePointer,
+  VARIABLE_REFERENCE_TOKEN,
+  isElementDeprecated,
+} from '@finos/legend-graph';
+import {
+  type PackageableElementOption,
+  getPackageableElementOptionalFormatter,
+  buildElementOption,
+} from '@finos/legend-application';
+import { MilestoningParametersEditor } from './QueryBuilderMilestoneEditor.js';
+import { useState } from 'react';
+
+const getParameterValue = (
+  parameter: ValueSpecification | undefined,
+): string | undefined => {
+  if (parameter instanceof VariableExpression) {
+    return `${VARIABLE_REFERENCE_TOKEN}${parameter.name}`;
+  } else {
+    if (
+      parameter instanceof PrimitiveInstanceValue &&
+      parameter.genericType.value.rawType.name === PRIMITIVE_TYPE.STRICTDATE
+    ) {
+      return parameter.values[0] as string;
+    } else if (
+      parameter instanceof PrimitiveInstanceValue &&
+      parameter.genericType.value.rawType.name === PRIMITIVE_TYPE.LATESTDATE
+    ) {
+      return LATEST_DATE;
+    }
+    return 'unknown';
+  }
+};
+
+const generateClassLabel = (
+  val: Class,
+  queryBuilderState: QueryBuilderState,
+): string | React.ReactNode => {
+  const milestoneStereotype = getMilestoneTemporalStereotype(
+    val,
+    queryBuilderState.graphManagerState.graph,
+  );
+
+  const isDeprecatedClass = isElementDeprecated(
+    val,
+    queryBuilderState.graphManagerState.graph,
+  );
+
+  if (milestoneStereotype) {
+    let milestoningParameterValues;
+    switch (milestoneStereotype) {
+      case MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL:
+        milestoningParameterValues = `Business Date: ${getParameterValue(
+          queryBuilderState.querySetupState.businessDate,
+        )}`;
+        break;
+      case MILESTONING_STEREOTYPE.PROCESSING_TEMPORAL:
+        milestoningParameterValues = `Processing Date: ${getParameterValue(
+          queryBuilderState.querySetupState.processingDate,
+        )}`;
+        break;
+      case MILESTONING_STEREOTYPE.BITEMPORAL:
+        milestoningParameterValues = `Processing Date: ${getParameterValue(
+          queryBuilderState.querySetupState.processingDate,
+        )}, Business Date: ${getParameterValue(
+          queryBuilderState.querySetupState.businessDate,
+        )}`;
+        break;
+      default:
+        milestoningParameterValues = '';
+    }
+
+    return (
+      <div className="query-builder__setup__config__item__class-label">
+        <div
+          className={clsx(
+            'query-builder__setup__config__item__class-label__content',
+            {
+              ' query-builder__setup__config__item__class-label--deprecated':
+                isDeprecatedClass,
+            },
+          )}
+        >
+          {val.name}
+        </div>
+        <EyeIcon
+          className="query-builder__setup__config__item__class-label__btn"
+          title={milestoningParameterValues}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="query-builder__setup__config__item__class-label">
+      <div
+        className={clsx(
+          'query-builder__setup__config__item__class-label__content',
+          {
+            ' query-builder__setup__config__item__class-label--deprecated':
+              isDeprecatedClass,
+          },
+        )}
+      >
+        {val.name}
+      </div>
+    </div>
+  );
+};
+
+export const QueryBuilderSetupPanel = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const querySetupState = queryBuilderState.querySetupState;
+    const [isMilestoneEditorOpened, setIsMilestoneEditorOpened] =
+      useState<boolean>(false);
+    const elementFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: PackageableElementOption<Class>): string =>
+        option.value.path,
+    });
+    const isQuerySupported = queryBuilderState.isQuerySupported();
+    // class
+    const classOptions = queryBuilderState.querySetupState.classes.map(
+      (_class) => ({
+        value: _class,
+        label: generateClassLabel(_class, queryBuilderState),
+      }),
+    );
+    const selectedClassOption = querySetupState._class
+      ? {
+          value: querySetupState._class,
+          label: generateClassLabel(querySetupState._class, queryBuilderState),
+        }
+      : null;
+    const changeClass = (val: PackageableElementOption<Class>): void => {
+      queryBuilderState.changeClass(val.value);
+    };
+    // mapping
+    const mappingOptions = querySetupState.mappings.map(buildElementOption);
+    const selectedMappingOption = querySetupState.mapping
+      ? buildElementOption(querySetupState.mapping)
+      : null;
+    const changeMapping = (val: PackageableElementOption<Mapping>): void => {
+      if (querySetupState._class && !querySetupState.mappingIsReadOnly) {
+        querySetupState.setMapping(val.value);
+        queryBuilderState.resetQueryBuilder();
+        queryBuilderState.resetQuerySetup();
+      }
+    };
+    // runtime
+    const runtime = querySetupState.runtimeValue;
+    const isRuntimePointer = runtime instanceof RuntimePointer;
+    const customRuntimeLabel = (
+      <div className="service-execution-editor__configuration__runtime-option--custom">
+        <CogIcon />
+        <div className="service-execution-editor__configuration__runtime-option--custom__label">
+          (custom)
+        </div>
+      </div>
+    );
+    // only show custom runtime option when a runtime pointer is currently selected
+    let runtimeOptions = !isRuntimePointer
+      ? []
+      : ([{ label: customRuntimeLabel }] as {
+          label: string | React.ReactNode;
+          value?: Runtime;
+        }[]);
+    runtimeOptions = runtimeOptions.concat(
+      querySetupState.compatibleRuntimes.map((rt) => ({
+        value: new RuntimePointer(
+          PackageableElementExplicitReference.create(rt),
+        ),
+        label: rt.name,
+      })),
+    );
+    const selectedRuntimeOption = {
+      value: runtime,
+      label:
+        runtime instanceof RuntimePointer
+          ? runtime.packageableRuntime.value.name
+          : '(custom)',
+    };
+    const changeRuntime = (val: {
+      label: string | React.ReactNode;
+      value?: Runtime;
+    }): void => {
+      if (val.value !== runtime) {
+        querySetupState.setRuntimeValue(val.value);
+      }
+    };
+    const runtimeFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: { value: Runtime }): string =>
+        option.value instanceof RuntimePointer
+          ? option.value.packageableRuntime.value.path
+          : '(custom)',
+    });
+    const close = (): void => {
+      setIsMilestoneEditorOpened(false);
+    };
+    const isMilestonedQuery = Boolean(
+      querySetupState.businessDate ?? querySetupState.processingDate,
+    );
+
+    return (
+      <div
+        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_SETUP}
+        className="panel query-builder__setup"
+      >
+        <div className="panel__header">
+          <div className="panel__header__title">
+            <div className="panel__header__title__label">setup</div>
+          </div>
+        </div>
+        <div className="panel__content query-builder__setup__content">
+          <div className="query-builder__setup__config__item">
+            <div className="btn--sm query-builder__setup__config__item__label">
+              <PURE_ClassIcon />
+            </div>
+            <CustomSelectorInput
+              className="panel__content__form__section__dropdown query-builder__setup__config__item__selector query-builder__setup__config__item__selector__milestoned"
+              placeholder="Choose a class..."
+              options={classOptions}
+              onChange={changeClass}
+              value={selectedClassOption}
+              darkMode={true}
+              disabled={!isQuerySupported || querySetupState.classIsReadOnly}
+              filterOption={elementFilterOption}
+              formatOptionLabel={getPackageableElementOptionalFormatter({
+                darkMode: true,
+              })}
+            />
+            <button
+              className="btn--dark btn__icon--dark"
+              tabIndex={-1}
+              onClick={(): void => setIsMilestoneEditorOpened(true)}
+              disabled={!isMilestonedQuery}
+              title="Edit Milestoning Parameters"
+            >
+              <ClockIcon />
+            </button>
+          </div>
+          <div className="query-builder__setup__config__item">
+            <div className="btn--sm query-builder__setup__config__item__label">
+              <PURE_MappingIcon />
+            </div>
+            <CustomSelectorInput
+              className="panel__content__form__section__dropdown query-builder__setup__config__item__selector"
+              placeholder={
+                mappingOptions.length
+                  ? 'Choose a mapping...'
+                  : 'No mapping found for class'
+              }
+              disabled={
+                querySetupState.mappingIsReadOnly ||
+                !querySetupState._class ||
+                !mappingOptions.length
+              }
+              options={mappingOptions}
+              onChange={changeMapping}
+              value={selectedMappingOption}
+              darkMode={true}
+              filterOption={elementFilterOption}
+              formatOptionLabel={getPackageableElementOptionalFormatter({
+                darkMode: true,
+              })}
+            />
+          </div>
+          {isMilestoneEditorOpened && isMilestonedQuery && (
+            <MilestoningParametersEditor
+              queryBuilderState={queryBuilderState}
+              close={close}
+            />
+          )}
+          <div className="query-builder__setup__config__item">
+            <div className="btn--sm query-builder__setup__config__item__label">
+              <PURE_RuntimeIcon />
+            </div>
+            <CustomSelectorInput
+              className="panel__content__form__section__dropdown query-builder__setup__config__item__selector"
+              placeholder="Choose or create a runtime..."
+              disabled={
+                querySetupState.runtimeIsReadOnly ||
+                !querySetupState._class ||
+                !querySetupState.mapping
+              }
+              options={runtimeOptions}
+              onChange={changeRuntime}
+              value={selectedRuntimeOption}
+              darkMode={true}
+              filterOption={runtimeFilterOption}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/QueryBuilderTextEditor.tsx

@@ -0,0 +1,127 @@
+/**
+ * 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 { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { clsx, Dialog } from '@finos/legend-art';
+import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import { QueryTextEditorMode } from '../stores/QueryTextEditorState.js';
+import { flowResult } from 'mobx';
+import { QueryBuilderLambdaEditor } from './QueryBuilderLambdaEditor.js';
+import {
+  EDITOR_LANGUAGE,
+  TextInputEditor,
+  useApplicationStore,
+} from '@finos/legend-application';
+
+export const QueryBuilderTextEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+    const queryTextEditorState = queryBuilderState.queryTextEditorState;
+    const close = applicationStore.guardUnhandledError(() =>
+      flowResult(queryBuilderState.queryTextEditorState.closeModal()),
+    );
+    const discardChanges = (): void => {
+      queryBuilderState.queryTextEditorState.setMode(undefined);
+      // force close the backdrop just in case changes are discarded when there are grammar issues
+      queryBuilderState.setBackdrop(false);
+    };
+    const mode = queryTextEditorState.mode;
+    useEffect(() => {
+      flowResult(
+        queryTextEditorState.convertLambdaObjectToGrammarString(true),
+      ).catch(applicationStore.alertUnhandledError);
+    }, [applicationStore, queryTextEditorState]);
+
+    return (
+      <Dialog
+        open={Boolean(mode)}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <div
+          className={clsx(
+            'modal modal--dark editor-modal query-builder-text-mode__modal',
+            {
+              'query-builder-text-mode__modal--has-error': Boolean(
+                queryTextEditorState.parserError,
+              ),
+            },
+          )}
+        >
+          <div className="modal__header">
+            <div className="modal__title">Query</div>
+            {queryTextEditorState.parserError && (
+              <div className="modal__title__error-badge">
+                Failed to parse query
+              </div>
+            )}
+          </div>
+          <div className="modal__body">
+            <div
+              className={clsx('query-builder-text-mode__modal__content', {
+                backdrop__element: Boolean(queryTextEditorState.parserError),
+              })}
+            >
+              {mode === QueryTextEditorMode.TEXT && (
+                <QueryBuilderLambdaEditor
+                  className={'query-builder-text-mode__lambda-editor'}
+                  disabled={queryTextEditorState.isConvertingLambdaToString}
+                  queryBuilderState={queryBuilderState}
+                  lambdaEditorState={queryTextEditorState}
+                  forceBackdrop={false}
+                  forceExpansion={true}
+                  useBaseTextEditorSettings={true}
+                  hideErrorBar={true}
+                  disablePopUp={true}
+                />
+              )}
+              {mode === QueryTextEditorMode.JSON && (
+                <TextInputEditor
+                  language={EDITOR_LANGUAGE.JSON}
+                  inputValue={queryTextEditorState.readOnlylambdaJson}
+                  isReadOnly={true}
+                />
+              )}
+            </div>
+          </div>
+          <div className="modal__footer">
+            {mode === QueryTextEditorMode.TEXT && (
+              <button
+                className="btn btn--dark btn--caution"
+                onClick={discardChanges}
+              >
+                Discard changes
+              </button>
+            )}
+            <button
+              className="btn btn--dark"
+              onClick={close}
+              disabled={Boolean(queryTextEditorState.parserError)}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/src/components/QueryBuilderUnsupportedQueryEditor.tsx

@@ -0,0 +1,110 @@
+/**
+ * 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 type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import { QueryTextEditorMode } from '../stores/QueryTextEditorState.js';
+import {
+  BlankPanelContent,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizablePanelSplitter,
+} from '@finos/legend-art';
+import { QueryBuilderSetupPanel } from './QueryBuilderSetupPanel.js';
+import { QueryBuilderParameterPanel } from './QueryBuilderParameterPanel.js';
+
+const QueryBuilderUnsupportedQueryExplorer = observer(() => (
+  <div className="panel query-builder__explorer">
+    <div className="panel__header">
+      <div className="panel__header__title">
+        <div className="panel__header__title__label">unsupported</div>
+      </div>
+    </div>
+    <div className="panel__content">
+      <BlankPanelContent>
+        <div className="query-builder__unsupported-view__main">
+          <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode`}</div>
+        </div>
+      </BlankPanelContent>
+    </div>
+  </div>
+));
+
+const QueryBuilderUnsupportedQueryEditPanel = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const queryUnsupportedState = queryBuilderState.queryUnsupportedState;
+    const lambdaError = queryUnsupportedState.lambdaError;
+    const errorMessage = lambdaError ? `due to: ${lambdaError.message}` : '';
+    const openLambdaModal = (): void =>
+      queryBuilderState.queryTextEditorState.openModal(
+        QueryTextEditorMode.TEXT,
+      );
+    return (
+      <div className="panel">
+        <div className="panel__header">
+          <div className="panel__header__title">
+            <div className="panel__header__title__label">unsupported</div>
+          </div>
+        </div>
+        <div className="panel__content">
+          <BlankPanelContent>
+            <div className="query-builder__unsupported-view__main">
+              <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode ${errorMessage}`}</div>
+              <button
+                className="btn--dark query-builder__unsupported-view__to-text-mode__btn"
+                onClick={openLambdaModal}
+              >
+                Edit in text mode
+              </button>
+            </div>
+          </BlankPanelContent>
+        </div>
+      </div>
+    );
+  },
+);
+
+export const QueryBuilderUnsupportedQueryEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+
+    return (
+      <ResizablePanelGroup orientation="vertical">
+        <ResizablePanel size={450}>
+          <ResizablePanelGroup orientation="horizontal">
+            <ResizablePanel>
+              <QueryBuilderSetupPanel queryBuilderState={queryBuilderState} />
+              <QueryBuilderUnsupportedQueryExplorer />
+            </ResizablePanel>
+            <ResizablePanelSplitter />
+            <ResizablePanel minSize={40} direction={-1}>
+              <QueryBuilderParameterPanel
+                queryBuilderState={queryBuilderState}
+              />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+        <ResizablePanelSplitter />
+        <ResizablePanel>
+          <QueryBuilderUnsupportedQueryEditPanel
+            queryBuilderState={queryBuilderState}
+          />
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    );
+  },
+);

package/src/components/QueryBuilder_TestID.ts

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+export enum QUERY_BUILDER_TEST_ID {
+  QUERY_BUILDER = 'query__builder',
+  QUERY_BUILDER_SETUP = 'query__builder__setup',
+  QUERY_BUILDER_PROJECTION = 'query__builder__projection',
+  QUERY_BUILDER_GRAPH_FETCH = 'query__builder__graph__fetch',
+  QUERY_BUILDER_FILTER = 'query__builder__filter',
+  QUERY_BUILDER_POST_FILTER = 'query__builder__post-filter',
+  QUERY_BUILDER_EXPLORER = 'query__builder__explorer',
+  QUERY_BUILDER_PROPERTY_SEARCH_PANEL = 'query__builder__property__search__panel',
+}