@truedat/qx 7.6.0 → 7.6.2

package/src/components/qualityControls/__tests__/QualityControlScores.spec.js

@@ -7,31 +7,57 @@ import {
   useQualityControlScores,
   useScoreDelete,
 } from "@truedat/qx/hooks/useScores";
-import QualityControlScores from "../QualityControlScores";
 import { qualityControlData } from "./__fixtures__/qualityControlHelper";
+import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
+import { ScoreContextProvider } from "@truedat/qx/components/scores/ScoreContext";
+import QualityControlScores from "../QualityControlScores";
 
 jest.mock("react-router", () => ({
   ...jest.requireActual("react-router"),
-  useParams: () => ({ id: "8", version: "1" }),
+  useParams: () => ({ id: "8" }),
 }));
 
 jest.mock("@truedat/qx/hooks/useScores", () => {
   const { scoreData } = jest.requireActual(
     "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper"
   );
-  const data = [scoreData(), scoreData({ id: 16, status: "QUEUED" })];
-  const mutate = jest.fn();
+
+  const quality_control_scores = {
+    last_execution_result: {
+      id: 15,
+      status: "SUCCEEDED",
+      details: {
+        foo: "bar",
+      },
+      execution_timestamp: "2024-11-19T16:34:21.438113Z",
+      group_id: 36,
+      quality_control_version_id: 1,
+      latest_event_message: "foo_message",
+    },
+    total_count: 2,
+    scores: [scoreData(), scoreData({ id: 16, status: "QUEUED" })],
+    total_pages: 1,
+    current_page: 1,
+  };
+
   return {
     useQualityControlScores: jest.fn(() => ({
-      data: { data: data },
-      loading: false,
-      mutate,
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: quality_control_scores },
+            loading: false,
+            mutate: jest.fn(),
+          }),
+      }),
     })),
+
     useScoreDelete: jest.fn(() => ({
       trigger: () => ({
         then: (callback) =>
           callback({
             data: {},
+            loading: false,
           }),
       }),
     })),
@@ -39,20 +65,21 @@ jest.mock("@truedat/qx/hooks/useScores", () => {
 });
 
 const renderOpts = { messages };
-const mutate = jest.fn();
 
 const context = {
   qualityControl: qualityControlData(),
   loading: false,
   actions: ["delete_score"],
-  mutate,
+  scores: [],
 };
 
 describe("<QualityControlScores />", () => {
   it("matches the latest snapshot", async () => {
     const rendered = render(
       <TestFormWrapper context={context}>
-        <QualityControlScores />
+        <ScoreContextProvider qualityControlId={8}>
+          <QualityControlScores />
+        </ScoreContextProvider>
       </TestFormWrapper>,
       renderOpts
     );
@@ -61,44 +88,72 @@ describe("<QualityControlScores />", () => {
   });
 
   it("shows a message when there are no scores", async () => {
-    useQualityControlScores.withImplementation(
-      () => ({
-        data: { data: [] },
-        loading: false,
-        mutate,
+    useQualityControlScores.mockImplementation(() => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: [] },
+            loading: false,
+            mutate: jest.fn(),
+          }),
       }),
-      async () => {
-        const context = {
-          qualityControl: qualityControlData(),
-          loading: false,
-          actions: ["delete_score"],
-          mutate,
-        };
-
-        const rendered = render(
-          <TestFormWrapper context={context}>
-            <QualityControlScores />
-          </TestFormWrapper>,
-          renderOpts
-        );
-        await waitForLoad(rendered);
-
-        expect(rendered.getByText(/no scores found/i)).toBeInTheDocument();
-      }
+    }));
+
+    const rendered = render(
+      <TestFormWrapper context={context}>
+        <ScoreContextProvider qualityControlId={8}>
+          <QualityControlScores />
+        </ScoreContextProvider>
+      </TestFormWrapper>,
+      renderOpts
     );
+
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/no scores found/i)).toBeInTheDocument();
   });
 
   it("does not show delete button when user does not have delete_score action", async () => {
+    const quality_control_scores = {
+      last_execution_result: {
+        id: 15,
+        status: "SUCCEEDED",
+        details: {
+          foo: "bar",
+        },
+        execution_timestamp: "2024-11-19T16:34:21.438113Z",
+        group_id: 36,
+        quality_control_version_id: 1,
+        latest_event_message: "foo_message",
+      },
+      total_count: 2,
+      scores: [scoreData(), scoreData({ id: 16, status: "QUEUED" })],
+      total_pages: 1,
+      current_page: 1,
+    };
+
+    useQualityControlScores.mockImplementation(() => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: quality_control_scores },
+            loading: false,
+            mutate: jest.fn(),
+          }),
+      }),
+    }));
+
     const context = {
       qualityControl: qualityControlData(),
       loading: false,
       actions: [],
-      mutate,
     };
 
     const rendered = render(
       <TestFormWrapper context={context}>
-        <QualityControlScores />
+        <ScoreContextProvider qualityControlId={8}>
+          <QualityControlScores />
+        </ScoreContextProvider>
       </TestFormWrapper>,
       renderOpts
     );
