@truedat/dd 7.5.9 → 7.5.11

package/src/components/GrantRoutes.js

@@ -1,8 +1,9 @@
 import _ from "lodash/fp";
 import { connect } from "react-redux";
-import { Route, Switch, useParams } from "react-router-dom";
+import { Route, Routes } from "react-router";
+import { useParams } from "react-router";
 import PropTypes from "prop-types";
-import React from "react";
+import { lazy } from "react";
 import {
   GRANT_APPROVAL_RULE,
   GRANT_APPROVAL_RULE_EDIT,
@@ -44,8 +45,8 @@ import MyGrantRequests from "./MyGrantRequests";
 import StructureGrantCartCheckout from "./StructureGrantCartCheckout";
 import StructuresGrantRequestView from "./StructuresGrantRequestView";
 
-const TemplatesLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplatesLoader")
+const TemplatesLoader = lazy(
+  () => import("@truedat/core/components/TemplatesLoader")
 );
 
 const GrantRequestGroup = () => {
@@ -69,39 +70,35 @@ const GrantRequestGroup = () => {
 
 export const GrantRoutes = ({ grantRequestLoaded }) => {
   return (
-    <>
+    <Routes>
       <Route
-        path={GRANTS_REQUESTS_CHECKOUT}
-        render={() => <StructureGrantCartCheckout />}
+        path="/grantsRequests/checkout"
+        element={<StructureGrantCartCheckout />}
+      />
+      <Route path="/grants/:id" element={<GrantView />} />
+      <Route
+        path="/grants"
+        element={
+          <>
+            <GrantsLoader />
+            <GrantFiltersLoader />
+            <Grants />
+          </>
+        }
       />
-      <Switch>
-        <Route exact path={GRANT} render={() => <GrantView />} />
-        <Route
-          exact
-          path={GRANTS}
-          render={() => (
-            <>
-              <GrantsLoader />
-              <GrantFiltersLoader />
-              <Grants />
-            </>
-          )}
-        />
-      </Switch>
       <Route
-        path={MY_GRANTS}
-        render={() => (
+        path="/myGrants"
+        element={
           <>
             <GrantsLoader onlyMyGrants />
             <GrantFiltersLoader onlyMyGrants />
             <Grants onlyMyGrants />
           </>
-        )}
+        }
       />
-
       <Route
-        path={MY_GRANT_REQUESTS}
-        render={() => (
+        path="/myGrantRequests"
+        element={
           <>
             <GrantRequestsLoader
               defaultPayload={{
@@ -111,96 +108,62 @@ export const GrantRoutes = ({ grantRequestLoaded }) => {
             />
             <MyGrantRequests />
           </>
-        )}
+        }
       />
-      <Switch>
-        <Route
-          exact
-          path={GRANT_APPROVAL_RULE_NEW}
-          render={() => <GrantApprovalRuleNew />}
-        />
+      <Route path="/grantApproveRules/new" element={<GrantApprovalRuleNew />} />
+      <Route
+        path="/grantApproveRules/:id/edit"
+        element={<GrantApprovalRuleEdit />}
+      />
+      <Route path="/grantApproveRules/:id" element={<GrantApprovalRule />} />
+      <Route path="/grantApprovalRules" element={<GrantApprovalRules />} />
+      <Route
+        path="/structuresGrantRequests"
+        element={
+          <StructuresGrantRequestView
+            defaultFilters={{
+              exists: {
+                field: "classes._grantable",
+              },
+            }}
+          />
+        }
+      />
+      <Route path="/grantRequestGroups/:id" element={<GrantRequestGroup />} />
+      <Route path="/grantRequests">
         <Route
-          exact
-          path={GRANT_APPROVAL_RULE_EDIT}
-          render={() => <GrantApprovalRuleEdit />}
+          index
+          element={
+            <>
+              <SearchContextProvider
+                initialSortColumn="inserted_at"
+                initialSortDirection="ascending"
+                useSearch={useGrantRequestsSearch}
+                useFilters={useGrantRequestsFilters}
+                pageSize={20}
+                defaultFilters={{}}
+              >
+                <GrantRequestsSearchResults />
+              </SearchContextProvider>
+            </>
+          }
         />
         <Route
-          exact
-          path={GRANT_APPROVAL_RULE}
-          render={() => <GrantApprovalRule />}
+          path="approvals/result"
+          element={<GrantRequestApprovalResults />}
         />
         <Route
-          exact
-          path={GRANT_APPROVAL_RULES}
-          render={() => <GrantApprovalRules />}
+          path=":id"
+          element={
+            <>
+              <GrantRequestLoader />
+              <TemplatesLoader scope="gr" />
+              {grantRequestLoaded && <GrantRequest />}
+            </>
+          }
         />
-      </Switch>
-
-      <Route
-        path={STRUCTURES_GRANT_REQUEST}
-        render={() => {
-          const defaultFilters = {
-            exists: {
-              field: "classes._grantable",
-            },
-          };
-          return <StructuresGrantRequestView defaultFilters={defaultFilters} />;
-        }}
-      />
-      <Route
-        exact
-        path={GRANT_REQUEST_GROUP}
-        render={() => <GrantRequestGroup />}
-      />
-      <Route
-        path={GRANT_REQUESTS}
-        render={() => (
-          <>
-            <Switch>
-              <Route
-                exact
-                path={GRANT_REQUESTS}
-                render={() => {
-                  const defaultFilters = {};
-
-                  const searchProps = {
-                    initialSortColumn: "inserted_at",
-                    initialSortDirection: "ascending",
-                    useSearch: useGrantRequestsSearch,
-                    useFilters: useGrantRequestsFilters,
-                    pageSize: 20,
-                  };
-
-                  return (
-                    <SearchContextProvider
-                      {...searchProps}
-                      defaultFilters={defaultFilters}
-                    >
-                      <GrantRequestsSearchResults />
-                    </SearchContextProvider>
-                  );
-                }}
-              />
-              <Route
-                path={GRANT_REQUESTS_APPROVALS_RESULT}
-                exact
-                render={() => <GrantRequestApprovalResults />}
-              />
-              <Route
-                path={GRANT_REQUEST}
-                render={() => (
-                  <>
-                    <GrantRequestLoader />
-                    <TemplatesLoader scope="gr" />
-                    {grantRequestLoaded && <GrantRequest />}
-                  </>
-                )}
-              />
-            </Switch>
-          </>
-        )}
-      />
-    </>
+      </Route>
+    </Routes>
   );
 };
 

package/src/components/Grants.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";
@@ -36,16 +35,17 @@ export const Grants = ({ grantsLoading, onlyMyGrants }) => {
           </Header.Subheader>
         </Header.Content>
       </Header>
-
       <Segment attached="bottom">
         <GrantsDownloadButton onlyMyGrants={onlyMyGrants} hasFilterApplied />
         <GrantsSearch />
         <GrantSelectedFilters />
         <GrantDateFilter />
         <Dimmer.Dimmable dimmed={grantsLoading}>
-          <Dimmer active={grantsLoading} inverted>
-            <Loader />
-          </Dimmer>
+          {grantsLoading ? (
+            <Dimmer active inverted>
+              <Loader />
+            </Dimmer>
+          ) : null}
         </Dimmer.Dimmable>
         <GrantsLabelResults />
         <GrantsTable onlyMyGrants={onlyMyGrants} />

package/src/components/GrantsDownloadButton.js

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

package/src/components/GrantsLabelResults.js

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

package/src/components/GrantsSearch.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/GrantsTable.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Table, Header, Icon } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { columnDecoratorComponent } from "@truedat/core/services";
@@ -19,7 +19,7 @@ export const GrantsTable = ({
   grantsSorting,
 }) => {
   const { formatMessage } = useIntl();
-  const history = useHistory();
+  const navigate = useNavigate();
   const filteredColumns = _.filter((c) => _.any(_.prop(c.name))(grants))(
     columns
   );
@@ -71,10 +71,7 @@ export const GrantsTable = ({
           </Table.Header>
           <Table.Body>
             {grants.map((grant, i) => (
-              <Table.Row
-                key={i}
-                onClick={() => history.push(linkTo.GRANT(grant))}
-              >
+              <Table.Row key={i} onClick={() => navigate(linkTo.GRANT(grant))}>
                 {columns &&
                   columns.map((column, key) => (
                     <Table.Cell

package/src/components/GraphLoader.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useRouteMatch, useHistory } from "react-router-dom";
+import { useParams, useNavigate } from "react-router";
 import { GRAPH } from "@truedat/core/routes";
 import { fetchGraph, clearGraph, cancelPoll } from "../routines";
 
@@ -13,10 +13,9 @@ export const GraphLoader = ({
   cancelPoll,
   graphRedirect,
 }) => {
-  const match = useRouteMatch(GRAPH);
-  const id = _.path("params.id")(match);
+  const { id } = useParams();
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     return () => {

package/src/components/GraphRedirector.js

@@ -2,15 +2,16 @@ import _ from "lodash/fp";
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
+import { useNavigate } from "react-router";
 import { clearRedirect } from "@truedat/core/routines";
 
 export const GraphRedirector = ({ graph, graphRedirect, clearRedirect }) => {
   const { pathname } = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   useEffect(() => {
     if (graphRedirect && !_.isEqual(pathname, graphRedirect)) {
-      history.push(graphRedirect);
+      navigate(graphRedirect);
       clearRedirect();
     }
   }, [history, pathname, graphRedirect, clearRedirect]);

package/src/components/Lineage.js

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

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

package/src/components/LineageDefs.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 export const LineageDefs = () => (
   <defs>
     <marker

package/src/components/LineageDownloadButton.js

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

package/src/components/LineageEvents.js

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

package/src/components/LineageEventsTable.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, Table } from "semantic-ui-react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { columnDecorator } from "@truedat/core/services";
@@ -17,7 +17,7 @@ export const LineageEventsTable = ({
   lineageEventsLoading,
 }) => {
   const { formatMessage } = useIntl();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     fetchLineageEvents();
@@ -49,7 +49,7 @@ export const LineageEventsTable = ({
                 key={i}
                 onClick={
                   event.graph_id
-                    ? () => history.push(linkTo.GRAPH({ id: event?.graph_id }))
+                    ? () => navigate(linkTo.GRAPH({ id: event?.graph_id }))
                     : null
                 }
               >

package/src/components/LineageForm.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 { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -120,10 +120,7 @@ export const LineageForm = ({
         >
           <Header as="h4">
             <Icon name="dropdown" />
-            <FormattedMessage
-              id="lineage.form.header"
-              defaultMessage="Select Structures"
-            />
+            <FormattedMessage id="lineage.form.header" />
           </Header>
         </Accordion.Title>
         <Accordion.Content active={open}>
@@ -143,7 +140,6 @@ export const LineageForm = ({
                     level == 0
                       ? "lineage.group.placeholder"
                       : "lineage.subgroup.placeholder",
-                  defaultMessage: "Select Group",
                 })}
                 fluid
                 search
@@ -160,7 +156,6 @@ export const LineageForm = ({
               <Form.Dropdown
                 placeholder={formatMessage({
                   id: "lineage.resources.placeholder",
-                  defaultMessage: "Select Resources",
                 })}
                 fluid
                 search
@@ -172,10 +167,7 @@ export const LineageForm = ({
               />
             )}
             <Header as="h5">
-              <FormattedMessage
-                id="lineage.form.levels.header"
-                defaultMessage="Levels"
-              />
+              <FormattedMessage id="lineage.form.levels.header" />
             </Header>
             <Form.Group>
               <Form.Field>
@@ -184,7 +176,6 @@ export const LineageForm = ({
                   name="allLevels"
                   label={formatMessage({
                     id: "lineage.form.levels.all.label",
-                    defaultMessage: "All",
                   })}
                   value="all"
                   checked={selectLevels === "all"}
@@ -200,7 +191,6 @@ export const LineageForm = ({
                   onChange={(e, { value }) => setSelectLevels(value)}
                   label={formatMessage({
                     id: "lineage.form.levels.select.label",
-                    defaultMessage: "Depth",
                   })}
                 />
               </Form.Field>
@@ -212,7 +202,6 @@ export const LineageForm = ({
                 control="input"
                 placeholder={formatMessage({
                   id: "lineage.form.levels.select.input",
-                  defaultMessage: "Select...",
                 })}
                 value={levels || ""}
                 autoComplete="off"
@@ -231,10 +220,7 @@ export const LineageForm = ({
                 setLevels(lineageLevels);
               }}
             >
-              <FormattedMessage
-                id="navigation.lineage.clean"
-                defaultMessage="Clear Selection"
-              />
+              <FormattedMessage id="navigation.lineage.clean" />
             </Button>
             <Button
               primary
@@ -242,10 +228,7 @@ export const LineageForm = ({
               disabled={disabled}
               onClick={handleSubmit("impact")}
             >
-              <FormattedMessage
-                id="navigation.lineage.impact"
-                defaultMessage="Impact"
-              />
+              <FormattedMessage id="navigation.lineage.impact" />
             </Button>
             <Button
               primary
@@ -253,10 +236,7 @@ export const LineageForm = ({
               disabled={disabled}
               onClick={handleSubmit("lineage")}
             >
-              <FormattedMessage
-                id="navigation.lineage.lineage"
-                defaultMessage="Lineage"
-              />
+              <FormattedMessage id="navigation.lineage.lineage" />
             </Button>
             <LineageDownloadButton />
           </Form>

package/src/components/LineageGraph.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useRef, useEffect, useReducer, useState } from "react";
+import { useRef, useEffect, useReducer, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import {
@@ -105,42 +105,45 @@ export const LineageGraph = ({
           }
         >
           <Dimmer.Dimmable dimmed={loading} className="dl">
-            <Dimmer active={loading} inverted>
-              <Loader size="large">
-                <FormattedMessage
-                  id="lineage.graph.loading"
-                  defaultMessage="Analyzing..."
-                />
-                {loadingInfo?.data?.graph_hash && loadingInfo?.data?.status && (
-                  <p>
-                    {formatMessage({
-                      id:
-                        _.toLower(loadingInfo?.data?.status) ===
-                        "already_started"
-                          ? "lineage.graph.loading.background.existing"
-                          : _.toLower(loadingInfo?.data?.status) ===
-                              "just_started" &&
-                            "lineage.graph.loading.background.launched",
-                    })}
-                  </p>
-                )}
-                {loadingInfo?.data?.graph_hash && (
+            {loading ? (
+              <Dimmer active inverted>
+                <Loader size="large">
+                  <FormattedMessage
+                    id="lineage.graph.loading"
+                    defaultMessage="Analyzing..."
+                  />
+                  {loadingInfo?.data?.graph_hash &&
+                    loadingInfo?.data?.status && (
+                      <p>
+                        {formatMessage({
+                          id:
+                            _.toLower(loadingInfo?.data?.status) ===
+                            "already_started"
+                              ? "lineage.graph.loading.background.existing"
+                              : _.toLower(loadingInfo?.data?.status) ===
+                                  "just_started" &&
+                                "lineage.graph.loading.background.launched",
+                        })}
+                      </p>
+                    )}
+                  {loadingInfo?.data?.graph_hash && (
+                    <p>
+                      Graph hash:{" "}
+                      <span className="graph-hash">
+                        {loadingInfo?.data?.graph_hash}
+                      </span>
+                    </p>
+                  )}
                   <p>
-                    Graph hash:{" "}
-                    <span className="graph-hash">
-                      {loadingInfo?.data?.graph_hash}
-                    </span>
+                    {loadingInfo?.data?.retry &&
+                      formatMessage(
+                        { id: "lineage.graph.loading.polling" },
+                        { retry: loadingInfo?.data?.retry }
+                      )}
                   </p>
-                )}
-                <p>
-                  {loadingInfo?.data?.retry &&
-                    formatMessage(
-                      { id: "lineage.graph.loading.polling" },
-                      { retry: loadingInfo?.data?.retry }
-                    )}
-                </p>
-              </Loader>
-            </Dimmer>
+                </Loader>
+              </Dimmer>
+            ) : null}
             <svg
               width="100%"
               height={height}

package/src/components/LineageGroup.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Popup } from "semantic-ui-react";
 import { lowerDeburr } from "@truedat/core/services/sort";

package/src/components/LineageLink.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 
 export const LineageLink = ({

package/src/components/LineageResource.js

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