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

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@finos/legend-extension-dsl-data-quality",
-    "version": "1.0.60",
+    "version": "2.0.0",
     "description": "Legend extension for Data Quality",
     "keywords": [
         "legend",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-extension-dsl-data-quality",
-  "version": "1.0.60",
+  "version": "2.0.0",
   "description": "Legend extension for Data Quality",
   "keywords": [
     "legend",
@@ -43,13 +43,13 @@
   },
   "dependencies": {
     "@finos/legend-application": "16.0.10",
-    "@finos/legend-application-studio": "28.18.55",
+    "@finos/legend-application-studio": "28.18.57",
     "@finos/legend-art": "7.1.68",
-    "@finos/legend-code-editor": "2.0.16",
-    "@finos/legend-extension-dsl-data-space": "10.4.6",
-    "@finos/legend-graph": "31.10.50",
-    "@finos/legend-lego": "2.0.18",
-    "@finos/legend-query-builder": "4.15.15",
+    "@finos/legend-code-editor": "2.0.18",
+    "@finos/legend-extension-dsl-data-space": "10.4.8",
+    "@finos/legend-graph": "31.10.52",
+    "@finos/legend-lego": "2.0.20",
+    "@finos/legend-query-builder": "4.15.17",
     "@finos/legend-shared": "10.0.61",
     "@finos/legend-storage": "3.0.112",
     "@types/react": "18.3.12",

package/src/components/{DSL_DataQuality_ClassElementDriver.tsx → DSL_DataQuality_ElementDriver.tsx}

@@ -19,9 +19,13 @@ import {
   NewElementDriver,
 } from '@finos/legend-application-studio';
 import {
+  type DataQualityValidationConfiguration,
   DataQualityClassValidationsConfiguration,
+  DataQualityServiceValidationConfiguration,
+  DataQualityRelationValidationConfiguration,
   DataSpaceDataQualityExecutionContext,
   MappingAndRuntimeDataQualityExecutionContext,
+  DataQualityRelationQueryLambda,
 } from '../graph/metamodel/pure/packageableElements/data-quality/DataQualityValidationConfiguration.js';
 import { action, computed, makeObservable, observable } from 'mobx';
 import {
@@ -53,13 +57,20 @@ export type RuntimeOption = {
   value: PackageableRuntime | undefined;
 };
 
-export enum ELEMENT_CREATION_BASIS {
+export enum CLASS_ELEMENT_CREATION_BASIS {
   MAPPING_RUNTIME_BASED = 'Mapping/Runtime',
   DATASPACE_BASED = 'DataSpace',
 }
 
-export class DataQuality_ClassElementDriver extends NewElementDriver<DataQualityClassValidationsConfiguration> {
-  dqElementCreationBasis: ELEMENT_CREATION_BASIS;
+export enum DQ_VALIDATION_ELEMENT_TYPE {
+  CLASS_VALIDATION = 'ClassValidation',
+  SERVICE_VALIDATION = 'ServiceValidation',
+  RELATION_VALIDATION = 'RelationValidation',
+}
+
+export class DataQuality_ElementDriver extends NewElementDriver<DataQualityValidationConfiguration> {
+  dqValidationElementType: DQ_VALIDATION_ELEMENT_TYPE;
+  dqClassElementCreationBasis: CLASS_ELEMENT_CREATION_BASIS;
   dataSpaceSelected: PackageableElementOption<DataSpace> | undefined;
   mappingSelected: PackageableElementOption<Mapping> | undefined;
   runtimeSelected: RuntimeOption | undefined;
@@ -71,14 +82,18 @@ export class DataQuality_ClassElementDriver extends NewElementDriver<DataQuality
       dataSpaceSelected: observable,
       mappingSelected: observable,
       runtimeSelected: observable,
-      dqElementCreationBasis: observable,
+      dqValidationElementType: observable,
+      dqClassElementCreationBasis: observable,
       setDataSpaceSelected: action,
       setMappingSelected: action,
       setRuntimeSelected: action,
-      setDqElementCreationBasis: action,
+      setDqClassElementCreationBasis: action,
+      setDqValidationElementType: action,
       runtimeOptions: computed,
     });
-    this.dqElementCreationBasis = ELEMENT_CREATION_BASIS.DATASPACE_BASED;
+    this.dqValidationElementType = DQ_VALIDATION_ELEMENT_TYPE.CLASS_VALIDATION;
+    this.dqClassElementCreationBasis =
+      CLASS_ELEMENT_CREATION_BASIS.DATASPACE_BASED;
     this.dataSpaceSelected = getNullableFirstEntry(this.dataSpaceOptions);
     this.mappingSelected = getNullableFirstEntry(this.mappingOptions);
     this.runtimeSelected = getNullableFirstEntry(this.runtimeOptions);
@@ -127,27 +142,64 @@ export class DataQuality_ClassElementDriver extends NewElementDriver<DataQuality
     this.runtimeSelected = runtimeSelected;
   }
 
-  setDqElementCreationBasis(
-    dqElementCreationBasis: ELEMENT_CREATION_BASIS,
+  setDqClassElementCreationBasis(
+    dqClassElementCreationBasis: CLASS_ELEMENT_CREATION_BASIS,
+  ): void {
+    this.dqClassElementCreationBasis = dqClassElementCreationBasis;
+  }
+
+  setDqValidationElementType(
+    dqValidationElementType: DQ_VALIDATION_ELEMENT_TYPE,
   ): void {
-    this.dqElementCreationBasis = dqElementCreationBasis;
+    this.dqValidationElementType = dqValidationElementType;
   }
 
   get isValid(): boolean {
     if (
-      this.dqElementCreationBasis === ELEMENT_CREATION_BASIS.DATASPACE_BASED
+      this.dqValidationElementType ===
+        DQ_VALIDATION_ELEMENT_TYPE.RELATION_VALIDATION ||
+      this.dqValidationElementType ===
+        DQ_VALIDATION_ELEMENT_TYPE.SERVICE_VALIDATION
+    ) {
+      return true;
+    }
+    if (
+      this.dqClassElementCreationBasis ===
+      CLASS_ELEMENT_CREATION_BASIS.DATASPACE_BASED
     ) {
       return Boolean(this.dataSpaceSelected);
     }
     return Boolean(this.mappingSelected && this.runtimeSelected);
   }
 
-  createElement(name: string): DataQualityClassValidationsConfiguration {
+  createRelationValidationElement(
+    name: string,
+  ): DataQualityValidationConfiguration {
+    const relationValidationConfiguration =
+      new DataQualityRelationValidationConfiguration(name);
+    relationValidationConfiguration.query =
+      new DataQualityRelationQueryLambda();
+    relationValidationConfiguration.query.body =
+      this.editorStore.graphManagerState.graphManager.createDefaultBasicRawLambda().body;
+    this.editorStore.graphManagerState.graphManager.createDefaultBasicRawLambda();
+    return relationValidationConfiguration;
+  }
+
+  createServiceValidationElement(
+    name: string,
+  ): DataQualityValidationConfiguration {
+    return new DataQualityServiceValidationConfiguration(name);
+  }
+
+  createClassValidationElement(
+    name: string,
+  ): DataQualityValidationConfiguration {
     let usableClasses: Class[] = [];
-    const dataQualityConstraintsConfiguration =
+    const dataQualityClassConstraintsConfiguration =
       new DataQualityClassValidationsConfiguration(name);
     if (
-      this.dqElementCreationBasis === ELEMENT_CREATION_BASIS.DATASPACE_BASED
+      this.dqClassElementCreationBasis ===
+      CLASS_ELEMENT_CREATION_BASIS.DATASPACE_BASED
     ) {
       const dataSpaceToSet = PackageableElementExplicitReference.create(
         this.dataSpaceSelected!.value,
@@ -157,8 +209,9 @@ export class DataQuality_ClassElementDriver extends NewElementDriver<DataQuality
       dataSpaceExecutionContext.context =
         dataSpaceToSet.value.defaultExecutionContext.name;
       dataSpaceExecutionContext.dataSpace = dataSpaceToSet;
-      dataQualityConstraintsConfiguration.context = dataSpaceExecutionContext;
-      dataQualityConstraintsConfiguration.dataQualityRootGraphFetchTree =
+      dataQualityClassConstraintsConfiguration.context =
+        dataSpaceExecutionContext;
+      dataQualityClassConstraintsConfiguration.dataQualityRootGraphFetchTree =
         undefined;
       usableClasses = resolveUsableDataSpaceClasses(
         dataSpaceToSet.value,
@@ -177,7 +230,7 @@ export class DataQuality_ClassElementDriver extends NewElementDriver<DataQuality
           new MappingAndRuntimeDataQualityExecutionContext();
         mappingAndRuntimeExecutionContext.mapping = mapping;
         mappingAndRuntimeExecutionContext.runtime = runtimeValue;
-        dataQualityConstraintsConfiguration.context =
+        dataQualityClassConstraintsConfiguration.context =
           mappingAndRuntimeExecutionContext;
         usableClasses = getMappingCompatibleClasses(
           mapping.value,
@@ -190,8 +243,24 @@ export class DataQuality_ClassElementDriver extends NewElementDriver<DataQuality
         'Must have at least one usable class with given mapping',
       );
     }
-    dataQualityConstraintsConfiguration.dataQualityRootGraphFetchTree =
+    dataQualityClassConstraintsConfiguration.dataQualityRootGraphFetchTree =
       buildDefaultDataQualityRootGraphFetchTree(usableClasses[0]!);
-    return dataQualityConstraintsConfiguration;
+    return dataQualityClassConstraintsConfiguration;
+  }
+
+  createElement(name: string): DataQualityValidationConfiguration {
+    switch (this.dqValidationElementType) {
+      case DQ_VALIDATION_ELEMENT_TYPE.RELATION_VALIDATION:
+        return this.createRelationValidationElement(name);
+      case DQ_VALIDATION_ELEMENT_TYPE.SERVICE_VALIDATION:
+        return this.createServiceValidationElement(name);
+      case DQ_VALIDATION_ELEMENT_TYPE.CLASS_VALIDATION:
+        return this.createClassValidationElement(name);
+
+      default:
+        throw new UnsupportedOperationError(
+          `Can't create data quality validation configuration of type '${this.dqValidationElementType}'`,
+        );
+    }
   }
 }

package/src/components/DSL_DataQuality_LegendStudioApplicationPlugin.tsx

@@ -17,44 +17,41 @@
 import packageJson from '../../package.json';
 import {
   type DSL_LegendStudioApplicationPlugin_Extension,
+  type EditorStore,
   type ElementClassifier,
   type ElementEditorRenderer,
+  type ElementEditorState,
   type ElementEditorStateCreator,
   type ElementIconGetter,
   type ElementTypeLabelGetter,
+  type NewElementDriver,
   type NewElementDriverCreator,
   type NewElementDriverEditorRenderer,
   type NewElementFromStateCreator,
-  type ElementEditorState,
-  type NewElementDriver,
-  type EditorStore,
   type NewElementState,
   LegendStudioApplicationPlugin,
   PACKAGEABLE_ELEMENT_GROUP_BY_CATEGORY,
 } from '@finos/legend-application-studio';
 import type { PackageableElement } from '@finos/legend-graph';
+import { type ReactNode } from 'react';
 import {
   DataQualityClassValidationsConfiguration,
   DataQualityServiceValidationConfiguration,
+  DataQualityRelationValidationConfiguration,
+  DataQualityValidationConfiguration,
 } from '../graph/metamodel/pure/packageableElements/data-quality/DataQualityValidationConfiguration.js';
 import { EyeIcon } from '@finos/legend-art';
 import { DataQualityClassValidationEditor } from './DataQualityClassValidationEditor.js';
-import { DataQuality_ClassElementDriver } from './DSL_DataQuality_ClassElementDriver.js';
-import { NewDataQualityServiceValidationElementEditor } from './DSL_NewDataQualityServiceValidationElement.js';
-import { DataQuality_ServiceElementDriver } from './DSL_DataQuality_ServiceElementDriver.js';
+import { DataQuality_ElementDriver } from './DSL_DataQuality_ElementDriver.js';
 import { DataQualityServiceValidationEditor } from './DataQualityServiceValidationEditor.js';
 import { DataQualityClassValidationState } from './states/DataQualityClassValidationState.js';
-import { NewDataQualityClassValidationElementEditor } from './DSL_NewDataQualityClassValidationElement.js';
-import { type ReactNode } from 'react';
+import { NewDataQualityValidationElementEditor } from './DSL_NewDataQualityValidationElement.js';
 import { DataQualityServiceValidationState } from './states/DataQualityServiceValidationState.js';
+import { DataQualityRelationValidationConfigurationState } from './states/DataQualityRelationValidationConfigurationState.js';
+import { DataQualityRelationValidationConfigurationEditor } from './DataQualityRelationValidationConfigurationEditor.js';
 
-const DATA_QUALITY_ELEMENT_TYPE = 'DATAQUALITY';
-const DATA_QUALITY_SERVICE_VALIDATION_ELEMENT_TYPE =
-  'DATAQUALITYSERVICEVALIDATION';
-
-const DATA_QUALITY_ELEMENT_TYPE_LABEL = 'Data Quality Class Validation';
-const DATA_QUALITY_SERVICE_VALIDATION_TYPE_LABEL =
-  'Data Quality Service Validation';
+const DATA_QUALITY_ELEMENT_TYPE = 'DATAQUALITYVALIDATION';
+const DATA_QUALITY_ELEMENT_TYPE_LABEL = 'Data Quality Validation';
 
 export class DSL_DataQuality_LegendStudioApplicationPlugin
   extends LegendStudioApplicationPlugin
@@ -65,17 +62,13 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
   }
 
   getExtraSupportedElementTypes(): string[] {
-    return [
-      DATA_QUALITY_ELEMENT_TYPE,
-      DATA_QUALITY_SERVICE_VALIDATION_ELEMENT_TYPE,
-    ];
+    return [DATA_QUALITY_ELEMENT_TYPE];
   }
 
   getExtraSupportedElementTypesWithCategory(): Map<string, string[]> {
     const elementTypeswithCategory = new Map<string, string[]>();
     elementTypeswithCategory.set(PACKAGEABLE_ELEMENT_GROUP_BY_CATEGORY.OTHER, [
       DATA_QUALITY_ELEMENT_TYPE,
-      // DATA_QUALITY_SERVICE_VALIDATION_ELEMENT_TYPE,
     ]);
     return elementTypeswithCategory;
   }
@@ -83,12 +76,9 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
   getExtraElementClassifiers(): ElementClassifier[] {
     return [
       (element: PackageableElement): string | undefined => {
-        if (element instanceof DataQualityClassValidationsConfiguration) {
+        if (element instanceof DataQualityValidationConfiguration) {
           return DATA_QUALITY_ELEMENT_TYPE;
         }
-        if (element instanceof DataQualityServiceValidationConfiguration) {
-          return DATA_QUALITY_SERVICE_VALIDATION_ELEMENT_TYPE;
-        }
         return undefined;
       },
     ];
@@ -104,13 +94,6 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
             </div>
           );
         }
-        if (type === DATA_QUALITY_SERVICE_VALIDATION_ELEMENT_TYPE) {
-          return (
-            <div className="icon icon--dataQuality">
-              <EyeIcon />
-            </div>
-          );
-        }
         return undefined;
       },
     ];
@@ -122,9 +105,6 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
         if (type === DATA_QUALITY_ELEMENT_TYPE) {
           return DATA_QUALITY_ELEMENT_TYPE_LABEL;
         }
-        if (type === DATA_QUALITY_SERVICE_VALIDATION_ELEMENT_TYPE) {
-          return DATA_QUALITY_SERVICE_VALIDATION_TYPE_LABEL;
-        }
         return undefined;
       },
     ];
@@ -139,12 +119,7 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
       ): PackageableElement | undefined => {
         if (type === DATA_QUALITY_ELEMENT_TYPE) {
           return state
-            .getNewElementDriver(DataQuality_ClassElementDriver)
-            .createElement(name);
-        }
-        if (type === DATA_QUALITY_SERVICE_VALIDATION_ELEMENT_TYPE) {
-          return state
-            .getNewElementDriver(DataQuality_ServiceElementDriver)
+            .getNewElementDriver(DataQuality_ElementDriver)
             .createElement(name);
         }
         return undefined;
@@ -165,6 +140,16 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
             <DataQualityClassValidationEditor key={elementEditorState.uuid} />
           );
         }
