Merge pull request #82 from CDOT-CV/Feature/toast-notifications

Add toast notifications
CDOT-CV · Jul 19, 2024 · fb88835 · fb88835
2 parents 3c849f9 + 90ab94f
commit fb88835
Show file tree

Hide file tree

Showing 56 changed files with 489 additions and 848 deletions.
diff --git a/services/api/src/admin_rsu.py b/services/api/src/admin_rsu.py
@@ -156,6 +156,13 @@ def delete_rsu(rsu_ip):
     )
     pgquery.write_db(scms_remove_query)
 
+    # Delete snmp message forward config data
+    msg_config_remove_query = (
+        "DELETE FROM public.snmp_msgfwd_config WHERE "
+        f"rsu_id=(SELECT rsu_id FROM public.rsus WHERE ipv4_address = '{rsu_ip}')"
+    )
+    pgquery.write_db(msg_config_remove_query)
+
     # Delete RSU data
     rsu_remove_query = "DELETE FROM public.rsus WHERE " f"ipv4_address = '{rsu_ip}'"
     pgquery.write_db(rsu_remove_query)

diff --git a/services/api/tests/data/admin_rsu_data.py b/services/api/tests/data/admin_rsu_data.py
@@ -146,5 +146,6 @@
     "DELETE FROM public.rsu_organization WHERE rsu_id=(SELECT rsu_id FROM public.rsus WHERE ipv4_address = '10.11.81.12')",
     "DELETE FROM public.ping WHERE rsu_id=(SELECT rsu_id FROM public.rsus WHERE ipv4_address = '10.11.81.12')",
     "DELETE FROM public.scms_health WHERE rsu_id=(SELECT rsu_id FROM public.rsus WHERE ipv4_address = '10.11.81.12')",
+    "DELETE FROM public.snmp_msgfwd_config WHERE rsu_id=(SELECT rsu_id FROM public.rsus WHERE ipv4_address = '10.11.81.12')",
     "DELETE FROM public.rsus WHERE ipv4_address = '10.11.81.12'",
 ]
diff --git a/services/api/tests/src/test_admin_rsu.py b/services/api/tests/src/test_admin_rsu.py
@@ -279,6 +279,7 @@ def test_delete_rsu(mock_write_db):
         call(admin_rsu_data.delete_rsu_calls[1]),
         call(admin_rsu_data.delete_rsu_calls[2]),
         call(admin_rsu_data.delete_rsu_calls[3]),
+        call(admin_rsu_data.delete_rsu_calls[4])
     ]
     mock_write_db.assert_has_calls(calls)
     assert actual_result == expected_result
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -35,6 +35,7 @@
     "react-confirm-alert": "^2.8.0",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.41.5",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.3.1",
     "react-map-gl": "^7.0.21",
     "react-redux": "^8.0.5",

diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
@@ -15,6 +15,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import Dashboard from './Dashboard'
 import { NotFound } from './pages/404'
 import { theme } from './styles'
+import { Toaster, ToastOptions } from 'react-hot-toast'
 import { ThemeProvider, StyledEngineProvider } from '@mui/material'
 
 const App = () => {
@@ -57,6 +58,13 @@ const App = () => {
             </Routes>
           )}
         </BrowserRouter>
+        <Toaster
+          toastOptions={{
+            style: {
+              fontFamily: 'Arial, Helvetica, sans-serif',
+            },
+          }}
+        />
       </ThemeProvider>
     </StyledEngineProvider>
   )

diff --git a/webapp/src/__snapshots__/App.test.tsx.snap b/webapp/src/__snapshots__/App.test.tsx.snap
@@ -41,5 +41,8 @@ exports[`should take a snapshot 1`] = `
       <div />
     </div>
   </div>
+  <div
+    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+  />
 </div>
 `;
