@truedat/dd 7.5.9 → 7.5.11

package/src/components/StructureProfileButton.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
@@ -9,7 +8,7 @@ export const StructureProfileButton = ({ structure, createProfileGroup }) => {
   const { formatMessage } = useIntl();
   const handleSubmit = () => {
     const payload = {
-      data_structure_ids: [structure.id]
+      data_structure_ids: [structure.id],
     };
     createProfileGroup(payload);
   };
@@ -33,15 +32,15 @@ export const StructureProfileButton = ({ structure, createProfileGroup }) => {
 
 StructureProfileButton.propTypes = {
   structure: PropTypes.object,
-  createProfileGroup: PropTypes.func
+  createProfileGroup: PropTypes.func,
 };
 
 const mapStateToProps = ({ structure }) => ({
-  structure
+  structure,
 });
 
 const mapDispatchToProps = {
-  createProfileGroup
+  createProfileGroup,
 };
 
 export default connect(

package/src/components/StructureProperties.js

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

package/src/components/StructureRelationRow.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";
@@ -9,7 +8,7 @@ export const StructureRelationRow = ({
   columns,
   onClick,
   active,
-  disabled
+  disabled,
 }) => {
   return _.isEmpty(columns) || _.isEmpty(relation) ? null : (
     <Table.Row
@@ -31,7 +30,7 @@ export const StructureRelationRow = ({
 StructureRelationRow.propTypes = {
   relation: PropTypes.object,
   columns: PropTypes.array,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
 };
 
 export default StructureRelationRow;

package/src/components/StructureRelations.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Table } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
@@ -34,7 +33,7 @@ export const StructureRelations = ({ columns, relations, ...rest }) => (
 
 StructureRelations.propTypes = {
   columns: PropTypes.array,
-  relations: PropTypes.array
+  relations: PropTypes.array,
 };
 
 export default StructureRelations;

package/src/components/StructureRoles.js

@@ -1,10 +1,9 @@
-import React from "react";
 import ResourceMembers from "@truedat/core/components/ResourceMembers";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 
 export const StructureRoles = () => {
   const { id: urlId } = useParams();
-  const id = !isNaN(parseInt(urlId)) ? parseInt(urlId) : undefined;
+  const id = !isNaN(urlId) ? urlId : undefined;
   return <ResourceMembers type="structure" id={id} />;
 };
 

package/src/components/StructureRow.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/StructureSearch.js

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

package/src/components/StructureSelector.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect, useSelector } from "react-redux";
 import { Segment } from "semantic-ui-react";
@@ -12,7 +12,7 @@ import translations from "../utils/structureCustomTranslations";
 import {
   useDataStructureFilters,
   useDataStructureSearch,
-} from "../hooks/useStructures";
+} from "@truedat/dd/hooks/useStructures";
 import { defaultColumnsForStructureSelector } from "../selectors";
 
 import StructuresSearchResults from "./StructuresSearchResults";

package/src/components/StructureSelectorInputField.js

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

package/src/components/StructureSelectorInputFieldJoin.js

@@ -1,14 +1,12 @@
 import _ from "lodash/fp";
-import React from "react";
+import { lazy } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Button, Dropdown, Grid, Icon, Popup } from "semantic-ui-react";
 import { getStructureFieldOptionValue } from "../selectors/getStructureFieldOptionValue";
 import StructureFieldsDropdown from "./StructureFieldsDropdown";
 
-const JoinTypeIcon = React.lazy(() =>
-  import("@truedat/dq/components/JoinTypeIcon")
-);
+const JoinTypeIcon = lazy(() => import("@truedat/dq/components/JoinTypeIcon"));
 
 const getClauses = (selectedStructure) => {
   const clauses = _.getOr([], "clauses")(selectedStructure);
@@ -61,7 +59,7 @@ const JoinClause = ({
         width={1}
         style={{ textAlign: "center", fontSize: "x-large" }}
       >
-        {"="}
+        =
       </Grid.Column>
       <Grid.Column width={4}>
         <StructureFieldsDropdown
@@ -72,22 +70,20 @@ const JoinClause = ({
         />
       </Grid.Column>
       <Grid.Column width={1}>
-        {
-          <Popup
-            disabled={!addActionDisabled}
-            content={formatMessage({
-              id: "dataset.form.button.add_join.popup",
-            })}
-            trigger={
-              <Icon
-                name="add circle"
-                disabled={addActionDisabled}
-                className="selectable"
-                onClick={createClause}
-              />
-            }
-          />
-        }
+        <Popup
+          disabled={!addActionDisabled}
+          content={formatMessage({
+            id: "dataset.form.button.add_join.popup",
+          })}
+          trigger={
+            <Icon
+              name="add circle"
+              disabled={addActionDisabled}
+              className="selectable"
+              onClick={createClause}
+            />
+          }
+        />
       </Grid.Column>
       <Grid.Column width={1}>
         {idx > 0 && (
@@ -180,7 +176,6 @@ export const StructureSelectorInputFieldJoin = ({
           </Dropdown>
         </Grid.Column>
       </Grid>
-
       <label>{formatMessage({ id: "structureSelector.union.criteria" })}</label>
       <div style={{ marginBottom: "1em" }}>
         {clauses.map(({ left, right }, idx) => (

package/src/components/StructureStructureForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { Suspense } from "react";
+import { lazy, Suspense } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { Button, Form } from "semantic-ui-react";
 import { connect } from "react-redux";
@@ -9,8 +9,8 @@ import { HistoryBackButton } from "@truedat/core/components";
 import { linkStructureToStructure as linkStructureToStructureRoutine } from "../routines";
 import LinkLabelsSelector from "./LinkLabelsSelector";
 
-const StructureSelector = React.lazy(() =>
-  import("@truedat/dd/components/StructureSelector")
+const StructureSelector = lazy(
+  () => import("@truedat/dd/components/StructureSelector")
 );
 
 export const StructureStructureForm = ({
@@ -30,49 +30,43 @@ export const StructureStructureForm = ({
   const { isDirty, isValid } = formState;
 
   return (
-    <Suspense fallback={null}>
-      <Form
-        onSubmit={handleSubmit((data) => {
-          linkStructureToStructure(data);
-        })}
-      >
-        <Controller
-          control={control}
-          name="labelIds"
-          render={({ field: { onChange, value: selectedLabelIds } }) => (
-            <LinkLabelsSelector
-              onChange={onChange}
-              selectedLabelIds={selectedLabelIds}
-            />
-          )}
-        />
-
-        <Controller
-          control={control}
-          name="targetStructureId"
-          rules={{ required: true }}
-          render={({ field: { onChange } }) => (
-            <StructureSelector
-              onSelect={({ id }) => {
-                onChange(id);
-              }}
-            />
-          )}
-        />
-
-        <div className="actions">
-          <HistoryBackButton
-            content={formatMessage({ id: "actions.cancel" })}
+    <Form
+      onSubmit={handleSubmit((data) => {
+        linkStructureToStructure(data);
+      })}
+    >
+      <Controller
+        control={control}
+        name="labelIds"
+        render={({ field: { onChange, value: selectedLabelIds } }) => (
+          <LinkLabelsSelector
+            onChange={onChange}
+            selectedLabelIds={selectedLabelIds}
           />
-          <Button
-            type="submit"
-            disabled={!isDirty || !isValid}
-            primary
-            content={formatMessage({ id: "actions.save" })}
+        )}
+      />
+      <Controller
+        control={control}
+        name="targetStructureId"
+        rules={{ required: true }}
+        render={({ field: { onChange } }) => (
+          <StructureSelector
+            onSelect={({ id }) => {
+              onChange(id);
+            }}
           />
-        </div>
-      </Form>
-    </Suspense>
+        )}
+      />
+      <div className="actions">
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+        <Button
+          type="submit"
+          disabled={!isDirty || !isValid}
+          primary
+          content={formatMessage({ id: "actions.save" })}
+        />
+      </div>
+    </Form>
   );
 };
 

package/src/components/StructureStructureLinks.js

@@ -1,14 +1,13 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Button, Table, Grid } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { linkTo } from "@truedat/core/routes";
 import { columnDecorator } from "@truedat/core/services";
 import { Loading } from "@truedat/core/components";
 import { useQuery } from "@apollo/client";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { connect } from "react-redux";
 import { ConfirmModal } from "@truedat/core/components";
 import { StructureCrumbs } from "../components/StructureCrumbs";
@@ -44,8 +43,8 @@ export const Edge = ({ structureId, structureLink }) => (
         structureId === structureLink?.source.id
           ? "M 0,10 h 90"
           : structureId === structureLink?.target.id
-          ? "M 95,10 h -90"
-          : ""
+            ? "M 95,10 h -90"
+            : ""
       }
       strokeWidth="1"
       stroke="#871f1f"
@@ -139,8 +138,8 @@ export const StructureStructureLinks = ({
             structureId !== structureLink?.source.id
               ? structureLink.source
               : structureId !== structureLink?.target.id
-              ? structureLink.target
-              : null,
+                ? structureLink.target
+                : null,
           (relatedStructure) => (
             <StructureCrumbs
               {...{
@@ -165,8 +164,9 @@ export const StructureStructureLinks = ({
     textAlign: "center",
     name: "_actions",
     fieldSelector: (structureLink) => structureLink,
-    fieldDecorator: (structureLink) =>
-      React.createElement(DeleteLinkConnected, { structureLink }),
+    fieldDecorator: (structureLink) => (
+      <DeleteLinkConnected structureLink={structureLink} />
+    ),
   };
   const columns = canLinkStructureToStructure
     ? [...fixedColumns, deleteButtonColumn]

package/src/components/StructureSummary.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Label, Grid, Divider } from "semantic-ui-react";
 import Moment from "react-moment";
@@ -22,8 +21,8 @@ const Date = ({ className, icon, label, date }) => {
       className={className}
     >
       {icon}
-      {formatMessage({ id: `structure.${label}` })}
-      : <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm" />
+      {formatMessage({ id: `structure.${label}` })}:
+      <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm" />
     </Label>
   );
 };

package/src/components/StructureTabPane.js

@@ -1,7 +1,7 @@
-import React from "react";
+import { lazy } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Route, Switch } from "react-router-dom";
+import { Route, Routes } from "react-router";
 import { ErrorBoundary } from "@truedat/core/components";
 import {
   STRUCTURE_LINKS_NEW,
@@ -29,18 +29,18 @@ import StructureRoles from "./StructureRoles";
 import StructureStructureLinks from "./StructureStructureLinks";
 import StructureStructureForm from "./StructureStructureForm";
 
-const StructureLinks = React.lazy(() =>
-  import("@truedat/lm/components/StructureLinks")
+const StructureLinks = lazy(
+  () => import("@truedat/lm/components/StructureLinks")
 );
 
-const StructureProfile = React.lazy(() => import("@truedat/profile"));
+const StructureProfile = lazy(() => import("@truedat/profile"));
 
-const StructureRelationForm = React.lazy(() =>
-  import("@truedat/lm/components/StructureRelationForm")
+const StructureRelationForm = lazy(
+  () => import("@truedat/lm/components/StructureRelationForm")
 );
 
-const RuleImplementationsTable = React.lazy(() =>
-  import("@truedat/dq/components/RuleImplementationsTable")
+const RuleImplementationsTable = lazy(
+  () => import("@truedat/dq/components/RuleImplementationsTable")
 );
 
 export const StructureTabPane = ({ activeTab, tabVisibility, columns }) => {
@@ -50,33 +50,24 @@ export const StructureTabPane = ({ activeTab, tabVisibility, columns }) => {
       {activeTab === "notes" && (
         <>
           <StructureNotesLoader scope="dd" />
-          <Switch>
-            <Route
-              path={STRUCTURE_NOTES_EDIT}
-              render={() => <StructureNotesEdit />}
-            />
-            <Route render={() => <StructureNotes />} />
-          </Switch>
+          <Routes>
+            <Route index element={<StructureNotes />} />
+            <Route path="edit" element={<StructureNotesEdit />} />
+          </Routes>
         </>
       )}
       {activeTab === "grants" && tabVisibility.grants && <StructureGrants />}
       {activeTab === "links" && (
-        <Switch>
-          <Route
-            path={STRUCTURE_LINKS_NEW}
-            render={() => <StructureRelationForm />}
-          />
-          <Route render={() => <StructureLinks />} />
-        </Switch>
+        <Routes>
+          <Route path="new" element={<StructureRelationForm />} />
+          <Route index element={<StructureLinks />} />
+        </Routes>
       )}
       {activeTab === "structureLinks" && (
-        <Switch>
-          <Route
-            path={STRUCTURE_STRUCTURE_LINKS_NEW}
-            render={() => <StructureStructureForm />}
-          />
-          <Route render={() => <StructureStructureLinks />} />
-        </Switch>
+        <Routes>
+          <Route path="new" element={<StructureStructureForm />} />
+          <Route index element={<StructureStructureLinks />} />
+        </Routes>
       )}
       {activeTab === "profile" && tabVisibility.profile && <StructureProfile />}
       {activeTab === "parents" && <StructureParentRelations />}
@@ -102,10 +93,7 @@ StructureTabPane.propTypes = {
   columns: PropTypes.array,
 };
 
-const mapStateToProps = (
-  { structureTabsOrder, ...state },
-  { match: { path } }
-) => {
+const mapStateToProps = ({ structureTabsOrder, ...state }, { path }) => {
   const tabVisibility = getTabVisibility(state);
   const activeTab = getActiveTab(tabVisibility, path, structureTabsOrder);
   return {

package/src/components/StructureTabPaneRoutes.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
+import { lazy } from "react";
+import { Route, Routes } from "react-router";
 import {
   STRUCTURE,
   STRUCTURE_CHILDREN,
@@ -21,30 +21,96 @@ import {
   STRUCTURE_VERSIONS,
   STRUCTURE_VERSION_VERSIONS,
 } from "@truedat/core/routes";
+import { useParams } from "react-router";
 import StructureTabPane from "./StructureTabPane";
 
+const EventsLoader = lazy(
+  () => import("@truedat/audit/components/EventsLoader")
+);
+const StructureEventsLoader = () => {
+  const { id } = useParams();
+  return <EventsLoader resource_id={id} resource_type="data_structure" />;
+};
+
 export const StructureTabPaneRoutes = ({}) => (
-  <Switch>
-    <Route path={STRUCTURE_VERSION_VERSIONS} component={StructureTabPane} />
-    <Route path={STRUCTURE_VERSION_FIELDS} component={StructureTabPane} />
-    <Route path={STRUCTURE_VERSION} component={StructureTabPane} />
-    <Route path={STRUCTURE_PROFILE} component={StructureTabPane} />
-    <Route path={STRUCTURE_STRUCTURE_LINKS} component={StructureTabPane} />
-    <Route path={STRUCTURE_LINKS} component={StructureTabPane} />
-    <Route path={STRUCTURE_VERSIONS} component={StructureTabPane} />
-    <Route path={STRUCTURE_EVENTS} component={StructureTabPane} />
-    <Route path={STRUCTURE_NOTES} component={StructureTabPane} />
-    <Route path={STRUCTURE_GRANTS} component={StructureTabPane} />
-    <Route path={STRUCTURE_METADATA} component={StructureTabPane} />
-    <Route path={STRUCTURE_MEMBERS} component={StructureTabPane} />
-    <Route path={STRUCTURE_RULES} component={StructureTabPane} />
-    <Route path={STRUCTURE_CHILDREN} component={StructureTabPane} />
-    <Route path={STRUCTURE_FIELDS} component={StructureTabPane} />
-    <Route path={STRUCTURE_PARENTS} component={StructureTabPane} />
-    <Route path={STRUCTURE_LINEAGE} component={StructureTabPane} />
-    <Route path={STRUCTURE_IMPACT} component={StructureTabPane} />
-    <Route path={STRUCTURE} component={StructureTabPane} exact />
-  </Switch>
+  <Routes>
+    <Route index exact element={<StructureTabPane path={STRUCTURE} />} />
+
+    <Route path="versions">
+      <Route index element={<StructureTabPane path={STRUCTURE_VERSIONS} />} />
+
+      <Route path=":version">
+        <Route index element={<StructureTabPane path={STRUCTURE_VERSION} />} />
+        <Route
+          path="versions"
+          element={<StructureTabPane path={STRUCTURE_VERSION_VERSIONS} />}
+        />
+        <Route
+          path="fields"
+          element={<StructureTabPane path={STRUCTURE_VERSION_FIELDS} />}
+        />
+      </Route>
+    </Route>
+
+    <Route
+      path="profile"
+      element={<StructureTabPane path={STRUCTURE_PROFILE} />}
+    />
+    <Route
+      path="links/*"
+      element={<StructureTabPane path={STRUCTURE_LINKS} />}
+    />
+    <Route
+      path="structureLinks/*"
+      element={<StructureTabPane path={STRUCTURE_STRUCTURE_LINKS} />}
+    />
+    <Route
+      path="events"
+      element={
+        <>
+          <StructureEventsLoader />
+          <StructureTabPane path={STRUCTURE_EVENTS} />
+        </>
+      }
+    />
+    <Route
+      path="metadata"
+      element={<StructureTabPane path={STRUCTURE_METADATA} />}
+    />
+    <Route
+      path="notes/*"
+      element={<StructureTabPane path={STRUCTURE_NOTES} />}
+    />
+    <Route
+      path="members"
+      element={<StructureTabPane path={STRUCTURE_MEMBERS} />}
+    />
+    <Route path="rules" element={<StructureTabPane path={STRUCTURE_RULES} />} />
+    <Route
+      path="lineage"
+      element={<StructureTabPane path={STRUCTURE_LINEAGE} />}
+    />
+    <Route
+      path="children"
+      element={<StructureTabPane path={STRUCTURE_CHILDREN} />}
+    />
+    <Route
+      path="fields"
+      element={<StructureTabPane path={STRUCTURE_FIELDS} />}
+    />
+    <Route
+      path="parents"
+      element={<StructureTabPane path={STRUCTURE_PARENTS} />}
+    />
+    <Route
+      path="impact"
+      element={<StructureTabPane path={STRUCTURE_IMPACT} />}
+    />
+    <Route
+      path="grants"
+      element={<StructureTabPane path={STRUCTURE_GRANTS} />}
+    />
+  </Routes>
 );
 
 export default StructureTabPaneRoutes;