+        if (
+          elementEditorState instanceof
+          DataQualityRelationValidationConfigurationState
+        ) {
+          return (
+            <DataQualityRelationValidationConfigurationEditor
+              key={elementEditorState.uuid}
+            />
+          );
+        }
         return undefined;
       },
     ];
@@ -182,6 +167,12 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
         if (element instanceof DataQualityServiceValidationConfiguration) {
           return new DataQualityServiceValidationState(editorStore, element);
         }
+        if (element instanceof DataQualityRelationValidationConfiguration) {
+          return new DataQualityRelationValidationConfigurationState(
+            editorStore,
+            element,
+          );
+        }
         return undefined;
       },
     ];
@@ -191,10 +182,7 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
     return [
       (type: string): ReactNode | undefined => {
         if (type === DATA_QUALITY_ELEMENT_TYPE) {
-          return <NewDataQualityClassValidationElementEditor />;
-        }
-        if (type === DATA_QUALITY_SERVICE_VALIDATION_ELEMENT_TYPE) {
-          return <NewDataQualityServiceValidationElementEditor />;
+          return <NewDataQualityValidationElementEditor />;
         }
         return undefined;
       },
@@ -208,10 +196,7 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
         type: string,
       ): NewElementDriver<PackageableElement> | undefined => {
         if (type === DATA_QUALITY_ELEMENT_TYPE) {
-          return new DataQuality_ClassElementDriver(editorStore);
-        }
-        if (type === DATA_QUALITY_SERVICE_VALIDATION_ELEMENT_TYPE) {
-          return new DataQuality_ServiceElementDriver(editorStore);
+          return new DataQuality_ElementDriver(editorStore);
         }
         return undefined;
       },

