@truedat/dd 7.5.9 → 7.5.11

package/src/components/LineageRoutes.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { Route } 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 { GRAPH, GRAPHS, LINEAGE_EVENTS, SAMPLE } from "@truedat/core/routes";
 import LineageEvents from "./LineageEvents";
 import LineageGraph from "./LineageGraph";
@@ -19,29 +18,39 @@ const Graphs = () => (
   </>
 );
 
-const Graph = () => <GraphLoader />;
-
 export const LineageRoutes = () => {
-  const authorized = useAuthorized("lineage");
   return (
-    <>
-      <Route
-        path={GRAPHS}
-        render={() => (authorized ? <Graphs /> : <Unauthorized />)}
-      />
-      <Route
-        path={GRAPH}
-        render={() => (authorized ? <Graph /> : <Unauthorized />)}
-      />
+    <Routes>
+      <Route path={GRAPHS} element={<ProtectedRoute authorization="lineage" />}>
+        <Route index element={<Graphs />} />
+        <Route
+          path=":id"
+          element={
+            <>
+              <Graphs />
+              <GraphLoader />
+            </>
+          }
+        />
+      </Route>
       <Route
         path={LINEAGE_EVENTS}
-        render={() => (authorized ? <LineageEvents /> : <Unauthorized />)}
+        element={
+          <ProtectedRoute authorization="lineage">
+            <LineageEvents />
+          </ProtectedRoute>
+        }
       />
       <Route
         path={SAMPLE}
-        render={() => (authorized ? <LineageSample /> : <Unauthorized />)}
+        element={
+          <ProtectedRoute authorization="lineage">
+            <LineageSample />
+          </ProtectedRoute>
+        }
       />
-    </>
+      <Route path="*" element={null} />
+    </Routes>
   );
 };
 

package/src/components/LineageSample.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { createGraph } from "../routines";

