@finos/legend-extension-dsl-data-quality 1.0.60 → 2.0.0

package/src/components/DataQualityRelationValidationEditor.tsx

@@ -0,0 +1,290 @@
+/**
+ * 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 { useCallback, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  type SelectOption,
+  clsx,
+  CustomSelectorInput,
+  FilledWindowMaximizeIcon,
+  PanelDnDEntry,
+  PanelEntryDragHandle,
+  RocketIcon,
+  TimesIcon,
+  useDragPreviewLayer,
+} from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '@finos/legend-application-studio';
+import { PrimitiveType } from '@finos/legend-graph';
+import {
+  ApplicationNavigationContextData,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { InlineLambdaEditor } from '@finos/legend-query-builder';
+import {
+  type DataQualityRelationValidationConfigurationState,
+  DATA_QUALITY_RELATION_VALIDATION_EDITOR_TAB,
+} from './states/DataQualityRelationValidationConfigurationState.js';
+import type { DataQualityRelationValidation } from '../graph/metamodel/pure/packageableElements/data-quality/DataQualityValidationConfiguration.js';
+import {
+  dataQualityRelationValidation_setDescription,
+  dataQualityRelationValidation_setName,
+  dataQualityRelationValidation_swapValidations,
+} from '../graph-manager/DSL_DataQuality_GraphModifierHelper.js';
+import { DataQualityValidationDetailPanel } from './DataQualityValidationDetailPanel.js';
+import { useDrag, useDrop } from 'react-dnd';
+
+export type RelationValidationDragSource = {
+  validation: DataQualityRelationValidation;
+};
+export const RELATION_VALIDATION_DND_TYPE = 'RELATION_VALIDATION';
+
+export const DataQualityRelationValidationEditor = observer(
+  (props: {
+    relationValidationConfigurationState: DataQualityRelationValidationConfigurationState;
+    validation: DataQualityRelationValidation;
+    deleteValidation: () => void;
+    isReadOnly: boolean;
+  }) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
+    const {
+      validation,
+      deleteValidation,
+      relationValidationConfigurationState,
+      isReadOnly,
+    } = props;
+    const applicationStore = useApplicationStore();
+    const hasParserError =
+      relationValidationConfigurationState.validationStates.some(
+        (state) => state.parserError,
+      );
+    const validationState =
+      relationValidationConfigurationState.getValidationState(validation);
+
+    const changeName: React.ChangeEventHandler<HTMLInputElement> = (event) =>
+      dataQualityRelationValidation_setName(validation, event.target.value);
+
+    const changeDescription: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) =>
+      dataQualityRelationValidation_setDescription(
+        validation,
+        event.target.value,
+      );
+
+    const handleHover = useCallback(
+      (item: RelationValidationDragSource): void => {
+        const draggingProperty = item.validation;
+        const hoveredProperty = validation;
+        dataQualityRelationValidation_swapValidations(
+          relationValidationConfigurationState.validationElement,
+          draggingProperty,
+          hoveredProperty,
+        );
+      },
+      [relationValidationConfigurationState.validationElement, validation],
+    );
+
+    const [{ isBeingDraggedValidation }, dropConnector] = useDrop<
+      RelationValidationDragSource,
+      void,
+      { isBeingDraggedValidation: DataQualityRelationValidation | undefined }
+    >(
+      () => ({
+        accept: [RELATION_VALIDATION_DND_TYPE],
+        hover: (item) => handleHover(item),
+        collect: (
+          monitor,
+        ): {
+          isBeingDraggedValidation: DataQualityRelationValidation | undefined;
+        } => ({
+          isBeingDraggedValidation:
+            monitor.getItem<RelationValidationDragSource | null>()?.validation,
+        }),
+      }),
+      [handleHover],
+    );
+    const isBeingDragged = validation === isBeingDraggedValidation;
+
+    const [, dragConnector, dragPreviewConnector] =
+      useDrag<RelationValidationDragSource>(
+        () => ({
+          type: RELATION_VALIDATION_DND_TYPE,
+          item: () => ({
+            validation: validation,
+          }),
+        }),
+        [validation],
+      );
+    dragConnector(handleRef);
+    dropConnector(ref);
+    useDragPreviewLayer(dragPreviewConnector);
+
+    // Actions
+    const onLambdaEditorFocus = (): void =>
+      applicationStore.navigationContextService.push(
+        ApplicationNavigationContextData.createTransient(
+          LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.CLASS_CONTRAINT_LAMBDA_EDITOR,
+        ),
+      );
+    const remove = applicationStore.guardUnhandledError(async () => {
+      await flowResult(
+        validationState.convertLambdaObjectToGrammarString({ pretty: false }),
+      );
+      deleteValidation();
+    });
+
+    const runQuery = (): void => {
+      relationValidationConfigurationState.setSelectedTab(
+        DATA_QUALITY_RELATION_VALIDATION_EDITOR_TAB.TRIAL_RUN,
+      );
+      relationValidationConfigurationState.resultState.setValidationToRun(
+        validation,
+      );
+      relationValidationConfigurationState.resultState.handleRunValidation();
+    };
+
+    const onValidationTypeChange = (val: SelectOption): void => {
+      validationState.onValidationTypeChange(val);
+    };
+
+    const selectedValidationType = {
+      label: validation.type,
+      value: validation.type,
+    };
+
+    const openValidationDialog = () => {
+      validationState.setIsValidationDialogOpen(true);
+    };
+
+    return (
+      <PanelDnDEntry
+        ref={ref}
+        placeholder={<div className="uml-element-editor__dnd__placeholder" />}
+        className="relation-validation__container"
+        showPlaceholder={isBeingDragged}
+      >
+        <div
+          className={clsx('relation-validation', {
+            backdrop__element: validationState.parserError,
+          })}
+        >
+          <div className="relation-validation__content">
+            <PanelEntryDragHandle
+              dragSourceConnector={handleRef}
+              isDragging={isBeingDragged}
+            />
+            <input
+              className="relation-validation__content__name"
+              spellCheck={false}
+              disabled={isReadOnly}
+              value={validation.name}
+              onChange={changeName}
+              placeholder="Validation name"
+            />
+            <CustomSelectorInput
+              options={
+                relationValidationConfigurationState.relationValidationOptions
+              }
+              onChange={onValidationTypeChange}
+              value={selectedValidationType}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              placeholder={'Type of validation to be added'}
+            />
+            {!isReadOnly && (
+              <button
+                className="uml-element-editor__remove-btn"
+                onClick={remove}
+                tabIndex={-1}
+                title="Remove"
+              >
+                <TimesIcon />
+              </button>
+            )}
+            <button
+              className="uml-element-editor__remove-btn"
+              onClick={runQuery}
+              tabIndex={-1}
+              title="Run Validation"
+            >
+              <RocketIcon />
+            </button>
+            <button
+              className="uml-element-editor__remove-btn"
+              onClick={openValidationDialog}
+              tabIndex={-1}
+              title="Open Validation Details dialog"
+            >
+              <FilledWindowMaximizeIcon />
+            </button>
+          </div>
+          {validationState.rowMapFunctionLambdaEditorState && (
+            <div className="uml-element-editor__row-map">
+              <div className="uml-element-editor__row-map__label">
+                Row Map Function
+              </div>
+              <InlineLambdaEditor
+                disabled={
+                  relationValidationConfigurationState.isConvertingValidationLambdaObjects ||
+                  isReadOnly
+                }
+                lambdaEditorState={
+                  validationState.rowMapFunctionLambdaEditorState
+                }
+                forceBackdrop={hasParserError}
+                expectedType={PrimitiveType.BOOLEAN}
+                onEditorFocus={onLambdaEditorFocus}
+                disablePopUp={true}
+              />
+            </div>
+          )}
+          <InlineLambdaEditor
+            disabled={
+              relationValidationConfigurationState.isConvertingValidationLambdaObjects ||
+              isReadOnly
+            }
+            lambdaEditorState={validationState}
+            forceBackdrop={hasParserError}
+            expectedType={PrimitiveType.BOOLEAN}
+            onEditorFocus={onLambdaEditorFocus}
+            disablePopUp={true}
+          />
+        </div>
+        {validationState.isValidationDialogOpen && (
+          <DataQualityValidationDetailPanel
+            dataQualityRelationValidationState={
+              relationValidationConfigurationState
+            }
+            isReadOnly={isReadOnly}
+            relationValidationState={validationState}
+            changeName={changeName}
+            changeDescription={changeDescription}
+            onLambdaEditorFocus={onLambdaEditorFocus}
+            forceBackdrop={hasParserError}
+            onValidationTypeChange={onValidationTypeChange}
+            selectedValidationType={selectedValidationType}
+          />
+        )}
+      </PanelDnDEntry>
+    );
+  },
+);

package/src/components/DataQualityResultPanel.tsx

@@ -362,10 +362,7 @@ export const DataQualityResultPanel = observer(
           )}
           {executionResult && !isLoading && (
             <div className="data-quality-validation__result__values">
-              <DataQualityResultValues
-                executionResult={executionResult}
-                dataQualityState={dataQualityState}
-              />
+              <DataQualityResultValues executionResult={executionResult} />
             </div>
           )}
         </PanelContent>

package/src/components/DataQualityResultValues.tsx

@@ -15,7 +15,6 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import type { DataQualityState } from './states/DataQualityState.js';
 import {
   type ExecutionResult,
   extractExecutionResultValues,
@@ -26,10 +25,7 @@ import { CodeEditor } from '@finos/legend-lego/code-editor';
 import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
 
 export const DataQualityResultValues = observer(
-  (props: {
-    executionResult: ExecutionResult;
-    dataQualityState: DataQualityState;
-  }) => {
+  (props: { executionResult: ExecutionResult }) => {
     const { executionResult } = props;
     if (executionResult instanceof RawExecutionResult) {
       const inputValue =

package/src/components/DataQualitySideBar.tsx

@@ -25,7 +25,7 @@ import { useApplicationStore } from '@finos/legend-application';
 import type { DataQualityState } from './states/DataQualityState.js';
 import { DataQualityDataSpaceBuilderSetupPanelContent } from './DataQualityDataSpaceBuilder.js';
 import { DataQualityMappingAndRuntimeBuilder } from './DataQualityMappingAndRuntimeBuilder.js';
-import { ELEMENT_CREATION_BASIS } from './DSL_DataQuality_ClassElementDriver.js';
+import { CLASS_ELEMENT_CREATION_BASIS } from './DSL_DataQuality_ElementDriver.js';
 import { type Class, isElementDeprecated } from '@finos/legend-graph';
 import type { DataQualityClassValidationState } from './states/DataQualityClassValidationState.js';
 import type { DataQualityServiceValidationState } from './states/DataQualityServiceValidationState.js';
@@ -191,7 +191,7 @@ export const DataQualityClassValidationSideBar = observer(
         >
           <div className="panel__content data-quality-validation__setup__content">
             {validationElementCreationBasis ===
-            ELEMENT_CREATION_BASIS.DATASPACE_BASED ? (
+            CLASS_ELEMENT_CREATION_BASIS.DATASPACE_BASED ? (
               <DataQualityDataSpaceBuilderSetupPanelContent
                 dataQualityState={dataQualityClassValidationState}
               />

package/src/components/DataQualityValidationDetailPanel.tsx

@@ -0,0 +1,182 @@
+/**
+ * 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 {
+  type SelectOption,
+  clsx,
+  CustomSelectorInput,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { PrimitiveType } from '@finos/legend-graph';
+import type { DataQualityRelationValidationConfigurationState } from './states/DataQualityRelationValidationConfigurationState.js';
+import type { DataQualityRelationValidationState } from './states/DataQualityRelationValidationState.js';
+import { InlineLambdaEditor } from '@finos/legend-query-builder';
+import type { RelationValidationType } from '../graph/metamodel/pure/packageableElements/data-quality/DataQualityValidationConfiguration.js';
+
+export const DataQualityValidationDetailPanel = observer(
+  (props: {
+    dataQualityRelationValidationState: DataQualityRelationValidationConfigurationState;
+    isReadOnly: boolean;
+    relationValidationState: DataQualityRelationValidationState;
+    changeName: React.ChangeEventHandler<HTMLInputElement>;
+    changeDescription: React.ChangeEventHandler<HTMLInputElement>;
+    onLambdaEditorFocus: (() => void) | undefined;
+    onValidationTypeChange: (val: SelectOption) => void;
+    selectedValidationType: {
+      label: RelationValidationType;
+      value: RelationValidationType;
+    };
+    forceBackdrop: boolean;
+  }) => {
+    const {
+      dataQualityRelationValidationState,
+      isReadOnly,
+      relationValidationState,
+      changeName,
+      onLambdaEditorFocus,
+      forceBackdrop,
+      onValidationTypeChange,
+      selectedValidationType,
+      changeDescription,
+    } = props;
+    const {
+      editorStore: { applicationStore },
+    } = dataQualityRelationValidationState;
+    const { relationValidation, rowMapFunctionLambdaEditorState } =
+      relationValidationState;
+    const closePlanViewer = () => {
+      relationValidationState.setIsValidationDialogOpen(false);
+    };
+
+    return (
+      <Dialog
+        open={true}
+        classes={{
+          root: 'relation-validation-dialog-modal__root-container',
+          container: 'relation-validation-dialog-modal__container',
+          paper: 'relation-validation-dialog-modal__content',
+        }}
+      >
+        <Modal
+          className="relation-validation-dialog-modal"
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
+          <ModalHeader title="Validation Details" />
+          <ModalBody className="relation-validation-dialog-modal__body">
+            <div
+              className={clsx('relation-validation-editor', {
+                backdrop__element: relationValidationState.parserError,
+              })}
+            >
+              <div className="relation-validation-editor__content">
+                <div className="relation-validation-editor__label">Name</div>
+                <input
+                  className="relation-validation-editor__content__name"
+                  spellCheck={false}
+                  disabled={isReadOnly}
+                  value={relationValidation.name}
+                  onChange={changeName}
+                  placeholder="Validation name"
+                />
+              </div>
+              <div className="relation-validation-editor__content">
+                <div className="relation-validation-editor__label">Type</div>
+                <div className="relation-validation-editor__content__select">
+                  <CustomSelectorInput
+                    className="relation-validation-editor__select"
+                    options={
+                      dataQualityRelationValidationState.relationValidationOptions
+                    }
+                    onChange={onValidationTypeChange}
+                    value={selectedValidationType}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
+                    placeholder={'Type of validation to be added'}
+                  />
+                </div>
+              </div>
+              {rowMapFunctionLambdaEditorState && (
+                <div className="relation-validation-editor__content">
+                  <div className="relation-validation-editor__label">
+                    Row map function
+                  </div>
+                  <InlineLambdaEditor
+                    disabled={
+                      dataQualityRelationValidationState.isConvertingValidationLambdaObjects ||
+                      isReadOnly
+                    }
+                    lambdaEditorState={rowMapFunctionLambdaEditorState}
+                    forceBackdrop={forceBackdrop}
+                    expectedType={PrimitiveType.BOOLEAN}
+                    onEditorFocus={onLambdaEditorFocus}
+                    disablePopUp={true}
+                  />
+                </div>
+              )}
+              <div className="relation-validation-editor__content">
+                <div className="relation-validation-editor__label">
+                  Validation Grammar
+                </div>
+                <InlineLambdaEditor
+                  disabled={
+                    dataQualityRelationValidationState.isConvertingValidationLambdaObjects ||
+                    isReadOnly
+                  }
+                  lambdaEditorState={relationValidationState}
+                  forceBackdrop={forceBackdrop}
+                  expectedType={PrimitiveType.BOOLEAN}
+                  onEditorFocus={onLambdaEditorFocus}
+                  disablePopUp={true}
+                  forceExpansion={true}
+                />
+              </div>
+              <div className="relation-validation-editor__content">
+                <div className="relation-validation-editor__label">
+                  Description
+                </div>
+                <input
+                  className="relation-validation-editor__content__name"
+                  spellCheck={false}
+                  disabled={isReadOnly}
+                  value={relationValidation.description}
+                  onChange={changeDescription}
+                  placeholder="Enter the description"
+                />
+              </div>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              onClick={closePlanViewer}
+              text="Close"
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);