@finos/legend-application-query 5.2.6 → 6.0.0

package/src/components/query-builder/shared/QueryBuilderLambdaEditor.tsx

@@ -0,0 +1,120 @@
+/**
+ * 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 { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { type IKeyboardEvent, KeyCode } from 'monaco-editor';
+import { useCallback, useMemo } from 'react';
+import type { QueryBuilderState } from '../../../stores/query-builder/QueryBuilderState.js';
+import type { Type } from '@finos/legend-graph';
+import {
+  useApplicationStore,
+  LambdaEditor,
+  type LambdaEditorState,
+  type LambdaEditorOnKeyDownEventHandler,
+} from '@finos/legend-application';
+
+export const QueryBuilderLambdaEditor = observer(
+  (props: {
+    queryBuilderState: QueryBuilderState;
+    className?: string;
+    disabled: boolean;
+    lambdaEditorState: LambdaEditorState;
+    /**
+     * TODO: when we pass in these expected type we should match a type as expected type if it's covariance, i.e. it is a subtype of
+     * the expected type. Note that we also have to handle that relationship for Primitive type
+     * See https://dzone.com/articles/covariance-and-contravariance
+     */
+    expectedType?: Type;
+    matchedExpectedType?: () => boolean;
+    onExpectedTypeLabelSelect?: () => void;
+    forceBackdrop: boolean;
+    disableExpansion?: boolean | undefined;
+    forceExpansion?: boolean | undefined;
+    disablePopUp?: boolean | undefined;
+    useBaseTextEditorSettings?: boolean | undefined;
+    hideErrorBar?: boolean | undefined;
+    onEditorFocusEventHandler?: (() => void) | undefined;
+  }) => {
+    const {
+      queryBuilderState,
+      className,
+      lambdaEditorState,
+      disabled,
+      forceBackdrop,
+      expectedType,
+      onExpectedTypeLabelSelect,
+      matchedExpectedType,
+      disableExpansion,
+      forceExpansion,
+      disablePopUp,
+      useBaseTextEditorSettings,
+      hideErrorBar,
+      onEditorFocusEventHandler,
+    } = props;
+    const applicationStore = useApplicationStore();
+    const backdropSetter = useCallback(
+      (val: boolean) => queryBuilderState.setBackdrop(val),
+      [queryBuilderState],
+    );
+    const onKeyDownEventHandlers: LambdaEditorOnKeyDownEventHandler[] = useMemo(
+      () => [
+        {
+          matcher: (event: IKeyboardEvent): boolean =>
+            event.keyCode === KeyCode.F9,
+          action: (event: IKeyboardEvent): void => {
+            const handler = async (): Promise<void> => {
+              lambdaEditorState.clearErrors();
+              if (!disabled) {
+                await flowResult(
+                  lambdaEditorState.convertLambdaGrammarStringToObject(),
+                );
+                // abort action if parser error occurred
+                if (lambdaEditorState.parserError) {
+                  return;
+                }
+              }
+              await flowResult(queryBuilderState.compileQuery());
+            };
+            handler().catch(applicationStore.alertUnhandledError);
+          },
+        },
+      ],
+      [disabled, lambdaEditorState, applicationStore, queryBuilderState],
+    );
+
+    return (
+      <LambdaEditor
+        key={lambdaEditorState.uuid}
+        className={className}
+        disabled={disabled}
+        lambdaEditorState={lambdaEditorState}
+        expectedType={expectedType}
+        matchedExpectedType={matchedExpectedType}
+        onExpectedTypeLabelSelect={onExpectedTypeLabelSelect}
+        forceBackdrop={forceBackdrop}
+        backdropSetter={backdropSetter}
+        disableExpansion={disableExpansion}
+        forceExpansion={forceExpansion}
+        disablePopUp={disablePopUp}
+        useBaseTextEditorSettings={useBaseTextEditorSettings}
+        hideErrorBar={hideErrorBar}
+        onKeyDownEventHandlers={onKeyDownEventHandlers}
+        onEditorFocusEventHandler={onEditorFocusEventHandler}
+      />
+    );
+  },
+);

package/src/components/query-builder/shared/QueryBuilderPanelIssueCountBadge.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 { TimesCircleIcon } from '@finos/legend-art';
+
+export const QueryBuilderPanelIssueCountBadge: React.FC<{
+  issues: string[] | undefined;
+}> = (props) => {
+  const { issues } = props;
+  if (!issues) {
+    return null;
+  }
+  const labelText = `${issues.length} issue${issues.length > 1 ? 's' : ''}`;
+  return (
+    <div
+      className="query-builder-panel-issue-count-badge"
+      title={`Found ${labelText}:\n${issues
+        .map((issue) => `\u2022 ${issue}`)
+        .join('\n')}`}
+    >
+      <TimesCircleIcon className="query-builder-panel-issue-count-badge__icon" />
+      <div className="query-builder-panel-issue-count-badge__text">
+        {labelText}
+      </div>
+    </div>
+  );
+};

