@truedat/qx 7.0.8 → 7.1.0

package/src/components/qualityControls/controlProperties/__tests__/__snapshots__/Ratio.spec.js.snap

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Ratio /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="required field"
+  >
+    <label>
+      Dataset
+    </label>
+    <div
+      aria-expanded="false"
+      class="ui selection dropdown"
+      role="listbox"
+      tabindex="0"
+    >
+      <div
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider default text"
+        role="alert"
+      >
+        Resource type
+      </div>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
+      <div
+        class="menu transition"
+      >
+        <div
+          aria-checked="false"
+          aria-selected="true"
+          class="selected item"
+          role="option"
+          style="pointer-events: all;"
+        >
+          <span
+            class="text"
+          >
+            Data structures
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
+        >
+          <span
+            class="text"
+          >
+            Reference datasets
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="vertical-space"
+  >
+    <div
+      class="field"
+    >
+      <label>
+        Validation
+      </label>
+      <div
+        class="ui horizontal divider"
+      >
+        <button
+          class="ui mini button"
+        >
+          Add group
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Ratio /> matches the latest snapshot when there is not resource 1`] = `
+<div>
+  <div
+    class="required field"
+  >
+    <label>
+      Dataset
+    </label>
+    <div
+      aria-expanded="false"
+      class="ui selection dropdown"
+      role="listbox"
+      tabindex="0"
+    >
+      <div
+        aria-atomic="true"
+        aria-live="polite"
+        class="divider default text"
+        role="alert"
+      >
+        Resource type
+      </div>
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
+      <div
+        class="menu transition"
+      >
+        <div
+          aria-checked="false"
+          aria-selected="true"
+          class="selected item"
+          role="option"
+          style="pointer-events: all;"
+        >
+          <span
+            class="text"
+          >
+            Data structures
+          </span>
+        </div>
+        <div
+          aria-checked="false"
+          aria-selected="false"
+          class="item"
+          role="option"
+          style="pointer-events: all;"
+        >
+          <span
+            class="text"
+          >
+            Reference datasets
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/qualityControls/qualityByControlMode.js

@@ -0,0 +1,62 @@
+import _ from "lodash/fp";
+
+export default function qualityByControlMode(score) {
+  const controlMode = _.prop("quality_control.control_mode")(score);
+  const scoreCriteria = _.prop("quality_control.score_criteria")(score);
+  const scoreContent = _.prop("score_content")(score);
+
+  if (score.status === "FAILED") return { isFailed: true };
+  if (!scoreContent) return { isEmpty: true };
+
+  switch (controlMode) {
+    case "error_count":
+      return {
+        color:
+          scoreContent.error_count < scoreCriteria.goal
+            ? "green"
+            : scoreContent.error_count < scoreCriteria.maximum
+            ? "yellow"
+            : "red",
+        label1: "quality_control.score_criteria.error_count.goal",
+        value1: scoreCriteria.goal,
+        label2: "quality_control.score_criteria.error_count.maximum",
+        value2: scoreCriteria.maximum,
+        text: scoreContent.error_count,
+      };
+    case "deviation":
+      const deviationRatio =
+        (scoreContent.validation_count / scoreContent.total_count) * 100;
+      return {
+        color:
+          deviationRatio < scoreCriteria.goal
+            ? "green"
+            : deviationRatio < scoreCriteria.maximum
+            ? "yellow"
+            : "red",
+        label1: "quality_control.score_criteria.deviation.goal",
+        value1: scoreCriteria.goal,
+        label2: "quality_control.score_criteria.deviation.maximum",
+        value2: scoreCriteria.maximum,
+        text: `${deviationRatio}%`,
+      };
+    case "percentage":
+      const percentageRatio =
+        (scoreContent.validation_count / scoreContent.total_count) * 100;
+      return {
+        color:
+          percentageRatio > scoreCriteria.goal
+            ? "green"
+            : percentageRatio > scoreCriteria.minimum
+            ? "yellow"
+            : "red",
+        label1: "quality_control.score_criteria.percentage.minimum",
+        value1: scoreCriteria.minimum,
+        label2: "quality_control.score_criteria.percentage.goal",
+        value2: scoreCriteria.goal,
+        text: `${percentageRatio}%`,
+      };
+
+    default:
+      return {};
+  }
+}