@@ -112,35 +167,86 @@ describe("<QualityControlScores />", () => {
   });
 
   it("deletes a score when the delete button is clicked", async () => {
-    const trigger = jest.fn(() =>
-      Promise.resolve({
-        data: {},
-      })
-    );
+    const triggerDeleteScore = jest.fn(() => Promise.resolve({ data: {} }));
 
     useScoreDelete.mockImplementation(() => ({
-      trigger,
+      trigger: triggerDeleteScore,
     }));
-
     const user = userEvent.setup({ delay: null });
 
     const rendered = render(
       <TestFormWrapper context={context}>
-        <QualityControlScores />
+        <ScoreContextProvider qualityControlId={8}>
+          <QualityControlScores />
+        </ScoreContextProvider>
       </TestFormWrapper>,
       renderOpts
     );
+
     await waitForLoad(rendered);
 
-    const deleteButtons = rendered.container.querySelectorAll(
-      ".ui.red.basic.icon.button"
+    const boton = rendered.container.querySelector(
+      ".ui.red.mini.basic.icon.button"
     );
+    expect(boton).toBeInTheDocument();
 
-    await user.click(deleteButtons[0]);
+    await user.click(boton);
     await user.click(rendered.getByText(/confirm_yes/i));
-
     await waitFor(() => {
-      expect(trigger).toHaveBeenCalled();
+      expect(triggerDeleteScore).toHaveBeenCalledWith({
+        id: "15",
+      });
     });
   });
+
+  it("shows a message when the last execution result is failed", async () => {
+    const quality_control_scores = {
+      last_execution_result: {
+        id: 15,
+        status: "FAILED",
+        details: {
+          foo: "bar",
+        },
+        execution_timestamp: "2024-11-19T16:34:21.438113Z",
+        group_id: 36,
+        quality_control_version_id: 1,
+        latest_event_message: "foo_message",
+      },
+      total_count: 2,
+      scores: [scoreData({ status: "FAILED" })],
+      total_pages: 1,
+      current_page: 1,
+    };
+
+    useQualityControlScores.mockImplementation(() => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: quality_control_scores },
+            loading: false,
+            mutate: jest.fn(),
+          }),
+      }),
+    }));
+
+    const context = {
+      qualityControl: qualityControlData(),
+      loading: false,
+      actions: [],
+    };
+
+    const rendered = render(
+      <TestFormWrapper context={context}>
+        <ScoreContextProvider qualityControlId={8}>
+          <QualityControlScores />
+        </ScoreContextProvider>
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText(/quality.error/i)).toBeInTheDocument();
+    expect(rendered.getByText(/foo_message/i)).toBeInTheDocument();
+  });
 });

package/src/components/qualityControls/__tests__/__snapshots__/QualityControlRoutes.spec.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<QualityControlRoutes /> renders correctly with default route 1`] = `
+<div>
+  <div>
+    QualityControls
+  </div>
+</div>
+`;
+
+exports[`<QualityControlRoutes /> renders correctly with deprecated route 1`] = `<div />`;
+
+exports[`<QualityControlRoutes /> renders correctly with drafts route 1`] = `<div />`;
+
+exports[`<QualityControlRoutes /> renders correctly with edit route 1`] = `<div />`;
+
+exports[`<QualityControlRoutes /> renders correctly with history route 1`] = `<div />`;
+
+exports[`<QualityControlRoutes /> renders correctly with new draft route 1`] = `<div />`;
+
+exports[`<QualityControlRoutes /> renders correctly with new route 1`] = `<div />`;
+
+exports[`<QualityControlRoutes /> renders correctly with quality control route 1`] = `<div />`;
+
+exports[`<QualityControlRoutes /> renders correctly with scores route 1`] = `<div />`;
+
+exports[`<QualityControlRoutes /> renders unauthorized component when not authorized 1`] = `<div />`;

package/src/components/qualityControls/__tests__/__snapshots__/QualityControlScores.spec.js.snap

@@ -31,6 +31,11 @@ exports[`<QualityControlScores /> matches the latest snapshot 1`] = `
         >
           Control Mode
         </th>
