@finos/legend-extension-dsl-data-quality 2.1.34 → 2.1.35

package/src/components/DataQualityRelationGridResult.tsx

@@ -68,7 +68,7 @@ export const getRowDataFromExecutionResult = (
   return rowData;
 };
 
-const DataQualityResultCellRenderer = observer(
+export const DataQualityResultCellRenderer = observer(
   (params: IRelationValidationRendererParamsWithGridType) => {
     const cellValue = params.value as DataQualityRelationResultCellDataType;
 

package/src/components/DataQualityRelationLambdaGUIDataTypeHandlers.tsx

@@ -14,11 +14,8 @@
  * limitations under the License.
  */
 
-import { CustomSelectorInput, BaseMenuItem, Checkbox } from '@finos/legend-art';
-import { type ReactNode, type MouseEvent } from 'react';
 import { DataQualityCustomSelector } from './DataQualityCustomSelector.js';
 import type { ColumnOption } from './states/LambdaEditorWithGUIState.js';
-import type { ColSpecArray, ColSpecArrayInstance } from '@finos/legend-graph';
 
 type Option = { value: string; label: string };
 
@@ -37,15 +34,6 @@ interface FunctionSelectProps {
   options?: Option[];
 }
 
-interface RenderColumnsProps {
-  columns: ColSpecArrayInstance;
-  onChange: (value: string[]) => void;
-  options: ColumnOption[];
-  placeholder?: string;
-  darkMode: boolean;
-  disabled: boolean;
-}
-
 export const RenderColumn = (props: RenderColumnProps) => {
   const { column, onChange, options, ...rest } = props;
 
@@ -56,81 +44,11 @@ export const RenderColumn = (props: RenderColumnProps) => {
       placeholder="Select column"
       renderLabel={({ label }) => label}
       options={options}
-      onChange={onChange}
-    />
-  );
-};
-
-export const RenderColumns = (props: RenderColumnsProps) => {
-  const {
-    columns = [],
-    onChange,
-    options = [],
-    placeholder,
-    darkMode,
-    disabled,
-    ...rest
-  } = props;
-
-  const CustomOption = ({
-    children,
-    ...optionProps
-  }: {
-    children: ReactNode;
-    data: Option;
-    isSelected: boolean;
-    isFocused: boolean;
-    selectOption: (option: Option) => void;
-  }) => {
-    const { data, isSelected, selectOption } = optionProps;
-
-    const handleClick = (event: unknown) => {
-      (event as MouseEvent).preventDefault();
-      selectOption(data);
-    };
-
-    return (
-      <BaseMenuItem
-        onClick={handleClick}
-        className="data-quality-validation-gui-editor__column-list-item"
-        dense={true}
-      >
-        <Checkbox size="small" checked={isSelected} onClick={handleClick} />
-        <div>{children}</div>
-      </BaseMenuItem>
-    );
-  };
-
-  return (
-    <CustomSelectorInput
-      {...rest}
-      value={options.filter(({ value: v }) =>
-        (columns.values as ColSpecArray[])[0]?.colSpecs.find(
-          (col) => col.name === v,
-        ),
-      )}
-      placeholder={placeholder ?? 'Select columns'}
-      isMulti={true}
-      options={options}
-      hideSelectedOptions={false}
-      closeMenuOnSelect={false}
-      components={{
-        Option: CustomOption,
-        MultiValueContainer: ({ children }) => {
-          return (
-            <div className="data-quality-validation-gui-editor__column-list-item">
-              {children}
-            </div>
-          );
-        },
-        MultiValueLabel: ({ children }) => children,
-        MultiValueRemove: () => null,
+      onChange={(val) => {
+        if (val !== undefined) {
+          onChange(val);
+        }
       }}
-      onChange={(values: Option[]) =>
-        onChange(values.map((change) => change.value))
-      }
-      darkMode={darkMode}
-      disabled={disabled}
     />
   );
 };
@@ -144,7 +62,11 @@ export const FunctionSelectionHandler = (props: FunctionSelectProps) => {
       value={options.find((opt) => opt.value === value)}
       options={options}
       renderLabel={({ label }) => label}
-      onChange={(change) => onChange(change.value)}
+      onChange={(change) => {
+        if (change !== undefined) {
+          onChange(change.value);
+        }
+      }}
       placeholder="Select operation"
     />
   );

package/src/components/DataQualityRelationLambdaGUIValidationEditor.tsx

@@ -15,8 +15,9 @@
  */
 
 import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
 import type { DataQualityRelationValidationState } from './states/DataQualityRelationValidationState.js';
-import { RenderColumns } from './DataQualityRelationLambdaGUIDataTypeHandlers.js';
+import { DataQualityMultiCustomSelector } from './DataQualityCustomSelector.js';
 import {
   ColSpec,
   ColSpecArray,
@@ -48,6 +49,15 @@ export const DataQualityRelationLambdaGUIValidationEditor = observer(
     }
 
     const { assertion, otherFunction } = dataQualityValidationLambdaFormState;
+    const selectedColumns = useMemo(
+      () =>
+        columnOptions.filter(({ value }) =>
+          assertion.parameters.columns.values[0]?.colSpecs.some(
+            (col) => col.name === value,
+          ),
+        ),
+      [assertion.parameters.columns.values, columnOptions],
+    );
 
     return (
       <div
@@ -82,11 +92,12 @@ export const DataQualityRelationLambdaGUIValidationEditor = observer(
           <div className="data-quality-uml-element-editor__lambda__label data-quality-validation-gui-editor__function--assert-helper--description">
             Columns to persist
           </div>
-          <RenderColumns
-            columns={assertion.parameters.columns}
-            onChange={(values: string[]) => {
+          <DataQualityMultiCustomSelector
+            value={selectedColumns}
+            options={columnOptions}
+            onChange={(values) => {
               const colSpecArray = new ColSpecArray();
-              colSpecArray.colSpecs = values.map((value) => {
+              colSpecArray.colSpecs = values.map(({ value }) => {
                 const colSpecValue = new ColSpec();
                 colSpecValue.name = value;
                 return colSpecValue;
@@ -100,7 +111,6 @@ export const DataQualityRelationLambdaGUIValidationEditor = observer(
               assertion.parameters.columns = colSpecArrayInstance;
               validationState.debouncedHandleValidationFormChange();
             }}
-            options={columnOptions}
             placeholder="Select Columns"
             disabled={disabled}
             darkMode={darkMode}