package/src/components/qualityControls/qualityControlScoresColumns.js

@@ -0,0 +1,52 @@
+import _ from "lodash/fp";
+import React from "react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { DateDecorator } from "@truedat/core/services/columnDecorators";
+import { linkTo } from "@truedat/core/routes";
+import QualityBadge from "./QualityBadge";
+
+const ScoreLink = ({ id, execution_timestamp }) => (
+  <Link to={linkTo.SCORE({ id })}>
+    {execution_timestamp ? (
+      <DateDecorator date={execution_timestamp} />
+    ) : (
+      <FormattedMessage id={`score.not_executed`} />
+    )}
+  </Link>
+);
+
+export default [
+  {
+    name: "execution_timestamp",
+    fieldSelector: _.identity,
+    fieldDecorator: ScoreLink,
+  },
+  {
+    name: "status",
+    fieldDecorator: (status) => (
+      <FormattedMessage id={`score.status.${status}`} />
+    ),
+  },
+  {
+    name: "quality",
+    fieldSelector: (score) => ({ score }),
+    fieldDecorator: QualityBadge,
+  },
+  {
+    name: "control_mode",
+    fieldSelector: ({ quality_control: { control_mode } }) => control_mode,
+
+    fieldDecorator: (controlMode) => (
+      <FormattedMessage id={`quality_control.control_mode.${controlMode}`} />
+    ),
+  },
+  {
+    name: "quality_control_status",
+    fieldSelector: ({ quality_control: { status } }) => status,
+    fieldDecorator: (status) =>
+      status ? (
+        <FormattedMessage id={`quality_control.status.${status}`} />
+      ) : null,
+  },
+];

package/src/components/qualityControls/{resultCriterias → scoreCriterias}/Deviation.js

@@ -33,7 +33,7 @@ export default function Deviation() {
         }) => (
           <FieldLabel
             label={formatMessage({
-              id: "quality_control.result_criteria.deviation.goal",
+              id: "quality_control.score_criteria.deviation.goal",
             })}
             required
             error={error?.message}
@@ -41,12 +41,12 @@ export default function Deviation() {
             <Form.Input
               autoComplete="off"
               placeholder={formatMessage({
-                id: "quality_control.result_criteria.deviation.goal",
+                id: "quality_control.score_criteria.deviation.goal",
               })}
               error={!!error}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
-              value={value}
+              value={value || ""}
             />
           </FieldLabel>
         )}
@@ -66,7 +66,7 @@ export default function Deviation() {
         }) => (
           <FieldLabel
             label={formatMessage({
-              id: "quality_control.result_criteria.deviation.maximum",
+              id: "quality_control.score_criteria.deviation.maximum",
             })}
             required
             error={error?.message}
@@ -74,12 +74,12 @@ export default function Deviation() {
             <Form.Input
               autoComplete="off"
               placeholder={formatMessage({
-                id: "quality_control.result_criteria.deviation.maximum",
+                id: "quality_control.score_criteria.deviation.maximum",
               })}
               error={!!error}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
-              value={value}
+              value={value || ""}
             />
           </FieldLabel>
         )}

package/src/components/qualityControls/{resultCriterias/ErrorsNumber.js → scoreCriterias/ErrorCount.js}

@@ -6,7 +6,7 @@ import QxContext from "@truedat/qx/components/QxContext";
 import { FieldLabel } from "@truedat/core/components";
 import { numberRules } from "@truedat/core/services/formRules";
 
