@truedat/dq 7.5.9 → 7.5.10

package/src/components/RuleImplementationResultTabs.js

@@ -1,9 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Menu } from "semantic-ui-react";
-import { Link, withRouter } from "react-router-dom";
-import { compose } from "redux";
+import { Link } from "react-router";
+import { useLocation } from "react-router";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import {
@@ -16,14 +15,14 @@ import {
 export const RuleImplementationResultTabs = ({
   ruleImplementation,
   ruleResult,
-  match,
   authCreateRemediation,
   templates,
 }) => {
+  const { pathname } = useLocation();
   const renderSegmentResult = () => {
     return ruleResult.hasSegments ? (
       <Menu.Item
-        active={match.path === IMPLEMENTATION_RESULT_SEGMENTS_RESULTS}
+        active={pathname === IMPLEMENTATION_RESULT_SEGMENTS_RESULTS}
         as={Link}
         to={linkTo.IMPLEMENTATION_RESULT_SEGMENTS_RESULTS({
           implementation_id: ruleImplementation.id,
@@ -41,7 +40,7 @@ export const RuleImplementationResultTabs = ({
 
     return renderCondition ? (
       <Menu.Item
-        active={match.path === IMPLEMENTATION_RESULT_REMEDIATION_PLAN}
+        active={pathname === IMPLEMENTATION_RESULT_REMEDIATION_PLAN}
         as={Link}
         to={linkTo.IMPLEMENTATION_RESULT_REMEDIATION_PLAN({
           implementation_id: ruleImplementation.id,
@@ -56,7 +55,7 @@ export const RuleImplementationResultTabs = ({
   return _.isEmpty(ruleImplementation) ? null : (
     <Menu attached="top" pointing secondary tabular>
       <Menu.Item
-        active={match.path === IMPLEMENTATION_RESULT_DETAILS}
+        active={pathname === IMPLEMENTATION_RESULT_DETAILS}
         as={Link}
         to={linkTo.IMPLEMENTATION_RESULT_DETAILS({
           implementation_id: ruleImplementation.id,
@@ -89,7 +88,4 @@ const mapStateToProps = ({
   templates,
 });
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps)
-)(RuleImplementationResultTabs);
+export default connect(mapStateToProps)(RuleImplementationResultTabs);

package/src/components/RuleImplementationResults.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 { useIntl } from "react-intl";
@@ -8,7 +7,7 @@ import { Segment, Message, Divider } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
 import { DateTime, Loading } from "@truedat/core/components";
 import { CursorPagination } from "@truedat/core/components";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import queryString from "query-string";
 import { IMPLEMENTATION_RESULTS_CONNECTION_QUERY } from "../api/queries";
 import RuleResultsTable from "./RuleResultsTable";

package/src/components/RuleImplementationResultsLink.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 RuleImplementationResultsLink = ({ id, implementation_key }) => (

package/src/components/RuleImplementationRow.js

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

package/src/components/RuleImplementationTabs.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Menu } from "semantic-ui-react";
-import { Link, useRouteMatch } from "react-router-dom";
+import { Link } from "react-router";
+import { useActiveRoute } from "@truedat/core/hooks";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
 import {
@@ -28,7 +28,20 @@ export const RuleImplementationTabs = ({
   canViewDraftConcepts,
   canViewPendingApprovalConcepts,
 }) => {
-  const match = useRouteMatch();
+  const implementationActive =
+    useActiveRoute(IMPLEMENTATION) || useActiveRoute(IMPLEMENTATION_MOVE);
+  const conceptLinksActive =
+    useActiveRoute(IMPLEMENTATION_CONCEPT_LINKS) ||
+    useActiveRoute(IMPLEMENTATION_CONCEPT_LINKS_NEW);
+  const structuresActive =
+    useActiveRoute(IMPLEMENTATION_STRUCTURES) ||
+    useActiveRoute(IMPLEMENTATION_STRUCTURES_NEW);
+  const resultsActive = useActiveRoute(IMPLEMENTATION_RESULTS);
+  const executionsActive = useActiveRoute(IMPLEMENTATION_EXECUTIONS);
+  const resultsDetailsActive = useActiveRoute(IMPLEMENTATION_RESULTS_DETAILS);
+  const historyActive = useActiveRoute(IMPLEMENTATION_HISTORY);
+  const eventsActive = useActiveRoute(IMPLEMENTATION_EVENTS);
+
   const latest_rule_id = _.flow(
     _.pathOr([], "results"),
     _.head,
@@ -38,9 +51,7 @@ export const RuleImplementationTabs = ({
   return _.isEmpty(ruleImplementation) ? null : (
     <Menu attached="top" pointing secondary tabular>
       <Menu.Item
-        active={
-          match.path === IMPLEMENTATION || match.path === IMPLEMENTATION_MOVE
-        }
+        active={implementationActive}
         as={Link}
         to={linkTo.IMPLEMENTATION({
           implementation_id: ruleImplementation.id,
@@ -48,16 +59,12 @@ export const RuleImplementationTabs = ({
       >
         <FormattedMessage id="tabs.dq.ruleImplementation" />
       </Menu.Item>
-
       {canCreateLink ||
       canViewPublishedConcepts ||
       canViewDraftConcepts ||
       canViewPendingApprovalConcepts ? (
         <Menu.Item
-          active={
-            match.path === IMPLEMENTATION_CONCEPT_LINKS ||
-            match.path === IMPLEMENTATION_CONCEPT_LINKS_NEW
-          }
+          active={conceptLinksActive}
           as={Link}
           to={linkTo.IMPLEMENTATION_CONCEPT_LINKS({
             id: rule.id,
@@ -68,10 +75,7 @@ export const RuleImplementationTabs = ({
         </Menu.Item>
       ) : null}
       <Menu.Item
-        active={
-          match.path === IMPLEMENTATION_STRUCTURES ||
-          match.path === IMPLEMENTATION_STRUCTURES_NEW
-        }
+        active={structuresActive}
         as={Link}
         to={linkTo.IMPLEMENTATION_STRUCTURES({
           id: rule.id,
@@ -81,7 +85,7 @@ export const RuleImplementationTabs = ({
         <FormattedMessage id="tabs.dq.implementation.structures" />
       </Menu.Item>
       <Menu.Item
-        active={match.path === IMPLEMENTATION_RESULTS}
+        active={resultsActive}
         as={Link}
         to={linkTo.IMPLEMENTATION_RESULTS({
           implementation_id: ruleImplementation.id,
@@ -90,7 +94,7 @@ export const RuleImplementationTabs = ({
         <FormattedMessage id="tabs.dq.ruleImplementation.results" />
       </Menu.Item>
       <Menu.Item
-        active={match.path === IMPLEMENTATION_EXECUTIONS}
+        active={executionsActive}
         as={Link}
         to={linkTo.IMPLEMENTATION_EXECUTIONS({
           implementation_id: ruleImplementation.id,
@@ -100,7 +104,7 @@ export const RuleImplementationTabs = ({
       </Menu.Item>
       {_.isNil(latest_rule_id) ? null : (
         <Menu.Item
-          active={match.path === IMPLEMENTATION_RESULTS_DETAILS}
+          active={resultsDetailsActive}
           as={Link}
           to={linkTo.IMPLEMENTATION_RESULTS_DETAILS({
             implementation_id: ruleImplementation.id,
@@ -111,7 +115,7 @@ export const RuleImplementationTabs = ({
         </Menu.Item>
       )}
       <Menu.Item
-        active={match.path === IMPLEMENTATION_HISTORY}
+        active={historyActive}
         as={Link}
         to={linkTo.IMPLEMENTATION_HISTORY({
           implementation_id: ruleImplementation.id,
@@ -119,9 +123,8 @@ export const RuleImplementationTabs = ({
       >
         <FormattedMessage id="tabs.dq.ruleImplementation.history" />
       </Menu.Item>
-
       <Menu.Item
-        active={match.path === IMPLEMENTATION_EVENTS}
+        active={eventsActive}
         as={Link}
         to={linkTo.IMPLEMENTATION_EVENTS({
           implementation_id: ruleImplementation.id,

package/src/components/RuleImplementationsActions.js

@@ -1,9 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Checkbox } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useIntl } from "react-intl";
 import {
   IMPLEMENTATION_NEW,

package/src/components/RuleImplementationsDownload.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/RuleImplementationsFromRuleLoader.js

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { useParams } from "react-router";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";

package/src/components/RuleImplementationsLabelResults.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
@@ -8,7 +7,7 @@ export const RuleImplementationsLabelResults = ({
   executeImplementationsOn,
   implementationsToExecute,
   ruleImplementationCount,
-  ruleImplementationsLoading
+  ruleImplementationsLoading,
 }) => (
   <>
     <Label className="rules-label-results">
@@ -29,7 +28,7 @@ export const RuleImplementationsLabelResults = ({
             count:
               implementationsToExecute == 0
                 ? ruleImplementationCount
-                : implementationsToExecute
+                : implementationsToExecute,
           }}
         />
       </Label>
@@ -41,15 +40,15 @@ RuleImplementationsLabelResults.propTypes = {
   executeImplementationsOn: PropTypes.bool,
   implementationsToExecute: PropTypes.number,
   ruleImplementationCount: PropTypes.number,
-  ruleImplementationsLoading: PropTypes.bool
+  ruleImplementationsLoading: PropTypes.bool,
 };
 
 const mapStateToProps = ({
   ruleImplementationCount,
-  ruleImplementationsLoading
+  ruleImplementationsLoading,
 }) => ({
   ruleImplementationCount,
-  ruleImplementationsLoading
+  ruleImplementationsLoading,
 });
 
 export default connect(mapStateToProps)(RuleImplementationsLabelResults);

package/src/components/RuleImplementationsOptions.js

@@ -1,8 +1,7 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Dropdown } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { IMPLEMENTATION_NEW_BASIC } from "@truedat/core/routes";
 import RuleImplementationsDownload from "./RuleImplementationsDownload";
 import RuleResultsUpload from "./RuleResultsUpload";

package/src/components/RuleImplementationsSearch.js

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

package/src/components/RuleImplementationsTable.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 { getSortInfo, sortColumn } from "@truedat/core/services/sort";

package/src/components/RuleLink.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 RuleLink = ({ id, name }) =>

package/src/components/RuleLoader.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 { clearRule, fetchRule } from "../routines";
 

package/src/components/RuleProperties.js

@@ -1,19 +1,18 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { List, Label } from "semantic-ui-react";
-import "rc-slider/assets/index.css";
-import { RichTextEditor } from "@truedat/core/components";
+// import "rc-slider/assets/index.css";
+import RichTextEditor from "@truedat/core/components/RichTextEditor";
 import { linkTo } from "@truedat/core/routes";
 
 const getStatusColor = (active) =>
   ({
     false: "teal",
     true: "olive",
-  }[active] || "grey");
+  })[active] || "grey";
 
 export const RuleProperties = ({
   business_concept_id,
@@ -41,7 +40,6 @@ export const RuleProperties = ({
           <List.Header>
             <FormattedMessage id="quality.domain" />
           </List.Header>
-
           <List.Content>{domain.name}</List.Content>
         </List.Item>
       )}

package/src/components/RuleResult.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 } from "semantic-ui-react";

package/src/components/RuleResultDecorator.js

@@ -1,5 +1,4 @@
 import _, { defaultTo, has, isNil } from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { Icon } from "semantic-ui-react";
 import { useIntl } from "react-intl";
@@ -77,11 +76,11 @@ export const calculateResultDecoration = ({
   const resultText = isNil(result)
     ? formatMessage({ id: "quality.result.no.data" })
     : date
-    ? formatMessage(
-        { id: `quality.result.${type}.date` },
-        { result, date: <DateTime value={date} /> }
-      )
-    : formatMessage({ id: `quality.result.${type}.description` }, { result });
+      ? formatMessage(
+          { id: `quality.result.${type}.date` },
+          { result, date: <DateTime value={date} /> }
+        )
+      : formatMessage({ id: `quality.result.${type}.description` }, { result });
 
   const color = selectColor(colorParams);
 

package/src/components/RuleResultDetails.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
@@ -34,7 +33,6 @@ const GeneralInformation = ({ ruleImplementation, ruleResult }) => {
           )}
         </Table.Cell>
       </Table.Row>
-
       <Table.Row>
         <Table.Cell>
           {formatMessage({ id: "ruleResult.props.date" })}
@@ -43,14 +41,12 @@ const GeneralInformation = ({ ruleImplementation, ruleResult }) => {
           <DateTime value={ruleResult.date} />
         </Table.Cell>
       </Table.Row>
-
       <Table.Row>
         <Table.Cell>
           {formatMessage({ id: "ruleResult.props.records" })}
         </Table.Cell>
         <Table.Cell>{formatNumber(ruleResult.records)}</Table.Cell>
       </Table.Row>
-
       <Table.Row>
         <Table.Cell>
           {formatMessage({ id: "ruleResult.props.errors" })}

package/src/components/RuleResultRemediationLoader.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 

package/src/components/RuleResultRemediations.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import RemediationPlan from "./RemediationPlan";
 import "../styles/executionDetails.less";

package/src/components/RuleResultRow.js

@@ -1,9 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Button, Table, Icon, Label } from "semantic-ui-react";
 import { ConfirmModal, DateTime } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";

package/src/components/RuleResultSegmentRow.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/RuleResultSegments.js

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

package/src/components/RuleResultSegmentsLoader.js

@@ -1,5 +1,5 @@
 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 { clearSegmentResults, fetchSegmentResults } from "../routines";

package/src/components/RuleResultsRoutes.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { Route, useParams } from "react-router-dom";
+import { Routes, Route, useParams } from "react-router";
 import { Segment } from "semantic-ui-react";
 import { useQuery } from "@apollo/client";
 import { Loading } from "@truedat/core/components";
@@ -24,46 +23,47 @@ export const RuleResultsRoutes = ({}) => {
   if (error) return null;
   if (loading) return <Loading />;
   const result = data?.implementationResult;
+
   return (
-    <>
-      <Route
-        exact
-        path={IMPLEMENTATION_RESULT_DETAILS}
-        render={() => (
-          <Segment>
-            <ImplementationCrumbs ruleResult={result} />
-            <RuleResult ruleResult={result}>
-              <RuleResultDetails ruleResult={result} />
-            </RuleResult>
-          </Segment>
-        )}
-      />
-      <Route
-        exact
-        path={IMPLEMENTATION_RESULT_SEGMENTS_RESULTS}
-        render={() => (
-          <Segment>
-            <ImplementationCrumbs ruleResult={result} />
-            <RuleResult ruleResult={result}>
-              <RuleResultSegmentsLoader />
-              <RuleResultSegments />
-            </RuleResult>
-          </Segment>
-        )}
-      />
-      <Route
-        exact
-        path={IMPLEMENTATION_RESULT_REMEDIATION_PLAN}
-        render={() => (
-          <Segment>
-            <ImplementationCrumbs ruleResult={result} />
-            <RuleResult ruleResult={result}>
-              <RuleResultRemediations ruleResult={result} />
-            </RuleResult>
-          </Segment>
-        )}
-      />
-    </>
+    <Routes>
+      <Route>
+        <Route
+          index
+          element={
+            <Segment>
+              <ImplementationCrumbs ruleResult={result} />
+              <RuleResult ruleResult={result}>
+                <RuleResultDetails ruleResult={result} />
+              </RuleResult>
+            </Segment>
+          }
+        />
+        <Route
+          path="segment_results"
+          element={
+            <Segment>
+              <ImplementationCrumbs ruleResult={result} />
+              <RuleResult ruleResult={result}>
+                <RuleResultSegmentsLoader />
+                <RuleResultSegments />
+              </RuleResult>
+            </Segment>
+          }
+        />
+        <Route
+          path="remediation_plan"
+          element={
+            <Segment>
+              <ImplementationCrumbs ruleResult={result} />
+              <RuleResult ruleResult={result}>
+                <RuleResultRemediations ruleResult={result} />
+              </RuleResult>
+            </Segment>
+          }
+        />
+      </Route>
+      <Route path="*" element={null} />
+    </Routes>
   );
 };
 

package/src/components/RuleResultsTable.js

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

package/src/components/RuleResultsUpload.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";