@truedat/dq 7.5.7 → 7.5.10

package/src/components/ImplementationsUploadButton.js

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

package/src/components/InformationSummary.js

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

package/src/components/JoinTypeIcon.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 export const JoinTypeIcon = ({ type }) => {
@@ -7,36 +6,36 @@ export const JoinTypeIcon = ({ type }) => {
       return (
         <div className="join_type">
           <div className="circle circle-left">
-            <div className="circle circle-center fill"></div>
+            <div className="circle circle-center fill" />
           </div>
-          <div className="circle circle-right"></div>
+          <div className="circle circle-right" />
         </div>
       );
     case "left":
       return (
         <div className="join_type">
           <div className="circle circle-left fill">
-            <div className="circle circle-center fill"></div>
+            <div className="circle circle-center fill" />
           </div>
-          <div className="circle circle-right"></div>
+          <div className="circle circle-right" />
         </div>
       );
     case "right":
       return (
         <div className="join_type">
           <div className="circle circle-left">
-            <div className="circle circle-center fill"></div>
+            <div className="circle circle-center fill" />
           </div>
-          <div className="circle circle-right fill"></div>
+          <div className="circle circle-right fill" />
         </div>
       );
     case "full_outer":
       return (
         <div className="join_type">
           <div className="circle circle-left fill">
-            <div className="circle circle-center fill"></div>
+            <div className="circle circle-center fill" />
           </div>
-          <div className="circle circle-right fill"></div>
+          <div className="circle circle-right fill" />
         </div>
       );
     default:

package/src/components/MoveImplementation.js

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

package/src/components/NewBasicRuleImplementation.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
@@ -97,8 +97,8 @@ export const NewBasicRuleImplementation = ({
                   clone
                     ? "ruleImplementations.actions.create"
                     : edition
-                    ? "ruleImplementations.actions.edit"
-                    : "ruleImplementations.actions.create"
+                      ? "ruleImplementations.actions.edit"
+                      : "ruleImplementations.actions.create"
                 }
               />
             </Header.Content>
@@ -117,7 +117,7 @@ export const NewBasicRuleImplementation = ({
           />
         </Grid.Row>
       </Grid.Column>
-      <Grid.Column width="5"></Grid.Column>
+      <Grid.Column width="5" />
     </Grid>
   );
 };

package/src/components/NewRemediation.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Header, Icon, Container, Segment } from "semantic-ui-react";

package/src/components/NewRule.js

@@ -1,8 +1,7 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { createRule } from "../routines";
 import RuleForm from "./RuleForm";

package/src/components/NewRuleImplementation.js

@@ -1,10 +1,10 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import queryString from "query-string";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { Divider, Loader, Header, Grid } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 import { Loading } from "@truedat/core/components";
@@ -588,8 +588,8 @@ export const NewRuleImplementation = ({
                   clone
                     ? "ruleImplementations.actions.create"
                     : edition
-                    ? "ruleImplementations.actions.edit"
-                    : "ruleImplementations.actions.create"
+                      ? "ruleImplementations.actions.edit"
+                      : "ruleImplementations.actions.create"
                 }
               />
             </Header.Content>

package/src/components/QualityEventError.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import Moment from "react-moment";
 import { Feed } from "semantic-ui-react";
@@ -7,13 +6,11 @@ const dateDecorator = date =>
   date && <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm:ss.SSS" />;
 
 export const Event = ({ inserted_at, message, type }) => (
-  <Feed.Event>
-    <Feed.Content
+  <Feed.Event><Feed.Content
       date={dateDecorator(inserted_at)}
       summary={type}
       extraText={message}
-    />
-  </Feed.Event>
+    /></Feed.Event>
 );
 
 Event.propTypes = {
@@ -24,16 +21,14 @@ Event.propTypes = {
 
 export const QualityEventError = ({ inserted_at, message, type }) => {
   return (
-    <Feed size="large">
-      {
+    (<Feed size="large">{
         <Event
           key="failed_event"
           inserted_at={inserted_at}
           message={message}
           type={type}
         />
-      }
-    </Feed>
+      }</Feed>)
   );
 };
 

package/src/components/QualityRoutes.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
+import { Route, Routes } from "react-router";
+import { ProtectedRoute, Loader } from "@truedat/core/router";
 import {
   EXECUTION_GROUP,
   EXECUTION_GROUPS,
@@ -17,52 +16,79 @@ import ImplementationsRoutes from "./ImplementationsRoutes";
 import RulesRoutes from "./RulesRoutes";
 
 const ExecutionsRoutes = () => (
-  <Switch>
+  <Routes>
     <Route
-      path={EXECUTION_GROUP}
-      render={() => (
+      //  EXECUTION_GROUPS = "/executionGroups";
+      index
+      element={<ExecutionGroups />}
+    />
+    <Route
+      // EXECUTION_GROUP = "/executionGroups/:id";
+      path=":id"
+      element={
         <>
           <ExecutionGroupLoader />
           <ExecutionGroup />
         </>
-      )}
+      }
     />
-    <Route path={EXECUTION_GROUPS} render={() => <ExecutionGroups />} />
-  </Switch>
+  </Routes>
 );
 
 const QualityRoutes = () => {
-  const authorized = useAuthorized("quality");
-
   return (
-    <>
+    <Routes>
       <Route
-        path={EXECUTION_GROUPS}
-        render={() => (authorized ? <ExecutionsRoutes /> : <Unauthorized />)}
+        // EXECUTION_GROUPS = "/executionGroups";
+        path="/executionGroups/*"
+        element={
+          <ProtectedRoute authorization="quality">
+            <ExecutionsRoutes />
+          </ProtectedRoute>
+        }
       />
+
       <Route
-        path={RULES}
-        render={() => (authorized ? <RulesRoutes /> : <Unauthorized />)}
+        // RULES = "/rules";
+        path="/rules/*"
+        element={
+          <ProtectedRoute authorization="quality">
+            <RulesRoutes />
+          </ProtectedRoute>
+        }
       />
+
       <Route
-        path={IMPLEMENTATIONS}
-        render={() =>
-          authorized ? <ImplementationsRoutes /> : <Unauthorized />
+        // IMPLEMENTATIONS = "/implementations";
+        path="/implementations/*"
+        element={
+          <ProtectedRoute authorization="quality">
+            <ImplementationsRoutes />
+          </ProtectedRoute>
         }
       />
+
       <Route
-        path={IMPLEMENTATIONS_PENDING}
-        render={() =>
-          authorized ? <ImplementationsRoutes /> : <Unauthorized />
+        // IMPLEMENTATIONS_PENDING = "/pendingImplementations";
+        path="/pendingImplementations/*"
+        element={
+          <ProtectedRoute authorization="quality">
+            <ImplementationsRoutes />
+          </ProtectedRoute>
         }
       />
+
       <Route
-        path={IMPLEMENTATIONS_DEPRECATED}
-        render={() =>
-          authorized ? <ImplementationsRoutes /> : <Unauthorized />
+        // IMPLEMENTATIONS_DEPRECATED = "/deprecatedImplementations";
+        path="/deprecatedImplementations/*"
+        element={
+          <ProtectedRoute authorization="quality">
+            <ImplementationsRoutes />
+          </ProtectedRoute>
         }
       />
-    </>
+      <Route path="*" element={null} />
+    </Routes>
   );
 };
 

package/src/components/RawContent.js

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

package/src/components/RemediationCrumbs.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
 import { connect } from "react-redux";
-import { Link, useParams } from "react-router-dom";
+import { Link } from "react-router";
+import { useParams } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { RULES, linkTo } from "@truedat/core/routes";
 

package/src/components/RemediationForm.js

@@ -1,14 +1,14 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { lazy, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { Button, Form } from "semantic-ui-react";
 import { createRemediation, updateRemediation } from "../routines";
 
-const SelectableDynamicForm = React.lazy(() =>
-  import("@truedat/df/components/SelectableDynamicForm")
+const SelectableDynamicForm = lazy(
+  () => import("@truedat/df/components/SelectableDynamicForm")
 );
 
 export const RemediationForm = ({

package/src/components/RemediationPlan.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import { lazy, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { Button, Grid, Container } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { Loading } from "@truedat/core/components";
@@ -14,8 +14,8 @@ import RemediationForm from "./RemediationForm";
 
 import "../styles/remediationPlan.less";
 
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
+const DynamicFormViewer = lazy(
+  () => import("@truedat/df/components/DynamicFormViewer")
 );
 
 export const RemediationPlan = ({
@@ -84,7 +84,6 @@ export const RemediationPlan = ({
               />
             </div>
           ) : null}
-
           <Grid>
             <Grid.Column width={8}>
               {!isEdit && remediation?.df_name ? (

package/src/components/Rule.js

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

package/src/components/RuleActions.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
+import { Link } from "react-router";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
 import { Button, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";

package/src/components/RuleCrumbs.js

@@ -1,13 +1,12 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { RULES } from "@truedat/core/routes";
 
 export const RuleCrumbs = ({ rule }) => {
-  return rule.name ? (
+  return rule?.name ? (
     <Breadcrumb>
       <Breadcrumb.Section as={Link} to={RULES} active={false}>
         <FormattedMessage id="rules.crumbs.top" />

package/src/components/RuleEventDecorator.js

@@ -1,5 +1,4 @@
 import { flow, last, prop, propOr, sortBy } from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Icon } from "semantic-ui-react";
 

package/src/components/RuleEventRow.js

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

package/src/components/RuleEvents.js

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

package/src/components/RuleForm.js

@@ -1,10 +1,9 @@
 import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage, injectIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import { compose } from "redux";
+import { useParams } from "react-router";
 import {
   Accordion,
   Button,
@@ -21,12 +20,12 @@ import {
   RichTextEditor,
 } from "@truedat/core/components";
 
-const ConceptSelector = React.lazy(() =>
-  import("@truedat/bg/concepts/relations/components/ConceptSelector")
+const ConceptSelector = lazy(
+  () => import("@truedat/bg/concepts/relations/components/ConceptSelector")
 );
 
-const SelectableDynamicForm = React.lazy(() =>
-  import("@truedat/df/components/SelectableDynamicForm")
+const SelectableDynamicForm = lazy(
+  () => import("@truedat/df/components/SelectableDynamicForm")
 );
 
 export const FieldLabelWrapping = ({
@@ -75,12 +74,12 @@ const filters = {
 export const RuleForm = ({
   concept,
   editMode,
-  intl,
   isSubmitting,
-  match,
   onSubmit,
   rule: ruleData,
 }) => {
+  const intl = useIntl();
+  const params = useParams();
   const [valid, setValid] = useState(false);
   const [domainsLoading, setDomainsLoading] = useState(true);
   const [activeSelection, setActiveSelection] = useState(false);
@@ -145,7 +144,7 @@ export const RuleForm = ({
 
     onSubmit({
       rule: { ...ruleData, df_name: templateName },
-      ids: match.params,
+      ids: params,
     });
   };
 
@@ -274,7 +273,6 @@ export const RuleForm = ({
                 </Label>
               ) : null}
             </Form.Group>
-
             <Accordion>
               <Accordion.Title
                 active={activeSelection && !!domain_id}
@@ -294,7 +292,6 @@ export const RuleForm = ({
             </Accordion>
           </Segment>
         ) : null}
-
         <SelectableDynamicForm
           scope="dq"
           domainIds={_.isNil(domain_id) ? null : [domain_id]}
@@ -305,7 +302,6 @@ export const RuleForm = ({
           onChange={handleContentChange}
           onNameChange={(df_name) => setTemplateName(df_name)}
         />
-
         <div className="actions">
           <HistoryBackButton
             content={formatMessage({ id: "actions.cancel" })}
@@ -327,9 +323,7 @@ export const RuleForm = ({
 RuleForm.propTypes = {
   concept: PropTypes.object,
   editMode: PropTypes.bool,
-  intl: PropTypes.object,
   isSubmitting: PropTypes.bool,
-  match: PropTypes.object,
   onSubmit: PropTypes.func.isRequired,
   rule: PropTypes.object,
 };
@@ -339,8 +333,4 @@ const mapStateToProps = ({ ruleCreating, ruleUpdating, concept }) => ({
   concept,
 });
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(mapStateToProps)
-)(RuleForm);
+export default connect(mapStateToProps)(RuleForm);

package/src/components/RuleFormImplementations.js

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

package/src/components/RuleImplementation.js

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

package/src/components/RuleImplementationActions.js

@@ -1,8 +1,8 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { Link, useParams } from "react-router-dom";
+import { Link } from "react-router";
+import { useParams } from "react-router";
 import { Button } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 

package/src/components/RuleImplementationEventRow.js

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

package/src/components/RuleImplementationEvents.js

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

package/src/components/RuleImplementationHistory.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { useQuery } from "@apollo/client";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";

package/src/components/RuleImplementationHistoryRow.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 { Table } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { DateTime } from "@truedat/core/components";

package/src/components/RuleImplementationLink.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 { linkTo } from "@truedat/core/routes";
 
 export const RuleImplementationLink = ({ id, implementation_key }) => (

package/src/components/RuleImplementationLoader.js

@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+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 { Loading } from "@truedat/core/components";
 import { clearRuleImplementation, fetchRuleImplementation } from "../routines";
 

package/src/components/RuleImplementationProperties.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import { lazy } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
@@ -8,8 +8,8 @@ import InformationSummary from "./InformationSummary";
 import ImplementationSummary from "./ImplementationSummary";
 import RawContent from "./RawContent";
 
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
+const DynamicFormViewer = lazy(
+  () => import("@truedat/df/components/DynamicFormViewer")
 );
 
 const summarySteps = ["dataset", "populations", "validations", "segments"];
@@ -49,7 +49,6 @@ export const RuleImplementationProperties = ({
               <List.Header>
                 <FormattedMessage id="quality.domain" />
               </List.Header>
-
               <List.Content>{ruleImplementation?.domain.name}</List.Content>
             </List.Item>
           </List>