@truedat/qx 7.6.0 → 7.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "7.6.0",
+  "version": "7.6.1",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -53,7 +53,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.6.0",
+    "@truedat/test": "7.6.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "0d9c5ee7b864fe3dc87def2be0f68191c04dee57"
+  "gitHead": "da40cd48fee6be123cdb2fad700e16cdf9f69319"
 }

package/src/components/index.js

@@ -1,2 +1,3 @@
 import QxRoutes from "./QxRoutes";
-export { QxRoutes };
+import { getMyScoreGroupsColumns } from "./selectors/getMyScoreGroupsColumns";
+export { QxRoutes, getMyScoreGroupsColumns };

package/src/components/qualityControls/QualityControlEditor.js

@@ -20,6 +20,7 @@ import ControlProperties, {
 const SelectableDynamicForm = lazy(
   () => import("@truedat/df/components/SelectableDynamicForm")
 );
+
 const SourceSelector = lazy(
   () => import("@truedat/cx/sources/components/SourceSelector")
 );
@@ -63,6 +64,7 @@ export default function QualityControlEditor({
       shouldValidate: true,
       shouldDirty: true,
     });
+
     setValidDfContent(_.isEmpty(valid));
   };
 

package/src/components/qualityControls/QualityControlRoutes.js

@@ -1,4 +1,4 @@
-import { Route, Routes } from "react-router";
+import { Route, Routes, useParams } from "react-router";
 import {
   QUALITY_CONTROLS_DEPRECATED,
   QUALITY_CONTROLS_DRAFTS,
@@ -23,6 +23,17 @@ import QualityControlScores from "./QualityControlScores";
 import NewQualityControl from "./NewQualityControl";
 import EditQualityControl from "./EditQualityControl";
 import NewDraftQualityControl from "./NewDraftQualityControl";
+import { ScoreContextProvider } from "../scores/ScoreContext";
+
+const LoaderQualityControlScores = () => {
+  const { id } = useParams();
+
+  return (
+    <ScoreContextProvider qualityControlId={id}>
+      <QualityControlScores />
+    </ScoreContextProvider>
+  );
+};
 
 export default function QualityControlRoutes() {
   const searchProps = {
@@ -80,10 +91,8 @@ export default function QualityControlRoutes() {
 
       <Route path=":id/version/:version" element={<QualityControlHeader />}>
         <Route index element={<QualityControl />} />
-
         <Route path="history" element={<QualityControlHistory />} />
-
-        <Route path="scores" element={<QualityControlScores />} />
+        <Route path="scores" element={<LoaderQualityControlScores />} />
       </Route>
     </Routes>
   );

package/src/components/qualityControls/QualityControlScores.js

@@ -1,37 +1,72 @@
 import _ from "lodash/fp";
-import { Fragment, useContext } from "react";
+import { Fragment, use } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { useParams, Link } from "react-router";
-import { Button, Table, Label, Message, Icon } from "semantic-ui-react";
-import { ConfirmModal, Loading } from "@truedat/core/components";
+import {
+  Button,
+  Divider,
+  Icon,
+  Label,
+  Message,
+  Table,
+} from "semantic-ui-react";
+import { ConfirmModal, DateTime, Loading } from "@truedat/core/components";
 import { columnDecorator } from "@truedat/core/services";
 import { linkTo } from "@truedat/core/routes";
-import { useQualityControlScores, useScoreDelete } from "../../hooks/useScores";
+import { getQualityControlScoresColumns } from "@truedat/qx/components/selectors/getQualityControlScoresColumns";
+import { useScoreContext } from "../scores/ScoreContext";
+import ScorePagination from "../scores/ScorePagination";
 import QxContext from "../QxContext";
-import columns from "./qualityControlScoresColumns";
 
 const VALID_DELETE_STATUSES = ["PENDING", "SUCCEEDED", "FAILED"];
 
-export default function QualityControlScores() {
+export function LastExecutionResult({ lastExecutionResult }) {
+  const { formatMessage, locale } = useIntl();
+
+  return lastExecutionResult?.status === "FAILED" ? (
+    <Message negative style={{ marginTop: "14px" }}>
+      <Message.Header content={formatMessage({ id: "quality.error" })} />
+      <Divider />
+      <span
+        style={{
+          position: "absolute",
+          top: "14px",
+          right: "21px",
+        }}
+      >
+        <DateTime
+          value={lastExecutionResult.execution_timestamp}
+          locale={locale}
+        />
+      </span>
+      <p style={{ whiteSpace: "pre-wrap" }}>
+        {lastExecutionResult.details?.error}
+      </p>
+      <p style={{ whiteSpace: "pre-wrap" }}>
+        {lastExecutionResult.latest_event_message}
+      </p>
+    </Message>
+  ) : null;
+}
+
+export function QualityControlScores({ columns }) {
   const { id } = useParams();
   const { formatMessage } = useIntl();
-  const {
-    data,
-    loading: loadingQualityScores,
-    mutate,
-  } = useQualityControlScores(id);
-  const { trigger: deleteScore, loading: deletingScore } = useScoreDelete();
+
   const {
     qualityControl,
     actions,
     loading: loadingQualityControl,
-  } = useContext(QxContext);
+  } = use(QxContext);
 
-  const canDeleteScore = _.includes("delete_score")(actions);
+  const scoreContext = useScoreContext();
+  const { scores, lastExecutionResult, loadingQualityScores, handleDelete } =
+    scoreContext;
 
-  const loading =
-    loadingQualityScores || loadingQualityControl || deletingScore;
-  const scores = data?.data;
+  const canDeleteScore = _.includes("delete_score")(actions);
+  const loading = loadingQualityControl || loadingQualityScores;
 
   const versionsMap = _.flow(
     _.prop("versions"),
@@ -63,80 +98,95 @@ export default function QualityControlScores() {
       })}
     />
   ) : (
-    <Table>
-      <Table.Header>
-        <Table.Row>
-          {columns.map(({ name }, idx) => (
-            <Table.HeaderCell
-              key={idx}
-              content={formatMessage({ id: `scores.props.${name}` })}
-            />
-          ))}
-          {canDeleteScore ? <Table.HeaderCell /> : null}
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {scoreRows.map((score, key) => {
-          const version = score.quality_control.version;
-          const active = version === qualityControl.version;
-          const tagLabel = score.firstInVersion
-            ? `${formatMessage({
-                id: "quality_control.props.version",
-              })}: ${version}`
-            : null;
-          return (
-            <Fragment key={key}>
-              {tagLabel ? (
-                <Table.Row>
-                  <Table.Cell>
-                    <Label
-                      as={Link}
-                      to={linkTo.QUALITY_CONTROL_HISTORY({ id, version })}
-                      active={active}
-                      ribbon
-                    >
-                      {tagLabel}
-                    </Label>
-                  </Table.Cell>
-                </Table.Row>
-              ) : null}
-              <Table.Row warning={active}>
-                {columns.map((column, key) => (
-                  <Table.Cell
-                    key={key}
-                    textAlign={column.textAlign}
-                    content={columnDecorator(column)(score)}
-                  />
-                ))}
-
-                {canDeleteScore ? (
-                  <Table.Cell onClick={(e) => e.stopPropagation()}>
-                    {_.includes(score.status)(VALID_DELETE_STATUSES) ? (
-                      <ConfirmModal
-                        icon="trash"
-                        trigger={
-                          <Button icon basic color="red" size="mini">
-                            <Icon name="trash alternate outline" color="red" />
-                          </Button>
-                        }
-                        header={formatMessage({
-                          id: "score.actions.delete.confirmation.header",
-                        })}
-                        content={formatMessage({
-                          id: "score.actions.delete.confirmation.content",
-                        })}
-                        onConfirm={() =>
-                          deleteScore({ id: `${score.id}` }).then(mutate)
-                        }
-                      />
-                    ) : null}
-                  </Table.Cell>
+    <>
+      <LastExecutionResult lastExecutionResult={lastExecutionResult} />
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            {columns.map(({ name }, idx) => (
+              <Table.HeaderCell
+                key={idx}
+                content={formatMessage({ id: `scores.props.${name}` })}
+              />
+            ))}
+            {canDeleteScore ? <Table.HeaderCell /> : null}
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {scoreRows.map((score, key) => {
+            const version = score.quality_control.version;
+            const active = version === qualityControl.version;
+            const tagLabel = score.firstInVersion
+              ? `${formatMessage({
+                  id: "quality_control.props.version",
+                })}: ${version}`
+              : null;
+            return (
+              <Fragment key={key}>
+                {tagLabel ? (
+                  <Table.Row>
+                    <Table.Cell>
+                      <Label
+                        as={Link}
+                        to={linkTo.QUALITY_CONTROL_HISTORY({ id, version })}
+                        active={active}
+                        ribbon
+                      >
+                        {tagLabel}
+                      </Label>
+                    </Table.Cell>
+                  </Table.Row>
                 ) : null}
-              </Table.Row>
-            </Fragment>
-          );
-        })}
-      </Table.Body>
-    </Table>
+                <Table.Row warning={active}>
+                  {columns.map((column, key) => (
+                    <Table.Cell
+                      key={key}
+                      textAlign={column.textAlign}
+                      content={columnDecorator(column)(score)}
+                    />
+                  ))}
+
+                  {canDeleteScore ? (
+                    <Table.Cell onClick={(e) => e.stopPropagation()}>
+                      {_.includes(score.status)(VALID_DELETE_STATUSES) ? (
+                        <ConfirmModal
+                          icon="trash"
+                          trigger={
+                            <Button icon basic color="red" size="mini">
+                              <Icon
+                                name="trash alternate outline"
+                                color="red"
+                              />
+                            </Button>
+                          }
+                          header={formatMessage({
+                            id: "score.actions.delete.confirmation.header",
+                          })}
+                          content={formatMessage({
+                            id: "score.actions.delete.confirmation.content",
+                          })}
+                          onConfirm={() => handleDelete({ id: `${score.id}` })}
+                        />
+                      ) : null}
+                    </Table.Cell>
+                  ) : null}
+                </Table.Row>
+              </Fragment>
+            );
+          })}
+        </Table.Body>
+      </Table>
+      <ScorePagination />
+    </>
   );
 }
+
+QualityControlScores.propTypes = {
+  columns: PropTypes.array,
+};
+
+const mapStateToProps = (state) => ({
+  columns: getQualityControlScoresColumns(state),
+});
+
+export default connect(mapStateToProps)(QualityControlScores);

package/src/components/qualityControls/ScoreCriteriaView.js

@@ -20,8 +20,8 @@ export default function ScoreCriteriaView({ qualityControl }) {
     ),
     error_count: (
       <ScoreCriteriaContent
-        goal={score_criteria?.goal}
-        threshold={score_criteria?.maximum}
+        goal={`${score_criteria?.goal}%`}
+        threshold={`${score_criteria?.maximum}%`}
       />
     ),
     count: (

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

@@ -265,7 +265,7 @@ describe("<NewQualityControl />", () => {
     );
   });
 
-  it.skip("test publish submit ", async () => {
+  it("test publish submit ", async () => {
     const user = userEvent.setup({ delay: null });
     const trigger = jest.fn(() =>
       Promise.resolve({ data: { data: { id: "9", version: "1" } } })
@@ -295,16 +295,24 @@ describe("<NewQualityControl />", () => {
       rendered.getByRole("option", { name: /external_source_id/i })
     );
 
-    await user.click(rendered.getByRole("option", { name: /error_count/i }));
+    await user.click(
+      rendered.getByRole("option", {
+        name: /quality_control.control_mode.count/i,
+      })
+    );
 
     // Fill in the 'Goal' field
     await user.type(
-      rendered.getByPlaceholderText(/score_criteria.error_count.goal/i),
+      rendered.getByPlaceholderText(
+        /quality_control.score_criteria.count.goal/i
+      ),
       "25"
     );
     // Fill in the 'Threshold' field
     await user.type(
-      rendered.getByPlaceholderText(/score_criteria.error_count.maximum/i),
+      rendered.getByPlaceholderText(
+        /quality_control.score_criteria.count.maximum/i
+      ),
       "50"
     );
     await waitForLoad(rendered);

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

@@ -21,7 +21,7 @@ describe("<QualityBadge />", () => {
     const score = scoreData({ score_content: undefined });
     const rendered = render(<QualityBadge score={score} />);
     await waitForLoad(rendered);
-    rendered.debug();
+
     expect(rendered.queryByText(/score.not_executed/i)).toBeInTheDocument();
   });
 
@@ -34,7 +34,7 @@ describe("<QualityBadge />", () => {
     const score = scoreData({ score_content });
     const rendered = render(<QualityBadge score={score} />);
     await waitForLoad(rendered);
-    rendered.debug();
+
     expect(rendered.queryByText(/score.no_results/i)).toBeInTheDocument();
   });
 });
@@ -187,7 +187,7 @@ describe("<QualityBadgeForSearch />", () => {
       />
     );
     await waitForLoad(rendered);
-    rendered.debug();
+
     expect(rendered.queryByText(/score.no_results/i)).toBeInTheDocument();
   });
 });

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

@@ -204,11 +204,15 @@ describe("<QualityControlEditor />", () => {
     );
   });
 
-  it.skip("test fill form", async () => {
+  it("test fill form for creation", async () => {
     const user = userEvent.setup({ delay: null });
+    const newProps = {
+      ...props,
+      value: undefined,
+    };
     const rendered = render(
       <QualityControlEditor
-        {...props}
+        {...newProps}
         value={defaultQualityControl}
         isModification={false}
       />,
@@ -216,14 +220,19 @@ describe("<QualityControlEditor />", () => {
     );
     await waitForLoad(rendered);
 
-    await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /publish/i })).toBeDisabled()
-    );
+    await waitFor(() => {
+      expect(rendered.getByRole("button", { name: /publish/i })).toBeDisabled();
+      expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled();
+    });
 
     await user.click(rendered.getByText(/enable/i));
-
     await user.type(rendered.getByPlaceholderText(/name/i), "test_modified");
 
+    await user.type(
+      rendered.getByPlaceholderText(/field1/i),
+      "field_template_modified"
+    );
+
     await user.click(rendered.getByText(/select domains/i));
     await user.click(rendered.getByText(/bardomain/i));
 
@@ -234,17 +243,12 @@ describe("<QualityControlEditor />", () => {
 
     await user.click(
       rendered.getByRole("option", {
-        name: /quality_control.control_mode.error_count/i,
+        name: "count",
       })
     );
 
-    await user.type(rendered.getByPlaceholderText(/goal/i), "25");
-    await user.type(
-      rendered.getByPlaceholderText(
-        /quality_control.score_criteria.error_count.maximum/i
-      ),
-      "50"
-    );
+    await user.type(rendered.getByPlaceholderText("Goal"), "25");
+    await user.type(rendered.getByPlaceholderText("Threshold"), "50");
 
     await user.click(rendered.getByText(/resource type/i));
     await user.click(rendered.getByText(/reference datasets/i));
@@ -254,4 +258,28 @@ describe("<QualityControlEditor />", () => {
       expect(rendered.getByRole("button", { name: /Publish/i })).toBeEnabled()
     );
   });
+
+  it("test fill form for edition", async () => {
+    const user = userEvent.setup({ delay: null });
+    const newProps = {
+      ...props,
+      onPublish: undefined,
+    };
+
+    const rendered = render(<QualityControlEditor {...newProps} />, renderOpts);
+
+    await waitForLoad(rendered);
+
+    await waitFor(() => {
+      expect(rendered.queryByText(/publish/i)).not.toBeInTheDocument();
+      expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled();
+    });
+
+    await user.click(rendered.getByText(/enable/i));
+    await user.type(rendered.getByPlaceholderText(/name/i), "test_modified");
+
+    await waitFor(() =>
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+  });
 });

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

@@ -0,0 +1,128 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import QualityControlRoutes from "../QualityControlRoutes";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import {
+  QUALITY_CONTROLS_DEPRECATED,
+  QUALITY_CONTROLS_DRAFTS,
+  QUALITY_CONTROLS_PUBLISHED,
+  QUALITY_CONTROL_NEW,
+  QUALITY_CONTROL_EDIT,
+  QUALITY_CONTROL_NEW_DRAFT,
+  QUALITY_CONTROL,
+  QUALITY_CONTROL_HISTORY,
+  QUALITY_CONTROL_SCORES,
+} from "@truedat/core/routes";
+
+jest.mock("@truedat/core/hooks/useAuthorized", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+jest.mock("../QualityControls", () => () => <div>QualityControls</div>);
+jest.mock("../QualityControl", () => () => <div>QualityControl</div>);
+jest.mock("../QualityControlHeader", () => () => (
+  <div>QualityControlHeader</div>
+));
+jest.mock("../QualityControlHistory", () => () => (
+  <div>QualityControlHistory</div>
+));
+jest.mock("../QualityControlScores", () => () => (
+  <div>QualityControlScores</div>
+));
+jest.mock("../NewQualityControl", () => () => <div>NewQualityControl</div>);
+jest.mock("../EditQualityControl", () => () => <div>EditQualityControl</div>);
+jest.mock("../NewDraftQualityControl", () => () => (
+  <div>NewDraftQualityControl</div>
+));
+
+describe("<QualityControlRoutes />", () => {
+  it("renders correctly with default route", async () => {
+    const rendered = render(<QualityControlRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with deprecated route", async () => {
+    const rendered = render(<QualityControlRoutes />, {
+      routes: [QUALITY_CONTROLS_DEPRECATED],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with drafts route", async () => {
+    const rendered = render(<QualityControlRoutes />, {
+      routes: [QUALITY_CONTROLS_DRAFTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with new route", async () => {
+    const rendered = render(<QualityControlRoutes />, {
+      routes: [QUALITY_CONTROL_NEW],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with edit route", async () => {
+    const rendered = render(<QualityControlRoutes />, {
+      routes: [
+        QUALITY_CONTROL_EDIT.replace(":id", "123").replace(":version", "1"),
+      ],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with new draft route", async () => {
+    const rendered = render(<QualityControlRoutes />, {
+      routes: [
+        QUALITY_CONTROL_NEW_DRAFT.replace(":id", "123").replace(
+          ":version",
+          "1"
+        ),
+      ],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with quality control route", async () => {
+    const rendered = render(<QualityControlRoutes />, {
+      routes: [QUALITY_CONTROL.replace(":id", "123").replace(":version", "1")],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with history route", async () => {
+    const rendered = render(<QualityControlRoutes />, {
+      routes: [
+        QUALITY_CONTROL_HISTORY.replace(":id", "123").replace(":version", "1"),
+      ],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with scores route", async () => {
+    const rendered = render(<QualityControlRoutes />, {
+      routes: [
+        QUALITY_CONTROL_SCORES.replace(":id", "123").replace(":version", "1"),
+      ],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    useAuthorized.mockReturnValueOnce(false);
+    const rendered = render(<QualityControlRoutes />, {
+      routes: [QUALITY_CONTROLS_PUBLISHED],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+});