@truedat/audit 4.44.2 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.44.4] 2022-05-19
+
+### Changed
+
+- Use `lowerDeburrTrim` function from `@truedat/core`
+
 ## [4.43.3] 2022-05-04
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/audit",
-  "version": "4.44.2",
+  "version": "4.44.5",
   "description": "Truedat Web Audit Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -16,26 +16,26 @@
   "scripts": {
     "clean": "rimraf yarn-error.log",
     "debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
-    "test": "jest --coverage",
-    "test:watch": "jest --watch",
+    "test": "TZ=UTC jest --coverage",
+    "test:watch": "TZ=UTC jest --watch",
     "eslint": "eslint src/**",
     "eslint:fix": "eslint --fix src/**"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.44.2",
-    "babel-jest": "^27.0.6",
+    "@truedat/test": "4.44.5",
+    "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-react-intl": "^5.1.18",
@@ -44,7 +44,8 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "redux-saga-test-plan": "^4.0.4",
@@ -84,14 +85,15 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.44.2",
-    "@truedat/core": "4.44.2",
+    "@truedat/auth": "4.44.5",
+    "@truedat/core": "4.44.5",
     "axios": "^0.19.2",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-color": "^2.17.3",
     "react-hook-form": "^7.30.0",
     "react-intl": "^5.20.10",
+    "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-sortable-hoc": "^1.11.0",
@@ -105,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

package/src/components/EventsLoader.js

@@ -1,24 +1,28 @@
-import { useEffect, useCallback } from "react";
-import { useDispatch } from "react-redux";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { fetchEvents, clearEvents } from "../routines";
 
-export const EventsLoader = ({ resource_id, resource_type }) => {
-  const dispatch = useDispatch();
-  const stableDispatch = useCallback(dispatch, []);
+export const EventsLoader = ({
+  resource_id,
+  resource_type,
+  fetchEvents,
+  clearEvents,
+}) => {
   useEffect(() => {
-    stableDispatch(fetchEvents({ resource_id, resource_type }));
+    fetchEvents({ resource_id, resource_type });
     return () => {
-      stableDispatch(clearEvents());
+      clearEvents();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stableDispatch]);
+  }, [fetchEvents, clearEvents, resource_id, resource_type]);
   return null;
 };
 
 EventsLoader.propTypes = {
   resource_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  resource_type: PropTypes.string
+  resource_type: PropTypes.string,
+  fetchEvents: PropTypes.func,
+  clearEvents: PropTypes.func,
 };
 
-export default EventsLoader;
+export default connect(null, { fetchEvents, clearEvents })(EventsLoader);

package/src/components/NotificationEvent.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Label } from "semantic-ui-react";
 import Moment from "react-moment";