diff --git a/webapp/src/components/ContactSupportMenu.tsx b/webapp/src/components/ContactSupportMenu.tsx
@@ -6,12 +6,10 @@ import 'react-widgets/styles.css'
 import RsuApi from '../apis/rsu-api'
 
 import './css/ContactSupportMenu.css'
+import toast from 'react-hot-toast'
 
 const ContactSupportMenu = () => {
   const [hidden, setHidden] = useState(true) // hidden by default
-  const [successMsg, setSuccessMsg] = useState('')
-  const [errorState, setErrorState] = useState(false)
-  const [errorMessage, setErrorMessage] = useState('')
   const {
     register,
     handleSubmit,
@@ -24,21 +22,13 @@ const ContactSupportMenu = () => {
       const res = await RsuApi.postContactSupport(data)
       const status = res.status
       if (status === 200) {
-        console.debug('Successfully sent email: ' + status)
-        setSuccessMsg('Successfully sent email')
-        setErrorState(false)
+        toast.success('Successfully sent email')
         reset()
       } else {
-        console.error('Something went wrong: ' + status)
-        setSuccessMsg('')
-        setErrorState(true)
-        setErrorMessage('Something went wrong, please try again later')
+        toast.error('Something went wrong: ' + status)
       }
     } catch (exception_var) {
-      console.error(exception_var)
-      setSuccessMsg('')
-      setErrorState(true)
-      setErrorMessage('An exception occurred, please try again later')
+      toast.error('An exception occurred, please try again later')
     }
   }
 
@@ -96,17 +86,6 @@ const ContactSupportMenu = () => {
           />
           {errors.message && <Form.Text className="text-danger">{errors.message.message}</Form.Text>}
         </Form.Group>
-
-        {successMsg && (
-          <p className="success-msg" role="status">
-            {successMsg}
-          </p>
-        )}
-        {errorState && (
-          <p className="error-msg" role="alert">
-            Error: {errorMessage}
-          </p>
-        )}
         <div className="form-control">
           <label></label>
           <button type="submit" className="btn btn-primary">

diff --git a/webapp/src/components/SnmpsetMenu.tsx b/webapp/src/components/SnmpsetMenu.tsx
@@ -3,12 +3,8 @@ import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import {
-  selectChangeSuccess,
-  selectErrorState,
   selectDestIp,
   selectSnmpMsgType,
-  selectSnmpFilterMsg,
-  selectSnmpFilterErr,
 
   // Actions
   submitSnmpSet,
@@ -22,6 +18,7 @@ import { selectRsuIpv4, selectRsuManufacturer } from '../generalSlices/rsuSlice'
 import { RootState } from '../store'
 
 import './css/SnmpwalkMenu.css'
+import toast from 'react-hot-toast'
 
 export type SnmpsetMenu = {
   type: string
@@ -32,12 +29,8 @@ const SnmpsetMenu = (props: SnmpsetMenu) => {
   const { type, rsuIpList } = props
   const dispatch: ThunkDispatch<RootState, void, AnyAction> = useDispatch()
 
-  const changeSuccess = useSelector(selectChangeSuccess)
-  const errorState = useSelector(selectErrorState)
   const destIp = useSelector(selectDestIp)
   const snmpMsgType = useSelector(selectSnmpMsgType)
-  const snmpFilterMsg = useSelector(selectSnmpFilterMsg)
-  const snmpFilterErr = useSelector(selectSnmpFilterErr)
 
   const rsuIp = useSelector(selectRsuIpv4)
   const rsuManufacturer = useSelector(selectRsuManufacturer)
@@ -63,7 +56,16 @@ const SnmpsetMenu = (props: SnmpsetMenu) => {
         </label>
       </form>
 
-      <button id="refreshbtn" onClick={() => dispatch(submitSnmpSet(rsuIpList))}>
+      <button
+        id="refreshbtn"
+        onClick={() =>
+          dispatch(submitSnmpSet(rsuIpList)).then((data: any) =>
+            data.changeSuccess
+              ? toast.success('Forwarding Changes Applied Successfully')
+              : toast.error('Failed to add forwarding: ', data.errorState)
+          )
+        }
+      >
         Add Forwarding
       </button>
       {type !== 'single_rsu' && (
@@ -83,15 +85,6 @@ const SnmpsetMenu = (props: SnmpsetMenu) => {
         </button>
       )}
 
-      {changeSuccess ? (
-        <div>
-          <p id="successtext">Successful write to RSU</p>
-        </div>
-      ) : (
-        <p id="infotext"></p>
-      )}
-      {errorState !== '' ? <p id="warningtext" role="alert">{errorState}</p> : <div />}
-
       {type !== 'single_rsu' ? (
         <div>
           <p id="snmpfiltertext" style={{ marginTop: '40px' }}>
@@ -120,20 +113,18 @@ const SnmpsetMenu = (props: SnmpsetMenu) => {
             If you are configuring SPaT or MAP forwarding, apply the TX message <br /> filter after your configuration
             has been applied
           </p>
-          <button id="refreshbtn" onClick={() => dispatch(filterSnmp([rsuIp]))}>
+          <button
+            id="refreshbtn"
+            onClick={() =>
+              dispatch(filterSnmp([rsuIp])).then((data: any) => {
+                data.snmpFilterErr
+                  ? toast.error('Failed to apply TX filter: ', data.snmpFilterMsg)
+                  : toast.success('TX Filter Applied Successfully')
+              })
+            }
+          >
             Apply TX Filter
           </button>
-          {snmpFilterMsg !== '' ? (
-            <div>
-              {snmpFilterErr === true ? (
-                <p id="warningtext" role="alert">{snmpFilterMsg}</p>
-              ) : (
-                <p id="successtext" role="status">{snmpFilterMsg}</p>
-              )}
-            </div>
-          ) : (
-            <div />
-          )}
         </div>
       ) : (
         <div />

diff --git a/webapp/src/components/SnmpwalkMenu.tsx b/webapp/src/components/SnmpwalkMenu.tsx
@@ -6,7 +6,6 @@ import { Options } from './AdminDeletionOptions'
 import { selectRsuManufacturer, selectRsuIpv4 } from '../generalSlices/rsuSlice'
 import {
   selectMsgFwdConfig,
-  selectErrorState,
 
   // Actions
   refreshSnmpFwdConfig,
@@ -22,12 +21,12 @@ import {
 import { IconButton, ThemeProvider, StyledEngineProvider, Tooltip, createTheme } from '@mui/material'
 import { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
 import { RootState } from '../store'
+import toast from 'react-hot-toast'
 
 const SnmpwalkMenu = () => {
   const dispatch: ThunkDispatch<RootState, void, AnyAction> = useDispatch()
 
   const msgFwdConfig = useSelector(selectMsgFwdConfig)
-  const errorState = useSelector(selectErrorState)
 
   const rsuIp = useSelector(selectRsuIpv4)
   const rsuManufacturer = useSelector(selectRsuManufacturer)
@@ -48,7 +47,11 @@ const SnmpwalkMenu = () => {
               snmpMsgType: countsMsgType,
               destIp: ip,
             })
-          )
+          ).then((data: any) => {
+            data.payload.changeSuccess
+              ? toast.success('Successfully deleted SNMP forwarding')
+              : toast.error('Failed to delete SNMP forwarding: ' + data.payload.errorState)
+          })
         },
       },
       {
@@ -150,14 +153,6 @@ const SnmpwalkMenu = () => {
               </div>
             )}
           </div>
-
-          {errorState !== '' ? (
-            <p id="warningtext" role="alert">
-              {errorState}
-            </p>
-          ) : (
-            <div />
-          )}
         </ThemeProvider>
       </StyledEngineProvider>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,5 +41,8 @@ exports[`should take a snapshot 1`] = ` @@
           <div />
         </div>
       </div>
+      <div
+        style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+      />
     </div>
     `;