+        <th
+          class=""
+        >
+          scores.props.created_at
+        </th>
         <th
           class=""
         >
@@ -95,6 +100,9 @@ exports[`<QualityControlScores /> matches the latest snapshot 1`] = `
         >
           Percentage
         </td>
+        <td
+          class=""
+        />
         <td
           class=""
         >
@@ -149,6 +157,9 @@ exports[`<QualityControlScores /> matches the latest snapshot 1`] = `
         >
           Percentage
         </td>
+        <td
+          class=""
+        />
         <td
           class=""
         >
@@ -160,5 +171,65 @@ exports[`<QualityControlScores /> matches the latest snapshot 1`] = `
       </tr>
     </tbody>
   </table>
+  <div
+    aria-label="Pagination Navigation"
+    class="ui pagination menu"
+    role="navigation"
+  >
+    <a
+      aria-current="false"
+      aria-disabled="true"
+      aria-label="First item"
+      class="disabled item"
+      tabindex="-1"
+      type="firstItem"
+      value="1"
+    >
+      «
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="true"
+      aria-label="Previous item"
+      class="disabled item"
+      tabindex="-1"
+      type="prevItem"
+      value="1"
+    >
+      ⟨
+    </a>
+    <a
+      aria-current="true"
+      aria-disabled="true"
+      class="active disabled item"
+      tabindex="-1"
+      type="pageItem"
+      value="1"
+    >
+      1
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="true"
+      aria-label="Next item"
+      class="disabled item"
+      tabindex="-1"
+      type="nextItem"
+      value="1"
+    >
+      ⟩
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="true"
+      aria-label="Last item"
+      class="disabled item"
+      tabindex="-1"
+      type="lastItem"
+      value="1"
+    >
+      »
+    </a>
+  </div>
 </div>
 `;

package/src/components/qualityControls/qualityByControlMode.js

@@ -74,20 +74,20 @@ export default function qualityByControlMode(score) {
       };
     case "error_count":
       const errorCount =
-        scoreContent.total_count == 0 ? null : scoreContent.validation_count;
+        scoreContent.total_count == 0
+          ? null
+          : (scoreContent.validation_count / scoreContent.total_count) * 100;
 
       const errorCountResult =
