Merge pull request DynamoDS#36 from Enzo707/feature/DYN-5296-notifica…

…tion-center-with-dynamic-height Feature/DYN 5296 notification center with dynamic height
avidit · May 31, 2023 · fe9d579 · fe9d579
2 parents 7ec7cad + b445ab2
commit fe9d579
Show file tree

Hide file tree

Showing 6 changed files with 305 additions and 8 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,16 @@
 import '@hig/fonts/build/ArtifaktElement.css';
 import './App.css';
 import React, { useEffect, useState } from 'react';
+import { useReRender } from './hooks';
 import NotificationsPanel from '@dynamods/notifications-panel';
+import { EmptyStateArchiver } from './icons';
 import Timestamp from '@hig/timestamp';
 import axios from 'axios';
 
 function App() {
   const [APIData, setAPIData] = useState({ loaded: false, notifications: [], title: 'Notifications', bottomButtonText: 'Mark all as read' });
+  const forceRender = useReRender();
+
   useEffect(() => {
     if (process.env.NOTIFICATION_URL) {
       axios.get(process.env.NOTIFICATION_URL)
@@ -23,9 +27,19 @@ function App() {
       window.setNotifications = setNotifications;
       window.setTitle = setTitle;
       window.setBottomButtonText = setBottomButtonText;
+      window.setPopupHeight = setPopupHeight;
     }
   }, []);
 
+  const setPopupHeight = () => {
+    if(chrome.webview === undefined) return;
+    chrome.webview.hostObjects.scriptObject.UpdateNotificationWindowSize(document.body.scrollHeight);
+  };
+
+  useEffect(()=> {
+    setPopupHeight();
+  });
+
   const setNotifications = (notifications) => {
     let notificationsData = parseNotifications(notifications);
     setAPIData(prevState => {
@@ -38,6 +52,10 @@ function App() {
     });
   };
 
+  const notificationChanged = () => {
+    forceRender();
+  };
+
   const parseNotifications = (notifications) => {
     let notificationsData = [];
     for (let i = 0; i < notifications.length; i++) {
@@ -102,15 +120,19 @@ function App() {
       };             
     });
   };
-
+  
   return APIData.loaded ?
     <NotificationsPanel class="NotificationsFlyout"
       heading={APIData.title}
       markAllAsReadTitle={APIData.bottomButtonText}
       indicatorTitle="View application alerts"
       onClickMarkAllAsRead={markAllAsRead}
-      notifications={APIData.notifications}>
-    </NotificationsPanel>
+      notifications={APIData.notifications}
+      emptyImage={<EmptyStateArchiver />}
+      emptyTitle={'No notifications'}
+      emptyMessage={'You currently have no notifications. New notifications will appear above'}
+      onNotificationChanged={notificationChanged}
+    />
     : null;
 }
 

diff --git a/src/hooks/index.js b/src/hooks/index.js
@@ -0,0 +1 @@
+export { default as useReRender } from './use-re-render';
diff --git a/src/hooks/use-re-render.js b/src/hooks/use-re-render.js
@@ -0,0 +1,8 @@
+import { useReducer } from 'react';
+//  This custom hook allow us to force component re-render
+const useReRender = () => {
+  const [, reRender] = useReducer((x) => x + 1, 0);
+  return reRender;
+};
+
+export default useReRender;
diff --git a/src/icons/EmptyStateArchiver.js b/src/icons/EmptyStateArchiver.js
@@ -0,0 +1,270 @@
+import React from 'react';
+
+const EmptyStateArchiver = () => {
+  return (
+    <svg
+      style={{marginTop: '15px', marginBottom: '15px'}}
+      width="135"
+      height="141"
+      viewBox="0 0 135 141"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        opacity="0.3"
+        d="M43.8799 122.27L53.2099 122.66L69.2099 132.23L74.3099 140.23L90.5899 139.23L102.68 132L104.68 133.47C105.732 134.237 107.14 134.303 108.26 133.64L122.26 125.3C122.454 125.187 122.579 124.985 122.595 124.761C122.611 124.537 122.516 124.32 122.34 124.18L120 122.29L134.22 113.78C134.292 113.739 134.336 113.663 134.336 113.58C134.336 113.497 134.292 113.421 134.22 113.38L130.68 110.98L112 112.72L116.72 102.9L125.27 98.0901C125.376 98.0295 125.441 97.917 125.441 97.7951C125.441 97.6733 125.376 97.5607 125.27 97.5001L112.87 90.5001L63.5099 88.8901L41.6499 116.2L43.8799 122.27Z"
+        fill="#5A7D91"
+      />
+      <path
+        d="M43.47 121.5L2.46996 97.8201C1.92467 97.4041 1.63952 96.7312 1.71996 96.0501V29.5701C1.74336 27.8998 2.56021 26.3404 3.91996 25.3701L44.27 2.0701C44.696 1.79237 45.2386 1.76562 45.69 2.0001L86.69 25.6601L56.44 63.8601L43.47 121.5Z"
+        fill="white"
+      />
+      <path
+        d="M1.84994 28.4399C1.75651 28.8096 1.70617 29.1887 1.69994 29.5699V96.0499C1.6195 96.731 1.90465 97.404 2.44994 97.8199L43.4499 121.5L58.5399 61.1799L1.84994 28.4399Z"
+        fill="#E7F0F5"
+      />
+      <path
+        d="M85.2702 98.1001L44.9202 121.39C43.7102 122.1 42.7202 121.39 42.7202 119.73V53.25C42.7468 51.5806 43.563 50.0225 44.9202 49.05L85.2702 25.76C86.4802 25.06 87.4702 25.76 87.4702 27.42V93.9C87.4436 95.5695 86.6275 97.1276 85.2702 98.1001Z"
+        fill="#CCD9E1"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M45.1454 0.560164C45.1469 0.560127 45.1485 0.560092 45.1501 0.560059H45.1254C45.1321 0.560066 45.1387 0.560101 45.1454 0.560164ZM45.1454 0.560164C44.6182 0.572244 44.1032 0.720316 43.6501 0.99006L3.27009 24.2901C1.52088 25.4809 0.467055 27.454 0.45009 29.5701V96.0501C0.358588 97.1853 0.890934 98.2806 1.84009 98.9101L42.8401 122.58C43.2032 122.796 43.6177 122.91 44.0401 122.91C44.5688 122.899 45.0857 122.751 45.5401 122.48L85.8901 99.1801C87.6393 97.9892 88.6931 96.0161 88.7101 93.9001V27.4201C88.809 26.2555 88.2445 25.1342 87.2501 24.5201C86.9101 24.3001 86.3901 23.9901 85.5601 23.5201L81.0001 20.8801L67.0001 12.8101L46.3201 0.88006C45.9624 0.674156 45.5578 0.564047 45.1454 0.560164ZM45.6901 1.96006C45.5173 1.85914 45.3202 1.80728 45.1201 1.81006H45.1501C44.8429 1.82226 44.5436 1.91168 44.2801 2.07006L3.93009 25.3701C2.57034 26.3403 1.75349 27.8998 1.73009 29.5701V96.0501C1.64965 96.7312 1.9348 97.4041 2.48009 97.8201L43.4801 121.5C43.6558 121.604 43.856 121.659 44.0601 121.66C44.3688 121.648 44.669 121.555 44.9301 121.39L85.2801 98.1001C86.6374 97.1276 87.4535 95.5695 87.4801 93.9001V27.4201C87.5649 26.7209 87.2621 26.031 86.6901 25.6201L45.6901 1.96006Z"
+        fill="#5A7D91"
+      />
+      <path
+        d="M45.3003 52.8302C45.3347 52.2048 45.5981 51.6139 46.0403 51.1702L84.8903 28.7402V94.3202C84.8559 94.9457 84.5925 95.5366 84.1503 95.9802L45.8303 118.11C45.7222 118.175 45.5876 118.177 45.4779 118.115C45.3682 118.053 45.3004 117.936 45.3003 117.81V52.8302Z"
+        fill="#5A7D91"
+      />
+      <path
+        d="M81.0904 99.3499L54.8804 84.2099L80.9304 69.1699L107.14 84.3099L81.0904 99.3499Z"
+        fill="#6F8EA0"
+      />
+      <path
+        d="M47.2002 85.8699V108.57L69.1602 95.8899V73.1899L47.2002 85.8699Z"
+        fill="#6F8EA0"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.2002 85.8699V108.57L69.1602 95.8899V73.1899L47.2002 85.8699V85.8699Z"
+        stroke="#5A7E92"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M69.2803 109.06L50.7603 98.3597L69.1703 87.7397L87.6903 98.4297L69.2803 109.06Z"
+        fill="#6F8EA0"
+      />
+      <path
+        d="M105.821 83.5401L99.0007 79.6001L97.4307 80.1101L98.9207 88.5601C98.9207 88.5601 103.581 85.3001 105.821 83.5401Z"
+        fill="#80A0B1"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M69.2803 109.06L50.7603 98.3597L69.1703 87.7397L87.6903 98.4297L69.2803 109.06V109.06Z"
+        stroke="#5A7E92"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M46.5703 115.29L73.3503 130.75V100.11L46.5703 84.6401V115.29Z"
+        fill="#E7F0F5"
+      />
+      <path
+        d="M46.5703 111.7L73.3503 127.17V119.06L46.5703 103.59V111.7Z"
+        fill="#E7F0F5"
+      />
+      <path
+        d="M46.5703 106.67L73.3503 122.13V119.06L46.5703 103.59V106.67Z"
+        fill="white"
+      />
+      <path
+        d="M46.5703 87.9301L73.3503 103.39V100.11L46.5703 84.6401V87.9301Z"
+        fill="white"
+      />
+      <path
+        d="M47.6401 112.37V107.25L51.6401 106.54L51.6901 103.97L55.3701 105.97C55.4396 106.01 55.5256 106.01 55.5943 105.968C55.663 105.926 55.7036 105.85 55.7001 105.77V93.2001H61.4001L46.5801 84.6401V115.29L73.3601 130.75V127.22L47.6401 112.37Z"
+        fill="#CCD9E1"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M46.5703 106.67L73.3503 122.13V119.06L46.5703 103.59V106.67V106.67Z"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M46.5703 111.7L73.3503 127.17L46.5703 111.7Z"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M46.5703 87.9302L73.3503 103.39"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M75.1802 67.33L108.32 86.47V83.37L75.1802 64.23V67.33Z"
+        fill="white"
+      />
+      <path
+        d="M75.1802 67.33L97.4702 80.2L100.45 78.82L75.1802 64.23V67.33Z"
+        fill="#CCD9E1"
+      />
+      <path
+        d="M68.3799 101.87V135.14C68.3271 135.68 68.5627 136.208 68.9999 136.53L73.9399 139.38L110.57 113.28L117.68 79.1L112.75 76.25L68.3799 101.87Z"
+        fill="#E7F0F5"
+      />
+      <path
+        d="M68.3799 101.87L73.5999 104.89L99.0099 93.06L117.68 79.1L112.75 76.25L68.3799 101.87Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M68.3799 101.87L73.5999 104.89L99.0099 93.06L117.68 79.1L112.75 76.25L68.3799 101.87V101.87Z"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M112.75 76.25L68.3797 101.87V135.14C68.3325 135.784 68.5574 136.419 68.9997 136.89"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M73.3101 104.72V138C73.3101 139.38 74.3101 139.93 75.4901 139.24L115.49 116.14C116.775 115.306 117.585 113.909 117.67 112.38V79.1001L73.3101 104.72Z"
+        fill="#CCD9E1"
+      />
+      <path
+        d="M117.68 79.1001L73.3101 104.72V138C73.3101 139.38 74.3101 140.27 75.5001 139.57"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M91.0001 105.1L87.6201 103.15V100.61L98.2001 95.35L107.85 94V96.54C107.831 96.8045 107.671 97.0381 107.43 97.15L93.4301 105.15C92.6587 105.523 91.7556 105.504 91.0001 105.1Z"
+        fill="#E7F0F5"
+      />
+      <path
+        d="M98.2402 95.35L92.4902 98.21V105.44C92.8388 105.449 93.1835 105.366 93.4902 105.2L107.49 97.2C107.731 97.0881 107.891 96.8545 107.91 96.59V94L98.2402 95.35Z"
+        fill="#CCD9E1"
+      />
+      <path
+        d="M91.0001 102.56L87.6201 100.56L103.83 91.2002L107.21 93.2002C107.93 93.6202 108.01 94.2002 107.39 94.6102L93.3901 102.61C92.6297 102.969 91.7448 102.951 91.0001 102.56Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M107.84 94.0002C107.799 93.6477 107.575 93.3433 107.25 93.2002L103.87 91.2002L87.6602 100.56V103.1L91.0002 105.1C91.7475 105.52 92.6508 105.557 93.4302 105.2L107.43 97.2002C107.671 97.0882 107.831 96.8547 107.85 96.5902C107.85 96.2602 107.84 94.0002 107.84 94.0002Z"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M91.0001 102.56L87.6201 100.56L103.83 91.2002L107.21 93.2002C107.93 93.6202 108.01 94.2002 107.39 94.6102L93.3901 102.61C92.6297 102.969 91.7448 102.951 91.0001 102.56V102.56Z"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M74.4503 63.2102L75.1003 62.7402L75.8003 63.1502L104.4 79.6202L112.15 75.1502L112.77 74.7902L113.4 75.1502L118.33 78.0002L118.95 78.3602V112.36C118.872 114.336 117.824 116.147 116.15 117.2L76.1503 140.3C75.6685 140.597 75.116 140.759 74.5503 140.77C74.1336 140.771 73.7238 140.664 73.3603 140.46L68.3603 137.6C67.5402 137.054 67.0719 136.114 67.1303 135.13V128.59L45.9403 116.36L45.3203 116V84.0002L45.8403 83.6202L74.4503 63.2102ZM104.38 81.0902L75.1803 64.2302L46.5703 84.6402V115.29L68.3803 127.88V135.14C68.3276 135.68 68.5631 136.209 69.0003 136.53L73.9303 139.38C74.1031 139.481 74.3002 139.533 74.5003 139.53C74.8543 139.521 75.1994 139.417 75.5003 139.23L115.5 116.13C116.785 115.297 117.595 113.9 117.68 112.37V79.1002L112.75 76.2502L104.38 81.0902Z"
+        fill="#5A7D91"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M72.4404 99.5301L101.69 82.6401L72.4404 99.5301Z"
+        stroke="#5A7E92"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M46.5703 84.6401L72.4403 99.5301"
+        stroke="#5A7E92"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M101.69 82.6401L75.1802 67.3301"
+        stroke="#5A7E92"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M85.2305 25.7999L45.2305 48.8999C43.9289 49.7247 43.1 51.1222 43.0005 52.6599V86.1299L48.0005 88.9999L84.0005 60.4399L91.6405 28.4399L86.7905 25.6399C86.2799 25.4069 85.6832 25.4681 85.2305 25.7999Z"
+        fill="white"
+      />
+      <path
+        d="M43.0005 52.6603V86.1303L48.0005 89.0003L52.5405 85.4003L58.5405 61.2003L43.0505 52.2603C43.0605 52.3803 43.0005 52.5203 43.0005 52.6603Z"
+        fill="#E7F0F5"
+      />
+      <path
+        d="M90.1705 28.6403L50.1705 51.7403C48.8917 52.5785 48.0865 53.9737 48.0005 55.5003V89.0003L92.3705 63.3803V29.8803C92.3405 28.5003 91.3705 28.0003 90.1705 28.6403Z"
+        fill="#CCD9E1"
+      />
+      <path
+        d="M92.4205 28.6201C91.7222 28.2262 90.8688 28.2262 90.1705 28.6201L50.1705 51.7201C48.8862 52.5624 48.0803 53.9663 48.0005 55.5001V89.0001"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M84.5803 24.72C85.0621 24.4234 85.6146 24.2611 86.1803 24.25H86.2403C86.6616 24.2481 87.0758 24.3586 87.4403 24.57C87.6569 24.6871 89.1354 25.5414 90.4059 26.2756C91.3052 26.7952 92.1004 27.2547 92.2703 27.35C93.1679 27.8649 93.6923 28.8477 93.6203 29.88V64.08L93.0003 64.44L48.5903 90.06L47.9603 90.42L47.3403 90.06L42.4103 87.21L41.7803 86.85V52.66C41.8589 50.6838 42.9063 48.8733 44.5803 47.82L84.5803 24.72ZM86.7903 25.65C86.6143 25.5478 86.4137 25.4959 86.2103 25.5H86.1803C85.8268 25.5129 85.4825 25.6162 85.1803 25.8L45.1803 48.9C43.8977 49.736 43.0886 51.1316 43.0003 52.66V86.13L48.0003 89L92.3403 63.36V29.88C92.405 29.3078 92.132 28.7499 91.6403 28.45L86.7903 25.65Z"
+        fill="#5A7D91"
+      />
+      <path
+        d="M65.6803 54.5099L62.3003 52.5599V49.9999L72.8803 44.7299L82.4903 43.3799V45.9199C82.4736 46.1852 82.3122 46.4197 82.0703 46.5299L68.0703 54.5899C67.304 54.9336 66.4219 54.9041 65.6803 54.5099Z"
+        fill="#E7F0F5"
+      />
+      <path
+        d="M72.8805 44.7499L67.0005 47.6799V54.8499C67.382 54.87 67.762 54.7871 68.1005 54.6099L82.1005 46.5499C82.3424 46.4397 82.5038 46.2052 82.5205 45.9399V43.3999L72.8805 44.7499Z"
+        fill="#CCD9E1"
+      />
+      <path
+        d="M65.6803 51.9996L62.3003 49.9996L78.5103 40.6396L81.8903 42.6396C82.6103 43.0496 82.6903 43.6396 82.0703 44.0396L68.0703 52.0996C67.3009 52.4372 66.4188 52.4003 65.6803 51.9996Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M82.4803 43.3999C82.4361 43.0511 82.2121 42.7512 81.8903 42.6099L78.5103 40.6099L62.3003 49.9999V52.5399L65.6803 54.4899C66.4295 54.9036 67.3297 54.9407 68.1103 54.5899L82.1103 46.5299C82.3522 46.4196 82.5136 46.1851 82.5303 45.9199C82.4903 45.6699 82.4803 43.3999 82.4803 43.3999Z"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M65.6803 51.9996L62.3003 49.9996L78.5103 40.6396L81.8903 42.6396C82.6103 43.0496 82.6903 43.6396 82.0703 44.0396L68.0703 52.0996C67.3009 52.4372 66.4188 52.4003 65.6803 51.9996Z"
+        stroke="#8CA9B8"
+        strokeWidth="0.66"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default EmptyStateArchiver;
diff --git a/src/icons/index.js b/src/icons/index.js
@@ -0,0 +1 @@
+export { default as EmptyStateArchiver } from './EmptyStateArchiver';
diff --git a/tests/e2e/e2e.test.js b/tests/e2e/e2e.test.js
@@ -6,9 +6,4 @@ describe('App (e2e)', () => {
   it('should have correct title', async () => {
     await expect(page.title()).resolves.toMatch('Notifications App');
   });
-
-  it('should have correct header', async () => {
-    const header = await page.waitForSelector('#root > div > div > header');
-    await expect(header).toMatch('Notifications');
-  });
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as useReRender } from './use-re-render';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as EmptyStateArchiver } from './EmptyStateArchiver';