package/src/components/DSL_NewDataQualityValidationElement.tsx

@@ -0,0 +1,208 @@
+/**
+ * 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 { useEditorStore } from '@finos/legend-application-studio';
+import { BaseRadioGroup, CustomSelectorInput } from '@finos/legend-art';
+import type { Mapping } from '@finos/legend-graph';
+import {
+  type PackageableElementOption,
+  buildElementOption,
+} from '@finos/legend-lego/graph-editor';
+import {
+  type RuntimeOption,
+  DataQuality_ElementDriver,
+  CLASS_ELEMENT_CREATION_BASIS,
+  DQ_VALIDATION_ELEMENT_TYPE,
+} from './DSL_DataQuality_ElementDriver.js';
+import type { DataSpace } from '@finos/legend-extension-dsl-data-space/graph';
+import { prettyCONSTName } from '@finos/legend-shared';
+
+export const NewDataQualityValidationElementEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
+
+  const dataQualityValidationDriver =
+    editorStore.newElementState.getNewElementDriver(DataQuality_ElementDriver);
+  const dqValidationElementType =
+    dataQualityValidationDriver.dqValidationElementType;
+  const dqElementCreationBasis =
+    dataQualityValidationDriver.dqClassElementCreationBasis;
+  const dataSpacesOptions = dataQualityValidationDriver.dataSpaceOptions;
+  const mappingOptions = dataQualityValidationDriver.mappingOptions;
+  const runtimeOptions =
+    dataQualityValidationDriver.compatibleMappingRuntimes.map(
+      buildElementOption,
+    );
+  const dqValidationElementTypeOptions = Object.values(
+    DQ_VALIDATION_ELEMENT_TYPE,
+  )
+    .filter(
+      (validation) =>
+        validation !== DQ_VALIDATION_ELEMENT_TYPE.SERVICE_VALIDATION,
+    )
+    .map((validationType) => ({
+      label: prettyCONSTName(validationType),
+      value: validationType,
+    }));
+
+  const onDataSpaceChange = (
+    val: PackageableElementOption<DataSpace> | null,
+  ): void => {
+    if (val) {
+      dataQualityValidationDriver.setDataSpaceSelected(val);
+    }
+  };
+
+  const onMappingChange = (
+    val: PackageableElementOption<Mapping> | null,
+  ): void => {
+    if (val) {
+      dataQualityValidationDriver.setMappingSelected(val);
+    } else {
+      dataQualityValidationDriver.setMappingSelected(undefined);
+    }
+    dataQualityValidationDriver.setRuntimeSelected(
+      dataQualityValidationDriver.runtimeOptions.length > 0
+        ? dataQualityValidationDriver.runtimeOptions[0]
+        : undefined,
+    );
+  };
+
+  const onRuntimeChange = (val: RuntimeOption | null): void => {
+    if (val) {
+      dataQualityValidationDriver.setRuntimeSelected(val);
+    }
+  };
+
+  const handleDQClassElementCreationBasisChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    const classValidationElementCreationBasis = (
+      event.target as HTMLInputElement
+    ).value as CLASS_ELEMENT_CREATION_BASIS;
+    dataQualityValidationDriver.setDqClassElementCreationBasis(
+      classValidationElementCreationBasis,
+    );
+  };
+
+  const handleDQValidationElementTypeChange = (val: {
+    label: string;
+    value: DQ_VALIDATION_ELEMENT_TYPE;
+  }): void => {
+    dataQualityValidationDriver.setDqValidationElementType(val.value);
+  };
+
+  const selectedDqValidationElementType = {
+    label: prettyCONSTName(dataQualityValidationDriver.dqValidationElementType),
+    value: dataQualityValidationDriver.dqValidationElementType,
+  };
+
+  return (
+    <div>
+      <div className="panel__content__form__section__header__label">
+        Validation Type
+      </div>
+      <div className="panel__content__form__section__header__prompt">
+        Type of Data Quality Validation to be configured
+      </div>
+      <CustomSelectorInput
+        options={dqValidationElementTypeOptions}
+        onChange={handleDQValidationElementTypeChange}
+        value={selectedDqValidationElementType}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
+        placeholder="Choose a data quality validation type"
+        isClearable={false}
+        className={'dq-validation-element-type'}
+      />
+      {dqValidationElementType ===
+        DQ_VALIDATION_ELEMENT_TYPE.CLASS_VALIDATION && (
+        <div>
+          <div className="element-creation-basis">
+            <div className="panel__content__form__section__header__label">
+              Basis of Data Quality Class Validation
+            </div>
+            <BaseRadioGroup
+              value={dqElementCreationBasis}
+              onChange={handleDQClassElementCreationBasisChange}
+              row={false}
+              options={[
+                CLASS_ELEMENT_CREATION_BASIS.DATASPACE_BASED,
+                CLASS_ELEMENT_CREATION_BASIS.MAPPING_RUNTIME_BASED,
+              ]}
+              size={2}
+            />
+          </div>
+          {dqElementCreationBasis ===
+          CLASS_ELEMENT_CREATION_BASIS.DATASPACE_BASED ? (
+            <div>
+              <div className="panel__content__form__section__header__label">
+                DataSpace
+              </div>
+              <div className="data-quality-explorer__new-element-modal__driver">
+                <CustomSelectorInput
+                  className="data-quality-explorer__new-element-modal__driver__dropdown"
+                  options={dataSpacesOptions}
+                  onChange={onDataSpaceChange}
+                  value={dataQualityValidationDriver.dataSpaceSelected}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
+                />
+              </div>
+            </div>
+          ) : (
+            <div>
+              <div className="panel__content__form__section__header__label">
+                Mapping
+              </div>
+              <div className="data-quality-explorer__new-element-modal__driver">
+                <CustomSelectorInput
+                  className="data-quality-explorer__new-element-modal__driver__dropdown"
+                  options={mappingOptions}
+                  onChange={onMappingChange}
+                  value={dataQualityValidationDriver.mappingSelected}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
+                />
+              </div>
+              <div className="panel__content__form__section__header__label">
+                Runtime
+              </div>
+              <div className="data-quality-explorer__new-element-modal__driver">
+                <CustomSelectorInput
+                  className="data-quality-explorer__new-element-modal__driver__dropdown"
+                  options={runtimeOptions}
+                  onChange={onRuntimeChange}
+                  value={dataQualityValidationDriver.runtimeSelected}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});