@truedat/qx 7.5.9 → 7.5.11

package/src/components/functions/__tests__/FunctionParams.spec.js

@@ -1,78 +1,76 @@
-import React from "react";
-import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import FunctionParams from "../FunctionParams";
 
-const renderOpts = {
-  messages,
-  fallback: "lazy",
-};
-
 describe("<FunctionParams />", () => {
   it("matches the latest snapshot without param", async () => {
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper>
         <FunctionParams />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot with param", async () => {
     const defaultValues = {
       params: [{ name: "param1", type: "boolean", id: 1 }],
     };
-    const { container, queryByText } = render(
+    const rendered = render(
       <TestFormWrapper defaultValues={defaultValues}>
         <FunctionParams />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
   it("user interaction", async () => {
     const watcher = jest.fn();
+    const user = userEvent.setup({ delay: null, skipHover: true });
 
     const testArgName = "test_arg_name";
     const testArgDescription = "test_arg_description";
 
-    const { queryByText, getByRole, getByPlaceholderText, getByText } = render(
+    const rendered = render(
       <TestFormWrapper watcher={watcher}>
         <FunctionParams />
-      </TestFormWrapper>,
-      renderOpts
+      </TestFormWrapper>
+    );
+    await waitForLoad(rendered);
+    await user.click(
+      rendered.getByRole("button", { name: /functions.form.add_param/i })
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    userEvent.click(getByRole("button", { name: /Add parameter/i }));
 
-    const argInput = getByPlaceholderText(/name/i);
-    const typeSelector = getByRole("listbox");
-    const stringOption = getByRole("option", { name: /string/i });
-    const descriptionInputLabel = getByText(/Add description/i);
+    const nameInput = () =>
+      rendered.queryByPlaceholderText("functions.form.name");
+    const descriptionInputLabel = () =>
+      rendered.getByText("functions.form.add_description");
 
-    await waitFor(() => expect(argInput).toBeInTheDocument());
-    await waitFor(() => expect(typeSelector).toBeInTheDocument());
-    await waitFor(() => expect(descriptionInputLabel).toBeInTheDocument());
+    const descriptionInput = () =>
+      rendered.getByPlaceholderText("functions.form.description");
+    const typeSelector = () => rendered.getByRole("listbox");
+    const stringOption = () =>
+      rendered.getByRole("option", { name: /string/i });
 
-    userEvent.click(typeSelector);
-    await waitFor(() => expect(descriptionInputLabel).toBeInTheDocument());
+    await waitFor(() => expect(nameInput()).toBeInTheDocument());
+    await waitFor(() => expect(typeSelector()).toBeInTheDocument());
+    await waitFor(() => expect(descriptionInputLabel()).toBeInTheDocument());
 
-    userEvent.click(stringOption);
+    await user.click(typeSelector());
+    await waitFor(() => expect(descriptionInputLabel()).toBeInTheDocument());
 
-    userEvent.type(argInput, testArgName);
+    await user.click(stringOption());
 
-    userEvent.click(descriptionInputLabel);
-    const descriptionInput = getByPlaceholderText(/description/i);
-    await waitFor(() => expect(descriptionInput).toBeInTheDocument());
+    await user.type(nameInput(), testArgName);
 
-    userEvent.type(descriptionInput, testArgDescription);
+    await user.click(descriptionInputLabel());
+    await waitFor(() => expect(descriptionInput()).toBeInTheDocument());
+
+    await user.type(descriptionInput(), testArgDescription);
 
     expect(watcher).toHaveBeenLastCalledWith({
       params: [
@@ -85,16 +83,21 @@ describe("<FunctionParams />", () => {
       ],
     });
 
-    userEvent.hover(argInput);
-    const deleteButton = getByRole("button", { name: /delete/i });
-    await waitFor(() => expect(deleteButton).toBeInTheDocument());
-    userEvent.unhover(argInput);
-    await waitFor(() => expect(deleteButton).not.toBeInTheDocument());
+    const deleteButton = () =>
+      rendered.queryByRole("button", { name: /delete/i });
+
+    await user.hover(nameInput());
+    await waitFor(() => expect(deleteButton()).toBeInTheDocument());
+
+    await user.unhover(nameInput());
+
+    await waitFor(() => expect(deleteButton()).not.toBeInTheDocument());
+
+    await user.hover(nameInput().parentElement);
+
+    await user.click(rendered.getByRole("button", { name: /delete/i }));
 
-    userEvent.hover(argInput);
-    const newDeleteButton = getByRole("button", { name: /delete/i });
-    userEvent.click(newDeleteButton);
-    await waitFor(() => expect(argInput).not.toBeInTheDocument());
+    await waitFor(() => expect(nameInput()).not.toBeInTheDocument());
 
     expect(watcher).toHaveBeenLastCalledWith({ params: [] });
   });

package/src/components/functions/__tests__/Functions.spec.js

@@ -1,7 +1,5 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import Functions from "../Functions";
 
 jest.mock("@truedat/qx/hooks/useFunctions", () => {
@@ -50,14 +48,9 @@ jest.mock("@truedat/qx/hooks/useFunctions", () => {
 });
 
 describe("<Functions />", () => {
-  const renderOpts = {
-    messages,
-    fallback: "lazy",
-  };
-
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(<Functions />, renderOpts);
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
+    const rendered = render(<Functions />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/functions/__tests__/__snapshots__/FunctionParams.spec.js.snap

@@ -37,7 +37,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                     >
                       <input
                         autocomplete="off"
-                        placeholder="Name"
+                        placeholder="functions.form.name"
                         type="text"
                         value="param1"
                       />
@@ -54,7 +54,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                           class="divider text"
                           role="alert"
                         >
-                          boolean
+                          expressions.data_type.boolean
                         </div>
                         <i
                           aria-hidden="true"
@@ -77,7 +77,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                             <span
                               class="text"
                             >
-                              boolean
+                              expressions.data_type.boolean
                             </span>
                           </div>
                           <div
@@ -94,7 +94,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                             <span
                               class="text"
                             >
-                              string
+                              expressions.data_type.string
                             </span>
                           </div>
                           <div
@@ -111,7 +111,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                             <span
                               class="text"
                             >
-                              number
+                              expressions.data_type.number
                             </span>
                           </div>
                           <div
@@ -128,7 +128,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                             <span
                               class="text"
                             >
-                              date
+                              expressions.data_type.date
                             </span>
                           </div>
                           <div
@@ -145,7 +145,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                             <span
                               class="text"
                             >
-                              timestamp
+                              expressions.data_type.timestamp
                             </span>
                           </div>
                           <div
@@ -162,7 +162,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                             <span
                               class="text"
                             >
-                              any
+                              expressions.data_type.any
                             </span>
                           </div>
                         </div>
@@ -184,7 +184,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                     style="font-style: italic; font-size: 13px; padding: 9.5px 14px;"
                     tabindex="0"
                   >
-                    Add description
+                    functions.form.add_description
                   </a>
                 </div>
               </div>
@@ -200,7 +200,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
       <button
         class="ui button"
       >
-        Add parameter
+        functions.form.add_param
       </button>
     </div>
   </div>
@@ -220,7 +220,7 @@ exports[`<FunctionParams /> matches the latest snapshot without param 1`] = `
       <button
         class="ui button"
       >
-        Add parameter
+        functions.form.add_param
       </button>
     </div>
   </div>

package/src/components/functions/__tests__/__snapshots__/Functions.spec.js.snap

@@ -15,11 +15,11 @@ exports[`<Functions /> matches the latest snapshot 1`] = `
       <div
         class="content"
       >
-        Quality Functions
+        functions.header
         <div
           class="sub header"
         >
-          List and edit quality functions
+          functions.subheader
         </div>
       </div>
     </h2>
@@ -32,7 +32,7 @@ exports[`<Functions /> matches the latest snapshot 1`] = `
         <button
           class="ui fluid button"
         >
-          New function
+          functions.action.new
         </button>
         <div
           class="ui divided selection list"
@@ -54,7 +54,6 @@ exports[`<Functions /> matches the latest snapshot 1`] = `
                 >
                   b
                 </div>
-                 
                 user_false
                 /
                 0
@@ -76,7 +75,7 @@ exports[`<Functions /> matches the latest snapshot 1`] = `
           <div
             class="sub header"
           >
-            No function selected
+            functions.no_selection
           </div>
         </h2>
       </div>

package/src/components/qualityControls/ControlProperties.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";
@@ -7,7 +7,7 @@ import Ratio from "./controlProperties/Ratio";
 
 export default function ControlProperties() {
   const { watch } = useFormContext();
-  const context = useContext(QxContext);
+  const context = use(QxContext);
 
   const { control_mode: controlMode, source_id: sourceId } = watch();
 
@@ -20,9 +20,9 @@ export default function ControlProperties() {
 
   return controlMode && sourceId ? (
     <Segment>
-      <QxContext.Provider value={{ ...context, field: "control_properties" }}>
+      <QxContext value={{ ...context, field: "control_properties" }}>
         {componentForMode[controlMode]}
-      </QxContext.Provider>
+      </QxContext>
     </Segment>
   ) : null;
 }

package/src/components/qualityControls/ControlPropertiesView.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, Segment, List, Label } from "semantic-ui-react";

package/src/components/qualityControls/EditQualityControl.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { FormattedMessage } from "react-intl";
-import { useParams, useHistory } from "react-router-dom";
+import { useParams, useNavigate } from "react-router";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
 import {
@@ -11,7 +10,8 @@ import QualityControlEditor from "./QualityControlEditor";
 
 export default function EditQualityControl() {
   const { id, version } = useParams();
-  const history = useHistory();
+  const navigate = useNavigate();
+
   const { trigger, isMutating } = useQualityControlUpdateDraft(id);
   const { data, loading: qualityControlLoading } = useQualityControl(
     id,
@@ -29,7 +29,7 @@ export default function EditQualityControl() {
     }).then(({ data }) => {
       const id = data?.data?.id;
       const version = data?.data?.version;
-      history.push(linkTo.QUALITY_CONTROL({ id, version }));
+      navigate(linkTo.QUALITY_CONTROL({ id, version }));
     });
   };
   return (
@@ -49,7 +49,7 @@ export default function EditQualityControl() {
             isModification
             value={qualityControl}
             onSave={handleSubmit}
-            onCancel={() => history.push(QUALITY_CONTROLS)}
+            onCancel={() => navigate(QUALITY_CONTROLS)}
             isSubmitting={loading}
           />
         ) : null}

package/src/components/qualityControls/IconPopup.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { FormattedMessage } from "react-intl";
 import { Icon, Popup, Header, List, ListItem } from "semantic-ui-react";
 

package/src/components/qualityControls/NewDraftQualityControl.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
 import { FormattedMessage } from "react-intl";
-import { useParams, useHistory } from "react-router-dom";
+import { useParams, useNavigate } from "react-router";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
 import {
@@ -12,7 +11,8 @@ import QualityControlEditor from "./QualityControlEditor";
 
 export default function NewDraftQualityControl() {
   const { id, version } = useParams();
-  const history = useHistory();
+  const navigate = useNavigate();
+
   const { trigger, isMutating } = useQualityControlCreateDraft(id);
 
   const { data, loading: qualityControlLoading } = useQualityControl(
@@ -31,8 +31,9 @@ export default function NewDraftQualityControl() {
     }).then(({ data }) => {
       const id = data?.data?.id;
       const version = data?.data?.version;
-      history.push(linkTo.QUALITY_CONTROL({ id, version }));
+      navigate(linkTo.QUALITY_CONTROL({ id, version }));
     });
+
   const handleSave = (qualityControl) => {
     trigger({
       quality_control: {
@@ -42,9 +43,10 @@ export default function NewDraftQualityControl() {
     }).then(({ data }) => {
       const id = data?.data?.id;
       const version = data?.data?.version;
-      history.push(linkTo.QUALITY_CONTROL({ id, version }));
+      navigate(linkTo.QUALITY_CONTROL({ id, version }));
     });
   };
+
   return (
     <Segment floated="left" loading={loading}>
       <Container text>
@@ -63,7 +65,7 @@ export default function NewDraftQualityControl() {
             value={qualityControl}
             onPublish={handlePublish}
             onSave={handleSave}
-            onCancel={() => history.push(QUALITY_CONTROLS)}
+            onCancel={() => navigate(QUALITY_CONTROLS)}
             isSubmitting={loading}
           />
         ) : null}

package/src/components/qualityControls/NewQualityControl.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
 import { FormattedMessage } from "react-intl";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
 import { useQualityControlCreate } from "../../hooks/useQualityControls";
@@ -14,7 +13,7 @@ export const defaultQualityControl = {
   df_type: null,
 };
 export default function NewQualityControl() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { trigger, isMutating } = useQualityControlCreate();
 
   const handlePublish = (qualityControl) => {
@@ -26,7 +25,7 @@ export default function NewQualityControl() {
     }).then(({ data }) => {
       const id = data?.data?.id;
       const version = data?.data?.version;
-      history.push(linkTo.QUALITY_CONTROL({ id, version }));
+      navigate(linkTo.QUALITY_CONTROL({ id, version }));
     });
   };
   const handleSave = (qualityControl) => {
@@ -38,7 +37,7 @@ export default function NewQualityControl() {
     }).then(({ data }) => {
       const id = data?.data?.id;
       const version = data?.data?.version;
-      history.push(linkTo.QUALITY_CONTROL({ id, version }));
+      navigate(linkTo.QUALITY_CONTROL({ id, version }));
     });
   };
 
@@ -59,7 +58,7 @@ export default function NewQualityControl() {
           isModification={false}
           onPublish={handlePublish}
           onSave={handleSave}
-          onCancel={() => history.push(QUALITY_CONTROLS)}
+          onCancel={() => navigate(QUALITY_CONTROLS)}
           isSubmitting={isMutating}
         />
       </Container>

package/src/components/qualityControls/QualityBadge.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Icon } from "semantic-ui-react";
@@ -52,10 +51,10 @@ export const QualityBadgeForSearch = ({
     latestScore?.result_message === "meets_goal"
       ? "green"
       : latestScore?.result_message === "under_goal"
-      ? "yellow"
-      : latestScore?.result_message === "no_results"
-      ? "grey"
-      : "red";
+        ? "yellow"
+        : latestScore?.result_message === "no_results"
+          ? "grey"
+          : "red";
 
   const attrs =
     controlMode == "percentage"
@@ -68,31 +67,31 @@ export const QualityBadgeForSearch = ({
           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}%`,
-        }
-      : controlMode == "error_count"
-      ? {
-          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,
-        }
-      : {
-          color: color,
-          label1: "quality_control.score_criteria.count.goal",
-          value1: criteria?.goal,
-          label2: "quality_control.score_criteria.count.maximum",
-          value2: criteria?.maximum,
-          text: latestScore?.result,
-        };
+        ? {
+            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}%`,
+          }
+        : controlMode == "error_count"
+          ? {
+              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,
+            }
+          : {
+              color: color,
+              label1: "quality_control.score_criteria.count.goal",
+              value1: criteria?.goal,
+              label2: "quality_control.score_criteria.count.maximum",
+              value2: criteria?.maximum,
+              text: latestScore?.result,
+            };
   return latestScore?.status === "failed" ? (
     <>
       <Icon color="red" name="warning circle" />

package/src/components/qualityControls/QualityControl.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext, useState } from "react";
+import { lazy, use, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { Button, Header, Icon, List, Label, Popup } from "semantic-ui-react";
 import { Loading } from "@truedat/core/components";
@@ -7,8 +7,8 @@ import QxContext from "../QxContext";
 import QualityControlManageDomain from "./QualityControlManageDomain";
 import ScoreCriteriaView from "./ScoreCriteriaView";
 import ControlPropertiesView from "./ControlPropertiesView";
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
+const DynamicFormViewer = lazy(
+  () => import("@truedat/df/components/DynamicFormViewer")
 );
 
 const DomainPopup = () => {
@@ -37,7 +37,7 @@ const DomainPopup = () => {
 };
 
 export default function QualityControl() {
-  const { qualityControl, actions, loading } = useContext(QxContext);
+  const { qualityControl, actions, loading } = use(QxContext);
   const canUpdateDomain = _.includes("update_main")(actions);
   return (
     <>
@@ -58,9 +58,7 @@ export default function QualityControl() {
               </List.Description>
             </List.Item>
           </List>
-
           <ScoreCriteriaView qualityControl={qualityControl} />
-
           {qualityControl.df_type ? (
             <>
               <Header as="h3">
@@ -77,7 +75,6 @@ export default function QualityControl() {
               />
             </>
           ) : null}
-
           <ControlPropertiesView qualityControl={qualityControl} />
         </>
       )}

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"]) ? (