-        scoreContent.total_count == 0
-          ? noResultsMessage
-          : scoreContent.validation_count;
+        scoreContent.total_count == 0 ? noResultsMessage : `${errorCount}%`;
 
       return {
         color:
           scoreContent.total_count == 0
             ? "grey"
-            : errorCount > scoreCriteria.goal
+            : errorCount < scoreCriteria.goal
               ? "green"
-              : errorCount > scoreCriteria.maximum
+              : errorCount < scoreCriteria.maximum
                 ? "yellow"
                 : "red",
         label1: "quality_control.score_criteria.error_count.goal",

package/src/components/qualityControls/scoreCriterias/Count.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { use } from "react";
 import { useIntl } from "react-intl";
 import { Controller, useFormContext } from "react-hook-form";
 import { Form } from "semantic-ui-react";
@@ -8,7 +8,7 @@ import { numberRules } from "@truedat/core/services/formRules";
 
 export default function Count() {
   const { formatMessage } = useIntl();
-  const { field } = useContext(QxContext);
+  const { field } = use(QxContext);
   const { control, watch } = useFormContext();
 
   const maximumField = `${field}.maximum`;

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

@@ -10,7 +10,6 @@ export default function ErrorCount() {
   const { formatMessage } = useIntl();
   const { field } = use(QxContext);
   const { control, watch } = useFormContext();
-
   const maximumField = `${field}.maximum`;
   const goalField = `${field}.goal`;
   const maximum = watch(maximumField);
@@ -68,7 +67,8 @@ export default function ErrorCount() {
             label={formatMessage({
               id: "quality_control.score_criteria.error_count.maximum",
             })}
-            error={!!error}
+            required
+            error={error?.message}
           >
             <Form.Input
               autoComplete="off"

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

@@ -34,7 +34,7 @@ describe("<ErrorCount />", () => {
 
     await user.type(goalInput, "10");
     await user.type(thresholdInput, "20");
-    rendered.debug();
+
     await waitFor(() =>
       expect(
         rendered.queryByText(/must be greater than y/i)
@@ -42,7 +42,7 @@ describe("<ErrorCount />", () => {
     );
   });
 
-  it.skip("Show alert if thresholdInput is less than goal", async () => {
+  it("Show alert if thresholdInput is less than goal", async () => {
     const rendered = render(
       <TestFormWrapper>
         <ErrorCount />
@@ -60,12 +60,12 @@ describe("<ErrorCount />", () => {
 
     await user.type(goalInput, "10");
     await user.type(thresholdInput, "1");
-    await waitForLoad(rendered);
 
-    await waitFor(() =>
+    await waitForLoad(rendered);
+    await waitFor(() => {
       expect(
-        rendered.queryByText(/must be greater than 10/i)
-      ).toBeInTheDocument()
-    );
+        rendered.queryByText("form.validation.must_be_greater_than_or_equal")
+      ).toBeInTheDocument();
+    });
   });
 });

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

@@ -35,6 +35,9 @@ exports[`<ErrorCount /> matches the latest snapshot 1`] = `
       class="field-label"
     >
       quality_control.score_criteria.error_count.maximum
+      <span>
+        *
+      </span>
     </label>
     <div
       class="field"

package/src/components/scores/ScoreContext.js

@@ -1,3 +1,65 @@
-import { createContext } from "react";
+import _ from "lodash/fp";
+import { createContext, useState, useEffect, use } from "react";
+import {
+  useQualityControlScores,
+  useScoreDelete,
+} from "@truedat/qx/hooks/useScores";
 
-export default createContext();
+const ScoreContext = createContext();
+
+export const ScoreContextProvider = (props) => {
+  const qualityControlId = _.prop("qualityControlId")(props);
+  const children = _.prop("children")(props);
+  const [page, setPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [scores, setScores] = useState();
+  const [lastExecutionResult, setLastExecutionResult] = useState();
+  const [count, setCount] = useState();
+  const [size, setSize] = useState();
+  const [totalPages, setTotalPages] = useState();
+  const { trigger: triggerSearchScores, loading: loadingQualityScores } =
+    useQualityControlScores(qualityControlId);
+
+  const { trigger: deleteScore } = useScoreDelete();
+
+  const handleSearch = () => {
+    triggerSearchScores({
+      quality_control_id: qualityControlId,
+      page: page,
+    }).then(({ data }) => {
+      setScores(data?.data?.scores);
+      setLastExecutionResult(data?.data?.last_execution_result);
+      setCurrentPage(data?.data?.current_page);
+      setCount(data?.data?.total_pages);
+      setSize(data?.data?.page_size);
+      setTotalPages(data?.data?.total_pages);
+    });
+  };
+
+  const handleDelete = (id) => {
+    deleteScore(id);
+    page == 1 ? handleSearch() : setPage(1);
+  };
+
+  useEffect(() => {
+    handleSearch();
+  }, [page]);
+
+  const context = {
+    scores,
+    loadingQualityScores,
+    lastExecutionResult,
+    count,
+    size,
+    totalPages,
+    page,
+    currentPage,
+    selectPage: setPage,
+    handleDelete,
+  };
+
+  return <ScoreContext value={context}>{children}</ScoreContext>;
+};
+
+export const useScoreContext = () => use(ScoreContext);
+export default ScoreContext;

package/src/components/scores/ScoreDetails.js

@@ -1,12 +1,14 @@
 import _ from "lodash/fp";
 import { use } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, List, Segment } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
-import columns from "../qualityControls/qualityControlScoresColumns";
+import { getQualityControlScoresColumns } from "@truedat/qx/components/selectors/getQualityControlScoresColumns";
 import ScoreContext from "./ScoreContext";
 
-export default function ScoreDetails() {
+export function ScoreDetails({ columns }) {
   const { score } = use(ScoreContext);
   const details = _.prop("details")(score);
 
@@ -65,3 +67,12 @@ export default function ScoreDetails() {
     </>
   );
 }
+ScoreDetails.propTypes = {
+  columns: PropTypes.array,
+};
+
+const mapStateToProps = (state) => ({
+  columns: getQualityControlScoresColumns(state),
+});
+
+export default connect(mapStateToProps)(ScoreDetails);