@finos/legend-application-query 5.2.8 → 7.0.0

package/src/components/QueryBuilderSetupPanel.tsx

@@ -1,342 +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/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';
-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>
-        <ClockIcon
-          className="query-builder__setup__config__item__class-label__milestoning"
-          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 applicationStore = useApplicationStore();
-    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.resetQueryContent();
-      }
-    };
-    // 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={!applicationStore.TEMPORARY__isLightThemeEnabled}
-              disabled={!isQuerySupported || querySetupState.classIsReadOnly}
-              filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
-              })}
-            />
-            <button
-              className="btn--dark btn__icon--dark query-builder__setup__milestoning"
-              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={!applicationStore.TEMPORARY__isLightThemeEnabled}
-              filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
-              })}
-            />
-          </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={!applicationStore.TEMPORARY__isLightThemeEnabled}
-              filterOption={runtimeFilterOption}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  },
-);

package/src/components/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/QueryBuilderState.js';
-import { QueryTextEditorMode } from '../stores/QueryTextEditorState.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.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

@@ -1,112 +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/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?.message
-      ? ` 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

@@ -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',
-}