@truedat/dd 7.5.9 → 7.5.11

package/src/components/StructureTabRoutes.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
+import { Route, Routes } from "react-router";
 import {
   STRUCTURE,
   STRUCTURE_CHILDREN,
@@ -24,27 +23,61 @@ import {
 import StructureTabs from "./StructureTabs";
 
 export const StructureTabRoutes = () => (
-  <Switch>
-    <Route path={STRUCTURE_VERSION_VERSIONS} component={StructureTabs} />
-    <Route path={STRUCTURE_VERSION_FIELDS} component={StructureTabs} />
-    <Route path={STRUCTURE_VERSION} component={StructureTabs} />
-    <Route path={STRUCTURE_PROFILE} component={StructureTabs} />
-    <Route path={STRUCTURE_LINKS} component={StructureTabs} />
-    <Route path={STRUCTURE_STRUCTURE_LINKS} component={StructureTabs} />
-    <Route path={STRUCTURE_VERSIONS} component={StructureTabs} />
-    <Route path={STRUCTURE_EVENTS} component={StructureTabs} />
-    <Route path={STRUCTURE_METADATA} component={StructureTabs} />
-    <Route path={STRUCTURE_NOTES} component={StructureTabs} />
-    <Route path={STRUCTURE_MEMBERS} component={StructureTabs} />
-    <Route path={STRUCTURE_RULES} component={StructureTabs} />
-    <Route path={STRUCTURE_LINEAGE} component={StructureTabs} />
-    <Route path={STRUCTURE_CHILDREN} component={StructureTabs} />
-    <Route path={STRUCTURE_FIELDS} component={StructureTabs} />
-    <Route path={STRUCTURE_PARENTS} component={StructureTabs} />
-    <Route path={STRUCTURE_IMPACT} component={StructureTabs} />
-    <Route path={STRUCTURE} component={StructureTabs} exact />
-    <Route path={STRUCTURE_GRANTS} component={StructureTabs} />
-  </Switch>
+  <Routes>
+    <Route index exact element={<StructureTabs path={STRUCTURE} />} />
+
+    <Route path="versions">
+      <Route index element={<StructureTabs path={STRUCTURE_VERSIONS} />} />
+
+      <Route path=":version">
+        <Route index element={<StructureTabs path={STRUCTURE_VERSION} />} />
+        <Route
+          path="versions"
+          element={<StructureTabs path={STRUCTURE_VERSION_VERSIONS} />}
+        />
+        <Route
+          path="fields"
+          element={<StructureTabs path={STRUCTURE_VERSION_FIELDS} />}
+        />
+      </Route>
+    </Route>
+
+    <Route
+      path="profile"
+      element={<StructureTabs path={STRUCTURE_PROFILE} />}
+    />
+    <Route path="links/*" element={<StructureTabs path={STRUCTURE_LINKS} />} />
+    <Route
+      path="structureLinks/*"
+      element={<StructureTabs path={STRUCTURE_STRUCTURE_LINKS} />}
+    />
+    <Route path="events" element={<StructureTabs path={STRUCTURE_EVENTS} />} />
+    <Route
+      path="metadata"
+      element={<StructureTabs path={STRUCTURE_METADATA} />}
+    />
+    <Route path="notes/*" element={<StructureTabs path={STRUCTURE_NOTES} />} />
+    <Route
+      path="members"
+      element={<StructureTabs path={STRUCTURE_MEMBERS} />}
+    />
+    <Route path="rules" element={<StructureTabs path={STRUCTURE_RULES} />} />
+    <Route
+      path="lineage"
+      element={<StructureTabs path={STRUCTURE_LINEAGE} />}
+    />
+    <Route
+      path="children"
+      element={<StructureTabs path={STRUCTURE_CHILDREN} />}
+    />
+    <Route path="fields" element={<StructureTabs path={STRUCTURE_FIELDS} />} />
+    <Route
+      path="parents"
+      element={<StructureTabs path={STRUCTURE_PARENTS} />}
+    />
+    <Route path="impact" element={<StructureTabs path={STRUCTURE_IMPACT} />} />
+    <Route path="grants" element={<StructureTabs path={STRUCTURE_GRANTS} />} />
+  </Routes>
 );
 
 export default StructureTabRoutes;

package/src/components/StructureTabs.js

@@ -1,9 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Divider, Menu } from "semantic-ui-react";
-import { Link, withRouter } from "react-router-dom";
-import { compose } from "redux";
+import { Link } from "react-router";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
@@ -198,9 +196,7 @@ StructureTabs.propTypes = {
 };
 
 const mapStateToProps = ({ structureTabsOrder, ...state }, ownProps) => {
-  const {
-    match: { path },
-  } = ownProps;
+  const { path } = ownProps;
   const { structureVersion: version, structure } = state;
   const tabVisibility = getTabVisibility(state, path);
   const activeTab = getActiveTab(tabVisibility, path, structureTabsOrder);
@@ -214,4 +210,4 @@ const mapStateToProps = ({ structureTabsOrder, ...state }, ownProps) => {
   };
 };
 
-export default compose(withRouter, connect(mapStateToProps))(StructureTabs);
+export default connect(mapStateToProps)(StructureTabs);

package/src/components/StructureTag.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 { connect } from "react-redux";

package/src/components/StructureTagForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { Button, Container, Form } from "semantic-ui-react";
 import { connect } from "react-redux";

package/src/components/StructureTags.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { useQuery } from "@apollo/client";
 import { Loading } from "@truedat/core/components";
 import { STRUCTURE_TAGS_QUERY } from "../api/queries";

package/src/components/StructureType.js

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

package/src/components/StructureTypeForm.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useForm, useFieldArray, Controller } from "react-hook-form";