package/src/components/LinkLabelsSelector.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 import { useIntl, FormattedMessage } from "react-intl";
@@ -30,7 +29,6 @@ export const LinkLabelsSelector = ({
       <label>
         <FormattedMessage id="structureLink.selector.label" />
       </label>
-
       <Form.Dropdown
         loading={loading}
         multiple

package/src/components/MetadataFiltersInput.js

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

package/src/components/MetadataViewForm.js

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

package/src/components/MyGrantRequests.js

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

package/src/components/PendingStructureNoteRow.js

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

package/src/components/PendingStructureNotes.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -40,13 +39,14 @@ export const PendingStructureNotesContent = () => {
           </Header.Subheader>
         </Header.Content>
       </Header>
-
       <StructuresOptions {...actions} pendingStructureNotes={true} />
       <SearchWidget />
       <Dimmer.Dimmable dimmed={loading}>
-        <Dimmer active={loading} inverted>
-          <Loader />
-        </Dimmer>
+        {loading ? (
+          <Dimmer active inverted>
+            <Loader />
+          </Dimmer>
+        ) : null}
         <PendingStructureNotesLabelResults />
         <PendingStructureNotesTable />
         <PendingStructureNotesPagination />

package/src/components/PendingStructureNotesLabelResults.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/PendingStructureNotesPagination.js

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

package/src/components/PendingStructureNotesTable.js

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

package/src/components/ProfileExecution.js

@@ -1,19 +1,18 @@
 import { isEmpty, sortBy } from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import Moment from "react-moment";
 import { connect } from "react-redux";
 import { Header, Message, Segment, Feed } from "semantic-ui-react";
 
-const dateDecorator = date =>
+const dateDecorator = (date) =>
   date && <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm:ss.SSS" />;
 
 export const icons = {
   PENDING: { name: "info circle", color: "green" },
   STARTED: { name: "play circle outline", color: "green" },
   SUCCEEDED: { name: "check circle outline", color: "green" },
-  FAILED: { name: "warning circle", color: "red" }
+  FAILED: { name: "warning circle", color: "red" },
 };
 
 export const Event = ({ inserted_at, message, type }) => (
@@ -30,7 +29,7 @@ export const Event = ({ inserted_at, message, type }) => (
 Event.propTypes = {
   inserted_at: PropTypes.string,
   message: PropTypes.string,
-  type: PropTypes.string
+  type: PropTypes.string,
 };
 
 export const EventFeed = ({ events }) =>
@@ -43,7 +42,7 @@ export const EventFeed = ({ events }) =>
   ) : null;
 
 EventFeed.propTypes = {
-  events: PropTypes.array
+  events: PropTypes.array,
 };
 
 export const ProfileExecution = ({ profileExecution }) => {
@@ -54,7 +53,7 @@ export const ProfileExecution = ({ profileExecution }) => {
         as="h2"
         content={profileExecution?._embedded?.latest?.name}
         subheader={formatMessage({
-          id: "execution.profile.label"
+          id: "execution.profile.label",
         })}
       />
       {isEmpty(profileExecution?._embedded?.profile_events) ? (
@@ -70,7 +69,7 @@ export const ProfileExecution = ({ profileExecution }) => {
 };
 
 ProfileExecution.propTypes = {
-  profileExecution: PropTypes.object
+  profileExecution: PropTypes.object,
 };
 
 const mapStateToProps = ({ profileExecution }) => ({ profileExecution });

package/src/components/ProfileExecutionBreadcrumbs.js

@@ -1,14 +1,13 @@
-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 { linkTo } from "@truedat/core/routes";
 
 export const ProfileExecutionBreadcrumbs = ({
   profileGroup,
-  profileExecution
+  profileExecution,
 }) =>
   profileGroup ? (
     <Breadcrumb>
@@ -32,12 +31,12 @@ export const ProfileExecutionBreadcrumbs = ({
 
 ProfileExecutionBreadcrumbs.propTypes = {
   profileExecution: PropTypes.object,
-  profileGroup: PropTypes.object
+  profileGroup: PropTypes.object,
 };
 
 export const mapStateToProps = ({ profileExecution, profileGroup }) => ({
   profileExecution,
-  profileGroup
+  profileGroup,
 });
 
 export default connect(mapStateToProps)(ProfileExecutionBreadcrumbs);

package/src/components/ProfileExecutionLoader.js

@@ -1,12 +1,12 @@
 import { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { fetchProfileExecution, clearProfileExecution } from "../routines";
 
 export const ProfileExecutionLoader = ({
   clearProfileExecution,
-  fetchProfileExecution
+  fetchProfileExecution,
 }) => {
   const { id } = useParams();
   useEffect(() => {
@@ -21,7 +21,7 @@ export const ProfileExecutionLoader = ({
 ProfileExecutionLoader.propTypes = {
   clearProfileExecution: PropTypes.func,
   fetchProfileExecution: PropTypes.func,
-  id: PropTypes.number
+  id: PropTypes.number,
 };
 
 const mapDispatchToProps = { clearProfileExecution, fetchProfileExecution };

package/src/components/ProfileGroup.js

@@ -8,21 +8,20 @@ import {
   prop,
   reject,
   size,
-  sortBy
+  sortBy,
 } from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import Moment from "react-moment";
 import { Icon, Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { linkTo } from "@truedat/core/routes";
 import { icons } from "./ProfileExecution";
 import ProfileGroupMessage from "./ProfileGroupMessage";
 
-const DateDecorator = date =>
+const DateDecorator = (date) =>
   date && <Moment date={date} format="DD-MM-YYYY HH:mm" />;
 
 const DataStructureLink = ({ _embedded }) =>
@@ -31,7 +30,7 @@ const DataStructureLink = ({ _embedded }) =>
     <Link
       to={linkTo.STRUCTURE_VERSION({
         id: _embedded.data_structure.id,
-        version: "latest"
+        version: "latest",
       })}
     >
       {_embedded.latest.name}
@@ -39,7 +38,7 @@ const DataStructureLink = ({ _embedded }) =>
   );
 
 DataStructureLink.propTypes = {
-  _embedded: PropTypes.object
+  _embedded: PropTypes.object,
 };
 
 const ProfileLink = ({ _embedded }) => {
@@ -56,7 +55,7 @@ const ProfileLink = ({ _embedded }) => {
 };
 
 ProfileLink.propTypes = {
-  _embedded: PropTypes.object
+  _embedded: PropTypes.object,
 };
 
 const ExecutionLink = ({ id, profileGroup, _embedded }) => {
@@ -81,10 +80,10 @@ const ExecutionLink = ({ id, profileGroup, _embedded }) => {
 ExecutionLink.propTypes = {
   id: PropTypes.number,
   profileGroup: PropTypes.object,
-  _embedded: PropTypes.object
+  _embedded: PropTypes.object,
 };
 
-const AncestryLink = ancestry => {
+const AncestryLink = (ancestry) => {
   const table = last(ancestry);
   const tablePath = flow(map("name"), join(" › "))(ancestry);
   return (
@@ -93,7 +92,7 @@ const AncestryLink = ancestry => {
         as={Link}
         to={linkTo.STRUCTURE_VERSION({
           id: table.data_structure_id,
-          version: "latest"
+          version: "latest",
         })}
       >
         {tablePath}
@@ -106,28 +105,28 @@ export const columns = [
   {
     name: "execution.props.status",
     fieldSelector: pick(["id", "profileGroup", "_embedded.profile_events"]),
-    fieldDecorator: ExecutionLink
+    fieldDecorator: ExecutionLink,
   },
   {
     name: "structures.props.name",
     fieldSelector: pick(["_embedded.latest", "_embedded.data_structure"]),
-    fieldDecorator: DataStructureLink
+    fieldDecorator: DataStructureLink,
   },
   {
     name: "structures.props.path",
     fieldSelector: "_embedded.latest.ancestry",
-    fieldDecorator: AncestryLink
+    fieldDecorator: AncestryLink,
   },
   {
     name: "profile.props.updated_at",
     fieldSelector: "_embedded.profile.updated_at",
-    fieldDecorator: DateDecorator
+    fieldDecorator: DateDecorator,
   },
   {
     name: "profile.props.profile",
     fieldSelector: pick(["_embedded.profile", "_embedded.data_structure"]),
-    fieldDecorator: ProfileLink
-  }
+    fieldDecorator: ProfileLink,
+  },
 ];
 
 export const ExecutionRow = ({ execution }) => (
@@ -143,14 +142,14 @@ export const ExecutionRow = ({ execution }) => (
 );
 
 ExecutionRow.propTypes = {
-  execution: PropTypes.object
+  execution: PropTypes.object,
 };
 
 export const ProfileGroup = ({ profileGroup, profileGroupLoading }) => {
   const { formatMessage } = useIntl();
   const executions = flow(
     sortBy("_embedded.data_structure.external_id"),
-    map(e => ({ ...e, profileGroup }))
+    map((e) => ({ ...e, profileGroup }))
   )(profileGroup?._embedded?.executions);
   const count = size(executions);
   const pendingCount = flow(reject("_embedded.profile"), size)(executions);
@@ -181,12 +180,12 @@ export const ProfileGroup = ({ profileGroup, profileGroupLoading }) => {
 
 ProfileGroup.propTypes = {
   profileGroup: PropTypes.object,
-  profileGroupLoading: PropTypes.bool
+  profileGroupLoading: PropTypes.bool,
 };
 
 export const mapStateToProps = ({ profileGroup, profileGroupLoading }) => ({
   profileGroup,
-  profileGroupLoading
+  profileGroupLoading,
 });
 
 export default connect(mapStateToProps)(ProfileGroup);

package/src/components/ProfileGroupLoader.js

@@ -1,12 +1,12 @@
 import { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { fetchProfileGroup, clearProfileGroup } from "../routines";
 
 export const ProfileGroupLoader = ({
   clearProfileGroup,
-  fetchProfileGroup
+  fetchProfileGroup,
 }) => {
   const { id } = useParams();
   useEffect(() => {
@@ -21,7 +21,7 @@ export const ProfileGroupLoader = ({
 ProfileGroupLoader.propTypes = {
   clearProfileGroup: PropTypes.func,
   fetchProfileGroup: PropTypes.func,
-  id: PropTypes.number
+  id: PropTypes.number,
 };
 
 const mapDispatchToProps = { clearProfileGroup, fetchProfileGroup };

package/src/components/ProfileGroupMessage.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Message } from "semantic-ui-react";
@@ -21,7 +20,7 @@ export const ProfileGroupMessage = ({ count, pending }) => {
 
 ProfileGroupMessage.propTypes = {
   count: PropTypes.number,
-  pending: PropTypes.number
+  pending: PropTypes.number,
 };
 
 export default ProfileGroupMessage;

package/src/components/ReferenceDataset.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Divider, Segment } from "semantic-ui-react";
 import ReferenceDatasetBreadcrumbs from "./ReferenceDatasetBreadcrumbs";

package/src/components/ReferenceDatasetActions.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 { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Button, Icon } from "semantic-ui-react";

package/src/components/ReferenceDatasetBreadcrumbs.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 { REFERENCE_DATASETS } from "@truedat/core/routes";
 

package/src/components/ReferenceDatasetCreate.js

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

package/src/components/ReferenceDatasetDetail.js

@@ -1,7 +1,6 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Switch, Route } from "react-router-dom";
+import { Route, Routes } from "react-router";
 import {
   REFERENCE_DATASET_EDIT,
   REFERENCE_DATASET,
@@ -11,25 +10,20 @@ import ReferenceDatasetTable from "./ReferenceDatasetTable";
 import ReferenceDatasetForm from "./ReferenceDatasetForm";
 
 export const ReferenceDatasetDetail = ({ dataset, updateReferenceDataset }) => (
-  <Switch>
+  <Routes>
+    <Route index element={<ReferenceDatasetTable {...dataset} />} />
     <Route
-      path={REFERENCE_DATASET_EDIT}
-      exact
-      render={() => (
+      path="edit"
+      element={
         <ReferenceDatasetForm
           dataset={dataset}
           onSubmit={(data) =>
             updateReferenceDataset({ ...data, id: dataset.id })
           }
         />
-      )}
+      }
     />
-    <Route
-      path={REFERENCE_DATASET}
-      exact
-      render={() => <ReferenceDatasetTable {...dataset} />}
-    />
-  </Switch>
+  </Routes>
 );
 
 ReferenceDatasetDetail.propTypes = {

package/src/components/ReferenceDatasetFieldSelector.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 import { useQuery } from "@apollo/client";
 import { Loading } from "@truedat/core/components";

package/src/components/ReferenceDatasetForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { useForm, Controller } from "react-hook-form";
 import { connect } from "react-redux";
@@ -14,11 +14,11 @@ const datasetValidator = (formatMessage) => (value) =>
   _.isNull(value)
     ? true
     : value.size > MAX_SIZE
-    ? formatMessage(
-        { id: "widget.image.error.too_big" },
-        { size_mb: MAX_SIZE_MB }
-      )
-    : true;
+      ? formatMessage(
+          { id: "widget.image.error.too_big" },
+          { size_mb: MAX_SIZE_MB }
+        )
+      : true;
 
 export const ReferenceDatasetForm = ({ saving, dataset = {}, onSubmit }) => {
   const { formatMessage } = useIntl();
@@ -50,7 +50,6 @@ export const ReferenceDatasetForm = ({ saving, dataset = {}, onSubmit }) => {
           />
         )}
       />
-
       <Controller
         control={control}
         name="name"

package/src/components/ReferenceDatasetHeader.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Header, Icon, Grid, Label } from "semantic-ui-react";

package/src/components/ReferenceDatasetRoutes.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
-import React from "react";
-import { Route, Switch, useParams } from "react-router-dom";
+import { Route, Routes } from "react-router";
+import { useParams } from "react-router";
 import { useQuery } from "@apollo/client";
 import { Loading } from "@truedat/core/components";
 import {
@@ -23,21 +23,12 @@ export const DatasetLoader = () => {
   const dataset = data?.referenceDataset;
   return _.isEmpty(dataset) ? null : <ReferenceDataset dataset={dataset} />;
 };
-
 export const ReferenceDatasetRoutes = () => (
-  <Switch>
-    <Route
-      path={REFERENCE_DATASET_NEW}
-      exact
-      render={() => <ReferenceDatasetCreate />}
-    />
-    <Route
-      path={REFERENCE_DATASETS}
-      exact
-      render={() => <ReferenceDatasets />}
-    />
-    <Route path={REFERENCE_DATASET} render={() => <DatasetLoader />} />
-  </Switch>
+  <Routes>
+    <Route index element={<ReferenceDatasets />} />
+    <Route path="new" element={<ReferenceDatasetCreate />} />
+    <Route path=":id/*" element={<DatasetLoader />} />
+  </Routes>
 );
 
 export default ReferenceDatasetRoutes;

package/src/components/ReferenceDatasetSelectorInputField.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { matchSorter } from "match-sorter";
 import { useIntl } from "react-intl";
@@ -46,11 +46,14 @@ export const ReferenceDatasetSelectorInputField = ({
 
   const handleChange = (_e, { value }) =>
     onChange(_.find({ id: value })(datasets));
+
   const handleSearchChange = (_e, { searchQuery }) =>
     setSearchTerm(searchQuery);
+
   const handleSelectField = (clauses) => {
     onChangeField({ ...selectedStructure, clauses });
   };
+
   const handleSelectJoinType = (joinType) => {
     onChangeField({ ...selectedStructure, join_type: joinType });
   };

package/src/components/ReferenceDatasetTable.js

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

package/src/components/ReferenceDatasets.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import { matchSorter } from "match-sorter";
 import { useIntl, FormattedMessage } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button, Header, Icon, Input, Segment } from "semantic-ui-react";
 import { useQuery } from "@apollo/client";
 import { Loading } from "@truedat/core/components";

package/src/components/ReferenceDatasetsTable.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { Icon, Table } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useIntl } from "react-intl";
 import Moment from "react-moment";
 import { DateTime } from "@truedat/core/components";