@truedat/qx 7.4.0 → 7.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "7.4.0",
+  "version": "7.4.2",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.4.0",
+    "@truedat/test": "7.4.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -90,7 +90,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "7.4.0",
+    "@truedat/core": "7.4.2",
     "prop-types": "^15.8.1",
     "react-hook-form": "^7.45.4",
     "react-intl": "^5.20.10",
@@ -106,5 +106,5 @@
   "overrides": {
     "jsdom": "26.0.0"
   },
-  "gitHead": "65eb6322cc8478fd4c35f2268c8ac1a41e8f129d"
+  "gitHead": "bfc4801642aec7b29767605d30866b52f67aacce"
 }

package/src/api.js

@@ -2,7 +2,6 @@ const API_DATA_VIEW = "/api/data_views/:id";
 const API_DATA_VIEWS = "/api/data_views";
 const API_FUNCTION = "/api/quality_functions/:id";
 const API_FUNCTIONS = "/api/quality_functions";
-const API_QUALITY_CONTROL = "/api/quality_controls/:id";
 const API_QUALITY_CONTROL_DRAFT = "/api/quality_controls/:id/draft";
 const API_QUALITY_CONTROL_FILTERS = "/api/quality_controls/filters";
 const API_QUALITY_CONTROL_MAIN = "/api/quality_controls/:id/main";
@@ -10,6 +9,8 @@ const API_QUALITY_CONTROL_PUBLISHED = "/api/quality_controls/:id/published";
 const API_QUALITY_CONTROL_QUERIES = "/api/quality_controls/:id/queries";
 const API_QUALITY_CONTROL_SEARCH = "/api/quality_controls/search";
 const API_QUALITY_CONTROL_STATUS = "/api/quality_controls/:id/status";
+const API_QUALITY_CONTROL_VERSION =
+  "/api/quality_controls/:id/versions/:version";
 const API_QUALITY_CONTROL_VERSIONS = "/api/quality_controls/:id/versions";
 const API_QUALITY_CONTROLS = "/api/quality_controls";
 const API_SCORE_GROUPS_SEARCH = "/api/score_groups/search";
@@ -36,8 +37,8 @@ export {
   API_QUALITY_CONTROL_QUERIES,
   API_QUALITY_CONTROL_SEARCH,
   API_QUALITY_CONTROL_STATUS,
+  API_QUALITY_CONTROL_VERSION,
   API_QUALITY_CONTROL_VERSIONS,
-  API_QUALITY_CONTROL,
   API_QUALITY_CONTROLS,
   API_SCORE_GROUPS,
   API_SCORE_GROUP,

package/src/components/qualityControls/EditQualityControl.js

@@ -1,4 +1,3 @@
-import _ from "lodash/fp";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { useParams, useHistory } from "react-router-dom";
@@ -11,11 +10,13 @@ import {
 import QualityControlEditor from "./QualityControlEditor";
 
 export default function EditQualityControl() {
-  const { id } = useParams();
+  const { id, version } = useParams();
   const history = useHistory();
-
   const { trigger, isMutating } = useQualityControlUpdateDraft(id);
-  const { data, loading: qualityControlLoading } = useQualityControl(id);
+  const { data, loading: qualityControlLoading } = useQualityControl(
+    id,
+    version
+  );
   const qualityControl = data?.data;
   const loading = qualityControlLoading || isMutating;
 
@@ -25,9 +26,10 @@ export default function EditQualityControl() {
         ...qualityControl,
         status: "draft",
       },
-    }).then((data) => {
-      const id = _.prop("data.data.id")(data);
-      history.push(linkTo.QUALITY_CONTROL({ id }));
+    }).then(({ data }) => {
+      const id = data?.data?.id;
+      const version = data?.data?.version;
+      history.push(linkTo.QUALITY_CONTROL({ id, version }));
     });
   };
   return (

package/src/components/qualityControls/NewDraftQualityControl.js

@@ -11,11 +11,14 @@ import {
 import QualityControlEditor from "./QualityControlEditor";
 
 export default function NewDraftQualityControl() {
-  const { id } = useParams();
+  const { id, version } = useParams();
   const history = useHistory();
   const { trigger, isMutating } = useQualityControlCreateDraft(id);
 
-  const { data, loading: qualityControlLoading } = useQualityControl(id);
+  const { data, loading: qualityControlLoading } = useQualityControl(
+    id,
+    version
+  );
   const qualityControl = data?.data;
   const loading = qualityControlLoading || isMutating;
 
@@ -25,9 +28,10 @@ export default function NewDraftQualityControl() {
         ...qualityControl,
         status: "published",
       },
-    }).then((data) => {
-      const id = _.prop("data.data.id")(data);
-      history.push(linkTo.QUALITY_CONTROL({ id }));
+    }).then(({ data }) => {
+      const id = data?.data?.id;
+      const version = data?.data?.version;
+      history.push(linkTo.QUALITY_CONTROL({ id, version }));
     });
   const handleSave = (qualityControl) => {
     trigger({
@@ -35,9 +39,10 @@ export default function NewDraftQualityControl() {
         ...qualityControl,
         status: "draft",
       },
-    }).then((data) => {
-      const id = _.prop("data.data.id")(data);
-      history.push(linkTo.QUALITY_CONTROL({ id }));
+    }).then(({ data }) => {
+      const id = data?.data?.id;
+      const version = data?.data?.version;
+      history.push(linkTo.QUALITY_CONTROL({ id, version }));
     });
   };
   return (

package/src/components/qualityControls/NewQualityControl.js

@@ -23,9 +23,10 @@ export default function NewQualityControl() {
         ...qualityControl,
         status: "published",
       },
-    }).then((data) => {
-      const id = _.prop("data.data.id")(data);
-      history.push(linkTo.QUALITY_CONTROL({ id }));
+    }).then(({ data }) => {
+      const id = data?.data?.id;
+      const version = data?.data?.version;
+      history.push(linkTo.QUALITY_CONTROL({ id, version }));
     });
   };
   const handleSave = (qualityControl) => {
@@ -34,9 +35,10 @@ export default function NewQualityControl() {
         ...qualityControl,
         status: "draft",
       },
-    }).then((data) => {
-      const id = _.prop("data.data.id")(data);
-      history.push(linkTo.QUALITY_CONTROL({ id }));
+    }).then(({ data }) => {
+      const id = data?.data?.id;
+      const version = data?.data?.version;
+      history.push(linkTo.QUALITY_CONTROL({ id, version }));
     });
   };
 

package/src/components/qualityControls/QualityBadge.js

@@ -1,12 +1,15 @@
 import _ from "lodash/fp";
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import PropTypes from "prop-types";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Icon } from "semantic-ui-react";
 import IconPopup from "./IconPopup";
 import qualityByControlMode from "./qualityByControlMode";
 
 export default function QualityBadge({ score }) {
-  const quality = qualityByControlMode(score);
+  const { formatMessage } = useIntl();
+  const noResultsMessage = formatMessage({ id: "score.no_results" });
+  const quality = qualityByControlMode({ ...score, noResultsMessage });
 
   return quality.isFailed ? (
     <>
@@ -14,6 +17,11 @@ export default function QualityBadge({ score }) {
       <FormattedMessage id={"score.status.failed"} />
     </>
   ) : quality.isEmpty ? (
+    <>
+      <Icon inverted color="grey" />
+      <FormattedMessage id={"score.not_executed"} />
+    </>
+  ) : score.score_content.total_count == 0 ? (
     <>
       <Icon inverted color="grey" name="warning circle" />
       <FormattedMessage id={"score.no_results"} />
@@ -31,3 +39,78 @@ export default function QualityBadge({ score }) {
     </>
   );
 }
+QualityBadge.propTypes = {
+  score: PropTypes.object,
+};
+
+export const QualityBadgeForSearch = ({
+  latestScore,
+  criteria,
+  controlMode,
+}) => {
+  const color =
+    latestScore?.result_message === "meets_goal"
+      ? "green"
+      : latestScore?.result_message === "under_goal"
+      ? "yellow"
+      : latestScore?.result_message === "no_results"
+      ? "grey"
+      : "red";
+
+  const attrs =
+    controlMode == "percentage"
+      ? {
+          color: color,
+          label1: "quality_control.score_criteria.percentage.minimum",
+          value1: criteria.minimum,
+          label2: "quality_control.score_criteria.percentage.goal",
+          value2: criteria.goal,
+          text: `${latestScore.result}%`,
+        }
+      : controlMode == "deviation"
+      ? {
+          color: color,
+          label1: "quality_control.score_criteria.deviation.goal",
+          value1: criteria.goal,
+          label2: "quality_control.score_criteria.deviation.maximum",
+          value2: criteria.maximum,
+          text: `${latestScore.result}%`,
+        }
+      : {
+          color: color,
+          label1: "quality_control.score_criteria.error_count.goal",
+          value1: criteria?.goal,
+          label2: "quality_control.score_criteria.error_count.maximum",
+          value2: criteria?.maximum,
+          text: latestScore?.result,
+        };
+  return latestScore?.status === "failed" ? (
+    <>
+      <Icon color="red" name="warning circle" />
+      <FormattedMessage id={"score.status.failed"} />
+    </>
+  ) : _.prop("result_message")(latestScore) == "no_results" &&
+    _.isNil(latestScore?.result) ? (
+    <>
+      <Icon inverted color="grey" name="warning circle" />
+      <FormattedMessage id={"score.no_results"} />
+    </>
+  ) : !_.has("result")(latestScore) ? null : (
+    <>
+      <IconPopup
+        color={attrs.color}
+        label1={attrs.label1}
+        value1={attrs.value1}
+        label2={attrs.label2}
+        value2={attrs.value2}
+      />
+      {attrs.text}
+    </>
+  );
+};
+
+QualityBadgeForSearch.propTypes = {
+  controlMode: PropTypes.string,
+  latestScore: PropTypes.object,
+  criteria: PropTypes.object,
+};

package/src/components/qualityControls/QualityControlActions.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Link, useHistory } from "react-router-dom";
 import { Button, Container } from "semantic-ui-react";
-import { linkTo } from "@truedat/core/routes";
+import { linkTo, QUALITY_CONTROLS } from "@truedat/core/routes";
 import { useAuthorized } from "@truedat/core/hooks";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { useScoreGroupCreate } from "../../hooks/useScoreGroups";
@@ -13,10 +13,11 @@ import { ScoreGroupPopup } from "../scores";
 import {
   useQualityControlUpdateStatus,
   useQualityControlUpdateMain,
+  useQualityControlDelete,
 } from "../../hooks/useQualityControls";
 import QualityControlQueryModal from "./QualityControlQueryModal";
 
-export const ConfirmToggleActiveModal = ({ onConfirm, qualityControl }) => {
+const ConfirmToggleActiveModal = ({ onConfirm, qualityControl }) => {
   const { formatMessage } = useIntl();
   const { active, name } = qualityControl || {};
   const action = active ? "disable" : "enable";
@@ -48,6 +49,38 @@ ConfirmToggleActiveModal.propTypes = {
   onConfirm: PropTypes.func,
 };
 
+const ConfirmDeletionModal = ({ qualityControl, onConfirm }) => {
+  const icon = "trash alternate outline";
+  const { formatMessage } = useIntl();
+  const { name } = qualityControl || {};
+
+  return (
+    <ConfirmModal
+      icon={icon}
+      trigger={
+        <Button
+          icon={icon}
+          content={formatMessage({ id: `quality_controls.actions.delete` })}
+        />
+      }
+      header={formatMessage({
+        id: `quality_controls.actions.delete.confirmation.header`,
+      })}
+      size="small"
+      content={formatMessage(
+        { id: `quality_controls.actions.delete.confirmation.content` },
+        { name: <i>{name}</i> }
+      )}
+      onConfirm={() => onConfirm()}
+    />
+  );
+};
+
+ConfirmDeletionModal.propTypes = {
+  qualityControl: PropTypes.object,
+  onConfirm: PropTypes.func,
+};
+
 export default function QualityControlActions() {
   const history = useHistory();
   const { formatMessage } = useIntl();
@@ -62,6 +95,9 @@ export default function QualityControlActions() {
   const { trigger: triggerCreateScoreGroup, loading: groupCreating } =
     useScoreGroupCreate();
 
+  const { trigger: triggerDeleteQualityControl, isMutating: isDeleting } =
+    useQualityControlDelete(qualityControl);
+
   const updateStatus = (action) =>
     updateQualityControlStatus({ action }).then(() => mutate());
 
@@ -70,6 +106,9 @@ export default function QualityControlActions() {
       quality_control: { active: !qualityControl.active },
     }).then(() => mutate());
 
+  const confirmQualityControlDeletion = () =>
+    triggerDeleteQualityControl().then(() => history.push(QUALITY_CONTROLS));
+
   const canExecute = _.includes("execute")(actions);
 
   const availableActions = _.flow(
@@ -89,7 +128,7 @@ export default function QualityControlActions() {
       };
       const base = {
         key: action,
-        disabled: isMutating || isMutatingMain,
+        disabled: isMutating || isMutatingMain || isDeleting,
         icon: _.prop(action)(actionIcon),
       };
       switch (action) {
@@ -114,6 +153,13 @@ export default function QualityControlActions() {
             onConfirm: toggleActive,
             qualityControl: qualityControl,
           };
+        case "delete":
+          return {
+            ...base,
+            as: ConfirmDeletionModal,
+            onConfirm: confirmQualityControlDeletion,
+            qualityControl: qualityControl,
+          };
         default:
           return {
             ...base,
@@ -153,7 +199,10 @@ export default function QualityControlActions() {
           onSubmit={onCreateScoreGroup}
         />
       ) : null}
-      <GroupActions availableActions={availableActions} />
+      <GroupActions
+        availableActions={availableActions}
+        disabled={_.isEmpty(availableActions)}
+      />
     </Container>
   );
 }

package/src/components/qualityControls/QualityControlHeader.js

@@ -13,8 +13,8 @@ import QualityControlActions from "./QualityControlActions";
 import QualityControlTabs from "./QualityControlTabs";
 
 export default function QualityControlHeader({ children }) {
-  const { id } = useParams();
-  const { data, loading, mutate } = useQualityControl(id);
+  const { id, version } = useParams();
+  const { data, loading, mutate } = useQualityControl(id, version);
 
   const qualityControl = _.propOr({}, "data")(data);
   const actions = _.propOr([], "_actions")(data);

package/src/components/qualityControls/QualityControlHistory.js

@@ -5,6 +5,8 @@ import { Table } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { columnDecorator } from "@truedat/core/services";
 import { Loading } from "@truedat/core/components";
+import { Link } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
 import QxContext from "../QxContext";
 
 const translateDecorator = (id) =>
@@ -17,6 +19,10 @@ export default function QualityControlsHistory() {
   const columns = [
     {
       name: "name",
+      fieldSelector: _.pick(["quality_control_id", "version", "name"]),
+      fieldDecorator: ({ quality_control_id: id, version, name }) => (
+        <Link to={linkTo.QUALITY_CONTROL({ id, version })}>{name}</Link>
+      ),
     },
     {
       name: "version",

package/src/components/qualityControls/QualityControlRoutes.js

@@ -65,7 +65,9 @@ export default function QualityControlRoutes() {
         render={() => (
           <SearchContextProvider
             {...searchProps}
-            defaultFilters={{ status: "draft" }}
+            defaultFilters={{
+              status: ["draft", "pending_approval", "rejected"],
+            }}
           >
             <QualityControls />
           </SearchContextProvider>

package/src/components/qualityControls/QualityControlScores.js

@@ -77,12 +77,12 @@ export default function QualityControlScores() {
       </Table.Header>
       <Table.Body>
         {scoreRows.map((score, key) => {
-          const active =
-            score.quality_control.version === qualityControl.version;
+          const version = score.quality_control.version;
+          const active = version === qualityControl.version;
           const tagLabel = score.firstInVersion
             ? `${formatMessage({
                 id: "quality_control.props.version",
-              })}: ${score.quality_control.version}`
+              })}: ${version}`
             : null;
           return (
             <React.Fragment key={key}>
@@ -91,7 +91,7 @@ export default function QualityControlScores() {
                   <Table.Cell>
                     <Label
                       as={Link}
-                      to={linkTo.QUALITY_CONTROL_HISTORY({ id })}
+                      to={linkTo.QUALITY_CONTROL_HISTORY({ id, version })}
                       active={active}
                       ribbon
                     >

package/src/components/qualityControls/QualityControls.js

@@ -54,7 +54,7 @@ export const QualityControls = () => {
   const status = _.prop("status")(defaultFilters);
 
   const allChecked = () => {
-    const ids = _.map(_.prop("version_id"))(qualityControls);
+    const ids = _.map(_.prop("id"))(qualityControls);
     return (
       _.negate(_.isEmpty)(selectedQualityControls) &&
       _.every((id) => _.includes(id)(selectedQualityControls))(ids)
@@ -63,7 +63,7 @@ export const QualityControls = () => {
 
   const addAll = (_e, target) => {
     const checkedAll = _.prop("checked")(target);
-    const ids = _.map(_.prop("version_id"))(qualityControls);
+    const ids = _.map(_.prop("id"))(qualityControls);
     checkedAll
       ? setSelectedQualityControls(
           _.flow(_.concat(ids), _.uniq)(selectedQualityControls)
@@ -73,14 +73,14 @@ export const QualityControls = () => {
         );
   };
   const isRowChecked = (qualityControl) => {
-    const id = _.prop("version_id")(qualityControl);
+    const id = _.prop("id")(qualityControl);
     return _.some((selectedId) => _.eq(id, selectedId))(
       selectedQualityControls
     );
   };
 
   const checkRow = (qualityControl) => {
-    const id = _.prop("version_id")(qualityControl);
+    const id = _.prop("id")(qualityControl);
     const exists = _.some((selectedId) => _.eq(id, selectedId))(
       selectedQualityControls
     );

package/src/components/qualityControls/QualityControlsTable.js

@@ -8,6 +8,7 @@ import { linkTo } from "@truedat/core/routes";
 import Moment from "react-moment";
 
 import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { QualityBadgeForSearch } from "./QualityBadge";
 import QualityControlRow from "./QualityControlRow";
 
 const translateDecorator = (id) =>
@@ -27,10 +28,10 @@ DateDecorator.propTypes = {
 export const columns = [
   {
     name: "name",
-    sort: { name: "name.raw" },
-    fieldSelector: _.pick(["id", "name"]),
-    fieldDecorator: ({ id, name }) => (
-      <Link to={linkTo.QUALITY_CONTROL({ id })}>{name}</Link>
+    sort: { name: "name.sort" },
+    fieldSelector: _.pick(["quality_control_id", "version", "name"]),
+    fieldDecorator: ({ quality_control_id: id, version, name }) => (
+      <Link to={linkTo.QUALITY_CONTROL({ id, version })}>{name}</Link>
     ),
   },
   {
@@ -54,6 +55,18 @@ export const columns = [
       translateDecorator(`quality_control.status.${status}`),
     width: 2,
   },
+  {
+    name: "latest_score",
+    width: 2,
+    fieldSelector: _.pick(["latest_score", "score_criteria", "control_mode"]),
+    fieldDecorator: ({ latest_score, score_criteria, control_mode }) => (
+      <QualityBadgeForSearch
+        controlMode={control_mode}
+        latestScore={latest_score}
+        criteria={score_criteria}
+      />
+    ),
+  },
   {
     name: "updated_at",
     sort: { name: "updated_at" },

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

@@ -22,7 +22,7 @@ const mockHistory = { push: jest.fn() };
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
-  useParams: () => ({ id: "8" }),
+  useParams: () => ({ id: "8", version: "1" }),
   useHistory: () => mockHistory,
 }));
 
@@ -181,7 +181,7 @@ describe("<EditQualityControl />", () => {
 
   it("test save submit ", async () => {
     const trigger = jest.fn(() =>
-      Promise.resolve({ data: { data: { id: "9" } } })
+      Promise.resolve({ data: { data: { id: "9", version: "1" } } })
     );
 
     useQualityControlUpdateDraft.mockImplementation(() => ({

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

@@ -23,7 +23,7 @@ const mockHistory = { push: jest.fn() };
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
-  useParams: () => ({ id: "8" }),
+  useParams: () => ({ id: "8", version: "1" }),
   useHistory: () => mockHistory,
 }));
 
@@ -165,7 +165,7 @@ describe("<NewDraftQualityControl />", () => {
 
   it("test save submit ", async () => {
     const trigger = jest.fn(() =>
-      Promise.resolve({ data: { data: { id: "9" } } })
+      Promise.resolve({ data: { data: { id: "9", version: "1" } } })
     );
 
     useQualityControlCreateDraft.mockImplementation(() => ({
@@ -203,7 +203,7 @@ describe("<NewDraftQualityControl />", () => {
 
   it("test publish submit ", async () => {
     const trigger = jest.fn(() =>
-      Promise.resolve({ data: { data: { id: "9" } } })
+      Promise.resolve({ data: { data: { id: "9", version: "1" } } })
     );
 
     useQualityControlCreateDraft.mockImplementation(() => ({

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

@@ -135,7 +135,7 @@ describe("<NewQualityControl />", () => {
 
   it("test save submit ", async () => {
     const trigger = jest.fn(() =>
-      Promise.resolve({ data: { data: { id: "9" } } })
+      Promise.resolve({ data: { data: { id: "9", version: "1" } } })
     );
 
     useQualityControlCreate.mockImplementation(() => ({
@@ -283,7 +283,7 @@ describe("<NewQualityControl />", () => {
 
   it("test publish submit ", async () => {
     const trigger = jest.fn(() =>
-      Promise.resolve({ data: { data: { id: "9" } } })
+      Promise.resolve({ data: { data: { id: "9", version: "1" } } })
     );
 
     useQualityControlCreate.mockImplementation(() => ({