-export default function ErrorsNumber() {
+export default function ErrorCount() {
   const { formatMessage } = useIntl();
   const { field } = useContext(QxContext);
   const { control, watch } = useFormContext();
@@ -33,7 +33,7 @@ export default function ErrorsNumber() {
         }) => (
           <FieldLabel
             label={formatMessage({
-              id: "quality_control.result_criteria.errors_number.goal",
+              id: "quality_control.score_criteria.error_count.goal",
             })}
             required
             error={error?.message}
@@ -41,12 +41,12 @@ export default function ErrorsNumber() {
             <Form.Input
               autoComplete="off"
               placeholder={formatMessage({
-                id: "quality_control.result_criteria.errors_number.goal",
+                id: "quality_control.score_criteria.error_count.goal",
               })}
               error={!!error}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
-              value={value}
+              value={value || ""}
             />
           </FieldLabel>
         )}
@@ -65,7 +65,7 @@ export default function ErrorsNumber() {
         }) => (
           <FieldLabel
             label={formatMessage({
-              id: "quality_control.result_criteria.errors_number.maximum",
+              id: "quality_control.score_criteria.error_count.maximum",
             })}
             required
             error={error?.message}
@@ -73,12 +73,12 @@ export default function ErrorsNumber() {
             <Form.Input
               autoComplete="off"
               placeholder={formatMessage({
-                id: "quality_control.result_criteria.errors_number.maximum",
+                id: "quality_control.score_criteria.error_count.maximum",
               })}
               error={!!error}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
-              value={value}
+              value={value || ""}
             />
           </FieldLabel>
         )}

package/src/components/qualityControls/{resultCriterias → scoreCriterias}/Percentage.js

@@ -33,7 +33,7 @@ export default function Percentage() {
         }) => (
           <FieldLabel
             label={formatMessage({
-              id: "quality_control.result_criteria.percentage.minimum",
+              id: "quality_control.score_criteria.percentage.minimum",
             })}
             required
             error={error?.message}
@@ -41,12 +41,12 @@ export default function Percentage() {
             <Form.Input
               autoComplete="off"
               placeholder={formatMessage({
-                id: "quality_control.result_criteria.percentage.minimum",
+                id: "quality_control.score_criteria.percentage.minimum",
               })}
               error={!!error}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
-              value={value}
+              value={value || ""}
             />
           </FieldLabel>
         )}
@@ -66,7 +66,7 @@ export default function Percentage() {
         }) => (
           <FieldLabel
             label={formatMessage({
-              id: "quality_control.result_criteria.percentage.goal",
+              id: "quality_control.score_criteria.percentage.goal",
             })}
             required
             error={error?.message}
@@ -74,12 +74,12 @@ export default function Percentage() {
             <Form.Input
               autoComplete="off"
               placeholder={formatMessage({
-                id: "quality_control.result_criteria.percentage.goal",
+                id: "quality_control.score_criteria.percentage.goal",
               })}
               error={!!error}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
-              value={value}
+              value={value || ""}
             />
           </FieldLabel>
         )}

package/src/components/qualityControls/scoreCriterias/__tests__/Deviation.spec.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import Deviation from "../Deviation";
+
+const messages = {
+  en: {
+    "form.validation.must_be_a_number": "Must be a number",
+    "form.validation.must_be_less_than_or_equal": "Must be less than x",
+    "form.validation.must_be_greater_than_or_equal": "Must be greater than y",
+    "form.validation.empty_required": "Required field is empty",
+    "quality_control.score_criteria.deviation.goal": "Goal",
+    "quality_control.score_criteria.deviation.maximum": "Threshold",
+  },
+};
+
+const renderOpts = {
+  messages,
+};
+
+describe("<Deviation />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <Deviation />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should update the goal and maximum fields correctly", async () => {
+    const defaultValues = { "testField.goal": "", "testField.maximum": "" };
+
+    const { getByPlaceholderText, queryByText } = render(
+      <TestFormWrapper defaultValues={defaultValues}>
+        <Deviation />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    const goalInput = getByPlaceholderText("Goal");
+
+    const thresholdInput = getByPlaceholderText("Threshold");
+
+    fireEvent.change(goalInput, { target: { value: "10" } });
+    fireEvent.change(thresholdInput, { target: { value: "20" } });
+    await waitFor(() =>
+      expect(queryByText(/Must be greater than y/i)).not.toBeInTheDocument()
+    );
+  });
+
+  it("Show alert if thresholdInput is less than goal", async () => {
+    const { getByPlaceholderText, queryByText } = render(
+      <TestFormWrapper>
+        <Deviation />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    const goalInput = getByPlaceholderText("Goal");
+
+    const thresholdInput = getByPlaceholderText("Threshold");
+
+    fireEvent.change(goalInput, { target: { value: "10" } });
+    fireEvent.change(thresholdInput, { target: { value: "1" } });
+
+    await waitFor(() =>
+      expect(queryByText(/Must be greater than y/i)).toBeInTheDocument()
+    );
+  });
+});

