@truedat/dq 4.44.5 → 4.45.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.45.2] 2022-05-31
+
+### Added
+
+- [TD-3633] Add subscribe button (eye icon button) to implementations
+
 ## [4.44.5] 2022-05-20
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.44.5",
+  "version": "4.45.2",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.44.5",
+    "@truedat/test": "4.45.1",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,8 +88,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/core": "4.44.5",
-    "@truedat/df": "4.44.5",
+    "@truedat/core": "4.45.1",
+    "@truedat/df": "4.45.1",
     "axios": "^0.19.2",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
@@ -110,5 +110,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
+  "gitHead": "94be41b427aa71f91b2e98a7af622ab2453b2b97"
 }

package/src/components/ImplementationsRoutes.js

@@ -44,6 +44,7 @@ import RuleImplementationResults from "./RuleImplementationResults";
 import RuleResultDetails from "./RuleResultDetails";
 import RuleResultsRoutes from "./RuleResultsRoutes";
 import RuleResultRemediationLoader from "./RuleResultRemediationLoader";
+import RuleSubscriptionLoader from "./RuleSubscriptionLoader";
 
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
@@ -131,6 +132,7 @@ const ImplementationsRoutes = ({
         render={() => (
           <>
             <RuleImplementationLoader />
+            <RuleSubscriptionLoader />
 
             <Route
               exact

package/src/components/Rule.js

@@ -5,7 +5,7 @@ import { Header, Icon, Grid } from "semantic-ui-react";
 import { connect } from "react-redux";
 import RuleTabs from "./RuleTabs";
 import RuleActions from "./RuleActions";
-import RuleSubscription from "./RuleSubscription";
+import Subscription from "./Subscription";
 import RuleSummary from "./RuleSummary";
 
 export const Rule = ({ rule, userRulePermissions, implementations }) => {
@@ -22,7 +22,7 @@ export const Rule = ({ rule, userRulePermissions, implementations }) => {
           </Header>
         </Grid.Column>
         <Grid.Column width={8} textAlign="right">
-          <RuleSubscription />
+          <Subscription resource={rule} resourceType="rule" />
           {_.prop("manage_quality_rules")(userRulePermissions) && (
             <RuleActions />
           )}

package/src/components/RuleImplementation.js

@@ -12,6 +12,7 @@ import { createExecutionGroup, setRuleImplementationStatus } from "../routines";
 import RuleImplementationTabs from "./RuleImplementationTabs";
 import ImplementationResultBar from "./ImplementationResultBar";
 import ExecutionPopup from "./ExecutionPopup";
+import Subscription from "./Subscription";
 
 const getAvailableActions = (props, formatMessage) => {
   const contentActions = _.isEmpty(props?.ruleImplementation)
@@ -202,6 +203,10 @@ export const RuleImplementation = ({
             {canExecute && ruleImplementation.executable ? (
               <ExecutionPopup onSubmit={handleSubmit} count={1} />
             ) : null}
+            <Subscription
+              resource={ruleImplementation}
+              resourceType="implementation"
+            />
             {deletedAt && (
               <Label
                 className="alert warning"

package/src/components/RuleSubscriptionLoader.js

@@ -12,13 +12,15 @@ export const RuleSubscriptionLoader = ({
   clearSubscriptionsSearch,
   searchSubscriptions,
 }) => {
-  const { id } = useParams();
+  const { id, implementation_id } = useParams();
+
   useEffect(() => {
     const payload = {
-      resource_id: _.toInteger(id),
+      resource_id: _.toInteger(id || implementation_id),
       events: ["rule_result_created"],
-      resource_type: "rule",
+      resource_type: id ? "rule" : implementation_id ? "implementation" : "",
     };
+
     searchSubscriptions(payload);
     return () => {
       clearSubscriptionsSearch();

package/src/components/{RuleSubscription.js → Subscription.js}

@@ -7,19 +7,19 @@ import { FormattedMessage, useIntl } from "react-intl";
 import {
   createSubscription,
   deleteSubscription,
-  updateSubscription
+  updateSubscription,
 } from "@truedat/core/routines";
 
 const SubscriptionWatchForm = React.lazy(() =>
   import("@truedat/audit/components/SubscriptionWatchForm")
 );
 
-export const RuleSubscriptionContent = ({ subscription, setSubscription }) => {
+export const SubscriptionContent = ({ subscription, setSubscription }) => {
   const statuses = _.path("scope.status")(subscription) || [];
 
   const handleEventTypeChange = (_e, { name }) => {
     const statuses_m = _.includes(name)(statuses)
-      ? _.reject(event => event == name)(statuses)
+      ? _.reject((event) => event == name)(statuses)
       : _.concat([name])(statuses);
     setSubscription({ ...subscription, scope: { status: statuses_m } });
   };
@@ -67,25 +67,31 @@ export const RuleSubscriptionContent = ({ subscription, setSubscription }) => {
   );
 };
 
-RuleSubscriptionContent.propTypes = {
+SubscriptionContent.propTypes = {
   subscription: PropTypes.object,
-  setSubscription: PropTypes.func
+  setSubscription: PropTypes.func,
 };
 
-export const RuleSubscription = ({
-  rule,
+export const Subscription = ({
+  resource,
+  resourceType,
   searchSubscription,
   createSubscription,
   updateSubscription,
   deleteSubscription,
-  subscriptionUpdating
+  subscriptionUpdating,
 }) => {
   const [subscriptionField, setSubscription] = useState(searchSubscription);
+  const [resourceTypeId, setResourceTypeId] = useState();
 
   useEffect(() => {
     setSubscription(searchSubscription);
   }, [searchSubscription]);
 
+  useEffect(() => {
+    setResourceTypeId(getResourceTypeId(resource, resourceType));
+  }, [resource, resourceType]);
+
   const { formatMessage } = useIntl();
   const subscribed = !_.isEmpty(searchSubscription);
 
@@ -97,28 +103,53 @@ export const RuleSubscription = ({
 
   const handleSubmit = () => {
     const payload = {
-      subscription: {
-        ...subscriptionField,
-        scope: {
-          resource_id: _.prop("id")(rule),
-          resource_type: "rule",
-          events: ["rule_result_created"],
-          status: _.path("scope.status")(subscriptionField)
-        }
+      ...{
+        subscription: {
+          ...subscriptionField,
+          scope: {
+            resource_id: _.prop("id")(resource),
+            resource_name: resourceName(resource, resourceType), // implementation?.implementation_key,
+            resource_type: resourceType,
+            events: ["rule_result_created"],
+            status: _.path("scope.status")(subscriptionField),
+          },
+        },
       },
-      rule_id: _.prop("id")(rule)
+      ...resourceTypeId,
     };
 
     _.prop("id")(subscriptionField)
       ? updateSubscription(payload)
       : createSubscription(payload);
   };
+
+  const resourceName = (resource, resourceType) => {
+    switch (resourceType) {
+      case "implementation":
+        return resource.implementation_key;
+      case "rule":
+        return resource.name;
+    }
+  };
+
+  const getResourceTypeId = (resource, resourceType) => {
+    const id = _.prop("id")(resource);
+    switch (resourceType) {
+      case "implementation":
+        return { implementation_id: id };
+      case "rule":
+        return { rule_id: id };
+    }
+  };
+
   const handleDelete = () => {
     const payload = {
-      subscription: subscriptionField,
-      resource_id: _.prop("id")(rule),
-      resource_type: "rule",
-      rule_id: _.prop("id")(rule)
+      ...{
+        subscription: subscriptionField,
+        resource_id: _.prop("id")(resource),
+        resource_type: resourceType,
+      },
+      ...resourceTypeId,
     };
     _.prop("id")(subscriptionField) && deleteSubscription(payload);
   };
@@ -156,7 +187,7 @@ export const RuleSubscription = ({
           handleDelete={handleDelete}
           subscriptionUpdating={subscriptionUpdating}
         >
-          <RuleSubscriptionContent
+          <SubscriptionContent
             subscription={subscriptionField}
             setSubscription={setSubscription}
           />
@@ -166,29 +197,27 @@ export const RuleSubscription = ({
   );
 };
 
-RuleSubscription.propTypes = {
+Subscription.propTypes = {
   createSubscription: PropTypes.func,
   updateSubscription: PropTypes.func,
   deleteSubscription: PropTypes.func,
   searchSubscription: PropTypes.object,
-  rule: PropTypes.object,
-  subscriptionUpdating: PropTypes.bool
+  resource: PropTypes.object,
+  resourceType: PropTypes.string,
+  subscriptionUpdating: PropTypes.bool,
 };
 
-export const mapStateToProps = ({
-  rule,
-  searchSubscription,
-  subscriptionUpdating
-}) => ({
-  rule,
-  searchSubscription,
-  subscriptionUpdating
-});
+export const mapStateToProps = (state) => {
+  return {
+    searchSubscription: state.searchSubscription,
+    subscriptionUpdating: state.subscriptionUpdating,
+  };
+};
 
 const mapDispatchToProps = {
   createSubscription,
   updateSubscription,
-  deleteSubscription
+  deleteSubscription,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(RuleSubscription);
+export default connect(mapStateToProps, mapDispatchToProps)(Subscription);

package/src/components/__tests__/{RuleSubscription.spec.js → Subscription.spec.js}

@@ -1,13 +1,13 @@
 import React from "react";
 import { intl } from "@truedat/test/intl-stub";
 import { shallow } from "enzyme";
-import { RuleSubscription, RuleSubscriptionContent } from "../RuleSubscription";
+import { Subscription, SubscriptionContent } from "../Subscription";
 
 // workaround for enzyme issue with React.useContext
 // see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
 jest.spyOn(React, "useContext").mockImplementation(() => intl);
 
-describe("<RuleSubscriptionContent />", () => {
+describe("<SubscriptionContent />", () => {
   const subscription = {
     id: 2,
     periodicity: "daily",
@@ -15,22 +15,22 @@ describe("<RuleSubscriptionContent />", () => {
       status: ["warn"],
       events: ["rule_result_created"],
       resource_id: 2,
-      resource_type: "rule"
+      resource_type: "rule",
     },
     subscriber: {
       id: 3,
       identifier: "2",
-      type: "user"
-    }
+      type: "user",
+    },
   };
   const setSubscription = jest.fn();
 
   it("matches the latest snapshot", () => {
     const props = {
       subscription,
-      setSubscription
+      setSubscription,
     };
-    const wrapper = shallow(<RuleSubscriptionContent {...props} />);
+    const wrapper = shallow(<SubscriptionContent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -39,18 +39,15 @@ describe("<RuleSubscriptionContent />", () => {
     const name = "success";
     const props = {
       subscription,
-      setSubscription
+      setSubscription,
     };
-    const wrapper = shallow(<RuleSubscriptionContent {...props} />);
-    wrapper
-      .find("FormCheckbox")
-      .at(0)
-      .simulate("change", e, { name });
+    const wrapper = shallow(<SubscriptionContent {...props} />);
+    wrapper.find("FormCheckbox").at(0).simulate("change", e, { name });
     expect(setSubscription.mock.calls.length).toBe(1);
   });
 });
 
-describe("<RuleSubscription />", () => {
+describe("<Subscription />", () => {
   const rule = { id: 1 };
   const searchSubscription = {
     id: 2,
@@ -59,24 +56,25 @@ describe("<RuleSubscription />", () => {
       status: ["warn"],
       events: ["rule_result_created"],
       resource_id: 2,
-      resource_type: "rule"
+      resource_type: "rule",
     },
     subscriber: {
       id: 3,
       identifier: "2",
-      type: "user"
-    }
+      type: "user",
+    },
   };
   const subscriptionUpdating = false;
 
   const props = {
-    rule,
+    resource: rule,
+    resourceType: "rule",
     searchSubscription,
-    subscriptionUpdating
+    subscriptionUpdating,
   };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RuleSubscription {...props} />);
+    const wrapper = shallow(<Subscription {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });

package/src/components/__tests__/__snapshots__/Rule.spec.js.snap

@@ -33,7 +33,15 @@ exports[`<Rule /> matches the latest snapshot 1`] = `
       textAlign="right"
       width={8}
     >
-      <Connect(RuleSubscription) />
+      <Connect(Subscription)
+        resource={
+          Object {
+            "id": 1,
+            "name": "foo",
+          }
+        }
+        resourceType="rule"
+      />
       <Connect(RuleActions) />
     </GridColumn>
   </Grid>

package/src/components/__tests__/__snapshots__/RuleImplementation.spec.js.snap

@@ -50,6 +50,15 @@ exports[`<RuleImplementation /> matches the latest snapshot 1`] = `
       >
         Execute implementation
       </button>
+      <button
+        class="ui basic icon button button icon group-actions"
+        data-tooltip="Subscribe"
+      >
+        <i
+          aria-hidden="true"
+          class="eye icon"
+        />
+      </button>
       <div
         aria-expanded="false"
         class="ui floating dropdown button icon group-actions"

package/src/components/__tests__/__snapshots__/{RuleSubscription.spec.js.snap → Subscription.spec.js.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RuleSubscription /> matches the latest snapshot 1`] = `
+exports[`<Subscription /> matches the latest snapshot 1`] = `
 <Popup
   basic={true}
   disabled={false}
@@ -61,7 +61,7 @@ exports[`<RuleSubscription /> matches the latest snapshot 1`] = `
       }
       subscriptionUpdating={false}
     >
-      <RuleSubscriptionContent
+      <SubscriptionContent
         setSubscription={[Function]}
         subscription={
           Object {
@@ -90,7 +90,7 @@ exports[`<RuleSubscription /> matches the latest snapshot 1`] = `
 </Popup>
 `;
 
-exports[`<RuleSubscriptionContent /> matches the latest snapshot 1`] = `
+exports[`<SubscriptionContent /> matches the latest snapshot 1`] = `
 <FormField>
   <FormField>
     <label>

package/src/reducers/ruleImplementationRedirect.js

@@ -1,5 +1,11 @@
+import _ from "lodash/fp";
 import { IMPLEMENTATIONS, linkTo } from "@truedat/core/routes";
-import { clearRedirect } from "@truedat/core/routines";
+import {
+  clearRedirect,
+  createSubscription,
+  deleteSubscription,
+  updateSubscription,
+} from "@truedat/core/routines";
 import {
   createExecutionGroup,
   createImplementationStructure,
@@ -43,6 +49,14 @@ export const ruleImplementationRedirect = (
       const { rule_implementation_id: implementation_id } = payload;
       return linkTo.IMPLEMENTATION_RESULTS({ implementation_id });
     }
+    case createSubscription.SUCCESS:
+    case deleteSubscription.SUCCESS:
+    case updateSubscription.SUCCESS: {
+      const { implementation_id } = payload;
+      return _.isNil(implementation_id)
+        ? state
+        : linkTo.IMPLEMENTATION({ implementation_id });
+    }
     default:
       return state;
   }