package/src/components/StructureTypeLoader.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 { clearStructureType, fetchStructureType } from "../routines";
 
 export const StructureTypeLoader = ({

package/src/components/StructureTypes.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import StructureTypesTable from "./StructureTypesTable";

package/src/components/StructureTypesCrumbs.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 { connect } from "react-redux";
 import { STRUCTURE_TYPES } from "@truedat/core/routes";

package/src/components/StructureTypesRoutes.js

@@ -1,60 +1,34 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import _ from "lodash/fp";
+import { Route, Routes } from "react-router";
+import { useSelector } from "react-redux";
+import { ProtectedRoute, Loader } from "@truedat/core/router";
 import { STRUCTURE_TYPES, STRUCTURE_TYPES_EDIT } from "@truedat/core/routes";
 import StructureTypesCrumbs from "./StructureTypesCrumbs";
 import StructureTypeLoader from "./StructureTypeLoader";
 import StructureTypes from "./StructureTypes";
 import StructureType from "./StructureType";
 
-export const StructureTypesRoutes = ({ structureType, loading }) => {
-  const authorized = useAuthorized();
+export default function StructureTypesRoutes() {
+  const { structureType, structureTypeLoading } = useSelector(
+    _.pick(["structureType", "structureTypeLoading"])
+  );
   return (
-    <Route
-      path={STRUCTURE_TYPES}
-      render={() =>
-        authorized ? (
-          <Switch>
-            <Route
-              path={STRUCTURE_TYPES}
-              exact
-              render={() => <StructureTypes />}
-            />
-            <Route
-              path={STRUCTURE_TYPES_EDIT}
-              exact
-              render={() => (
-                <>
-                  <StructureTypeLoader />
-                  {structureType && !loading ? (
-                    <>
-                      <StructureTypesCrumbs action="structureTypes.actions.edit" />{" "}
-                      <StructureType mode="edit" />
-                    </>
-                  ) : null}
-                </>
-              )}
-            />
-          </Switch>
-        ) : (
-          <Unauthorized />
-        )
-      }
-    />
+    <Routes>
+      <Route index element={<StructureTypes />} />
+      <Route
+        path=":id/edit"
+        element={
+          <>
+            <StructureTypeLoader />
+            {!structureType || structureTypeLoading ? null : (
+              <>
+                <StructureTypesCrumbs action="structureTypes.actions.edit" />{" "}
+                <StructureType mode="edit" />
+              </>
+            )}
+          </>
+        }
+      />
+    </Routes>
   );
-};
-
-StructureTypesRoutes.propTypes = {
-  structureType: PropTypes.object,
-  loading: PropTypes.bool,
-};
-
-const mapStateToProps = ({ structureType, structureTypeLoading: loading }) => ({
-  loading,
-  structureType,
-});
-
-export default connect(mapStateToProps)(StructureTypesRoutes);
+}

package/src/components/StructureTypesTable.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 { Table, Icon } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";

package/src/components/StructureVersionListItem.js

@@ -1,6 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { List } from "semantic-ui-react";
 import Moment from "react-moment";

package/src/components/StructureVersions.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { List } from "semantic-ui-react";
@@ -16,12 +15,12 @@ export const StructureVersions = ({ id, versions }) =>
 
 StructureVersions.propTypes = {
   id: PropTypes.number,
-  versions: PropTypes.array
+  versions: PropTypes.array,
 };
 
 const mapStateToProps = ({ structure, structureVersions: versions }) => ({
   id: _.prop("id")(structure),
-  versions
+  versions,
 });
 
 export default connect(mapStateToProps)(StructureVersions);

package/src/components/StructureView.js

@@ -1,9 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Grid, Segment } from "semantic-ui-react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import FilteredNav from "./FilteredNav";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureGrantCart from "./StructureGrantCart";

package/src/components/StructuresBulkUpdate.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 {
   Button,
@@ -21,9 +21,7 @@ import { useTemplate } from "@truedat/core/hooks";
 import { applyTemplateWithoutDefaults } from "@truedat/df/utils";
 import { bulkUpdateStructures } from "../routines";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
-);
+const DynamicForm = lazy(() => import("@truedat/df/components/DynamicForm"));
 
 const isEmptyValue = (value) => !_.isNumber(value) && _.isEmpty(value);
 
@@ -96,85 +94,78 @@ export const StructuresBulkUpdate = ({
     <Loading />
   ) : (
     <Container as={Segment} text>
-      <>
-        <Header as="h2">
-          <Icon name="book" />
-          <Header.Content>
-            <FormattedMessage id="structures.header.edit.bulk" />
-          </Header.Content>
-        </Header>
-        <Header as="h3">
-          <Header.Content>
+      <Header as="h2">
+        <Icon name="book" />
+        <Header.Content>
+          <FormattedMessage id="structures.header.edit.bulk" />
+        </Header.Content>
+      </Header>
+      <Header as="h3">
+        <Header.Content>
+          <FormattedMessage
+            id="structures.header.edit.bulk.structures_count"
+            values={{ structureCount }}
+          />
+        </Header.Content>
+      </Header>
+      <Header as="h4">
+        <Header.Content>
+          <FormattedMessage id="structures.header.edit.bulk.info_message" />
+        </Header.Content>
+      </Header>
+      <Form loading={bulkUpdateStructuresLoading}>
+        {template && (
+          <DynamicForm
+            onChange={setContent}
+            template={template}
+            applyTemplate={applyTemplateWithoutDefaults}
+            content={content}
+          />
+        )}
+        <ConfirmModal
+          actions={[
+            {
+              key: "no",
+              secondary: true,
+              content: <FormattedMessage id="confirmation.no" />,
+            },
+            {
+              key: "yes",
+              primary: true,
+              content: (
+                <FormattedMessage id="structures.edit.bulk.confirmation.update" />
+              ),
+              onClick: handleSubmit(false),
+            },
+            ...(publishAllowed
+              ? [
+                  {
+                    key: "yesWithAutoPublish",
+                    primary: true,
+                    content: (
+                      <FormattedMessage id="structures.edit.bulk.confirmation.update.publish" />
+                    ),
+                    onClick: handleSubmit(true),
+                  },
+                ]
+              : []),
+          ]}
+          trigger={
+            <Button primary content={<FormattedMessage id="actions.save" />} />
+          }
+          header={
+            <FormattedMessage id="structures.edit.bulk.confirmation.header" />
+          }
+          content={
             <FormattedMessage
-              id="structures.header.edit.bulk.structures_count"
+              id="structures.edit.bulk.confirmation.content"
               values={{ structureCount }}
             />
-          </Header.Content>
-        </Header>
-        <Header as="h4">
-          <Header.Content>
-            <FormattedMessage id="structures.header.edit.bulk.info_message" />
-          </Header.Content>
-        </Header>
-        <Form loading={bulkUpdateStructuresLoading}>
-          {template && (
-            <DynamicForm
-              onChange={setContent}
-              template={template}
-              applyTemplate={applyTemplateWithoutDefaults}
-              content={content}
-            />
-          )}
-          <ConfirmModal
-            actions={[
-              {
-                key: "no",
-                secondary: true,
-                content: <FormattedMessage id="confirmation.no" />,
-              },
-              {
-                key: "yes",
-                primary: true,
-                content: (
-                  <FormattedMessage id="structures.edit.bulk.confirmation.update" />
-                ),
-                onClick: handleSubmit(false),
-              },
-              ...(publishAllowed
-                ? [
-                    {
-                      key: "yesWithAutoPublish",
-                      primary: true,
-                      content: (
-                        <FormattedMessage id="structures.edit.bulk.confirmation.update.publish" />
-                      ),
-                      onClick: handleSubmit(true),
-                    },
-                  ]
-                : []),
-            ]}
-            trigger={
-              <Button
-                primary
-                content={<FormattedMessage id="actions.save" />}
-              />
-            }
-            header={
-              <FormattedMessage id="structures.edit.bulk.confirmation.header" />
-            }
-            content={
-              <FormattedMessage
-                id="structures.edit.bulk.confirmation.content"
-                values={{ structureCount }}
-              />
-            }
-            onConfirm={handleSubmit}
-          />
-          <HistoryBackButton
-            content={<FormattedMessage id="actions.cancel" />}
-          />
-        </Form>
-      </>
+          }
+          onConfirm={handleSubmit}
+        />
+        <HistoryBackButton content={<FormattedMessage id="actions.cancel" />} />
+      </Form>
     </Container>
   );
 };

package/src/components/StructuresDomainsUploadOption.js

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

package/src/components/StructuresDownloadOption.js

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

package/src/components/StructuresEditableDownloadOption.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { STRUCTURE } from "@truedat/core/routes";
 import { Dropdown } from "semantic-ui-react";

package/src/components/StructuresGrantRequestView.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React, { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Header, Icon, Divider } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
@@ -22,7 +22,7 @@ import StructureGrantCart from "./StructureGrantCart";
 
 export function StructuresGrantRequestViewContent() {
   const { formatMessage } = useIntl();
-  const history = useHistory();
+  const navigate = useNavigate();
   const segment = useRef(null);
   const [isOverflown, setIsOverflown] = useState(null);
 

package/src/components/StructuresLabelResults.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Label } from "semantic-ui-react";
 import { useSearchContext } from "@truedat/core/search/SearchContext";

package/src/components/StructuresOptions.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Dropdown } from "semantic-ui-react";
 import SystemCreateOption from "./SystemCreateOption";

package/src/components/StructuresPagination.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Pagination } from "@truedat/core/components";
 import { useSearchContext } from "@truedat/core/search/SearchContext";