@finos/legend-application-query 6.0.0 → 7.0.1

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

@@ -1,421 +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 {
-  CustomSelectorInput,
-  createFilter,
-  CogIcon,
-  PURE_ClassIcon,
-  PURE_MappingIcon,
-  PURE_RuntimeIcon,
-  ClockIcon,
-  clsx,
-} from '@finos/legend-art';
-import { observer } from 'mobx-react-lite';
-import type { QueryBuilderState } from '../../stores/query-builder/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,
-  getPackageableElementOptionFormatter,
-  buildElementOption,
-  useApplicationStore,
-} from '@finos/legend-application';
-import { MilestoningParametersEditor } from './explorer/QueryBuilderMilestoneEditor.js';
-
-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,
-  );
-
-  let milestoningTooltipText: string | undefined;
-  switch (milestoneStereotype) {
-    case MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL:
-      milestoningTooltipText = `Business Date: ${getParameterValue(
-        queryBuilderState.milestoningState.businessDate,
-      )}`;
-      break;
-    case MILESTONING_STEREOTYPE.PROCESSING_TEMPORAL:
-      milestoningTooltipText = `Processing Date: ${getParameterValue(
-        queryBuilderState.milestoningState.processingDate,
-      )}`;
-      break;
-    case MILESTONING_STEREOTYPE.BITEMPORAL:
-      milestoningTooltipText = `Processing Date: ${getParameterValue(
-        queryBuilderState.milestoningState.processingDate,
-      )}, Business Date: ${getParameterValue(
-        queryBuilderState.milestoningState.businessDate,
-      )}`;
-      break;
-    default:
-      milestoningTooltipText = undefined;
-  }
-
-  return (
-    <div
-      className={clsx('query-builder__setup__class-option-label', {
-        'query-builder__setup__class-option-label--deprecated':
-          isDeprecatedClass,
-      })}
-    >
-      <div className="query-builder__setup__class-option-label__name">
-        {val.name}
-      </div>
-      {milestoningTooltipText && (
-        <ClockIcon
-          className="query-builder__setup__class-option-label__milestoning"
-          title={`This class is milestoned:\n${milestoningTooltipText}`}
-        />
-      )}
-    </div>
-  );
-};
-
-export const QueryBuilderClassSelector = observer(
-  (props: {
-    queryBuilderState: QueryBuilderState;
-    classes: Class[];
-    onClassChange?: ((val: Class) => void) | undefined;
-    noMatchMessage?: string | undefined;
-  }) => {
-    const { queryBuilderState, classes, onClassChange, noMatchMessage } = props;
-    const milestoningState = queryBuilderState.milestoningState;
-    const applicationStore = useApplicationStore();
-
-    // class
-    const elementFilterOption = createFilter({
-      ignoreCase: true,
-      ignoreAccents: false,
-      stringify: (option: PackageableElementOption<Class>): string =>
-        option.value.path,
-    });
-
-    const classOptions = classes.map((_class) => ({
-      value: _class,
-      label: generateClassLabel(_class, queryBuilderState),
-    }));
-    const selectedClassOption = queryBuilderState.class
-      ? {
-          value: queryBuilderState.class,
-          label: generateClassLabel(queryBuilderState.class, queryBuilderState),
-        }
-      : null;
-    const changeClass = (val: PackageableElementOption<Class>): void => {
-      if (val.value === queryBuilderState.class) {
-        return;
-      }
-      queryBuilderState.changeClass(val.value);
-      onClassChange?.(val.value);
-    };
-
-    // milestoning
-    const showMilestoningEditor = (): void =>
-      milestoningState.setShowMilestoningEditor(true);
-
-    return (
-      <div className="query-builder__setup__config-group query-builder__setup__config-group--class">
-        <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="class"
-            >
-              <PURE_ClassIcon />
-            </div>
-            <CustomSelectorInput
-              className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector query-builder__setup__config-group__item__selector__milestoned"
-              placeholder={
-                classOptions.length
-                  ? 'Choose a class...'
-                  : noMatchMessage ?? 'No class found'
-              }
-              noMatchMessage={noMatchMessage}
-              options={classOptions}
-              onChange={changeClass}
-              value={selectedClassOption}
-              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
-              filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
-              })}
-            />
-            {queryBuilderState.isQuerySupported && (
-              <button
-                className="btn--dark btn__icon--dark query-builder__setup__milestoning"
-                tabIndex={-1}
-                onClick={showMilestoningEditor}
-                disabled={!milestoningState.isMilestonedQuery}
-                title="Edit Milestoning Parameters"
-              >
-                <ClockIcon />
-              </button>
-            )}
-            {milestoningState.isMilestonedQuery && (
-              <MilestoningParametersEditor
-                queryBuilderState={queryBuilderState}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-
-export const buildRuntimeValueOption = (
-  runtimeValue: Runtime,
-): { label: string; value: Runtime } => ({
-  value: runtimeValue,
-  label:
-    runtimeValue instanceof RuntimePointer
-      ? runtimeValue.packageableRuntime.value.name
-      : 'custom',
-});
-
-export const getRuntimeOptionFormatter = (props: {
-  darkMode?: boolean;
-}): ((option: { value: Runtime }) => React.ReactNode) =>
-  function RuntimeOptionLabel(option: { value: Runtime }): React.ReactNode {
-    if (option.value instanceof RuntimePointer) {
-      const runtimePointer = option.value;
-      return getPackageableElementOptionFormatter(props)(
-        buildElementOption(runtimePointer.packageableRuntime.value),
-      );
-    }
-    return option.value instanceof RuntimePointer ? (
-      option.value.packageableRuntime.value.name
-    ) : (
-      <div className="query-builder__setup__runtime-option--custom">
-        <CogIcon />
-        <div className="query-builder__setup__runtime-option--custom__label">
-          custom
-        </div>
-      </div>
-    );
-  };
-
-const BasicQueryBuilderSetup = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const applicationStore = useApplicationStore();
-
-    // classes
-    const classes = queryBuilderState.graphManagerState.usableClasses;
-
-    // mapping
-    const mappingOptions =
-      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 ||
-        queryBuilderState.isMappingReadOnly
-      ) {
-        return;
-      }
-      queryBuilderState.changeMapping(val.value);
-    };
-    const mappingFilterOption = createFilter({
-      ignoreCase: true,
-      ignoreAccents: false,
-      stringify: (option: PackageableElementOption<Mapping>): string =>
-        option.value.path,
-    });
-
-    // runtime
-    const runtimeOptions = 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 ||
-        queryBuilderState.isRuntimeReadOnly
-      ) {
-        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}
-        />
-        <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'
-                }
-                disabled={
-                  queryBuilderState.isMappingReadOnly ||
-                  !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={
-                  runtimeOptions.length
-                    ? 'Choose a runtime...'
-                    : 'No runtime found'
-                }
-                disabled={
-                  queryBuilderState.isRuntimeReadOnly ||
-                  !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 QueryBuilderSidebar = observer(
-  (props: {
-    queryBuilderState: QueryBuilderState;
-    children: React.ReactNode;
-  }) => {
-    const { queryBuilderState, children } = props;
-
-    return (
-      <div
-        className={clsx(
-          'query-builder__side-bar',
-          queryBuilderState.sideBarClassName,
-        )}
-      >
-        <div
-          data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_SETUP}
-          className="panel query-builder__setup"
-        >
-          <div className="panel__content query-builder__setup__content">
-            {queryBuilderState.TEMPORARY__setupPanelContentRenderer?.() ?? (
-              <BasicQueryBuilderSetup queryBuilderState={queryBuilderState} />
-            )}
-          </div>
-        </div>
-        <div className="query-builder__side-bar__content">{children}</div>
-      </div>
-    );
-  },
-);

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

@@ -1,127 +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 { useEffect } from 'react';
-import { observer } from 'mobx-react-lite';
-import { clsx, Dialog } from '@finos/legend-art';
-import type { QueryBuilderState } from '../../stores/query-builder/QueryBuilderState.js';
-import { QueryBuilderTextEditorMode } from '../../stores/query-builder/QueryBuilderTextEditorState.js';
-import { flowResult } from 'mobx';
-import { QueryBuilderLambdaEditor } from './shared/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.textEditorState;
-    const close = applicationStore.guardUnhandledError(() =>
-      flowResult(queryBuilderState.textEditorState.closeModal()),
-    );
-    const discardChanges = (): void => {
-      queryBuilderState.textEditorState.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 === QueryBuilderTextEditorMode.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 === QueryBuilderTextEditorMode.JSON && (
-                <TextInputEditor
-                  language={EDITOR_LANGUAGE.JSON}
-                  inputValue={queryTextEditorState.readOnlylambdaJson}
-                  isReadOnly={true}
-                />
-              )}
-            </div>
-          </div>
-          <div className="modal__footer">
-            {mode === QueryBuilderTextEditorMode.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/query-builder/QueryBuilderUnsupportedQueryEditor.tsx

@@ -1,88 +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 type { QueryBuilderState } from '../../stores/query-builder/QueryBuilderState.js';
-import { QueryBuilderTextEditorMode } from '../../stores/query-builder/QueryBuilderTextEditorState.js';
-import {
-  BlankPanelContent,
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizablePanelSplitter,
-} from '@finos/legend-art';
-import { QueryBuilderSidebar } from './QueryBuilderSideBar.js';
-import { QueryBuilderParametersPanel } from './QueryBuilderParametersPanel.js';
-
-const QueryBuilderUnsupportedQueryEditPanel = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const queryUnsupportedState = queryBuilderState.unsupportedQueryState;
-    const lambdaError = queryUnsupportedState.lambdaError;
-    const errorMessage = lambdaError?.message
-      ? ` due to: ${lambdaError.message}`
-      : '';
-    const openLambdaModal = (): void =>
-      queryBuilderState.textEditorState.openModal(
-        QueryBuilderTextEditorMode.TEXT,
-      );
-    return (
-      <div className="panel">
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">content</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}>
-          <QueryBuilderSidebar queryBuilderState={queryBuilderState}>
-            <QueryBuilderParametersPanel
-              queryBuilderState={queryBuilderState}
-            />
-          </QueryBuilderSidebar>
-        </ResizablePanel>
-        <ResizablePanelSplitter />
-        <ResizablePanel>
-          <QueryBuilderUnsupportedQueryEditPanel
-            queryBuilderState={queryBuilderState}
-          />
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    );
-  },
-);

package/src/components/query-builder/QueryBuilder_TestID.ts

@@ -1,26 +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.
- */
-
-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',
-}