Add Notifications Entity and Rest Controller

frontend/package.json

@@ -16,16 +16,20 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "carbon-components": "^10.58.12",
     "cors": "^2.8.5",
     "d3": "^7.6.1",
+    "date-fns": "^2.8.1",
     "dayjs": "^1.10.4",
     "formik": "^2.2.9",
     "formik-error-focus": "2.0.0",
+    "geopattern": "1.2.3",
     "jsonpath": "^1.1.1",
     "lodash-es": "^4.17.15",
     "prettier-eslint": "^15.0.1",
     "qs": "6.11.0",
     "react": "^17.0.2",
+    "react-avatar": "5.0.3",
     "react-confirm-alert": "^2.7.0",
     "react-data-table-component": "^7.5.3",
     "react-dom": "^17.0.2",
@@ -42,9 +46,7 @@
     "styled-components": "^5.3.6",
     "swr": "2.0.3",
     "web-vitals": "^2.1.4",
-    "yup": "^0.29.2",
-    "react-avatar": "5.0.3",
-    "geopattern": "1.2.3"
+    "yup": "^0.29.2"
   },
   "scripts": {
     "start": "GENERATE_SOURCEMAP=false HTTPS=true react-scripts start",
@@ -84,7 +86,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.2",
     "sass": "^1.57.1"
   }
 }

frontend/src/components/Style.css

@@ -40,7 +40,7 @@ li.clickableUserDetails:hover {
 }
 
 .adminPageContent {
-  margin-left: 16%;
+  margin-left: 17%;
   margin-right: 1%;
 }
 

frontend/src/components/admin/Admin.js

@@ -26,6 +26,7 @@ import {
   ContainerSoftware,
   BootVolumeAlt,
   Report,
+  Bullhorn,
 } from "@carbon/icons-react";
 import PathRoute from "../utils/PathRoute";
 import CalculatedValue from "./calculatedValue/CalculatedValueForm";
@@ -45,7 +46,7 @@ import OrganizationAddModify from "./OrganizationManagement/OrganizationAddModif
 import AnalyzerTestName from "./analyzerTestName/AnalyzerTestName.js";
 import PluginList from "./pluginFile/PluginFile.js";
 import ResultReportingConfiguration from "./ResultReportingConfiguration/ResultReportingConfiguration.js";
-
+import PushNotificationPage from "../notifications/PushNotificationPage.jsx";
 function Admin() {
   const intl = useIntl();
   const [isSmallScreen, setIsSmallScreen] = useState(false);
@@ -164,6 +165,9 @@ function Admin() {
           <SideNavLink href="#DictionaryMenu" renderIcon={CharacterWholeNumber}>
             <FormattedMessage id="dictionary.label.modify" />
           </SideNavLink>
+          <SideNavLink href="#NotifyUser" renderIcon={Bullhorn}>
+            <FormattedMessage id="Notify User" />
+          </SideNavLink>
           <SideNavLink
             renderIcon={Catalog}
             target="_blank"
@@ -192,6 +196,9 @@ function Admin() {
       <PathRoute path="#providerMenu">
         <ProviderMenu />
       </PathRoute>
+      <PathRoute path="#NotifyUser">
+        <PushNotificationPage />
+      </PathRoute>
       <PathRoute path="#barcodeConfiguration">
         <BarcodeConfiguration />
       </PathRoute>

frontend/src/components/admin/calculatedValue/CalculatedValueForm.tsx

@@ -212,7 +212,7 @@ const CalculatedValue: React.FC<CalculatedValueProps> = () => {
         title: intl.formatMessage({ id: "notification.title" }),
         message: intl.formatMessage({ id: "delete.success.msg" }),
       });
-      window.location.reload()
+      window.location.reload();
     } else {
       addNotification({
         kind: NotificationKinds.error,

frontend/src/components/admin/reflexTests/ReflexRuleForm.js

@@ -307,7 +307,7 @@ function ReflexRule() {
         title: intl.formatMessage({ id: "notification.title" }),
         message: intl.formatMessage({ id: "delete.success.msg" }),
       });
-      window.location.reload()
+      window.location.reload();
     } else {
       addNotification({
         kind: NotificationKinds.error,

frontend/src/components/common/Sprinner.jsx

@@ -0,0 +1,55 @@
+const Spinner = ({
+  className = "",
+  path: { fill: pathFill = "white", className: pathClassName = "" } = {},
+  circle: {
+    fill: circleFill = "white",
+    className: circleClassName = "",
+    stroke: circleStroke = "#f1edf7",
+    cx = "12",
+    cy = "12",
+    r = "10",
+    strokeWidth: circleStrokeWidth = "4",
+  } = {},
+}) => {
+  const svgStyle = {
+    zIndex: 40,
+    marginRight: "0.75rem",
+    height: "1.25rem",
+    width: "1.25rem",
+    animation: "spin 1s linear infinite",
+  };
+
+  const circleStyle = {
+    opacity: 0.75,
+  };
+
+  const spinAnimation = `@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }`;
+
+  return (
+    <div>
+      <style>{spinAnimation}</style>
+      <svg className={className} style={svgStyle} viewBox="0 0 24 24">
+        <circle
+          className={circleClassName}
+          style={circleStyle}
+          cx={cx}
+          cy={cy}
+          r={r}
+          stroke={circleStroke}
+          fill={circleFill}
+          strokeWidth={circleStrokeWidth}
+        />
+        <path
+          className={pathClassName}
+          fill={pathFill}
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    </div>
+  );
+};
+
+export default Spinner;