@truedat/bg 7.5.9 → 7.5.11

package/src/taxonomy/components/DomainContent.js

@@ -1,10 +1,9 @@
 import _ from "lodash/fp";
 import React from "react";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
 import UserSearchFiltersLoader from "@truedat/dd/components/UserSearchFiltersLoader";
 import PropTypes from "prop-types";
-import { Route, Switch } from "react-router-dom/cjs/react-router-dom.min";
+import { Routes, Route } from "react-router";
+import { ProtectedRoute } from "@truedat/core/router";
 import {
   DOMAIN,
   DOMAIN_CONCEPTS,
@@ -21,99 +20,55 @@ import DomainImplementations from "./DomainImplementations";
 import DomainMembers from "./DomainMembers";
 import AddDomainMember from "./AddDomainMember";
 
-const RolesLoader = React.lazy(() =>
-  import("@truedat/auth/roles/components/RolesLoader")
+const RolesLoader = React.lazy(
+  () => import("@truedat/auth/roles/components/RolesLoader")
 );
 
-const DomainContent = ({
-  domain,
-  domains,
-  taxonomyConfig: { priorityTabs, hiddenTabs },
-}) => {
-  const ddAuthorized = useAuthorized("data_dictionary");
-  const dqAuthorized = useAuthorized("quality");
-
-  const routes = [
-    {
-      key: "subdomains",
-      path: DOMAIN_SUBDOMAINS,
-      component: <DomainCards domain={domain} domains={domains} />,
-    },
-    {
-      key: "concepts",
-      path: DOMAIN_CONCEPTS,
-      component: <DomainConcepts domain={domain} />,
-    },
-    {
-      key: "structures",
-      path: DOMAIN_STRUCTURES,
-      component: ddAuthorized ? (
-        <DomainStructures domain={domain} />
-      ) : (
-        <Unauthorized />
-      ),
-    },
-    {
-      key: "implementations",
-      path: DOMAIN_IMPLEMENTATIONS,
-      component: dqAuthorized ? (
-        <>
-          <UserSearchFiltersLoader scope="rule_implementation" />
-          <DomainImplementations domain={domain} />
-        </>
-      ) : (
-        <Unauthorized />
-      ),
-    },
-    {
-      key: "members",
-      path: DOMAIN_MEMBERS,
-      component: <DomainMembers domainId={domain.id} />,
-    },
-    {
-      key: "members-new",
-      path: DOMAIN_MEMBERS_NEW,
-      component: (
-        <>
-          <RolesLoader />
-          <AddDomainMember id={parseInt(domain.id)} />
-        </>
-      ),
-    },
-  ];
-
-  const getPaths = ({ key, path }) =>
-    _.cond([
-      [
-        (key) => !_.head(priorityTabs) && key === _.head(routes).key,
-        () => [path, DOMAIN],
-      ],
-      [(key) => key === _.head(priorityTabs), () => [path, DOMAIN]],
-      [_.stubTrue, () => path],
-    ])(key);
-
+const DomainContent = ({ domain, domains }) => {
   return (
-    <Switch>
-      {_.map((route) =>
-        _.includes(route.key, hiddenTabs) && false ? (
-          <Unauthorized key={route.key} />
-        ) : (
-          <Route
-            exact
-            key={route.key}
-            path={getPaths(route)}
-            render={() => route.component}
-          />
-        )
-      )(routes)}
-    </Switch>
+    <Routes>
+      <Route path="concepts" element={<DomainConcepts domain={domain} />} />
+
+      <Route
+        path="structures"
+        element={
+          <ProtectedRoute authorization="data_dictionary">
+            <DomainStructures domain={domain} />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="implementations"
+        element={
+          <ProtectedRoute authorization="quality">
+            <UserSearchFiltersLoader scope="rule_implementation" />
+            <DomainImplementations domain={domain} />
+          </ProtectedRoute>
+        }
+      />
+      <Route path="members">
+        <Route index element={<DomainMembers domainId={domain.id} />} />
+        <Route
+          path="new"
+          element={
+            <>
+              <RolesLoader />
+              <AddDomainMember id={parseInt(domain.id)} />
+            </>
+          }
+        />
+      </Route>
+      <Route
+        path="subdomains?"
+        element={<DomainCards domain={domain} domains={domains} />}
+      />
+    </Routes>
   );
 };
 
 DomainContent.propTypes = {
   domain: PropTypes.object,
   domains: PropTypes.array,
-  taxonomyConfig: PropTypes.object,
 };
 
 export default DomainContent;

package/src/taxonomy/components/DomainCrumbs.js

@@ -1,5 +1,5 @@
-import React, { Fragment } from "react";
-import { Link } from "react-router-dom";
+import { Fragment } from "react";
+import { Link } from "react-router";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
@@ -26,9 +26,9 @@ export const DomainCrumbs = ({ domain, actionCrumb }) => {
               <Breadcrumb.Section
                 key={i}
                 as={Link}
-                to={linkTo.DOMAIN({ id: parseInt(p) })}
+                to={linkTo.DOMAIN({ id: p })}
               >
-                {domains.find((d) => d.id === parseInt(p)).name}
+                {domains.find((d) => `${d.id}` === `${p}`).name}
               </Breadcrumb.Section>
             </Fragment>
           ))

package/src/taxonomy/components/DomainDetail.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Icon, Header, Grid, GridRow } from "semantic-ui-react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { FormattedMessage, useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import { DOMAINS_QUERY } from "@truedat/core/api/queries";
@@ -18,7 +17,7 @@ export const DomainDetail = ({ id }) => {
     variables: { action: "viewDomain", fetchPolicy: "no-cache" },
   });
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const { formatMessage } = useIntl();
 
   const available_actions = domain
@@ -45,9 +44,9 @@ export const DomainDetail = ({ id }) => {
     const { id, parent_id } = domain;
     await deleteDomain(id);
     if (parent_id) {
-      history.push(linkTo.DOMAIN_CONCEPTS({ id: parent_id }));
+      navigate(linkTo.DOMAIN_CONCEPTS({ id: parent_id }));
     } else {
-      history.push(linkTo.DOMAINS());
+      navigate(linkTo.DOMAINS());
     }
     client.resetStore();
   };

package/src/taxonomy/components/DomainForm.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Button, Form } from "semantic-ui-react";
 import { useIntl } from "react-intl";