package/src/components/qualityControls/scoreCriterias/__tests__/ErrorCount.spec.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import ErrorCount from "../ErrorCount";
+
+const renderOpts = { messages };
+
+describe("<ErrorCount />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <ErrorCount />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should update the goal and maximum fields correctly", async () => {
+    const defaultValues = { "testField.goal": "", "testField.maximum": "" };
+
+    const { getByPlaceholderText, queryByText } = render(
+      <TestFormWrapper defaultValues={defaultValues}>
+        <ErrorCount />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    const goalInput = getByPlaceholderText("Goal");
+
+    const thresholdInput = getByPlaceholderText("Threshold");
+
+    fireEvent.change(goalInput, { target: { value: "10" } });
+    fireEvent.change(thresholdInput, { target: { value: "20" } });
+
+    await waitFor(() =>
+      expect(queryByText(/Must be greater than y/i)).not.toBeInTheDocument()
+    );
+  });
+
+  it("Show alert if thresholdInput is less than goal", async () => {
+    const { getByPlaceholderText, queryByText } = render(
+      <TestFormWrapper>
+        <ErrorCount />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    const goalInput = getByPlaceholderText("Goal");
+
+    const thresholdInput = getByPlaceholderText("Threshold");
+
+    fireEvent.change(goalInput, { target: { value: "10" } });
+    fireEvent.change(thresholdInput, { target: { value: "1" } });
+
+    await waitFor(() =>
+      expect(queryByText(/Must be greater than 10/i)).toBeInTheDocument()
+    );
+  });
+});

package/src/components/qualityControls/scoreCriterias/__tests__/Percentage.spec.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import Percentage from "../Percentage";
+
+const renderOpts = { messages };
+
+describe("<Percentage />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <Percentage />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should update the goal and maximum fields correctly", async () => {
+    const { getByPlaceholderText, queryByText } = render(
+      <TestFormWrapper>
+        <Percentage />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    const goalInput = getByPlaceholderText("Goal");
+
+    const thresholdInput = getByPlaceholderText("Threshold");
+
+    fireEvent.change(goalInput, { target: { value: "20" } });
+    fireEvent.change(thresholdInput, { target: { value: "10" } });
+    await waitFor(() =>
+      expect(queryByText(/Must be less than 10/i)).not.toBeInTheDocument()
+    );
+  });
+
+  it("Show alert if thresholdInput is more than goal", async () => {
+    const { getByPlaceholderText, queryByText } = render(
+      <TestFormWrapper>
+        <Percentage />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    const goalInput = getByPlaceholderText("Goal");
+
+    const thresholdInput = getByPlaceholderText("Threshold");
+
+    fireEvent.change(goalInput, { target: { value: "10" } });
+    fireEvent.change(thresholdInput, { target: { value: "20" } });
+
+    await waitFor(() =>
+      expect(queryByText(/Must be less than 10/i)).toBeInTheDocument()
+    );
+  });
+});

package/src/components/qualityControls/scoreCriterias/__tests__/__snapshots__/Deviation.spec.js.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Deviation /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label
+      class="field-label"
+    >
+      Goal
+      <span>
+        *
+      </span>
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Goal"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="field"
+  >
+    <label
+      class="field-label"
+    >
+      Threshold
+      <span>
+        *
+      </span>
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Threshold"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;