@truedat/qx 8.5.1 → 8.5.2

package/src/components/qualityControls/ControlPropertiesView.js

@@ -8,20 +8,26 @@ import DataViewSummary from "../dataViews/DataViewSummary";
 import { useDataViewFetch } from "@truedat/qx/hooks/useDataViews";
 import { getColorById } from "../dataViews/queryableFunctions";
 
+const ratioViewProps = {
+  resourceKey: "resource",
+  resourceLabelId: "quality_control.ratio.resource",
+  resourceEmptyLabelId: "quality_control.ratio.resource.empty",
+  validationLabelId: "quality_control.ratio.validation",
+  validationEmptyLabelId: "quality_control.ratio.validation.empty",
+};
+
+const countViewProps = {
+  resourceKey: "errors_resource",
+  resourceLabelId: "quality_control.count.errors_resource",
+  resourceEmptyLabelId: "quality_control.count.errors_resource.empty",
+  validationLabelId: "quality_control.count.validation",
+  validationEmptyLabelId: "quality_control.count.validation.empty",
+};
+
 export default function ControlPropertiesView({ qualityControl }) {
   const { control_properties, control_mode } = qualityControl;
-  const controlPropertiesForMode = {
-    percentage: (
-      <ControlPropertiesRatio controlProperties={control_properties} />
-    ),
-    deviation: (
-      <ControlPropertiesRatio controlProperties={control_properties} />
-    ),
-    count: <ControlPropertiesCount controlProperties={control_properties} />,
-    error_count: (
-      <ControlPropertiesRatio controlProperties={control_properties} />
-    ),
-  };
+  const viewProps =
+    control_mode === "error_count" ? countViewProps : ratioViewProps;
 
   return (
     <>
@@ -33,7 +39,10 @@ export default function ControlPropertiesView({ qualityControl }) {
       </Header>
       <Segment>
         {control_properties ? (
-          controlPropertiesForMode[control_mode]
+          <ResourceWithValidationView
+            controlProperties={control_properties}
+            {...viewProps}
+          />
         ) : (
           <FormattedMessage id="quality_control.control_properties.empty" />
         )}
@@ -42,32 +51,40 @@ export default function ControlPropertiesView({ qualityControl }) {
   );
 }
 
-const ControlPropertiesRatio = ({ controlProperties }) => {
-  const isDataViewResource = controlProperties.resource?.type === "data_view";
-  const parentResource = { id: 0, embedded: controlProperties.resource?.embedded };
-  const dataViewId = isDataViewResource ? controlProperties.resource?.id : null;
+const ResourceWithValidationView = ({
+  controlProperties,
+  resourceKey,
+  resourceLabelId,
+  resourceEmptyLabelId,
+  validationLabelId,
+  validationEmptyLabelId,
+}) => {
+  const resource = _.prop(resourceKey)(controlProperties);
+  const parentResource = { id: 0, embedded: resource?.embedded };
+  const isDataViewResource = resource?.type === "data_view";
+  const dataViewId = isDataViewResource ? resource?.id : null;
   const { dataView, loading: dataViewLoading } = useDataViewFetch(dataViewId);
 
   return (
     <List>
       <List.Item>
         <List.Header>
-          <FormattedMessage id="quality_control.ratio.resource" />
+          <FormattedMessage id={resourceLabelId} />
         </List.Header>
         <List.Content>
-          {controlProperties.resource ? (
+          {resource ? (
             <List.Description>
               <Label horizontal>
                 <FormattedMessage
-                  id={`queryables.resource.selector.${controlProperties.resource?.type}`}
+                  id={`queryables.resource.selector.${resource?.type}`}
                 />
               </Label>
               <Label color={getColorById(parentResource?.id)}>
-                {_.prop("resource.embedded.name")(controlProperties)}
+                {_.prop(`${resourceKey}.embedded.name`)(controlProperties)}
               </Label>
             </List.Description>
           ) : (
-            <FormattedMessage id="quality_control.ratio.resource.empty" />
+            <FormattedMessage id={resourceEmptyLabelId} />
           )}
         </List.Content>
       </List.Item>
@@ -87,7 +104,7 @@ const ControlPropertiesRatio = ({ controlProperties }) => {
       )}
       <List.Item>
         <List.Header>
-          <FormattedMessage id="quality_control.ratio.validation" />
+          <FormattedMessage id={validationLabelId} />
         </List.Header>
         <List.Content>
           {controlProperties.validation ? (
@@ -98,7 +115,7 @@ const ControlPropertiesRatio = ({ controlProperties }) => {
               />
             </List.Description>
           ) : (
-            <FormattedMessage id="quality_control.ratio.validation.empty" />
+            <FormattedMessage id={validationEmptyLabelId} />
           )}
         </List.Content>
       </List.Item>
@@ -106,56 +123,13 @@ const ControlPropertiesRatio = ({ controlProperties }) => {
   );
 };
 
-const ControlPropertiesCount = ({ controlProperties }) => {
-  const parentResource = { id: 0, embedded: controlProperties.errors_resource?.embedded };
-  const isDataViewResource =
-    controlProperties.errors_resource?.type === "data_view";
-  const dataViewId = isDataViewResource
-    ? controlProperties.errors_resource?.id
-    : null;
-  const { dataView, loading: dataViewLoading } = useDataViewFetch(dataViewId);
-
-  return (
-    <List>
-      <List.Item>
-        <List.Header>
-          <FormattedMessage id="quality_control.count.errors_resource" />
-        </List.Header>
-        <List.Content>
-          {controlProperties.errors_resource ? (
-            <List.Description>
-              <Label horizontal>
-                <FormattedMessage
-                  id={`queryables.resource.selector.${controlProperties.errors_resource?.type}`}
-                />
-              </Label>
-              <Label
-                color={getColorById(parentResource?.id)}
-              >
-                {_.prop("errors_resource.embedded.name")(controlProperties)}
-              </Label>
-            </List.Description>
-          ) : (
-            <FormattedMessage id="quality_control.count.errors_resource.empty" />
-          )}
-        </List.Content>
-      </List.Item>
-      {isDataViewResource && (
-        <List.Item>
-          <List.Header style={{ marginBottom: 8 }}>
-            <FormattedMessage id="quality_control.data_view_summary" />
-          </List.Header>
-          <List.Content>
-            {dataViewLoading ? (
-              <Loading />
-            ) : dataView ? (
-              <DataViewSummary dataView={dataView} />
-            ) : null}
-          </List.Content>
-        </List.Item>
-      )}
-    </List>
-  );
+ResourceWithValidationView.propTypes = {
+  controlProperties: PropTypes.object,
+  resourceKey: PropTypes.oneOf(["resource", "errors_resource"]).isRequired,
+  resourceLabelId: PropTypes.string.isRequired,
+  resourceEmptyLabelId: PropTypes.string.isRequired,
+  validationLabelId: PropTypes.string.isRequired,
+  validationEmptyLabelId: PropTypes.string.isRequired,
 };
 
 ControlPropertiesView.propTypes = {

package/src/components/qualityControls/InformationForm.js

@@ -3,200 +3,201 @@ import { lazy, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { Divider, Form, Segment } from "semantic-ui-react";
 import { useFormContext, Controller } from "react-hook-form";
-import {
-    DomainSelector,
-    FieldLabel,
-} from "@truedat/core/components";
+import { DomainSelector, FieldLabel } from "@truedat/core/components";
 import ScoreCriteria, {
-    defaultForMode as defaultScoreCriteriaForMode,
+  defaultForMode as defaultScoreCriteriaForMode,
 } from "./ScoreCriteria";
-import {
-    defaultForMode as defaultControlPropertiesForMode,
-} from "./ControlProperties";
+import { defaultForMode as defaultControlPropertiesForMode } from "./ControlProperties";
 
 const SelectableDynamicForm = lazy(
-    () => import("@truedat/df/components/SelectableDynamicForm")
+  () => import("@truedat/df/components/SelectableDynamicForm"),
 );
 
 const InformationForm = ({
-    isModification,
-    setStepInformation,
-    stepInformation,
-    setValidDfContent,
+  isModification,
+  setStepInformation,
+  stepInformation,
+  setValidDfContent,
 }) => {
-    const { formatMessage } = useIntl();
-    const { control, watch, setValue } = useFormContext();
-    const fieldNames = [
-        "active",
-        "domain_ids",
-        "name",
-        "df_type",
-        "control_mode",
-        "score_criteria",
-    ];
+  const { formatMessage } = useIntl();
+  const { control, watch, setValue } = useFormContext();
+  const fieldNames = [
+    "active",
+    "domain_ids",
+    "name",
+    "df_type",
+    "control_mode",
+    "score_criteria",
+  ];
 
-    const formData = watch();
-    const { dynamic_content: dfContent, domain_ids: domainIds } = formData;
+  const formData = watch();
+  const { dynamic_content: dfContent, domain_ids: domainIds } = formData;
 
-    const setDfContent = ({ content, valid }) => {
-        setValue("dynamic_content", content, {
-            shouldValidate: true,
-            shouldDirty: true,
-        });
+  const setDfContent = ({ content, valid }) => {
+    setValue("dynamic_content", content, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
 
-        setValidDfContent(_.isEmpty(valid));
-    };
+    setValidDfContent(_.isEmpty(valid));
+  };
 
-    const controlModeOptions = _.map((v) => ({
-        key: v,
-        value: v,
-        text: formatMessage({ id: `quality_control.control_mode.${v}` }),
-    }))(["percentage", "deviation", "error_count", "count"]);
+  const controlModeOptions = _.map((v) => ({
+    key: v,
+    value: v,
+    text: formatMessage({ id: `quality_control.control_mode.${v}` }),
+  }))(["percentage", "deviation", "error_count"]);
 
-    useEffect(() => {
-        if (!_.isEqual(stepInformation?.fieldNames, fieldNames))
-            setStepInformation(0, { ...stepInformation, fieldNames });
-    }, [stepInformation, fieldNames]);
+  useEffect(() => {
+    if (!_.isEqual(stepInformation?.fieldNames, fieldNames))
+      setStepInformation(0, { ...stepInformation, fieldNames });
+  }, [stepInformation, fieldNames]);
 
-    return (
-        <>
-            <Segment>
-                <Controller
-                    control={control}
-                    name="active"
-                    render={({ field: { onChange, value } }) => (
-                        <Form.Radio
-                            checked={value}
-                            disabled={isModification}
-                            name="active"
-                            label={formatMessage({
-                                id: "quality_control.form.active",
-                            })}
-                            onChange={(_e, { checked }) => onChange(checked)}
-                            toggle
-                        />
-                    )}
-                />
-                <Controller
-                    control={control}
-                    name="domain_ids"
-                    rules={{
-                        required: formatMessage({
-                            id: "form.validation.empty_required",
-                        }),
-                    }}
-                    render={({
-                        field: { onBlur, onChange, value },
-                        fieldState: { error },
-                    }) => (
-                        <FieldLabel
-                            label={formatMessage({
-                                id: "quality_control.form.domain_ids",
-                            })}
-                            required
-                            error={error?.message}
-                        >
-                            <DomainSelector
-                                action="createQualityControls"
-                                value={value}
-                                error={!!error}
-                                multiple
-                                onBlur={onBlur}
-                                disabled={isModification}
-                                onChange={(_e, { value }) => onChange(value)}
-                                labels
-                            />
-                        </FieldLabel>
-                    )}
-                />
-                <Controller
-                    control={control}
-                    name="name"
-                    rules={{
-                        required: formatMessage({ id: "form.validation.empty_required" }),
-                    }}
-                    render={({
-                        field: { onBlur, onChange, value },
-                        fieldState: { error },
-                    }) => (
-                        <FieldLabel
-                            label={formatMessage({ id: "quality_control.form.name" })}
-                            required
-                            error={error?.message}
-                        >
-                            <Form.Input
-                                autoComplete="off"
-                                placeholder={formatMessage({ id: "dataViews.form.name" })}
-                                error={!!error}
-                                onBlur={onBlur}
-                                onChange={(_e, { value }) => onChange(value)}
-                                value={value}
-                            />
-                        </FieldLabel>
-                    )}
-                />
-                <Controller
-                    control={control}
-                    name="df_type"
-                    rules={{ required: true }}
-                    render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
-                        <SelectableDynamicForm
-                            scope="quality_control"
-                            content={dfContent}
-                            domainIds={domainIds}
-                            isModification={isModification}
-                            name={value}
-                            onChange={setDfContent}
-                            onNameChange={onChange}
-                            onBlur={onBlur}
-                            requiredError={!!error}
-                            required
-                        />
-                    )}
-                />
-                <Controller
-                    name={"control_mode"}
-                    control={control}
-                    rules={{
-                        required: {
-                            value: true,
-                            message: formatMessage({ id: "quality_control.form.required" }),
-                        }
-                    }}
-                    render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
-                        <Form.Field required>
-                            <label>
-                                {formatMessage({ id: "quality_control.control_mode" })}
-                            </label>
-                            <Form.Dropdown
-                                selection
-                                placeholder={formatMessage({
-                                    id: "quality_control.control_mode",
-                                })}
-                                onBlur={onBlur}
-                                options={controlModeOptions}
-                                onChange={(_e, { value }) => {
-                                    onChange(value);
-                                    setValue(
-                                        "control_properties",
-                                        defaultControlPropertiesForMode(value)
-                                    );
-                                    setValue(
-                                        "score_criteria",
-                                        defaultScoreCriteriaForMode(value)
-                                    );
-                                }}
-                                error={error?.message}
-                                value={value}
-                            />
-                        </Form.Field>
-                    )}
-                />
-                <ScoreCriteria />
-            </Segment>
-            <Divider hidden />
-        </>
-    );
+  return (
+    <>
+      <Segment>
+        <Controller
+          control={control}
+          name="active"
+          render={({ field: { onChange, value } }) => (
+            <Form.Radio
+              checked={value}
+              disabled={isModification}
+              name="active"
+              label={formatMessage({
+                id: "quality_control.form.active",
+              })}
+              onChange={(_e, { checked }) => onChange(checked)}
+              toggle
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="domain_ids"
+          rules={{
+            required: formatMessage({
+              id: "form.validation.empty_required",
+            }),
+          }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <FieldLabel
+              label={formatMessage({
+                id: "quality_control.form.domain_ids",
+              })}
+              required
+              error={error?.message}
+            >
+              <DomainSelector
+                action="createQualityControls"
+                value={value}
+                error={!!error}
+                multiple
+                onBlur={onBlur}
+                disabled={isModification}
+                onChange={(_e, { value }) => onChange(value)}
+                labels
+              />
+            </FieldLabel>
+          )}
+        />
+        <Controller
+          control={control}
+          name="name"
+          rules={{
+            required: formatMessage({ id: "form.validation.empty_required" }),
+          }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <FieldLabel
+              label={formatMessage({ id: "quality_control.form.name" })}
+              required
+              error={error?.message}
+            >
+              <Form.Input
+                autoComplete="off"
+                placeholder={formatMessage({ id: "dataViews.form.name" })}
+                error={!!error}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                value={value}
+              />
+            </FieldLabel>
+          )}
+        />
+        <Controller
+          control={control}
+          name="df_type"
+          rules={{ required: true }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <SelectableDynamicForm
+              scope="quality_control"
+              content={dfContent}
+              domainIds={domainIds}
+              isModification={isModification}
+              name={value}
+              onChange={setDfContent}
+              onNameChange={onChange}
+              onBlur={onBlur}
+              requiredError={!!error}
+              required
+            />
+          )}
+        />
+        <Controller
+          name={"control_mode"}
+          control={control}
+          rules={{
+            required: {
+              value: true,
+              message: formatMessage({ id: "quality_control.form.required" }),
+            },
+          }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.Field required>
+              <label>
+                {formatMessage({ id: "quality_control.control_mode" })}
+              </label>
+              <Form.Dropdown
+                selection
+                placeholder={formatMessage({
+                  id: "quality_control.control_mode",
+                })}
+                onBlur={onBlur}
+                options={controlModeOptions}
+                onChange={(_e, { value }) => {
+                  onChange(value);
+                  setValue(
+                    "control_properties",
+                    defaultControlPropertiesForMode(value),
+                  );
+                  setValue(
+                    "score_criteria",
+                    defaultScoreCriteriaForMode(value),
+                  );
+                }}
+                error={error?.message}
+                value={value}
+              />
+            </Form.Field>
+          )}
+        />
+        <ScoreCriteria />
+      </Segment>
+      <Divider hidden />
+    </>
+  );
 };
 
 export default InformationForm;

package/src/components/qualityControls/ScoreCriteria.js

@@ -5,7 +5,6 @@ import QxContext from "@truedat/qx/components/QxContext";
 
 import Deviation from "./scoreCriterias/Deviation";
 import ErrorCount from "./scoreCriterias/ErrorCount";
-import Count from "./scoreCriterias/Count";
 import Percentage from "./scoreCriterias/Percentage";
 
 export default function ScoreCriteria() {
@@ -16,7 +15,6 @@ export default function ScoreCriteria() {
 
   const scoreCriteriaForMode = {
     deviation: <Deviation />,
-    count: <Count />,
     error_count: <ErrorCount />,
     percentage: <Percentage />,
   };
@@ -34,8 +32,6 @@ export const defaultForMode = (controlMode) => {
   switch (controlMode) {
     case "deviation":
       return { goal: null, maximum: null };
-    case "count":
-      return { goal: null, maximum: null };
     case "error_count":
       return { goal: null, maximum: null };
     case "percentage":

package/src/components/qualityControls/ScoreCriteriaView.js

@@ -11,11 +11,14 @@ export default function ScoreCriteriaView({ qualityControl }) {
 
     switch (control_mode) {
       case "percentage":
-        return !_.isNil(score_criteria.goal) && !_.isNil(score_criteria.minimum);
+        return (
+          !_.isNil(score_criteria.goal) && !_.isNil(score_criteria.minimum)
+        );
       case "deviation":
       case "error_count":
-      case "count":
-        return !_.isNil(score_criteria.goal) && !_.isNil(score_criteria.maximum);
+        return (
+          !_.isNil(score_criteria.goal) && !_.isNil(score_criteria.maximum)
+        );
       default:
         return false;
     }
@@ -35,12 +38,6 @@ export default function ScoreCriteriaView({ qualityControl }) {
       />
     ),
     error_count: (
-      <ScoreCriteriaContent
-        goal={`${score_criteria?.goal}%`}
-        threshold={`${score_criteria?.maximum}%`}
-      />
-    ),
-    count: (
       <ScoreCriteriaContent
         goal={score_criteria?.goal}
         threshold={score_criteria?.maximum}