@@ -49,7 +48,6 @@ const DEFAULTS = {
 
 export const DomainForm = ({ domain = {}, onSubmit }) => {
   const { data: domains } = useDomains();
-
   const { formatMessage } = useIntl();
   const { handleSubmit, control, formState, watch } = useForm({
     mode: "all",
@@ -59,6 +57,7 @@ export const DomainForm = ({ domain = {}, onSubmit }) => {
       domain_group: domain?.domain_group?.name || null,
     },
   });
+
   const [group, type] = watch(["domain_group", "type"]);
   const domainTypes = getDomainTypes(domains);
   const domainGroups = getDomainGroups(domains);
@@ -68,7 +67,6 @@ export const DomainForm = ({ domain = {}, onSubmit }) => {
     domain?.domain_group?.status === "root" || !domain?.domain_group;
 
   const { errors, isDirty, isValid } = formState;
-
   const parentableIds = domain.parentable_ids || [];
   const domainParentOptions =
     domain?.id && domains ? getDomainParentOptions(parentableIds)(domains) : [];

package/src/taxonomy/components/DomainImplementations.js

@@ -1,16 +1,16 @@
-import React from "react";
+import { lazy } from "react";
 import PropTypes from "prop-types";
 
-const ImplementationFiltersLoader = React.lazy(() =>
-  import("@truedat/dq/components/ImplementationFiltersLoader")
+const ImplementationFiltersLoader = lazy(
+  () => import("@truedat/dq/components/ImplementationFiltersLoader")
 );
 
-const ImplementationsLoader = React.lazy(() =>
-  import("@truedat/dq/components/RuleImplementationsLoader")
+const ImplementationsLoader = lazy(
+  () => import("@truedat/dq/components/RuleImplementationsLoader")
 );
 
-const ImplementationSearchResults = React.lazy(() =>
-  import("@truedat/dq/components/ImplementationSearchResults")
+const ImplementationSearchResults = lazy(
+  () => import("@truedat/dq/components/ImplementationSearchResults")
 );
 
 export const DomainImplementations = ({ domain = {} }) => {
@@ -18,6 +18,7 @@ export const DomainImplementations = ({ domain = {} }) => {
     taxonomy: [domain.id],
     status: ["published"],
   };
+
   return (
     <>
       <ImplementationFiltersLoader defaultFilters={defaultFilters} />

package/src/taxonomy/components/DomainItem.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { List, Icon } from "semantic-ui-react";
 
@@ -19,7 +18,7 @@ export const DomainItem = ({ domain, index, size }) => (
 DomainItem.propTypes = {
   domain: PropTypes.object,
   index: PropTypes.number,
-  size: PropTypes.number
+  size: PropTypes.number,
 };
 
 export default DomainItem;

package/src/taxonomy/components/DomainMembers.js

@@ -1,4 +1,3 @@
-import React from "react";
 import ResourceMembers from "@truedat/core/components/ResourceMembers";
 import PropTypes from "prop-types";
 

package/src/taxonomy/components/DomainRoutes.js

@@ -1,29 +1,23 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import { Routes, Route } from "react-router";
+import { ProtectedRoute } from "@truedat/core/router";
 import { DOMAINS, DOMAIN, DOMAINS_NEW } from "@truedat/core/routes";
 import NewDomain from "./NewDomain";
 import Domains from "./Domains";
 
 const DomainRoutes = () => (
-  <Switch>
-    <Route exact path={DOMAINS_NEW} render={() => <NewDomain />} />
-    <Route path={DOMAIN} render={() => <Domains />} />
-    <Route exact path={DOMAINS} render={() => <Domains />} />
-  </Switch>
-);
-
-const AuthorizedRoutes = () => <DomainRoutes />;
-
-const DomainsRoutes = () => {
-  const authorized = useAuthorized(["taxonomy", "taxonomy_membership"]);
-  return (
+  <Routes>
     <Route
-      path={DOMAINS}
-      render={() => (authorized ? <AuthorizedRoutes /> : <Unauthorized />)}
-    />
-  );
-};
+      path="domains"
+      element={
+        <ProtectedRoute authorization={["taxonomy", "taxonomy_membership"]} />
+      }
+    >
+      <Route index element={<Domains />} />
+      <Route path="new" element={<NewDomain />} />
+      <Route path=":id/*" element={<Domains />} />
+    </Route>
+  </Routes>
+);
 
-export default DomainsRoutes;
+export default DomainRoutes;

package/src/taxonomy/components/DomainSearch.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";

package/src/taxonomy/components/DomainStructures.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import StructuresView from "@truedat/dd/components/StructuresView";
 

package/src/taxonomy/components/DomainTabs.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 import { Menu } from "semantic-ui-react";
 import { compile } from "path-to-regexp";
 import { useAuthorized } from "@truedat/core/hooks";
@@ -88,11 +87,11 @@ const DomainTabs = ({
 
     const maybeAddMain =
       key === _.head(orderedTabs).key
-        ? _.concat([compile(DOMAIN)({ id })], tabUrls)
+        ? _.concat([compile(DOMAIN)({ id: `${id}` })], tabUrls)
         : tabUrls;
 
     return _.flow(
-      _.map((url) => compile(url)({ id })),
+      _.map((url) => compile(url)({ id: `${id}` })),
       _.some((url) => path === url)
     )(maybeAddMain);
   };

package/src/taxonomy/components/DomainTaxonomy.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { List } from "semantic-ui-react";
 import DomainItem from "./DomainItem";
@@ -24,7 +23,7 @@ export const DomainTaxonomy = ({ domain }) => {
 };
 
 DomainTaxonomy.propTypes = {
-  domain: PropTypes.object
+  domain: PropTypes.object,
 };
 
 export default DomainTaxonomy;

package/src/taxonomy/components/Domains.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -15,12 +15,13 @@ import {
 import { Loading } from "@truedat/core/components";
 import HierarchyNodeFinder from "@truedat/core/components/HierarchyNodeFinder";
 import { linkTo } from "@truedat/core/routes";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router";
 import searchImage from "assets/searching.png";
 import { useDomains } from "../../hooks/useDomains";
 import Domain from "./Domain";
 import DomainCrumbs from "./DomainCrumbs";
 import DomainCards from "./DomainCards";
+import DomainsActions from "./DomainsActions";
 
 export const Domains = ({ taxonomyConfig }) => {
   const { minDomainsListWidth, maxDomainsListWidth, defaultDomainsListWidth } =
@@ -31,14 +32,15 @@ export const Domains = ({ taxonomyConfig }) => {
     animated: defaultDomainsListWidth > 0,
   });
   const { formatMessage } = useIntl();
-  const history = useHistory();
+
+  const navigate = useNavigate();
   const { data: domains, actions, loading } = useDomains();
   const { id: urlId } = useParams();
   const domainId = !isNaN(parseInt(urlId)) ? parseInt(urlId) : undefined;
   const domain = _.find((d) => d.id == domainId)(domains);
 
   if (!loading && domainId && !domain) {
-    history.push(linkTo.DOMAINS());
+    navigate(linkTo.DOMAINS());
   }
 
   const EmptyImage = () => (
@@ -178,7 +180,15 @@ export const Domains = ({ taxonomyConfig }) => {
                         actions={actions}
                       />
                     ) : (
-                      <EmptyImage />
+                      <>
+                        <Header as="h4">
+                          <Header.Content className="taxonomy-domains-domaincards-header-content">
+                            <div></div>
+                            <DomainsActions actions={actions} />
+                          </Header.Content>
+                        </Header>
+                        <EmptyImage />
+                      </>
                     )}
                   </Grid.Row>
                 </Segment>

package/src/taxonomy/components/DomainsActions.js

@@ -1,14 +1,12 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button } from "semantic-ui-react";
 import { DOMAINS_NEW } from "@truedat/core/routes";
 
 export const DomainsActions = ({ actions }) => {
   const canCreate = !_.isEmpty(actions) && _.has("create")(actions);
-  const createUrl = () => DOMAINS_NEW;
   const { formatMessage } = useIntl();
   return (
     <>
@@ -18,7 +16,7 @@ export const DomainsActions = ({ actions }) => {
           content={formatMessage({ id: "domains.actions.create" })}
           icon="cube"
           as={Link}
-          to={createUrl}
+          to={DOMAINS_NEW}
         />
       ) : null}
     </>

package/src/taxonomy/components/EditDomain.js

@@ -1,9 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { linkTo } from "@truedat/core/routes";
 
 import { useQuery } from "@apollo/client";
@@ -14,7 +13,8 @@ import DomainForm from "./DomainForm";
 
 export const EditDomain = ({ domain }) => {
   const { trigger: updateDomain } = useDomainUpdate(domain.id);
-  const history = useHistory();
+
+  const navigate = useNavigate();
   const { client } = useQuery(DOMAINS_QUERY, {
     variables: { action: "viewDomain", fetchPolicy: "no-cache" },
   });
@@ -23,13 +23,13 @@ export const EditDomain = ({ domain }) => {
     await updateDomain({ domain: data });
     const response = await updateDomain({ domain: data });
     if (response?.data?.data) {
-      history.push(linkTo.DOMAIN_CONCEPTS({ id: response?.data?.data?.id }));
+      navigate(linkTo.DOMAIN_CONCEPTS({ id: response?.data?.data?.id }));
       client.resetStore();
     }
   };
 
   return _.isEmpty(domain) ? null : (
-    <Container as={Segment} text>
+    <Container text>
       <Header as="h2">
         <Icon name="cube" />
         <Header.Content>

package/src/taxonomy/components/NewDomain.js

@@ -1,10 +1,9 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import { useQuery } from "@apollo/client";
 import { DOMAINS_QUERY } from "@truedat/core/api/queries";
@@ -15,7 +14,8 @@ import DomainForm from "./DomainForm";
 
 export const NewDomain = ({ domain }) => {
   const { trigger: createDomain } = useDomainCreate();
-  const history = useHistory();
+
+  const navigate = useNavigate();
   const { client } = useQuery(DOMAINS_QUERY, {
     variables: { action: "viewDomain", fetchPolicy: "no-cache" },
   });
@@ -23,7 +23,7 @@ export const NewDomain = ({ domain }) => {
   const handleCreateDomain = async (data) => {
     const response = await createDomain({ domain: data });
     if (response?.data?.data) {
-      history.push(linkTo.DOMAIN_CONCEPTS({ id: response?.data?.data?.id }));
+      navigate(linkTo.DOMAIN_CONCEPTS({ id: response?.data?.data?.id }));
     }
     client.resetStore();
   };

package/src/taxonomy/components/__tests__/AddDomainMember.spec.js

@@ -1,12 +1,13 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { render, waitForLoad } from "@truedat/test/render";
 import AddDomainMember from "../AddDomainMember";
 
 const props = { id: 1 };
 
 describe("<AddDomainMember />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<AddDomainMember {...props} />);
-    expect(container).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<AddDomainMember {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });