@truedat/qx 7.5.9 → 7.5.10

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({
@@ -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,4 +1,4 @@
-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";
@@ -10,7 +10,7 @@ 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");
 
@@ -23,9 +23,9 @@ export default function ScoreCriteria() {
 
   return controlMode ? (
     <Segment>
-      <QxContext.Provider value={{ ...context, field: "score_criteria" }}>
+      <QxContext value={{ ...context, field: "score_criteria" }}>
         {scoreCriteriaForMode[controlMode]}
-      </QxContext.Provider>
+      </QxContext>
     </Segment>
   ) : null;
 }

package/src/components/qualityControls/ScoreCriteriaView.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, Segment, List } from "semantic-ui-react";

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

@@ -1,9 +1,9 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
+import { render, waitForLoad } from "@truedat/test/render";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
-import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import ControlProperties, { defaultForMode } from "../ControlProperties";
 
 const dataSet = {
@@ -11,6 +11,7 @@ const dataSet = {
   name: "dataset1",
   headers: ["campo1", "campo2"],
 };
+
 const referenceDatasetsMock = {
   request: { query: REFERENCE_DATASETS_HEADERS_QUERY },
   result: { data: { referenceDatasets: [dataSet], loading: false } },
@@ -19,7 +20,6 @@ const referenceDatasetsMock = {
 const renderOpts = {
   mocks: [referenceDatasetsMock],
   messages,
-  fallback: "lazy",
 };
 
 const defaultValues = {
@@ -35,17 +35,14 @@ const defaultValues = {
 
 describe("<ControlProperties />", () => {
   it("matches the latest snapshot with ratio", async () => {
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper defaultValues={defaultValues}>
         <ControlProperties />
       </TestFormWrapper>,
       renderOpts
     );
-
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot with count", async () => {
@@ -53,16 +50,14 @@ describe("<ControlProperties />", () => {
       ...defaultValues,
       control_mode: "count",
     };
-    const { container } = render(
+    const rendered = render(
       <TestFormWrapper defaultValues={countDefaultValues}>
         <ControlProperties />
       </TestFormWrapper>,
       renderOpts
     );
-    await waitFor(() =>
-      expect(container.querySelector(".loader")).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";