@@ -62,7 +63,10 @@ export const NotificationEvent = ({
       </h4>
       <p>{event.name}</p>
       <Label>
-        <FormattedMessage id={`subscriptions.events.${event.event}`} />
+        <FormattedMessage
+          id={`subscriptions.events.${event.event}`}
+          defaultMessage={event.event}
+        />
       </Label>
       <Moment locale={locale} fromNow>
         {date}
@@ -71,4 +75,11 @@ export const NotificationEvent = ({
   );
 };
 
+NotificationEvent.propTypes = {
+  event: PropTypes.object,
+  date: PropTypes.instanceOf(Date),
+  readMark: PropTypes.bool,
+  readNotification: PropTypes.func,
+};
+
 export default NotificationEvent;

package/src/components/ShareLinkForm.js

@@ -4,7 +4,7 @@ import { Button, Container, Form, Header, Ref } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { lowerDeburr } from "@truedat/core/services/sort";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
 import { createNotification } from "../routines";
 import { getRecipients } from "../selectors";
 
@@ -16,8 +16,6 @@ const GroupsSearchLoader = React.lazy(() =>
   import("@truedat/auth/groups/components/GroupsSearchLoader")
 );
 
-const lowerDeburrTrim = _.flow(_.trim, lowerDeburr);
-
 const MIN_SEARCH_CHARACTERS = 2;
 
 export const ShareLinkForm = ({
@@ -127,7 +125,7 @@ export const ShareLinkForm = ({
             disabled={_.isEmpty(selected) || saving}
             loading={saving}
             primary
-            content={formatMessage({ id: "share.actions.submit" })}
+            content={formatMessage({ id: "actions.share" })}
           />
         </div>
       </Form>

package/src/components/Subscription.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
 import {
   Header,
   Grid,
@@ -49,11 +48,13 @@ SubscriptionHeader.propTypes = {
   subheader: PropTypes.string,
 };
 
-export const Subscription = ({ templates }) => {
-  const { subscription, users, subscriptionLoading } = useSelector(
-    _.pick(["subscription", "subscriptionLoading", "users"])
-  );
-  if (_.isEmpty(subscription) || subscriptionLoading) return null;
+export const Subscription = ({
+  subscription,
+  subscriptionLoading: loading,
+  templates,
+  users,
+}) => {
+  if (_.isEmpty(subscription) || loading) return null;
 
   const { type, identifier } = _.getOr({}, "subscriber")(subscription);
   const subscriber =
@@ -86,26 +87,32 @@ export const Subscription = ({ templates }) => {
       <Segment>
         <SubscriptionHeader header={subscriber} subheader={resourceName} />
         <List size="big" relaxed="very">
+          {periodicity ? (
+            <List.Item>
+              <List.Header>
+                <FormattedMessage id="subscriptions.periodicity" />
+              </List.Header>
+              <List.Description>
+                <Label>
+                  <FormattedMessage
+                    id={`subscriptions.periodicity.${periodicity}`}
+                    defaultMessage={periodicity}
+                  />
+                </Label>
+              </List.Description>
+            </List.Item>
+          ) : null}
           <List.Item>
             <List.Header>
-              <FormattedMessage id={"subscriptions.periodicity"} />
-            </List.Header>
-            <List.Description>
-              <Label>
-                <FormattedMessage
-                  id={`subscriptions.periodicity.${periodicity}`}
-                />
-              </Label>
-            </List.Description>
-          </List.Item>
-          <List.Item>
-            <List.Header>
-              <FormattedMessage id={"subscriptions.events"} />
+              <FormattedMessage id="subscriptions.events" />
             </List.Header>
             <List.Description>
               {events.map((event, idx) => (
                 <Label key={idx}>
-                  <FormattedMessage id={`subscriptions.events.${event}`} />
+                  <FormattedMessage
+                    id={`subscriptions.events.${event}`}
+                    defaultMessage={event}
+                  />
                 </Label>
               ))}
             </List.Description>
@@ -118,7 +125,10 @@ export const Subscription = ({ templates }) => {
               <List.Description>
                 {status.map((status, idx) => (
                   <Label key={idx}>
-                    <FormattedMessage id={`subscriptions.status.${status}`} />
+                    <FormattedMessage
+                      id={`subscriptions.status.${status}`}
+                      defaultMessage={status}
+                    />
                   </Label>
                 ))}
               </List.Description>
@@ -176,11 +186,22 @@ export const Subscription = ({ templates }) => {
 };
 
 Subscription.propTypes = {
+  subscription: PropTypes.object,
+  subscriptionLoading: PropTypes.bool,
   templates: PropTypes.array,
+  users: PropTypes.array,
 };
 
-const mapStateToProps = ({ templates }) => ({
+const mapStateToProps = ({
+  subscription,
+  subscriptionLoading,
+  templates,
+  users,
+}) => ({
+  subscription,
+  subscriptionLoading,
   templates,
+  users,
 });
 
 export default connect(mapStateToProps)(Subscription);

package/src/components/SubscriptionEdit.js

@@ -1,31 +1,31 @@
 import _ from "lodash/fp";
 import React from "react";
+import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { useSelector, useDispatch } from "react-redux";
+import { connect } from "react-redux";
 import { Container, Segment, Header } from "semantic-ui-react";
 import { updateSubscription } from "@truedat/core/routines";
 import SubscriptionCrumbs from "./SubscriptionCrumbs";
 import SubscriptionForm from "./SubscriptionForm";
 
-export const SubscriptionEdit = () => {
-  const { subscription, subscriptionLoading, users } = useSelector(
-    _.pick(["subscription", "subscriptionLoading", "users"])
-  );
-  const dispatch = useDispatch();
+export const SubscriptionEdit = ({
+  subscription,
+  subscriptionLoading: loading,
+  users,
+  updateSubscription,
+}) => {
   const { formatMessage } = useIntl();
 
-  if (_.isEmpty(subscription) || subscriptionLoading) return null;
+  if (_.isEmpty(subscription) || loading) return null;
 
-  const onSubmit = subscriptionChanges =>
-    dispatch(
-      updateSubscription({
-        subscription: {
-          ...subscriptionChanges,
-          id: subscription.id
-        },
-        redirect: true
-      })
-    );
+  const onSubmit = (subscriptionChanges) =>
+    updateSubscription({
+      subscription: {
+        ...subscriptionChanges,
+        id: subscription.id,
+      },
+      redirect: true,
+    });
 
   const { type, identifier } = _.getOr({}, "subscriber")(subscription);
   const subscriber =
@@ -52,4 +52,19 @@ export const SubscriptionEdit = () => {
   );
 };
 
-export default SubscriptionEdit;
+SubscriptionEdit.propTypes = {
+  subscription: PropTypes.object,
+  subscriptionLoading: PropTypes.bool,
+  updateSubscription: PropTypes.func,
+  users: PropTypes.array,
+};
+
+export const mapStateToProps = ({
+  subscription,
+  subscriptionLoading,
+  users,
+}) => ({ subscription, subscriptionLoading, users });
+
+export default connect(mapStateToProps, { updateSubscription })(
+  SubscriptionEdit
+);

package/src/components/SubscriptionForm.js

@@ -396,6 +396,7 @@ export const SubscriptionForm = ({
                 value: periodicity,
                 text: formatMessage({
                   id: `subscriptions.periodicity.${periodicity}`,
+                  defaultMessage: periodicity,
                 }),
               }))}
             />
@@ -427,7 +428,10 @@ export const SubscriptionForm = ({
               options={eventsForType.map((event, key) => ({
                 key,
                 value: event,
-                text: formatMessage({ id: `subscriptions.events.${event}` }),
+                text: formatMessage({
+                  id: `subscriptions.events.${event}`,
+                  defaultMessage: event,
+                }),
               }))}
             />
           )}
@@ -483,7 +487,7 @@ export const SubscriptionForm = ({
             type="submit"
             loading={isLoading}
             disabled={disabled}
-            content={formatMessage({ id: "actions.submit" })}
+            content={formatMessage({ id: "actions.save" })}
           />
         </div>
       </Form>

package/src/components/SubscriptionLoader.js

@@ -1,23 +1,22 @@
-import _ from "lodash/fp";
-import React, { useEffect, useCallback } from "react";
-import { useSelector } from "react-redux";
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
-import { useDispatch } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";
+import { clearSubscription, fetchSubscription } from "../routines";
 
-import { fetchSubscription, clearSubscription } from "../routines";
-
-export const SubscriptionLoader = () => {
-  const loading = useSelector(_.get("subscriptionLoading"));
+export const SubscriptionLoader = ({
+  clearSubscription,
+  fetchSubscription,
+  subscriptionLoading: loading,
+}) => {
   const { id } = useParams();
-  const dispatch = useDispatch();
-  const stableDispatch = useCallback(dispatch, []);
   useEffect(() => {
-    stableDispatch(fetchSubscription({ id }));
+    fetchSubscription({ id });
     return () => {
-      stableDispatch(clearSubscription());
+      clearSubscription();
     };
-  }, [id, stableDispatch]);
+  }, [id, clearSubscription, fetchSubscription]);
   return loading ? (
     <Dimmer active inverted>
       <Loader size="massive" inverted />
@@ -25,4 +24,17 @@ export const SubscriptionLoader = () => {
   ) : null;
 };
 
-export default SubscriptionLoader;
+SubscriptionLoader.propTypes = {
+  clearSubscription: PropTypes.func,
+  fetchSubscription: PropTypes.func,
+  subscriptionLoading: PropTypes.bool,
+};
+
+export const mapStateToProps = ({ subscriptionLoading }) => ({
+  subscriptionLoading,
+});
+
+export default connect(mapStateToProps, {
+  clearSubscription,
+  fetchSubscription,
+})(SubscriptionLoader);

package/src/components/SubscriptionNew.js

@@ -1,19 +1,20 @@
-import _ from "lodash/fp";
 import React from "react";
+import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { useSelector, useDispatch } from "react-redux";
+import { connect } from "react-redux";
 import { Container, Segment, Header } from "semantic-ui-react";
 import { createSubscription } from "@truedat/core/routines";
 import SubscriptionCrumbs from "./SubscriptionCrumbs";
 import SubscriptionForm from "./SubscriptionForm";
 
-export const SubscriptionNew = () => {
-  const creatingSubscription = useSelector(_.get("creatingSubscription"));
-  const dispatch = useDispatch();
+export const SubscriptionNew = ({
+  createSubscription,
+  creatingSubscription,
+}) => {
   const { formatMessage } = useIntl();
 
-  const onSubmit = subscription =>
-    dispatch(createSubscription({ subscription, redirect: true }));
+  const onSubmit = (subscription) =>
+    createSubscription({ subscription, redirect: true });
 
   return (
     <>
@@ -35,4 +36,15 @@ export const SubscriptionNew = () => {
   );
 };
 
-export default SubscriptionNew;
+SubscriptionNew.propTypes = {
+  createSubscription: PropTypes.func,
+  creatingSubscription: PropTypes.bool,
+};
+
+export const mapStateToProps = ({ creatingSubscription }) => ({
+  creatingSubscription,
+});
+
+export default connect(mapStateToProps, { createSubscription })(
+  SubscriptionNew
+);

package/src/components/Subscriptions.js

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
-import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { useForm, Controller } from "react-hook-form";
 import { useHistory, Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
@@ -49,7 +50,11 @@ export const SubscriptionsHeader = () => (
   </Header>
 );
 
-export const Subscriptions = () => {
+export const Subscriptions = ({
+  subscriptions,
+  subscriptionsLoading: loading,
+  users,
+}) => {
   const history = useHistory();
   const { control, watch } = useForm({
     mode: "all",
@@ -59,10 +64,7 @@ export const Subscriptions = () => {
     },
   });
 
-  const { subscriptions, subscriptionsLoading, users } = useSelector(
-    _.pick(["subscriptions", "subscriptionsLoading", "users"])
-  );
-  if (subscriptionsLoading) return null;
+  if (loading) return null;
 
   const usersById = _.keyBy("id")(users);
   const subscriberIcon = ({ type }) =>
@@ -201,6 +203,7 @@ export const Subscriptions = () => {
                   {periodicity && (
                     <FormattedMessage
                       id={`subscriptions.periodicity.${periodicity}`}
+                      defaultMessage={periodicity}
                     />
                   )}
                 </Table.Cell>
@@ -213,4 +216,16 @@ export const Subscriptions = () => {
   );
 };
 
-export default Subscriptions;
+Subscriptions.propTypes = {
+  subscriptions: PropTypes.array,
+  subscriptionsLoading: PropTypes.bool,
+  users: PropTypes.array,
+};
+
+export const mapStateToProps = ({
+  subscriptions,
+  subscriptionsLoading,
+  users,
+}) => ({ subscriptions, subscriptionsLoading, users });
+
+export default connect(mapStateToProps)(Subscriptions);

package/src/components/SubscriptionsLoader.js

@@ -1,20 +1,20 @@
-import _ from "lodash/fp";
-import React, { useEffect, useCallback } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";
+import { clearSubscriptions, fetchSubscriptions } from "../routines";
 
-import { fetchSubscriptions, clearSubscriptions } from "../routines";
-
-export const SubscriptionsLoader = () => {
-  const loading = useSelector(_.get("subscriptionsLoading"));
-  const dispatch = useDispatch();
-  const stableDispatch = useCallback(dispatch, []);
+export const SubscriptionsLoader = ({
+  clearSubscriptions,
+  fetchSubscriptions,
+  loading,
+}) => {
   useEffect(() => {
-    stableDispatch(fetchSubscriptions());
+    fetchSubscriptions();
     return () => {
-      stableDispatch(clearSubscriptions());
+      clearSubscriptions();
     };
-  }, [stableDispatch]);
+  }, [clearSubscriptions, fetchSubscriptions]);
   return loading ? (
     <Dimmer active inverted>
       <Loader size="massive" inverted />
@@ -22,4 +22,17 @@ export const SubscriptionsLoader = () => {
   ) : null;
 };
 
-export default SubscriptionsLoader;
+SubscriptionsLoader.propTypes = {
+  clearSubscriptions: PropTypes.func,
+  fetchSubscriptions: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+export const mapStateToProps = ({ subscriptionsLoading }) => ({
+  loading: subscriptionsLoading,
+});
+
+export default connect(mapStateToProps, {
+  clearSubscriptions,
+  fetchSubscriptions,
+})(SubscriptionsLoader);

package/src/components/__tests__/NotificationEvent.spec.js

@@ -1,21 +1,20 @@
 import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
-import { NotificationEvent } from "../NotificationEvent";
+import { render } from "@truedat/test/render";
+import NotificationEvent from "../NotificationEvent";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+jest.mock("@truedat/core/hooks", () => ({ useOnScreen: jest.fn() }));
 
 describe("<NotificationEvent />", () => {
   it("matches the latest snapshot", () => {
     const event = {
       event: "comment_created",
-      name: "event name"
+      name: "event name",
     };
     const date = new Date("2020-01-01");
 
-    const wrapper = shallow(<NotificationEvent event={event} date={date} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <NotificationEvent event={event} date={date} />
+    );
+    expect(container).toMatchSnapshot();
   });
 });