@truedat/dq 7.5.7 → 7.5.10

package/src/components/RuleRoutes.js

@@ -1,9 +1,11 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Route, useRouteMatch } from "react-router-dom";
+import { Routes, Route } from "react-router";
+import { useParams } from "react-router";
 import { connect } from "react-redux";
 import { Segment } from "semantic-ui-react";
+import { ProtectedRoute, Loader } from "@truedat/core/router";
 import {
   RULE,
   RULE_EDIT,
@@ -27,21 +29,20 @@ import RuleLoader from "./RuleLoader";
 import RuleProperties from "./RuleProperties";
 import RuleSubscriptionLoader from "./RuleSubscriptionLoader";
 
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
+const DynamicFormViewer = React.lazy(
+  () => import("@truedat/df/components/DynamicFormViewer")
 );
-const EventsLoader = React.lazy(() =>
-  import("@truedat/audit/components/EventsLoader")
+const EventsLoader = React.lazy(
+  () => import("@truedat/audit/components/EventsLoader")
 );
-const TemplatesLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplatesLoader")
+const TemplatesLoader = React.lazy(
+  () => import("@truedat/core/components/TemplatesLoader")
 );
 
 const QualityTemplatesLoader = () => <TemplatesLoader scope="dq" />;
 
 const RuleEventsLoader = () => {
-  const match = useRouteMatch();
-  const id = _.path("params.id")(match);
+  const { id } = useParams();
   return <EventsLoader resource_id={id} resource_type="rule" />;
 };
 
@@ -53,86 +54,90 @@ export const RuleRoutes = ({
   template,
   templatesLoaded,
 }) => (
-  <Route
-    path={RULE}
-    render={() => (
-      <>
-        <RuleLoader />
+  <Routes>
+    <Route element={<Loader loaders={<RuleLoader />} />}>
+      <Route
+        index
+        element={
+          <>
+            <RuleCrumbs />
+            <Segment>
+              <Loader
+                loaders={
+                  <>
+                    <RuleSubscriptionLoader />
+                    <QualityTemplatesLoader />
+                    <RuleImplementationsFromRuleLoader />
+                  </>
+                }
+              />
+              {ruleLoaded ? <Rule /> : null}
+              {ruleLoaded ? <RuleProperties /> : null}
+              {templatesLoaded && template ? (
+                <DynamicFormViewer
+                  template={template}
+                  content={rule.dynamic_content}
+                />
+              ) : null}
+            </Segment>
+          </>
+        }
+      />
+      <Route path="edit" element={<EditRule />} />
+      <Route
+        path="events"
+        element={
+          <>
+            <RuleCrumbs />
+            <Segment>
+              <Loader loaders={<RuleEventsLoader />} />
+              {ruleLoaded ? <Rule /> : null}
+              {ruleLoaded ? <RuleEvents /> : null}
+            </Segment>
+          </>
+        }
+      />
+      <Route path="implementations">
         <Route
-          exact
-          path={RULE}
-          render={() => (
+          index
+          element={
             <>
               <RuleCrumbs />
               <Segment>
-                <RuleSubscriptionLoader />
-                <QualityTemplatesLoader />
-                <RuleImplementationsFromRuleLoader />
-                {ruleLoaded ? <Rule /> : null}
-                {ruleLoaded ? <RuleProperties /> : null}
-                {templatesLoaded && template ? (
-                  <DynamicFormViewer
-                    template={template}
-                    content={rule.dynamic_content}
-                  />
-                ) : null}
-              </Segment>
-            </>
-          )}
-        />
-        <Route exact path={RULE_EDIT} render={() => <EditRule />} />
-        <Route
-          exact
-          path={RULE_EVENTS}
-          render={() => (
-            <>
-              <RuleCrumbs />
-              <Segment>
-                <RuleEventsLoader />
-                {ruleLoaded ? <Rule /> : null}
-                {ruleLoaded ? <RuleEvents /> : null}
-              </Segment>
-            </>
-          )}
-        />
-        <Route
-          exact
-          path={RULE_IMPLEMENTATIONS}
-          render={() => (
-            <>
-              <RuleCrumbs />
-              <Segment>
-                <RuleSubscriptionLoader />
-                <RuleImplementationsFromRuleLoader />
+                <Loader
+                  loaders={
+                    <>
+                      <RuleSubscriptionLoader />
+                      <RuleImplementationsFromRuleLoader />
+                    </>
+                  }
+                />
                 {ruleLoaded ? <Rule /> : null}
                 {ruleLoaded ? <RuleFormImplementations /> : null}
               </Segment>
             </>
-          )}
+          }
         />
         <Route
-          exact
-          path={RULE_IMPLEMENTATION_NEW}
-          render={() =>
+          path="new"
+          element={
             structuresAliasesLoading || systemsLoading ? null : ruleLoaded ? (
               <NewRuleImplementation />
             ) : null
           }
         />
         <Route
-          exact
-          path={RULE_IMPLEMENTATION_NEW_RAW}
-          render={() =>
+          path="new_raw"
+          element={
             structuresAliasesLoading || systemsLoading ? null : ruleLoaded ? (
               <NewRuleImplementation implementationType="raw" />
             ) : null
           }
         />
-      </>
-    )}
-  />
+      </Route>
+    </Route>
+  </Routes>
 );
-
 RuleRoutes.propTypes = {
   rule: PropTypes.object,
   ruleLoaded: PropTypes.bool,

package/src/components/RuleRow.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Checkbox, Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
@@ -24,7 +23,7 @@ export const RuleRow = ({ columns, rule, checked, onChange, showChecks }) => (
 );
 
 RuleRow.propTypes = {
-  columns: PropTypes.array
+  columns: PropTypes.array,
 };
 
 export default RuleRow;

package/src/components/RuleSelectionForm.js

@@ -1,5 +1,4 @@
 import { toString } from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useForm } from "react-hook-form";
 import { useIntl } from "react-intl";

package/src/components/RuleSelector.js

@@ -1,5 +1,4 @@
 import { flow, map, sortBy } from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { gql, useQuery } from "@apollo/client";
 import { Controller } from "react-hook-form";

package/src/components/RuleSubscriptionLoader.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import {
   clearSubscriptionsSearch,
   searchSubscriptions,

package/src/components/RuleSummary.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Popup } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";

package/src/components/RuleTabs.js

@@ -1,11 +1,10 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Menu } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
-import { usePath } from "@truedat/core/hooks";
+import { useActiveRoute } from "@truedat/core/hooks";
 import {
   RULE,
   RULE_IMPLEMENTATIONS,
@@ -14,21 +13,23 @@ import {
 } from "@truedat/core/routes";
 
 const RuleTabs = ({ rule }) => {
-  const path = usePath();
+  const ruleActive = useActiveRoute(RULE);
+  const implementationsActive = useActiveRoute(RULE_IMPLEMENTATIONS);
+  const eventsActive = useActiveRoute(RULE_EVENTS);
   return _.isEmpty(rule) ? null : (
     <Menu attached="top" pointing secondary tabular>
-      <Menu.Item active={path === RULE} as={Link} to={linkTo.RULE(rule)}>
+      <Menu.Item active={ruleActive} as={Link} to={linkTo.RULE(rule)}>
         <FormattedMessage id="tabs.dq.rule" />
       </Menu.Item>
       <Menu.Item
-        active={path === RULE_IMPLEMENTATIONS}
+        active={implementationsActive}
         as={Link}
         to={linkTo.RULE_IMPLEMENTATIONS(rule)}
       >
         <FormattedMessage id="tabs.dq.ruleImplementations" />
       </Menu.Item>
       <Menu.Item
-        active={path === RULE_EVENTS}
+        active={eventsActive}
         as={Link}
         to={linkTo.RULE_EVENTS({
           id: rule.id,

package/src/components/Rules.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, injectIntl, useIntl } from "react-intl";
 import { connect } from "react-redux";
@@ -36,7 +36,7 @@ export const QualityHeader = () => {
   );
 };
 
-export class Rules extends React.Component {
+export class Rules extends Component {
   state = {
     sortedColumn: _.prop("column")(getSortInfo(this.props.rulesSort)),
     direction: _.prop("direction")(getSortInfo(this.props.rulesSort)),

package/src/components/RulesActions.js

@@ -1,7 +1,6 @@
-import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { RULE_NEW } from "@truedat/core/routes";

package/src/components/RulesLabelResults.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
@@ -21,12 +20,12 @@ export const RulesLabelResults = ({ ruleCount, rulesLoading }) => (
 
 RulesLabelResults.propTypes = {
   ruleCount: PropTypes.number,
-  rulesLoading: PropTypes.bool
+  rulesLoading: PropTypes.bool,
 };
 
 const mapStateToProps = ({ ruleCount, rulesLoading }) => ({
   ruleCount,
-  rulesLoading
+  rulesLoading,
 });
 
 export default connect(mapStateToProps)(RulesLabelResults);

package/src/components/RulesRoutes.js

@@ -1,5 +1,6 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
+import { lazy } from "react";
+import { Route, Routes } from "react-router";
+import { ProtectedRoute, Loader } from "@truedat/core/router";
 import { RULE_NEW, RULE, RULES } from "@truedat/core/routes";
 import NewRule from "./NewRule";
 import RuleFiltersLoader from "./RuleFiltersLoader";
@@ -7,29 +8,39 @@ import RuleRoutes from "./RuleRoutes";
 import Rules from "./Rules";
 import RulesLoader from "./RulesLoader";
 
-const UserSearchFiltersLoader = React.lazy(() =>
-  import("@truedat/dd/components/UserSearchFiltersLoader")
+const UserSearchFiltersLoader = lazy(
+  () => import("@truedat/dd/components/UserSearchFiltersLoader")
 );
 
 const RulesRoutes = () => (
-  <>
-    <Route path={RULES} component={RulesLoader} />
-    <Route path={RULES} component={RuleFiltersLoader} />
+  <Routes>
     <Route
-      exact
-      path={RULES}
-      render={() => (
-        <>
-          <UserSearchFiltersLoader scope="rule" />
-          <Rules />
-        </>
-      )}
-    />
-    <Switch>
-      <Route exact path={RULE_NEW} render={() => <NewRule />} />
-      <Route path={RULE} render={() => <RuleRoutes />} />
-    </Switch>
-  </>
+      element={
+        <Loader
+          loaders={
+            <>
+              <RulesLoader />
+              <RuleFiltersLoader />
+            </>
+          }
+        />
+      }
+    >
+      <Route
+        index
+        element={
+          <>
+            <UserSearchFiltersLoader scope="rule" />
+            <Rules />
+          </>
+        }
+      />
+      <Route path="new" element={<NewRule />} />
+      <Route path=":id/*" element={<RuleRoutes />} />
+    </Route>
+
+    <Route path="*" element={null} />
+  </Routes>
 );
 
 export default RulesRoutes;

package/src/components/RulesSearch.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";

package/src/components/RulesUploadButton.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button } from "semantic-ui-react";

package/src/components/Subscription.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect, Suspense } from "react";
+import { lazy, useState, useEffect, Suspense } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Form, Popup, Icon } from "semantic-ui-react";
@@ -10,8 +10,8 @@ import {
   updateSubscription,
 } from "@truedat/core/routines";
 
-const SubscriptionWatchForm = React.lazy(() =>
-  import("@truedat/audit/components/SubscriptionWatchForm")
+const SubscriptionWatchForm = lazy(
+  () => import("@truedat/audit/components/SubscriptionWatchForm")
 );
 
 export const SubscriptionContent = ({ subscription, setSubscription }) => {

package/src/components/TaxonomySummary.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 } from "semantic-ui-react";

package/src/components/__tests__/ConceptRules.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { ConceptRules } from "../ConceptRules";
 

package/src/components/__tests__/ConceptRulesLoader.spec.js

@@ -1,29 +1,26 @@
-import React from "react";
-import { mount } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ConceptRulesLoader } from "../ConceptRulesLoader";
 
 describe("<ConceptRulesLoader />", () => {
-  it("calls fetchConceptRules when component mounts but not when it unmounts", () => {
-    const props = {
-      clearConceptRules: jest.fn(),
-      fetchConceptRules: jest.fn(),
-      id: 123
-    };
-    const wrapper = mount(<ConceptRulesLoader {...props} />);
-    expect(props.fetchConceptRules.mock.calls.length).toBe(1);
-    wrapper.unmount();
-    expect(props.fetchConceptRules.mock.calls.length).toBe(1);
+  it("calls fetchConceptRules when component mounts but not when it unmounts", async () => {
+    const fetchConceptRules = jest.fn();
+    const clearConceptRules = jest.fn();
+    const props = { clearConceptRules, fetchConceptRules, id: 123 };
+    const rendered = render(<ConceptRulesLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(fetchConceptRules).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(fetchConceptRules).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearConceptRules when component unmounts but not when it mounts", () => {
-    const props = {
-      clearConceptRules: jest.fn(),
-      fetchConceptRules: jest.fn(),
-      id: 123
-    };
-    const wrapper = mount(<ConceptRulesLoader {...props} />);
-    expect(props.clearConceptRules.mock.calls.length).toBe(0);
-    wrapper.unmount();
-    expect(props.clearConceptRules.mock.calls.length).toBe(1);
+  it("calls clearConceptRules when component unmounts but not when it mounts", async () => {
+    const fetchConceptRules = jest.fn();
+    const clearConceptRules = jest.fn();
+    const props = { clearConceptRules, fetchConceptRules, id: 123 };
+    const rendered = render(<ConceptRulesLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(clearConceptRules).not.toHaveBeenCalled();
+    rendered.unmount();
+    expect(clearConceptRules).toHaveBeenCalledTimes(1);
   });
 });

package/src/components/__tests__/ConditionSummary.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { ConditionSummary } from "../ConditionSummary";
 

package/src/components/__tests__/EditRule.spec.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
+import { domainsMock } from "@truedat/test/mocks";
 import { EditRule } from "../EditRule";
 
 jest.mock("@truedat/bg/concepts/hooks/useConcepts", () => {
@@ -59,11 +59,14 @@ describe("<EditRule />", () => {
   };
   const props = { rule, updateRule };
 
+  const renderOpts = {
+    mocks: [domainsMock({ action: "manageQualityRule" })],
+  };
+
   it("matches the latest snapshot", async () => {
-    const { container, findByText } = render(<EditRule {...props} />, {
-      fallback: "lazy",
-    });
-    await findByText("Edit Quality Rule");
-    expect(container).toMatchSnapshot();
+    const rendered = render(<EditRule {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    await rendered.findByText(/quality.actions.edit/i);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/ExecutionForm.spec.js

@@ -1,6 +1,5 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import { multipleTemplatesMock } from "@truedat/test/mocks";
 import { ExecutionForm } from "../ExecutionForm";
 
@@ -15,19 +14,11 @@ describe("<ExecutionForm />", () => {
   };
   const renderOpts = {
     mocks: [multipleTemplatesMock({ scope: "qe" })],
-    fallback: "lazy",
   };
 
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(
-      <ExecutionForm {...props} />,
-      renderOpts
-    );
-
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    await waitFor(() =>
-      expect(queryByText(/loading/i)).not.toBeInTheDocument()
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<ExecutionForm {...props} />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/ExecutionGroup.spec.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import ExecutionGroup from "../ExecutionGroup";
 import { defaultExecutionGroupColumns } from "../../selectors";
 
@@ -51,12 +50,13 @@ const state = {
 const renderOpts = { state };
 
 describe("<ExecutionGroup />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<ExecutionGroup />, renderOpts);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ExecutionGroup />, renderOpts);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("defines custom columns", () => {
+  it("defines custom columns", async () => {
     const executionGroupColumns = [
       {
         name: "implementation.df_field",
@@ -70,13 +70,20 @@ describe("<ExecutionGroup />", () => {
       ...state,
     };
 
-    const { queryByText } = render(<ExecutionGroup />, {
+    const rendered = render(<ExecutionGroup />, {
       state: customColumnsState,
     });
-    expect(queryByText(/Identifier/)).toBeInTheDocument();
-    expect(queryByText(/foo/)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(
+      rendered.queryByText(/ruleImplementations.props.implementation_key/i)
+    ).toBeInTheDocument();
+    expect(rendered.queryByText(/foo/i)).toBeInTheDocument();
 
-    expect(queryByText(/implementation.df_field/)).toBeInTheDocument();
-    expect(queryByText(/implementation_df_value/)).toBeInTheDocument();
+    expect(
+      rendered.queryByText(/implementation.df_field/i)
+    ).toBeInTheDocument();
+    expect(
+      rendered.queryByText(/implementation_df_value/i)
+    ).toBeInTheDocument();
   });
 });

package/src/components/__tests__/ExecutionGroupBreadcrumbs.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import ExecutionGroupBreadcrumbs from "../ExecutionGroupBreadcrumbs";
 

package/src/components/__tests__/ExecutionGroupContent.spec.js

@@ -1,11 +1,9 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { multipleTemplatesMock } from "@truedat/test/mocks";
 import ExecutionGroupContent from "../ExecutionGroupContent";
 
 const renderOpts = {
-  fallback: "lazy",
   mocks: [multipleTemplatesMock({ scope: "qe" })],
   state: {},
 };

package/src/components/__tests__/ExecutionGroupLink.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import ExecutionGroupLink from "../ExecutionGroupLink";