@truedat/dd 7.5.9 → 7.5.11

package/src/components/StructuresRoutes.js

@@ -1,12 +1,8 @@
 import _ from "lodash/fp";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Route, Switch, useRouteMatch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import { Routes, Route, useParams } from "react-router";
 import {
-  BUCKETS_VIEW,
-  BUCKET_VIEW,
   STRUCTURE,
   STRUCTURES,
   STRUCTURES_BULK_UPDATE,
@@ -14,31 +10,24 @@ import {
   STRUCTURE_VERSION,
   STRUCTURE_MEMBERS_NEW,
 } from "@truedat/core/routes";
-import { connect } from "react-redux";
-import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
 import AddStructureMember from "./AddStructureMember";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureLoader from "./StructureLoader";
 import StructureView from "./StructureView";
-import BucketView from "./BucketView";
 import StructuresBulkUpdate from "./StructuresBulkUpdate";
 import StructuresView from "./StructuresView";
 
-const EventsLoader = React.lazy(() =>
-  import("@truedat/audit/components/EventsLoader")
+const RuleImplementationsLoader = React.lazy(
+  () => import("@truedat/dq/components/RuleImplementationsLoader")
 );
 
-const RuleImplementationsLoader = React.lazy(() =>
-  import("@truedat/dq/components/RuleImplementationsLoader")
-);
-
-const RolesLoader = React.lazy(() =>
-  import("@truedat/auth/roles/components/RolesLoader")
+const RolesLoader = React.lazy(
+  () => import("@truedat/auth/roles/components/RolesLoader")
 );
 
 const StructureImplementationsLoader = () => {
-  const match = useRouteMatch();
-  const id = _.path("params.id")(match);
+  const { id } = useParams();
   return (
     <RuleImplementationsLoader
       pageSize={1000}
@@ -46,91 +35,72 @@ const StructureImplementationsLoader = () => {
     />
   );
 };
-const StructureEventsLoader = () => {
-  const match = useRouteMatch();
-  const id = _.path("params.id")(match);
-  return <EventsLoader resource_id={id} resource_type="data_structure" />;
+
+const StructureMembersLoader = () => {
+  const { id } = useParams();
+  return (
+    <>
+      <RolesLoader />
+      <AddStructureMember id={id} />
+    </>
+  );
 };
 
-const AuthorizedRoutes = ({ view_quality }) => {
+const StructureBulkUpdateView = () => {
   const { formatMessage } = useIntl();
   return (
     <>
-      <Switch>
-        <Route
-          exact
-          path={BUCKETS_VIEW}
-          render={() => <StructuresView customView />}
-        />
-        <Route exact path={[BUCKET_VIEW]} render={() => <BucketView />} />
-
-        <Route exact path={STRUCTURES} render={() => <StructuresView />} />
-      </Switch>
-      <Route path={STRUCTURE_EVENTS} component={StructureEventsLoader} />
-      <Switch>
-        <Route
-          path={STRUCTURES_BULK_UPDATE}
-          render={() => (
-            <>
-              <StructureCrumbs
-                name={formatMessage({ id: "structures.bulkUpdate.crumbs.top" })}
-              />
-              <StructuresBulkUpdate />
-            </>
-          )}
-        />
-
-        <Route
-          path={[STRUCTURE_VERSION, STRUCTURE]}
-          render={() => {
-            return (
-              <>
-                <StructureLoader />
-                {view_quality ? <StructureImplementationsLoader /> : null}
-              </>
-            );
-          }}
-        />
-      </Switch>
-      <Switch>
-        <Route
-          path={STRUCTURE_MEMBERS_NEW}
-          render={({ match }) => (
-            <>
-              <RolesLoader />
-              <AddStructureMember id={parseInt(match?.params?.id)} />
-            </>
-          )}
-        />
-        <Route path={STRUCTURE} component={StructureView} />
-      </Switch>
+      <StructureCrumbs
+        name={formatMessage({ id: "structures.bulkUpdate.crumbs.top" })}
+      />
+      <StructuresBulkUpdate />
     </>
   );
 };
 
-AuthorizedRoutes.propTypes = { view_quality: PropTypes.bool };
-
-export const StructuresRoutes = ({ view_quality }) => {
-  const authorized = useAuthorized("data_dictionary");
+const StructureDetailLoader = () => {
+  const viewQuality = useSelector((state) => {
+    return state.userPermissions?.view_quality;
+  });
   return (
-    <Route
-      path={[STRUCTURES, BUCKET_VIEW, BUCKETS_VIEW]}
-      render={() =>
-        authorized ? (
-          <AuthorizedRoutes view_quality={view_quality} />
-        ) : (
-          <Unauthorized />
-        )
-      }
-    />
+    <>
+      <StructureLoader />
+      {viewQuality ? <StructureImplementationsLoader /> : null}
+    </>
   );
 };
 
-StructuresRoutes.propTypes = { view_quality: PropTypes.bool };
-
-const mapStateToProps = (state) => ({
-  view_quality: state.userPermissions.view_quality,
-  userPermissions: state.userPermissions,
-});
-
-export default connect(mapStateToProps)(StructuresRoutes);
+export default function StructuresRoutes() {
+  return (
+    <Routes>
+      <Route index element={<StructuresView />} />
+      <Route
+        path=":id/members/new"
+        element={
+          <>
+            <StructureDetailLoader />
+            <StructureMembersLoader />
+          </>
+        }
+      />
+      <Route
+        path=":id/*"
+        element={
+          <>
+            <StructureDetailLoader />
+            <StructureView />
+          </>
+        }
+      />
+      <Route
+        path="bulkUpdate"
+        element={
+          <>
+            <StructureBulkUpdateView />
+            <StructureView />
+          </>
+        }
+      />
+    </Routes>
+  );
+}

package/src/components/StructuresSearch.js

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

package/src/components/StructuresSearchResults.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Icon, Message, Dimmer, Loader } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";

package/src/components/StructuresTable.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
 import { Table } from "semantic-ui-react";
@@ -52,8 +51,7 @@ export const StructuresTable = ({
           : [selectedStructure, ...structures]
         : structures;
     const headerRow = (
-      <Table.Row>
-        {columns.map((column, key) => (
+      <Table.Row>{columns.map((column, key) => (
           <Table.HeaderCell
             key={key}
             content={
@@ -68,11 +66,9 @@ export const StructuresTable = ({
             onClick={() => handleSortSelection(_.path("sort.name")(column))}
             width={_.propOr(1, "width")(column)}
           />
-        ))}
-        {grantable && (
+        ))}{grantable && (
           <Table.HeaderCell textAlign="center">Request grant</Table.HeaderCell>
-        )}
-      </Table.Row>
+        )}</Table.Row>
     );
 
     const renderBodyRow = (s, i) => (

package/src/components/StructuresUpdateOption.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import PropTypes from "prop-types";
 import { connect, useDispatch } from "react-redux";
 import { Dropdown } from "semantic-ui-react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useIntl } from "react-intl";
 import { useAuthorized } from "@truedat/core/hooks";
 import { STRUCTURES_BULK_UPDATE } from "@truedat/core/routes";
@@ -18,7 +18,7 @@ export const StructuresUpdateOption = ({
 }) => {
   const { formatMessage } = useIntl();
   const authorized = useAuthorized();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [disabled, setDisabled] = useState(true);
   const setStructureQuery = useDispatch();
   const {
@@ -30,12 +30,12 @@ export const StructuresUpdateOption = ({
     filterParams: searchParams,
   } = useSearchContext();
 
-  const structures = _.propOr([], "data")(searchData);
   const actions = _.propOr({}, "_actions")(searchData);
 
   const types = _.prop("type.raw")(allActiveFilters);
 
   useEffect(() => {
+    const structures = _.propOr([], "data")(searchData);
     if (
       structuresLoading ||
       structureTypesLoading ||
@@ -55,7 +55,7 @@ export const StructuresUpdateOption = ({
       );
     }
   }, [
-    structures,
+    searchData,
     templates,
     types,
     structuresLoading,
@@ -64,7 +64,7 @@ export const StructuresUpdateOption = ({
     structureCount,
   ]);
 
-  const navigate = () => {
+  const navigateToBulkUpdate = () => {
     setStructureQuery(
       structureSearchQuery({
         structureCount,
@@ -73,14 +73,14 @@ export const StructuresUpdateOption = ({
         actions,
       })
     );
-    history.push(STRUCTURES_BULK_UPDATE);
+    navigate(STRUCTURES_BULK_UPDATE);
   };
 
   return (
     authorized && (
       <Dropdown.Item
         icon="refresh"
-        onClick={navigate}
+        onClick={navigateToBulkUpdate}
         disabled={disabled}
         content={
           <>

package/src/components/StructuresUploadEvents.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
@@ -27,9 +26,11 @@ export const StructuresUploadEvents = ({ structuresUploadEventsLoading }) => {
       <Dimmer.Dimmable dimmed={structuresUploadEventsLoading}>
         <Segment attached="bottom">
           <StructuresUploadEventsTable />
-          <Dimmer inverted active={structuresUploadEventsLoading}>
-            <Loader />
-          </Dimmer>
+          {structuresUploadEventsLoading ? (
+            <Dimmer active inverted>
+              <Loader />
+            </Dimmer>
+          ) : null}
         </Segment>
       </Dimmer.Dimmable>
     </Segment>

package/src/components/StructuresUploadEventsTable.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, Table } from "semantic-ui-react";
@@ -139,7 +139,7 @@ export const StructuresUploadEventsTable = ({
                           <FormattedMessage
                             id={`structures.bulkUploadEvents.props.csv_hash`}
                           />
-                          :&nbsp;{events[eventKey].hash}
+                          : {events[eventKey].hash}
                         </>
                       ) : null}
                       {columns.map((column, key) => (

package/src/components/StructuresUploadOption.js

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

package/src/components/StructuresView.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useRouteMatch } from "react-router-dom";
+import { useMatch } from "react-router";
 import { Header, Icon, Segment, Divider } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { BUCKETS_VIEW } from "@truedat/core/routes";
@@ -23,7 +22,7 @@ import CatalogCustomViewCards from "./CatalogCustomViewCards";
 
 const StructuresHeader = () => {
   const { formatMessage } = useIntl();
-  const match = useRouteMatch(BUCKETS_VIEW);
+  const match = useMatch(BUCKETS_VIEW);
   const propertyPathMessage = !match?.params?.propertyPath
     ? "structures.subheader"
     : match?.params?.propertyPath;
@@ -78,7 +77,6 @@ export const StructuresViewContent = ({ embedded, customView }) => {
           <SearchWidget dateFilter searchField="last_change_at" />
         </>
       ) : null}
-
       {hasFilterApplied || embedded ? (
         <StructuresSearchResults structures={structures} loading={loading} />
       ) : customView ? (

package/src/components/SystemCards.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Card, Icon, Image, Label, Table, Popup } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { FormattedMessage, FormattedNumber } from "react-intl";
@@ -110,7 +109,7 @@ export const SystemsPopup = ({ structures_count, structureTypes }) => {
                     id: `structure.type.${_.prop("name")(type)}.icon`,
                     defaultMessage: "question circle outline",
                   })}
-                ></Icon>
+                />
               </Table.Cell>
               <Table.Cell>
                 <FormattedMessage

package/src/components/SystemCreateOption.js

@@ -1,6 +1,5 @@
-import React from "react";
 import { Dropdown } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useIntl } from "react-intl";
 import { useAuthorized } from "@truedat/core/hooks";
 import { SYSTEM_NEW } from "@truedat/core/routes";

package/src/components/SystemCrumbs.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
-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 { STRUCTURES, linkTo } from "@truedat/core/routes";
 
@@ -40,7 +39,7 @@ export const SystemCrumbs = ({ system, action }) => {
 
 SystemCrumbs.propTypes = {
   system: PropTypes.object,
-  action: PropTypes.string
+  action: PropTypes.string,
 };
 
 export default SystemCrumbs;

package/src/components/SystemEditButton.js

@@ -1,7 +1,6 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Button } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { useAuthorized } from "@truedat/core/hooks";
 import { linkTo } from "@truedat/core/routes";
@@ -26,7 +25,7 @@ export const SystemEditButton = ({ system }) => {
 };
 
 SystemEditButton.propTypes = {
-  system: PropTypes.object
+  system: PropTypes.object,
 };
 
 export default SystemEditButton;

package/src/components/SystemFilteredNav.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { useStructures } from "../hooks/useStructures";
 import StructureNav from "./StructureNav";
 import StructureSearch from "./StructureSearch";

package/src/components/SystemForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { lazy, useState } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { connect } from "react-redux";
@@ -16,12 +16,10 @@ import { applyTemplate, validateContent } from "@truedat/df/utils";
 import { getSystemTemplate } from "../selectors";
 import { createSystem, updateSystem } from "../routines";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
-);
+const DynamicForm = lazy(() => import("@truedat/df/components/DynamicForm"));
 
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
+const TemplateLoader = lazy(
+  () => import("@truedat/df/templates/components/TemplateLoader")
 );
 
 export const SystemForm = ({

package/src/components/SystemLoader.js

@@ -1,7 +1,7 @@
 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 { clearSystem, fetchSystem } from "../routines";
 
 export const SystemLoader = ({ clearSystem, fetchSystem }) => {

package/src/components/SystemStructures.js

@@ -1,31 +1,31 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import { Grid, Segment } from "semantic-ui-react";
-import { useParams } from "react-router-dom";
-import { withRouter } from "react-router-dom";
-import { getSystem, getSystemTemplate } from "../selectors";
-import { saveNavFilter as saveNavFilterRoutine } from "../routines";
+import { useParams } from "react-router";
+import { getSystem } from "../selectors";
+import { saveNavFilter } from "../routines";
 import FilteredNav from "./FilteredNav";
 import SystemCrumbs from "./SystemCrumbs";
 import SystemView from "./SystemView";
 
-export const SystemStructures = ({
-  navFilter,
-  saveNavFilter,
-  system,
-  systemStructuresLoading,
-  systemTemplate,
-}) => {
+export default function SystemStructures() {
   const { id: systemId } = useParams();
+  const dispatch = useDispatch();
+
+  const { navFilter, systemStructuresLoading } = useSelector(
+    _.pick(["navFilter", "systemStructuresLoading"])
+  );
+  const system = useSelector((state) => getSystem(state, systemId));
 
   useEffect(() => {
-    saveNavFilter({
-      view: "SYSTEM_STRUCTURES",
-      filter: { system_id: systemId },
-    });
-  }, [systemId, saveNavFilter]);
+    dispatch(
+      saveNavFilter({
+        view: "SYSTEM_STRUCTURES",
+        filter: { system_id: systemId },
+      })
+    );
+  }, [systemId]);
 
   return (
     !systemStructuresLoading && (
@@ -44,33 +44,10 @@ export const SystemStructures = ({
             </Segment>
           </Grid.Column>
           <Grid.Column width={12}>
-            <SystemView system={system} systemTemplate={systemTemplate} />
+            <SystemView system={system} />
           </Grid.Column>
         </Grid.Row>
       </Grid>
     )
   );
-};
-
-SystemStructures.propTypes = {
-  navFilter: PropTypes.object,
-  saveNavFilter: PropTypes.func,
-  system: PropTypes.object,
-  systemStructuresLoading: PropTypes.bool,
-  systemTemplate: PropTypes.object,
-};
-
-const mapStateToProps = (state, props) => {
-  return {
-    navFilter: state?.navFilter,
-    system: getSystem(state, props.match.params.id),
-    systemStructuresLoading: _.prop("systemStructuresLoading")(state),
-    systemTemplate: getSystemTemplate(state),
-  };
-};
-
-export default withRouter(
-  connect(mapStateToProps, {
-    saveNavFilter: saveNavFilterRoutine,
-  })(SystemStructures)
-);
+}

package/src/components/SystemStructuresLoader.js

@@ -1,35 +1,21 @@
-import React from "react";
-import { withRouter } from "react-router-dom";
-import PropTypes from "prop-types";
-import { compose } from "redux";
-import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useParams } from "react-router";
+import { useDispatch } from "react-redux";
 import { clearSystemStructures, fetchSystemStructures } from "../routines";
 
-export class SystemStructuresLoader extends React.Component {
-  static propTypes = {
-    fetchSystemStructures: PropTypes.func,
-    clearSystemStructures: PropTypes.func,
-    match: PropTypes.object,
-  };
+export default function SystemStructuresLoader() {
+  const dispatch = useDispatch();
+  const { id } = useParams();
 
-  componentDidMount() {
-    const { fetchSystemStructures, match } = this.props;
-    const { id } = match.params;
+  useEffect(() => {
     if (id) {
-      fetchSystemStructures({ id });
+      dispatch(fetchSystemStructures({ id }));
     }
-  }
 
-  componentWillUnmount() {
-    this.props.clearSystemStructures();
-  }
+    return () => {
+      dispatch(clearSystemStructures());
+    };
+  }, [id]);
 
-  render() {
-    return null;
-  }
+  return null;
 }
-
-export default compose(
-  withRouter,
-  connect(null, { clearSystemStructures, fetchSystemStructures })
-)(SystemStructuresLoader);

package/src/components/SystemView.js

@@ -1,17 +1,21 @@
 import _ from "lodash/fp";
-import React from "react";
+import { lazy } from "react";
+import { useSelector } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import { Header, Segment, Image } from "semantic-ui-react";
-
-import searchImage from "assets/searching.png";
+import { getSystemTemplate } from "../selectors";
 import SystemEditButton from "./SystemEditButton";
-
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
+import searchImage from "assets/searching.png";
+import Loading from "@truedat/core/components/Loading";
+const DynamicFormViewer = lazy(
+  () => import("@truedat/df/components/DynamicFormViewer")
 );
 
-export const SystemView = ({ system, systemTemplate }) => {
+export const SystemView = ({ system }) => {
   const { name, external_id, dynamic_content } = system || {};
+  const systemTemplate = useSelector((state) => getSystemTemplate(state));
+  const systemsLoading = useSelector((state) => state.systemsLoading);
+
   const SystemHeader = () => (
     <Header as="h2">
       <Header.Content>
@@ -38,7 +42,9 @@ export const SystemView = ({ system, systemTemplate }) => {
     <Segment>
       <SystemEditButton system={system} />
       <SystemHeader />
-      {_.isEmpty(dynamic_content || {}) ? (
+      {systemsLoading && _.isEmpty(system) ? (
+        <Loading />
+      ) : _.isEmpty(dynamic_content || {}) ? (
         <EmptyImage />
       ) : (
         systemTemplate && (