@truedat/qx 7.5.7 → 7.5.10

package/src/components/qualityControls/QualityControlActions.js

@@ -1,8 +1,9 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { use } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router";
+import { useNavigate } from "react-router";
 import { Button, Container, Icon } from "semantic-ui-react";
 import { linkTo, QUALITY_CONTROLS } from "@truedat/core/routes";
 import { useAuthorized } from "@truedat/core/hooks";
@@ -82,10 +83,10 @@ ConfirmDeletionModal.propTypes = {
 };
 
 export default function QualityControlActions() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { formatMessage } = useIntl();
   const authorized = useAuthorized();
-  const { qualityControl, actions, mutate } = useContext(QxContext);
+  const { qualityControl, actions, mutate } = use(QxContext);
   const { trigger: updateQualityControlStatus, isMutating } =
     useQualityControlUpdateStatus(qualityControl.id);
 
@@ -107,7 +108,7 @@ export default function QualityControlActions() {
     }).then(() => mutate());
 
   const confirmQualityControlDeletion = () =>
-    triggerDeleteQualityControl().then(() => history.push(QUALITY_CONTROLS));
+    triggerDeleteQualityControl().then(() => navigate(QUALITY_CONTROLS));
 
   const canExecute = _.includes("execute")(actions);
 
@@ -181,7 +182,7 @@ export default function QualityControlActions() {
       ids: [qualityControl.version_id],
     }).then(({ data }) => {
       const id = _.prop("data.id")(data);
-      history.push(linkTo.SCORE_GROUP({ id }));
+      navigate(linkTo.SCORE_GROUP({ id }));
     });
   };
 
@@ -190,7 +191,6 @@ export default function QualityControlActions() {
       {authorized ? (
         <QualityControlQueryModal qualityControlId={qualityControl.id} />
       ) : null}
-
       {qualityControl.active &&
       canExecute &&
       !_.includes(qualityControl.status)(["deprecated", "versioned"]) ? (

package/src/components/qualityControls/QualityControlCrumbs.js

@@ -1,7 +1,6 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { QUALITY_CONTROLS } from "@truedat/core/routes";
 
@@ -11,7 +10,6 @@ export default function QualityControlCrumbs({ qualityControl }) {
       <Breadcrumb.Section as={Link} to={QUALITY_CONTROLS} active={false}>
         <FormattedMessage id="quality_controls.header" />
       </Breadcrumb.Section>
-
       <Breadcrumb.Divider icon="right angle" />
       <Breadcrumb.Section active>{qualityControl.name}</Breadcrumb.Section>
     </Breadcrumb>

package/src/components/qualityControls/QualityControlEditor.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, Fragment } from "react";
+import { lazy, useState, Fragment } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Button, Container, Dropdown, Divider, Form } from "semantic-ui-react";
@@ -17,11 +17,11 @@ import ControlProperties, {
   defaultForMode as defaultControlPropertiesForMode,
 } from "./ControlProperties";
 
-const SelectableDynamicForm = React.lazy(() =>
-  import("@truedat/df/components/SelectableDynamicForm")
+const SelectableDynamicForm = lazy(
+  () => import("@truedat/df/components/SelectableDynamicForm")
 );
-const SourceSelector = React.lazy(() =>
-  import("@truedat/cx/sources/components/SourceSelector")
+const SourceSelector = lazy(
+  () => import("@truedat/cx/sources/components/SourceSelector")
 );
 
 export default function QualityControlEditor({
@@ -70,7 +70,7 @@ export default function QualityControlEditor({
     key: v,
     value: v,
     text: formatMessage({ id: `quality_control.control_mode.${v}` }),
-  }))(["percentage", "deviation", "error_count"]);
+  }))(["percentage", "deviation", "error_count", "count"]);
 
   return (
     <Fragment>
@@ -124,7 +124,6 @@ export default function QualityControlEditor({
               </FieldLabel>
             )}
           />
-
           <Controller
             control={control}
             name="name"
@@ -168,7 +167,6 @@ export default function QualityControlEditor({
               />
             )}
           />
-
           <Controller
             control={control}
             name="source_id"
@@ -176,7 +174,6 @@ export default function QualityControlEditor({
             render={({ field: { onChange, value } }) => (
               <Form.Field required>
                 <label>{formatMessage({ id: "dataViews.form.source" })}</label>
-
                 <SourceSelector
                   disabled={isModification}
                   value={value + ""}
@@ -185,7 +182,6 @@ export default function QualityControlEditor({
               </Form.Field>
             )}
           />
-
           <Controller
             name={"control_mode"}
             control={control}
@@ -218,10 +214,8 @@ export default function QualityControlEditor({
               </Form.Field>
             )}
           />
-
           <ScoreCriteria />
           <ControlProperties />
-
           <Divider hidden />
           <Container textAlign="right">
             {onPublish && allowedToPublish ? (

package/src/components/qualityControls/QualityControlHeader.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { useParams } from "react-router-dom";
+import { useParams, Outlet } from "react-router";
 import { Header, Icon, Segment, Grid, Label } from "semantic-ui-react";
 import { colorForStatus } from "@truedat/core/services/statusColor";
 
@@ -25,7 +24,7 @@ export default function QualityControlHeader({ children }) {
     : ["pause", "orange"];
 
   return (
-    <QxContext.Provider value={context}>
+    <QxContext value={context}>
       <QualityControlCrumbs qualityControl={qualityControl} />
       <Segment loading={loading}>
         {!_.isEmpty(qualityControl) ? (
@@ -36,7 +35,6 @@ export default function QualityControlHeader({ children }) {
                   <Icon circular name="archive" />
                   <Header.Content>
                     {qualityControl.name}
-
                     <Header.Subheader>
                       <div className="control-subheader">
                         <Label className="no-margin">
@@ -73,11 +71,11 @@ export default function QualityControlHeader({ children }) {
               />
             </Label>
             <QualityControlTabs />
-            {children}
+            {children ? children : <Outlet />}
           </>
         ) : null}
       </Segment>
-    </QxContext.Provider>
+    </QxContext>
   );
 }
 

package/src/components/qualityControls/QualityControlHistory.js

@@ -1,11 +1,11 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { use } from "react";
 import { FormattedMessage } from "react-intl";
 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 { Link } from "react-router";
 import { linkTo } from "@truedat/core/routes";
 import QxContext from "../QxContext";
 
@@ -13,7 +13,7 @@ const translateDecorator = (id) =>
   id ? <FormattedMessage id={id} defaultMessage={id} /> : null;
 
 export default function QualityControlsHistory() {
-  const { qualityControl, loading } = useContext(QxContext);
+  const { qualityControl, loading } = use(QxContext);
   const versions = _.propOr([], "versions")(qualityControl);
 
   const columns = [

package/src/components/qualityControls/QualityControlManageDomain.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import { use, useState } from "react";
 import PropTypes from "prop-types";
 import { Button, Container, Form, Header } from "semantic-ui-react";
 import { useForm, Controller } from "react-hook-form";
@@ -9,7 +9,7 @@ import { useQualityControlUpdateMain } from "../../hooks/useQualityControls";
 
 export default function QualityControlManageDomain({ handleOpen }) {
   const { formatMessage } = useIntl();
-  const { qualityControl, mutate } = useContext(QxContext);
+  const { qualityControl, mutate } = use(QxContext);
 
   const { trigger: updateMainQualityControl, isMutating: isMutatingMain } =
     useQualityControlUpdateMain(qualityControl.id);

package/src/components/qualityControls/QualityControlQueryModal.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import {
   Accordion,

package/src/components/qualityControls/QualityControlRoutes.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
+import { Route, Routes } from "react-router";
 import {
   QUALITY_CONTROLS_DEPRECATED,
   QUALITY_CONTROLS_DRAFTS,
@@ -34,84 +33,58 @@ export default function QualityControlRoutes() {
   };
 
   return (
-    <Switch>
+    <Routes>
       <Route
-        exact
-        path={QUALITY_CONTROLS_PUBLISHED}
-        render={() => (
+        index
+        element={
           <SearchContextProvider
             {...searchProps}
             defaultFilters={{ status: "published" }}
           >
             <QualityControls />
           </SearchContextProvider>
-        )}
+        }
       />
       <Route
-        exact
-        path={QUALITY_CONTROLS_DEPRECATED}
-        render={() => (
+        // QUALITY_CONTROLS_DEPRECATED = "/qualityControls/deprecated";
+        path="deprecated"
+        element={
           <SearchContextProvider
             {...searchProps}
             defaultFilters={{ status: "deprecated" }}
           >
             <QualityControls />
           </SearchContextProvider>
-        )}
+        }
       />
       <Route
-        exact
-        path={QUALITY_CONTROLS_DRAFTS}
-        render={() => (
+        path="drafts"
+        element={
           <SearchContextProvider
             {...searchProps}
-            defaultFilters={{
-              status: ["draft", "pending_approval", "rejected"],
-            }}
+            defaultFilters={{ status: "draft" }}
           >
             <QualityControls />
           </SearchContextProvider>
-        )}
+        }
       />
+      <Route path="new" element={<NewQualityControl />} />
       <Route
-        exact
-        path={QUALITY_CONTROL_NEW}
-        render={() => <NewQualityControl />}
+        path=":id/version/:version/edit"
+        element={<EditQualityControl />}
       />
       <Route
-        exact
-        path={QUALITY_CONTROL_EDIT}
-        render={() => <EditQualityControl />}
+        path=":id/version/:version/new_draft"
+        element={<NewDraftQualityControl />}
       />
-      <Route
-        exact
-        path={QUALITY_CONTROL_NEW_DRAFT}
-        render={() => <NewDraftQualityControl />}
-      />
-      <Route
-        path={QUALITY_CONTROL}
-        render={() => (
-          <QualityControlHeader>
-            <Switch>
-              <Route
-                exact
-                path={QUALITY_CONTROL}
-                render={() => <QualityControl />}
-              />
-              <Route
-                exact
-                path={QUALITY_CONTROL_HISTORY}
-                render={() => <QualityControlHistory />}
-              />
-              <Route
-                exact
-                path={QUALITY_CONTROL_SCORES}
-                render={() => <QualityControlScores />}
-              />
-            </Switch>
-          </QualityControlHeader>
-        )}
-      />
-    </Switch>
+
+      <Route path=":id/version/:version" element={<QualityControlHeader />}>
+        <Route index element={<QualityControl />} />
+
+        <Route path="history" element={<QualityControlHistory />} />
+
+        <Route path="scores" element={<QualityControlScores />} />
+      </Route>
+    </Routes>
   );
 }

package/src/components/qualityControls/QualityControlRow.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Checkbox, Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
@@ -22,7 +21,6 @@ export default function QualityControlRow({
           />
         </Table.Cell>
       ) : null}
-
       {columns.map((column, i) => (
         <Table.Cell
           key={i}

package/src/components/qualityControls/QualityControlScores.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { Fragment, useContext } from "react";
 import { useIntl } from "react-intl";
-import { useParams, Link } from "react-router-dom";
+import { useParams, Link } from "react-router";
 import { Button, Table, Label, Message, Icon } from "semantic-ui-react";
 import { ConfirmModal, Loading } from "@truedat/core/components";
 import { columnDecorator } from "@truedat/core/services";
@@ -85,7 +85,7 @@ export default function QualityControlScores() {
               })}: ${version}`
             : null;
           return (
-            <React.Fragment key={key}>
+            <Fragment key={key}>
               {tagLabel ? (
                 <Table.Row>
                   <Table.Cell>
@@ -125,13 +125,15 @@ export default function QualityControlScores() {
                         content={formatMessage({
                           id: "score.actions.delete.confirmation.content",
                         })}
-                        onConfirm={() => deleteScore(score).then(mutate)}
+                        onConfirm={() =>
+                          deleteScore({ id: `${score.id}` }).then(mutate)
+                        }
                       />
                     ) : null}
                   </Table.Cell>
                 ) : null}
               </Table.Row>
-            </React.Fragment>
+            </Fragment>
           );
         })}
       </Table.Body>

package/src/components/qualityControls/QualityControlTabs.js

@@ -1,6 +1,6 @@
-import React from "react";
 import { Menu } from "semantic-ui-react";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation } from "react-router";
+import { useParams } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 

package/src/components/qualityControls/QualityControls.js

@@ -1,7 +1,8 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router";
+import { useNavigate } from "react-router";
 import {
   Button,
   Checkbox,
@@ -25,7 +26,7 @@ import QualityControlsLabelResults from "./QualityControlsLabelResults";
 
 export const QualityControls = () => {
   const { formatMessage } = useIntl();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const { data } = useAuthorizedAction({
     action: "writeQualityControls",
@@ -132,7 +133,7 @@ export const QualityControls = () => {
 
     triggerCreateScoreGroup(body).then(({ data }) => {
       const id = _.prop("data.id")(data);
-      history.push(linkTo.SCORE_GROUP({ id }));
+      navigate(linkTo.SCORE_GROUP({ id }));
     });
   };
 
@@ -195,10 +196,11 @@ export const QualityControls = () => {
         qualityControlsToExecute={_.size(selectedQualityControls)}
       />
       <Dimmer.Dimmable dimmed={loading}>
-        <Dimmer active={loading} inverted>
-          <Loader />
-        </Dimmer>
-
+        {loading ? (
+          <Dimmer active inverted>
+            <Loader />
+          </Dimmer>
+        ) : null}
         <QualityControlsTable
           addAll={addAll}
           checkedAll={allChecked()}

package/src/components/qualityControls/QualityControlsLabelResults.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Label } from "semantic-ui-react";
@@ -22,7 +21,6 @@ export const QualityControlsLabelResults = ({
           />
         )}
       </Label>
-
       {!loading && executeQualityControlOn ? (
         <Label className="quality-controls-label-results">
           <FormattedMessage

package/src/components/qualityControls/QualityControlsPagination.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Pagination } from "@truedat/core/components";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
 

package/src/components/qualityControls/QualityControlsTable.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useIntl, FormattedMessage } from "react-intl";
 import { Checkbox, Table, Header, Icon } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";

package/src/components/qualityControls/ScoreCriteria.js

@@ -1,29 +1,31 @@
-import React, { useContext } from "react";
+import { use } from "react";
 import { useFormContext } from "react-hook-form";
 import { Segment } from "semantic-ui-react";
 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() {
   const { watch } = useFormContext();
-  const context = useContext(QxContext);
+  const context = use(QxContext);
 
   const controlMode = watch("control_mode");
 
   const scoreCriteriaForMode = {
     deviation: <Deviation />,
+    count: <Count />,
     error_count: <ErrorCount />,
     percentage: <Percentage />,
   };
 
   return controlMode ? (
     <Segment>
-      <QxContext.Provider value={{ ...context, field: "score_criteria" }}>
+      <QxContext value={{ ...context, field: "score_criteria" }}>
         {scoreCriteriaForMode[controlMode]}
-      </QxContext.Provider>
+      </QxContext>
     </Segment>
   ) : null;
 }
@@ -32,6 +34,8 @@ 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

@@ -1,14 +1,35 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, Segment, List } from "semantic-ui-react";
 
 export default function ScoreCriteriaView({ qualityControl }) {
   const { score_criteria, control_mode } = qualityControl;
+
   const scoreCriteriaForMode = {
-    percentage: <ScoreCriteriaPercentage scoreCriteria={score_criteria} />,
-    deviation: <ScoreCriteriaDeviation scoreCriteria={score_criteria} />,
-    error_count: <ScoreCriteriaErrorCount scoreCriteria={score_criteria} />,
+    percentage: (
+      <ScoreCriteriaContent
+        goal={`${score_criteria?.goal}%`}
+        threshold={`${score_criteria?.minimum}%`}
+      />
+    ),
+    deviation: (
+      <ScoreCriteriaContent
+        goal={`${score_criteria?.goal}%`}
+        threshold={`${score_criteria?.maximum}%`}
+      />
+    ),
+    error_count: (
+      <ScoreCriteriaContent
+        goal={score_criteria?.goal}
+        threshold={score_criteria?.maximum}
+      />
+    ),
+    count: (
+      <ScoreCriteriaContent
+        goal={score_criteria?.goal}
+        threshold={score_criteria?.maximum}
+      />
+    ),
   };
 
   return (
@@ -30,53 +51,11 @@ export default function ScoreCriteriaView({ qualityControl }) {
   );
 }
 
-const ScoreCriteriaPercentage = ({ scoreCriteria }) => (
-  <List>
-    <List.Item>
-      <Icon name="circle" color="green" />
-      <List.Content>
-        <List.Header>
-          <FormattedMessage id="quality.goal" />
-        </List.Header>
-        <List.Description>{scoreCriteria.goal}%</List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <Icon name="circle" color="yellow" />
-      <List.Content>
-        <List.Header>
-          <FormattedMessage id="quality.threshold" />
-        </List.Header>
-        <List.Description>{scoreCriteria.minimum}%</List.Description>
-      </List.Content>
-    </List.Item>
-  </List>
-);
-
-const ScoreCriteriaDeviation = ({ scoreCriteria }) => (
-  <List>
-    <List.Item>
-      <Icon name="circle" color="green" />
-      <List.Content>
-        <List.Header>
-          <FormattedMessage id="quality.goal" />
-        </List.Header>
-        <List.Description>{scoreCriteria.goal}%</List.Description>
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <Icon name="circle" color="yellow" />
-      <List.Content>
-        <List.Header>
-          <FormattedMessage id="quality.threshold" />
-        </List.Header>
-        <List.Description>{scoreCriteria.maximum}%</List.Description>
-      </List.Content>
-    </List.Item>
-  </List>
-);
+ScoreCriteriaView.propTypes = {
+  qualityControl: PropTypes.object,
+};
 
-const ScoreCriteriaErrorCount = ({ scoreCriteria }) => (
+const ScoreCriteriaContent = ({ goal, threshold }) => (
   <List>
     <List.Item>
       <Icon name="circle" color="green" />
@@ -84,7 +63,7 @@ const ScoreCriteriaErrorCount = ({ scoreCriteria }) => (
         <List.Header>
           <FormattedMessage id="quality.goal" />
         </List.Header>
-        <List.Description>{scoreCriteria.goal}</List.Description>
+        <List.Description>{goal}</List.Description>
       </List.Content>
     </List.Item>
     <List.Item>
@@ -93,12 +72,13 @@ const ScoreCriteriaErrorCount = ({ scoreCriteria }) => (
         <List.Header>
           <FormattedMessage id="quality.threshold" />
         </List.Header>
-        <List.Description>{scoreCriteria.maximum}</List.Description>
+        <List.Description>{threshold}</List.Description>
       </List.Content>
     </List.Item>
   </List>
 );
 
-ScoreCriteriaView.propTypes = {
-  qualityControl: PropTypes.object,
+ScoreCriteriaContent.propTypes = {
+  goal: PropTypes.string,
+  threshold: PropTypes.string,
 };