package/src/components/query-builder/workflows/ClassQueryBuilder.tsx

@@ -0,0 +1,198 @@
+/**
+ * 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,
+  PURE_MappingIcon,
+  PURE_RuntimeIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import {
+  type Class,
+  type Mapping,
+  type Runtime,
+  PackageableElementExplicitReference,
+  RuntimePointer,
+  getMappingCompatibleRuntimes,
+  getClassCompatibleMappings,
+} from '@finos/legend-graph';
+import {
+  type PackageableElementOption,
+  getPackageableElementOptionFormatter,
+  buildElementOption,
+  useApplicationStore,
+} from '@finos/legend-application';
+import {
+  buildRuntimeValueOption,
+  getRuntimeOptionFormatter,
+  QueryBuilderClassSelector,
+} from '../QueryBuilderSideBar.js';
+import type { ClassQueryBuilderState } from '../../../stores/query-builder/workflows/ClassQueryBuilderState.js';
+
+/**
+ * This setup panel supports cascading in order: Class -> Mapping -> Runtime
+ *
+ * In other words, we will only show:
+ * - For mapping selector: the list of compatible mappings with the selected class
+ * - For runtime value selector: the list of compatible runtimes with the selected mapping
+ *
+ * See details on propagation/cascading in {@link ClassQueryBuilderState}
+ */
+const ClassQueryBuilderSetupPanelContent = observer(
+  (props: { queryBuilderState: ClassQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+
+    // class
+    const classes = queryBuilderState.graphManagerState.usableClasses;
+    const onClassChange = (val: Class): void =>
+      queryBuilderState.propagateClassChange(val);
+
+    // mapping
+    const mappingOptions = (
+      queryBuilderState.class
+        ? getClassCompatibleMappings(
+            queryBuilderState.class,
+            queryBuilderState.graphManagerState.usableMappings,
+          )
+        : []
+    ).map(buildElementOption);
+    const selectedMappingOption = queryBuilderState.mapping
+      ? buildElementOption(queryBuilderState.mapping)
+      : null;
+    const changeMapping = (val: PackageableElementOption<Mapping>): void => {
+      if (!queryBuilderState.class || val.value === queryBuilderState.mapping) {
+        return;
+      }
+      queryBuilderState.changeMapping(val.value);
+      queryBuilderState.propagateMappingChange(val.value);
+    };
+    const mappingFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: PackageableElementOption<Mapping>): string =>
+        option.value.path,
+    });
+
+    // runtime
+    const runtimeOptions = (
+      queryBuilderState.mapping
+        ? getMappingCompatibleRuntimes(
+            queryBuilderState.mapping,
+            queryBuilderState.graphManagerState.usableRuntimes,
+          )
+        : []
+    )
+      .map(
+        (rt) =>
+          new RuntimePointer(PackageableElementExplicitReference.create(rt)),
+      )
+      .map(buildRuntimeValueOption);
+    const selectedRuntimeOption = queryBuilderState.runtimeValue
+      ? buildRuntimeValueOption(queryBuilderState.runtimeValue)
+      : null;
+    const changeRuntime = (val: { value: Runtime }): void => {
+      if (val.value === queryBuilderState.runtimeValue) {
+        return;
+      }
+      queryBuilderState.changeRuntime(val.value);
+    };
+    const runtimeFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: { value: Runtime }): string =>
+        option.value instanceof RuntimePointer
+          ? option.value.packageableRuntime.value.path
+          : 'custom',
+    });
+
+    return (
+      <>
+        <QueryBuilderClassSelector
+          queryBuilderState={queryBuilderState}
+          classes={classes}
+          onClassChange={onClassChange}
+        />
+        <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"
+                placeholder={
+                  mappingOptions.length
+                    ? 'Choose a mapping...'
+                    : 'No compatible mapping found for class'
+                }
+                noMatchMessage="No compatible mapping found for specified class"
+                disabled={!queryBuilderState.class}
+                options={mappingOptions}
+                onChange={changeMapping}
+                value={selectedMappingOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                filterOption={mappingFilterOption}
+                formatOptionLabel={getPackageableElementOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="runtime"
+              >
+                <PURE_RuntimeIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                placeholder="Choose a runtime..."
+                noMatchMessage="No compatible runtime found for specified mapping"
+                disabled={
+                  !queryBuilderState.class || !queryBuilderState.mapping
+                }
+                options={runtimeOptions}
+                onChange={changeRuntime}
+                value={selectedRuntimeOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                filterOption={runtimeFilterOption}
+                formatOptionLabel={getRuntimeOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  },
+);
+
+export const renderClassQueryBuilderSetupPanelContent = (
+  queryBuilderState: ClassQueryBuilderState,
+): React.ReactNode => (
+  <ClassQueryBuilderSetupPanelContent queryBuilderState={queryBuilderState} />
+);

package/src/components/query-builder/workflows/MappingQueryBuilder.tsx

@@ -0,0 +1,195 @@
+/**
+ * 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,
+  PURE_MappingIcon,
+  PURE_RuntimeIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import {
+  type Mapping,
+  type Runtime,
+  PackageableElementExplicitReference,
+  RuntimePointer,
+  getMappingCompatibleRuntimes,
+  getMappingCompatibleClasses,
+} from '@finos/legend-graph';
+import {
+  type PackageableElementOption,
+  getPackageableElementOptionFormatter,
+  buildElementOption,
+  useApplicationStore,
+} from '@finos/legend-application';
+import {
+  buildRuntimeValueOption,
+  getRuntimeOptionFormatter,
+  QueryBuilderClassSelector,
+} from '../QueryBuilderSideBar.js';
+import { guaranteeType } from '@finos/legend-shared';
+import type { MappingQueryBuilderState } from '../../../stores/query-builder/workflows/MappingQueryBuilderState.js';
+
+/**
+ * This setup panel supports cascading in order: Mapping -> Runtime + Class
+ *
+ * In other words, we will only show:
+ * - For class selector: the list of compatible classes with the selected mapping
+ * - For runtime value selector: the list of compatible runtimes with the selected mapping
+ *
+ * See details on propagation/cascading in {@link MappingQueryBuilderState}
+ */
+const MappingQueryBuilderSetupPanelContent = observer(
+  (props: { queryBuilderState: MappingQueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
+
+    // mapping
+    const mappingOptions =
+      queryBuilderState.graphManagerState.usableMappings.map(
+        buildElementOption,
+      );
+    const selectedMappingOption = queryBuilderState.mapping
+      ? buildElementOption(queryBuilderState.mapping)
+      : null;
+    const changeMapping = (val: PackageableElementOption<Mapping>): void => {
+      if (val.value === queryBuilderState.mapping) {
+        return;
+      }
+      queryBuilderState.changeMapping(val.value);
+      queryBuilderState.propagateMappingChange(val.value);
+      queryBuilderState.onMappingChange?.(val.value);
+    };
+    const mappingFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: PackageableElementOption<Mapping>): string =>
+        option.value.path,
+    });
+
+    // runtime
+    const runtimeOptions = (
+      queryBuilderState.mapping
+        ? getMappingCompatibleRuntimes(
+            queryBuilderState.mapping,
+            queryBuilderState.graphManagerState.usableRuntimes,
+          )
+        : []
+    )
+      .map(
+        (rt) =>
+          new RuntimePointer(PackageableElementExplicitReference.create(rt)),
+      )
+      .map(buildRuntimeValueOption);
+    const selectedRuntimeOption = queryBuilderState.runtimeValue
+      ? buildRuntimeValueOption(queryBuilderState.runtimeValue)
+      : null;
+    const changeRuntime = (val: { value: Runtime }): void => {
+      if (val.value === queryBuilderState.runtimeValue) {
+        return;
+      }
+      queryBuilderState.changeRuntime(val.value);
+      queryBuilderState.onRuntimeChange?.(val.value);
+    };
+    const runtimeFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: { value: Runtime }): string =>
+        guaranteeType(option.value, RuntimePointer).packageableRuntime.value
+          .path,
+    });
+
+    // class
+    const classes = queryBuilderState.mapping
+      ? getMappingCompatibleClasses(
+          queryBuilderState.mapping,
+          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"
+                placeholder={
+                  mappingOptions.length
+                    ? 'Choose a mapping...'
+                    : 'No mapping found'
+                }
+                noMatchMessage="No mapping found"
+                options={mappingOptions}
+                onChange={changeMapping}
+                value={selectedMappingOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                filterOption={mappingFilterOption}
+                formatOptionLabel={getPackageableElementOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+            <div className="query-builder__setup__config-group__item">
+              <div
+                className="btn--sm query-builder__setup__config-group__item__label"
+                title="runtime"
+              >
+                <PURE_RuntimeIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                placeholder="Choose a runtime..."
+                noMatchMessage="No compatible runtime found for specified mapping"
+                disabled={!queryBuilderState.mapping}
+                options={runtimeOptions}
+                onChange={changeRuntime}
+                value={selectedRuntimeOption}
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                filterOption={runtimeFilterOption}
+                formatOptionLabel={getRuntimeOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                })}
+              />
+            </div>
+          </div>
+        </div>
+        <QueryBuilderClassSelector
+          queryBuilderState={queryBuilderState}
+          classes={classes}
+          noMatchMessage="No compatible class found for specified mapping"
+        />
+      </>
+    );
+  },
+);
+
+export const renderMappingQueryBuilderSetupPanelContent = (
+  queryBuilderState: MappingQueryBuilderState,
+): React.ReactNode => (
+  <MappingQueryBuilderSetupPanelContent queryBuilderState={queryBuilderState} />
+);