@truedat/audit 4.49.7 → 4.49.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.49.8] 2022-08-11
+
+## Added
+
+- [TD-5035] Get external notification body from envent payload
+
 ## [4.48.11] 2022-21-07
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/audit",
-  "version": "4.49.7",
+  "version": "4.49.10",
   "description": "Truedat Web Audit Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -85,8 +85,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.49.7",
-    "@truedat/core": "4.49.7",
+    "@truedat/auth": "4.49.10",
+    "@truedat/core": "4.49.10",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
     "react-color": "^2.17.3",
@@ -106,5 +106,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "e57a27c689a1e18026fe5b8a02d9414d5ea70337"
+  "gitHead": "fb6fcd549a722d777d692f2938dbc991c72dd3a1"
 }

package/src/components/NotificationEvent.js

@@ -53,6 +53,8 @@ export const NotificationEvent = ({
 
   const template = TEMPLATES[event.event] || "default";
   const eventsWithStatus = ["implementation_status", "grant_approval"];
+  const externalNotification = event.event === "external_notification";
+
   return (
     <div className="notification-item unread" ref={ref}>
       <h4>
@@ -61,7 +63,11 @@ export const NotificationEvent = ({
             <FormattedMessage id={`notifications.new`} />
           </Label>
         )}
-        <FormattedMessage id={`notifications.events.${template}`} />
+        {externalNotification ? (
+          `↗  ${event.payload.subject}`
+        ) : (
+          <FormattedMessage id={`notifications.events.${template}`} />
+        )}
       </h4>
       <p>{event.name}</p>
       <Label>

package/src/components/NotificationsMenu.js

@@ -57,7 +57,19 @@ export const NotificationsMenu = ({
                   <Dropdown.Item
                     className="item"
                     key={`${i}x${j}`}
-                    as={Link}
+                    href={
+                      event.event === "external_notification"
+                        ? event.path
+                        : undefined
+                    }
+                    target={
+                      event.event === "external_notification"
+                        ? "_blank"
+                        : undefined
+                    }
+                    as={
+                      event.event !== "external_notification" ? Link : undefined
+                    }
                     to={event.path || "/search"}
                   >
                     <NotificationEvent

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

@@ -19,4 +19,21 @@ describe("<NotificationEvent />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it("matches the latest snapshot for external notification", () => {
+    const event = {
+      event: "external_notification",
+      name: "External notification message",
+      payload: {
+        subject: "Test external notification",
+      },
+      path: "https://foo.bar",
+    };
+    const date = new Date("2020-01-01");
+
+    const { container } = render(
+      <NotificationEvent event={event} date={date} />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

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

@@ -1,11 +1,11 @@
 import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { NotificationsMenu } from "../NotificationsMenu";
 
-// 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() }));
+jest
+  .spyOn(global.Date, "now")
+  .mockImplementation(() => new Date("2022-01-01T11:01:58.135Z").valueOf());
 
 describe("<NotificationsMenu />", () => {
   it("matches the latest snapshot", () => {
@@ -20,20 +20,49 @@ describe("<NotificationsMenu />", () => {
             path: "foo/1/bar",
             payload: { domain_ids: [2, 1], name: "xyz" },
             resource_id: 2,
-            resource_type: "xyz"
-          }
-        ]
-      }
+            resource_type: "xyz",
+          },
+        ],
+      },
     ];
     const notificationsLoading = false;
 
-    const wrapper = shallow(
+    const { container } = render(
       <NotificationsMenu
         fetchNotifications={fetchNotifications}
         notifications={notifications}
         notificationsLoading={notificationsLoading}
       />
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with external notification", () => {
+    const fetchNotifications = jest.fn();
+    const notifications = [
+      {
+        events: [
+          {
+            event: "external_notification",
+            id: 1,
+            name: "bar",
+            path: "http://foo.bar",
+            payload: { domain_ids: [2, 1], name: "xyz" },
+            resource_id: 2,
+            resource_type: "xyz",
+          },
+        ],
+      },
+    ];
+    const notificationsLoading = false;
+
+    const { container } = render(
+      <NotificationsMenu
+        fetchNotifications={fetchNotifications}
+        notifications={notifications}
+        notificationsLoading={notificationsLoading}
+      />
+    );
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -29,3 +29,33 @@ exports[`<NotificationEvent /> matches the latest snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<NotificationEvent /> matches the latest snapshot for external notification 1`] = `
+<div>
+  <div
+    class="notification-item unread"
+  >
+    <h4>
+      <div
+        class="ui orange mini basic label"
+      >
+        New
+      </div>
+      ↗  Test external notification
+    </h4>
+    <p>
+      External notification message
+    </p>
+    <div
+      class="ui label"
+    >
+      external_notification
+    </div>
+    <time
+      datetime="1577836800000"
+    >
+      2 years ago
+    </time>
+  </div>
+</div>
+`;

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

@@ -1,77 +1,121 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NotificationsMenu /> matches the latest snapshot 1`] = `
-<Fragment>
-  <Dropdown
-    additionLabel="Add "
-    additionPosition="top"
-    closeOnBlur={true}
-    closeOnEscape={true}
-    deburr={false}
-    icon="bell"
-    item={true}
-    minCharacters={1}
-    noResultsMessage="No results found."
-    onOpen={[MockFunction]}
-    openOnFocus={true}
-    renderLabel={[Function]}
-    scrolling={true}
-    searchInput="text"
-    selectOnBlur={true}
-    selectOnNavigation={true}
-    wrapSelection={true}
+<div>
+  <div
+    aria-expanded="false"
+    class="ui item scrolling dropdown"
+    role="listbox"
+    tabindex="0"
   >
-    <DropdownMenu
-      className="notifications-dropdown"
-      direction="left"
+    <i
+      aria-hidden="true"
+      class="bell icon"
+    />
+    <div
+      class="left menu transition notifications-dropdown"
     >
-      <DropdownHeader>
-        <MemoizedFormattedMessage
-          id="navigation.notifications"
-        />
-      </DropdownHeader>
-      <DropdownDivider />
-      <DropdownItem
-        as={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "displayName": "Link",
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          }
-        }
-        className="item"
-        key="0x0"
-        to="foo/1/bar"
+      <div
+        class="header"
       >
-        <NotificationEvent
-          event={
-            Object {
-              "event": "foo",
-              "id": 1,
-              "name": "bar",
-              "path": "foo/1/bar",
-              "payload": Object {
-                "domain_ids": Array [
-                  2,
-                  1,
-                ],
-                "name": "xyz",
-              },
-              "resource_id": 2,
-              "resource_type": "xyz",
-            }
-          }
-          readNotification={[Function]}
-        />
-      </DropdownItem>
-    </DropdownMenu>
-  </Dropdown>
-</Fragment>
+        Notifications
+      </div>
+      <div
+        class="divider"
+      />
+      <a
+        class="item item"
+        href="/foo/1/bar"
+        role="option"
+      >
+        <div
+          class="notification-item unread"
+        >
+          <h4>
+            <div
+              class="ui orange mini basic label"
+            >
+              New
+            </div>
+            ⚡ Alert: New notifications
+          </h4>
+          <p>
+            bar
+          </p>
+          <div
+            class="ui label"
+          >
+            foo
+          </div>
+          <time
+            datetime="1641034918135"
+          >
+            a few seconds ago
+          </time>
+        </div>
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<NotificationsMenu /> matches the latest snapshot with external notification 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui item scrolling dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <i
+      aria-hidden="true"
+      class="bell icon"
+    />
+    <div
+      class="left menu transition notifications-dropdown"
+    >
+      <div
+        class="header"
+      >
+        Notifications
+      </div>
+      <div
+        class="divider"
+      />
+      <a
+        class="item item"
+        href="http://foo.bar"
+        role="option"
+        target="_blank"
+        to="http://foo.bar"
+      >
+        <div
+          class="notification-item unread"
+        >
+          <h4>
+            <div
+              class="ui orange mini basic label"
+            >
+              New
+            </div>
+            ↗  undefined
+          </h4>
+          <p>
+            bar
+          </p>
+          <div
+            class="ui label"
+          >
+            external_notification
+          </div>
+          <time
+            datetime="1641034918135"
+          >
+            a few seconds ago
+          </time>
+        </div>
+      </a>
+    </div>
+  </div>
+</div>
 `;