From 7386be30ae704c7900da693a9ada7a59550e0e3e Mon Sep 17 00:00:00 2001
From: Joseph Kavanagh <Joseph@kav.io>
Date: Thu, 18 Apr 2024 17:42:06 +0100
Subject: [PATCH 1/2] refactor(web): tidying

* renaming vars
* move some ternary functions outside of component returns
* don't import the same module multiple times
---
 Dockerfile                                    |  2 +-
 service/latest_version/types.go               |  4 +-
 web/ui/package-lock.json                      |  6 +-
 .../src/components/approvals/service-info.tsx | 20 ++---
 .../approvals/service-update-info.tsx         |  2 +-
 .../src/components/approvals/service.tsx      |  8 +-
 .../generic/boolean-with-default.tsx          |  4 +-
 .../src/components/generic/form-label.tsx     | 42 +++++-----
 .../src/components/generic/form-select.tsx    |  4 +-
 .../react-app/src/components/generic/util.tsx | 16 ++--
 .../components/modals/action-release/item.tsx | 17 ++--
 .../modals/service-edit/deployed-version.tsx  |  4 +-
 .../service-edit/latest-version-require.tsx   |  6 +-
 .../service-edit/notify-types/discord.tsx     |  3 +-
 .../service-edit/notify-types/generic.tsx     |  3 +-
 .../service-edit/notify-types/gotify.tsx      |  3 +-
 .../service-edit/notify-types/matrix.tsx      |  3 +-
 .../modals/service-edit/notify-types/ntfy.tsx |  3 +-
 .../modals/service-edit/notify-types/smtp.tsx |  3 +-
 .../service-edit/notify-types/telegram.tsx    |  3 +-
 .../components/modals/service-edit/notify.tsx |  2 +-
 .../service-edit/util/api-ui-conversions.tsx  | 12 +--
 .../src/components/notification/index.tsx     | 31 ++++---
 .../react-app/src/handlers/notifications.tsx  | 26 +++---
 web/ui/react-app/src/index.css                |  1 -
 .../react-app/src/modals/action-release.tsx   | 68 +++++++--------
 web/ui/react-app/src/reducers/monitor.tsx     | 82 ++++++++++---------
 web/ui/react-app/src/utils/errors.tsx         |  4 +-
 .../react-app/src/utils/first-non-empty.tsx   |  6 +-
 .../react-app/src/utils/is-empty-or-null.tsx  |  2 +-
 web/ui/react-app/src/utils/is-empty.tsx       |  5 +-
 web/ui/react-app/tsconfig.json                |  3 +-
 32 files changed, 203 insertions(+), 195 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 7fa34179..7fd1148a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,7 +4,7 @@
 ARG DEBIAN_VERSION="bookworm"
 ARG GO_VERSION="1.22"
 ARG NODE_VERSION="20"
-FROM golang:${GO_VERSION}-${DEBIAN_VERSION} as go_builder
+FROM golang:${GO_VERSION}-${DEBIAN_VERSION} AS go_builder
 FROM node:${NODE_VERSION}-${DEBIAN_VERSION} AS base
 
 COPY --from=go_builder /usr/local/go/ /usr/local/go/
diff --git a/service/latest_version/types.go b/service/latest_version/types.go
index 8d6fea99..58145729 100644
--- a/service/latest_version/types.go
+++ b/service/latest_version/types.go
@@ -39,12 +39,12 @@ func getEmptyListETag() string {
 }
 
 // FindEmptyListETag finds the ETag for an empty list query on the GitHub API.
-func FindEmptyListETag(access_token string) {
+func FindEmptyListETag(accessToken string) {
 	githubData := NewGitHubData("", nil)
 
 	allowInvalidCerts := false
 	lookup := New(
-		&access_token,
+		&accessToken,
 		&allowInvalidCerts,
 		githubData,
 		nil, nil, nil,
diff --git a/web/ui/package-lock.json b/web/ui/package-lock.json
index ccfed52d..cd5d4c53 100644
--- a/web/ui/package-lock.json
+++ b/web/ui/package-lock.json
@@ -1659,9 +1659,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001610",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz",
-      "integrity": "sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==",
+      "version": "1.0.30001611",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001611.tgz",
+      "integrity": "sha512-19NuN1/3PjA3QI8Eki55N8my4LzfkMCRLgCVfrl/slbSAchQfV0+GwjPrK3rq37As4UCLlM/DHajbKkAqbv92Q==",
       "funding": [
         {
           "type": "opencollective",
diff --git a/web/ui/react-app/src/components/approvals/service-info.tsx b/web/ui/react-app/src/components/approvals/service-info.tsx
index 78d0bdbf..3e81c8eb 100644
--- a/web/ui/react-app/src/components/approvals/service-info.tsx
+++ b/web/ui/react-app/src/components/approvals/service-info.tsx
@@ -27,7 +27,7 @@ interface Props {
   service: ServiceSummaryType;
   updateAvailable: boolean;
   updateSkipped: boolean;
-  setShowUpdateInfo: () => void;
+  toggleShowUpdateInfo: () => void;
 }
 
 /**
@@ -44,7 +44,7 @@ export const ServiceInfo: FC<Props> = ({
   service,
   updateAvailable,
   updateSkipped,
-  setShowUpdateInfo,
+  toggleShowUpdateInfo,
 }) => {
   const { handleModal } = useContext(ModalContext);
   const delayedRender = useDelayedRender(250);
@@ -110,6 +110,8 @@ export const ServiceInfo: FC<Props> = ({
       </OverlayTrigger>
     ) : null;
 
+  const actionType = service.webhook ? "WebHooks" : "Commands";
+
   const actionReleaseButton =
     (service.webhook || service.command) &&
     (!updateAvailable || updateSkipped) ? (
@@ -121,7 +123,7 @@ export const ServiceInfo: FC<Props> = ({
           <Tooltip id={`tooltip-resend`}>
             {updateSkipped
               ? "Approve this release"
-              : `Resend the ${service.webhook ? "WebHooks" : "Commands"}`}
+              : `Resend the ${actionType}`}
           </Tooltip>
         }
       >
@@ -161,7 +163,7 @@ export const ServiceInfo: FC<Props> = ({
               variant="secondary"
             >
               {status.updateApproved && (service.webhook || service.command)
-                ? `${service.webhook ? "WebHooks" : "Commands"} already sent:`
+                ? `${actionType} already sent:`
                 : "Update available:"}
             </ListGroup.Item>
             <ListGroup.Item
@@ -174,7 +176,7 @@ export const ServiceInfo: FC<Props> = ({
                 key="details"
                 className="btn-flex btn-update-action"
                 variant="primary"
-                onClick={() => setShowUpdateInfo()}
+                onClick={toggleShowUpdateInfo}
               >
                 <FontAwesomeIcon icon={faInfo} />
               </Button>
@@ -222,11 +224,9 @@ export const ServiceInfo: FC<Props> = ({
             }
           >
             <div style={{ margin: 0 }}>
-              <>
-                Current version:
-                {deployedVersionIcon}
-                {skippedVersionIcon}
-              </>
+              Current version:
+              {deployedVersionIcon}
+              {skippedVersionIcon}
               <br />
               <div style={{ display: "flex", margin: 0 }}>
                 <OverlayTrigger
diff --git a/web/ui/react-app/src/components/approvals/service-update-info.tsx b/web/ui/react-app/src/components/approvals/service-update-info.tsx
index 3fab40c9..ae17c155 100644
--- a/web/ui/react-app/src/components/approvals/service-update-info.tsx
+++ b/web/ui/react-app/src/components/approvals/service-update-info.tsx
@@ -90,7 +90,7 @@ const UpdateInfo: FC<Props> = ({ service, visible }) => (
     </ListGroup.Item>
     <Card.Footer style={{ height: "1rem", paddingBottom: 0 }}>
       <small className="text-muted">
-        {service?.status && service.status?.latest_version_timestamp ? (
+        {service?.status?.latest_version_timestamp ? (
           <>
             Found{" "}
             {formatRelative(
diff --git a/web/ui/react-app/src/components/approvals/service.tsx b/web/ui/react-app/src/components/approvals/service.tsx
index 10beeafe..2dfb1108 100644
--- a/web/ui/react-app/src/components/approvals/service.tsx
+++ b/web/ui/react-app/src/components/approvals/service.tsx
@@ -21,10 +21,10 @@ interface Props {
  * @returns A component that displays the service
  */
 const Service: FC<Props> = ({ service, editable = false }) => {
-  const [showUpdateInfo, setShowUpdateInfoMain] = useState(false);
+  const [showUpdateInfo, setShowUpdateInfo] = useState(false);
 
-  const setShowUpdateInfo = useCallback(() => {
-    setShowUpdateInfoMain((prevState) => !prevState);
+  const toggleShowUpdateInfo = useCallback(() => {
+    setShowUpdateInfo((prevState) => !prevState);
   }, []);
   const { handleModal } = useContext(ModalContext);
 
@@ -113,7 +113,7 @@ const Service: FC<Props> = ({ service, editable = false }) => {
         />
         <ServiceInfo
           service={service}
-          setShowUpdateInfo={setShowUpdateInfo}
+          toggleShowUpdateInfo={toggleShowUpdateInfo}
           updateAvailable={updateStatus.available}
           updateSkipped={updateStatus.skipped}
         />
diff --git a/web/ui/react-app/src/components/generic/boolean-with-default.tsx b/web/ui/react-app/src/components/generic/boolean-with-default.tsx
index de9fd45f..29bf53f5 100644
--- a/web/ui/react-app/src/components/generic/boolean-with-default.tsx
+++ b/web/ui/react-app/src/components/generic/boolean-with-default.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Col } from "react-bootstrap";
+import { Button, ButtonGroup, Col, FormLabel } from "react-bootstrap";
 import { Controller, useFormContext } from "react-hook-form";
 import { FC, memo, useEffect } from "react";
 import {
@@ -69,7 +69,7 @@ const BooleanWithDefault: FC<Props> = ({
       style={{ display: "flex", alignItems: "center" }}
     >
       <>
-        {label && <a style={{ float: "left" }}>{label}</a>}
+        {label && <FormLabel style={{ float: "left" }}>{label}</FormLabel>}
         {tooltip && <HelpTooltip text={tooltip} />}
       </>
 
diff --git a/web/ui/react-app/src/components/generic/form-label.tsx b/web/ui/react-app/src/components/generic/form-label.tsx
index f7e836a2..15274489 100644
--- a/web/ui/react-app/src/components/generic/form-label.tsx
+++ b/web/ui/react-app/src/components/generic/form-label.tsx
@@ -27,24 +27,28 @@ const FormLabel: FC<FormLabelProps> = ({
   heading,
   required,
   small,
-}: FormLabelProps) => (
-  <Form.Label
-    style={
-      heading
-        ? {
-            fontSize: "1.25rem",
-            textDecorationLine: "underline",
-            paddingTop: "1.5rem",
-          }
-        : small
-        ? { fontSize: "0.8rem" }
-        : {}
-    }
-  >
-    {text}
-    {required && <span className="text-danger">*</span>}
-    {tooltip && <HelpTooltip text={tooltip} />}
-  </Form.Label>
-);
+}: FormLabelProps) => {
+  const style = () => {
+    if (heading)
+      return {
+        fontSize: "1.25rem",
+        textDecorationLine: "underline",
+        paddingTop: "1.5rem",
+      };
+    if (small)
+      return {
+        fontSize: "0.8rem",
+      };
+    return undefined;
+  };
+
+  return (
+    <Form.Label style={style()}>
+      {text}
+      {required && <span className="text-danger">*</span>}
+      {tooltip && <HelpTooltip text={tooltip} />}
+    </Form.Label>
+  );
+};
 
 export default FormLabel;
diff --git a/web/ui/react-app/src/components/generic/form-select.tsx b/web/ui/react-app/src/components/generic/form-select.tsx
index 13b676c7..5d097a58 100644
--- a/web/ui/react-app/src/components/generic/form-select.tsx
+++ b/web/ui/react-app/src/components/generic/form-select.tsx
@@ -80,9 +80,7 @@ const FormSelect: FC<FormSelectProps> = ({
             <Form.Select
               {...field}
               aria-label={label}
-              onChange={
-                onChange ? onChange : (e) => setValue(name, e.target.value)
-              }
+              onChange={onChange || ((e) => setValue(name, e.target.value))}
             >
               {options.map((opt) => (
                 <option
diff --git a/web/ui/react-app/src/components/generic/util.tsx b/web/ui/react-app/src/components/generic/util.tsx
index 5eef837e..f02fbf4d 100644
--- a/web/ui/react-app/src/components/generic/util.tsx
+++ b/web/ui/react-app/src/components/generic/util.tsx
@@ -54,8 +54,10 @@ export const formPadding = ({
     if (positionXS === "right") {
       paddingClasses.push("ps-1");
 
-      // Remove padding for SM+ if it's full width
-      if (col_sm === 12) {
+      // Remove padding for SM+
+      // if it's full width
+      // or we're on the left for SM+
+      if (col_sm === 12 || position === "left") {
         paddingClasses.push("ps-sm-0");
       }
     }
@@ -84,12 +86,10 @@ export const formPadding = ({
     else if (positionXS === "left") {
       paddingClasses.push("pe-1");
 
-      // Remove padding for SM+ if it's full width
-      if (col_sm === 12) {
-        paddingClasses.push("pe-sm-0");
-      }
-      // If we're on the right, remove the pe on SM+
-      else if (position === "right") {
+      // Remove padding for SM+
+      // if it's full width
+      // or we're on the right for SM+
+      if (col_sm === 12 || position === "right") {
         paddingClasses.push("pe-sm-0");
       }
     }
diff --git a/web/ui/react-app/src/components/modals/action-release/item.tsx b/web/ui/react-app/src/components/modals/action-release/item.tsx
index fb7c443d..d5d9d100 100644
--- a/web/ui/react-app/src/components/modals/action-release/item.tsx
+++ b/web/ui/react-app/src/components/modals/action-release/item.tsx
@@ -93,6 +93,15 @@ export const Item: FC<Props> = ({
       sendableTimeout(sendable, sending, setSendable, now, nextRunnable);
   }, []);
 
+  const faIcon = () => {
+    // Sending and hasn't failed
+    if (sending && failed === undefined) return faCircleNotch;
+    // Send first time
+    if (modalType === "SEND" && failed === undefined) return faPaperPlane;
+    // Resend
+    return faRedo;
+  };
+
   return (
     <Card bg="secondary" className={"no-margin service"}>
       <Card.Title className="modal-item-title" key={title + "-title"}>
@@ -186,13 +195,7 @@ export const Item: FC<Props> = ({
               disabled={!sendable}
             >
               <FontAwesomeIcon
-                icon={
-                  sending && failed === undefined
-                    ? faCircleNotch
-                    : modalType === "SEND" && failed === undefined
-                    ? faPaperPlane
-                    : faRedo
-                }
+                icon={faIcon()}
                 className={sending ? "fa-spin" : ""}
               />
             </Button>
diff --git a/web/ui/react-app/src/components/modals/service-edit/deployed-version.tsx b/web/ui/react-app/src/components/modals/service-edit/deployed-version.tsx
index 643b48c3..3cd67dfd 100644
--- a/web/ui/react-app/src/components/modals/service-edit/deployed-version.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/deployed-version.tsx
@@ -98,7 +98,7 @@ const EditServiceDeployedVersion: FC<Props> = ({
             label="JSON"
             tooltip={
               <>
-                If the URL gives JSON, take the var at this location. e.g.
+                If the URL gives JSON, take the var at this location. e.g.{" "}
                 <span className="bold-underline">data.version</span>
               </>
             }
@@ -111,7 +111,7 @@ const EditServiceDeployedVersion: FC<Props> = ({
             label="RegEx"
             tooltip={
               <>
-                RegEx to extract the version from the URL, e.g.
+                RegEx to extract the version from the URL, e.g.{" "}
                 <span className="bold-underline">v([0-9.]+)</span>
               </>
             }
diff --git a/web/ui/react-app/src/components/modals/service-edit/latest-version-require.tsx b/web/ui/react-app/src/components/modals/service-edit/latest-version-require.tsx
index 38d8f1e4..df0ab5c7 100644
--- a/web/ui/react-app/src/components/modals/service-edit/latest-version-require.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/latest-version-require.tsx
@@ -37,7 +37,7 @@ const EditServiceLatestVersionRequire: FC<Props> = ({
   const { setValue } = useFormContext();
 
   const defaultDockerRegistry: DefaultDockerFilterType["type"] =
-    defaults?.docker?.type || hard_defaults?.docker?.type;
+    defaults?.docker?.type ?? hard_defaults?.docker?.type;
   const dockerRegistryOptions = useMemo(() => {
     if (defaultDockerRegistry === undefined) return DockerRegistryOptions;
 
@@ -62,8 +62,8 @@ const EditServiceLatestVersionRequire: FC<Props> = ({
     name: "latest_version.require.docker.type",
   });
   const selectedDockerRegistry: DockerFilterRegistryType | undefined =
-    dockerRegistry || defaultDockerRegistry;
-  const showUsernameField = (dockerRegistry || defaultDockerRegistry) === "hub";
+    dockerRegistry ?? defaultDockerRegistry;
+  const showUsernameField = (dockerRegistry ?? defaultDockerRegistry) === "hub";
 
   const convertedDefaults = useMemo(
     () =>
diff --git a/web/ui/react-app/src/components/modals/service-edit/notify-types/discord.tsx b/web/ui/react-app/src/components/modals/service-edit/notify-types/discord.tsx
index 73f72015..1bba59bd 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify-types/discord.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify-types/discord.tsx
@@ -3,12 +3,11 @@ import {
   FormItemWithPreview,
   FormLabel,
 } from "components/generic/form";
+import { firstNonDefault, strToBool } from "utils";
 
 import { BooleanWithDefault } from "components/generic";
 import { NotifyDiscordType } from "types/config";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
-import { firstNonDefault } from "utils";
-import { strToBool } from "utils";
 import { useMemo } from "react";
 
 /**
diff --git a/web/ui/react-app/src/components/modals/service-edit/notify-types/generic.tsx b/web/ui/react-app/src/components/modals/service-edit/notify-types/generic.tsx
index e6b04e6b..c46103ca 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify-types/generic.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify-types/generic.tsx
@@ -9,11 +9,10 @@ import {
   convertHeadersFromString,
   normaliseForSelect,
 } from "components/modals/service-edit/util";
+import { firstNonDefault, strToBool } from "utils";
 
 import { BooleanWithDefault } from "components/generic";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
-import { firstNonDefault } from "utils";
-import { strToBool } from "utils";
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";
 
diff --git a/web/ui/react-app/src/components/modals/service-edit/notify-types/gotify.tsx b/web/ui/react-app/src/components/modals/service-edit/notify-types/gotify.tsx
index c136e1e2..c5fdddd7 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify-types/gotify.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify-types/gotify.tsx
@@ -1,10 +1,9 @@
 import { FormItem, FormLabel } from "components/generic/form";
+import { firstNonDefault, strToBool } from "utils";
 
 import { BooleanWithDefault } from "components/generic";
 import { NotifyGotifyType } from "types/config";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
-import { firstNonDefault } from "utils";
-import { strToBool } from "utils";
 import { useMemo } from "react";
 
 /**
diff --git a/web/ui/react-app/src/components/modals/service-edit/notify-types/matrix.tsx b/web/ui/react-app/src/components/modals/service-edit/notify-types/matrix.tsx
index 9b191ba4..c4ee585f 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify-types/matrix.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify-types/matrix.tsx
@@ -1,10 +1,9 @@
 import { FormItem, FormLabel } from "components/generic/form";
+import { firstNonDefault, strToBool } from "utils";
 
 import { BooleanWithDefault } from "components/generic";
 import { NotifyMatrixType } from "types/config";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
-import { firstNonDefault } from "utils";
-import { strToBool } from "utils";
 import { useMemo } from "react";
 
 /**
diff --git a/web/ui/react-app/src/components/modals/service-edit/notify-types/ntfy.tsx b/web/ui/react-app/src/components/modals/service-edit/notify-types/ntfy.tsx
index 0d3c482b..3d00f6a9 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify-types/ntfy.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify-types/ntfy.tsx
@@ -8,14 +8,13 @@ import {
   convertNtfyActionsFromString,
   normaliseForSelect,
 } from "components/modals/service-edit/util";
+import { firstNonDefault, strToBool } from "utils";
 import { useEffect, useMemo } from "react";
 
 import { BooleanWithDefault } from "components/generic";
 import { NotifyNtfyType } from "types/config";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
 import { NtfyActions } from "components/modals/service-edit/notify-types/extra";
-import { firstNonDefault } from "utils";
-import { strToBool } from "utils";
 import { useFormContext } from "react-hook-form";
 
 export const NtfySchemeOptions = [
diff --git a/web/ui/react-app/src/components/modals/service-edit/notify-types/smtp.tsx b/web/ui/react-app/src/components/modals/service-edit/notify-types/smtp.tsx
index b26f8e34..4ec01996 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify-types/smtp.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify-types/smtp.tsx
@@ -1,12 +1,11 @@
 import { FormItem, FormLabel, FormSelect } from "components/generic/form";
+import { firstNonDefault, strToBool } from "utils";
 import { useEffect, useMemo } from "react";
 
 import { BooleanWithDefault } from "components/generic";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
 import { NotifySMTPType } from "types/config";
-import { firstNonDefault } from "utils";
 import { normaliseForSelect } from "components/modals/service-edit/util/normalise-selects";
-import { strToBool } from "utils";
 import { useFormContext } from "react-hook-form";
 
 export const SMTPAuthOptions = [
diff --git a/web/ui/react-app/src/components/modals/service-edit/notify-types/telegram.tsx b/web/ui/react-app/src/components/modals/service-edit/notify-types/telegram.tsx
index c0411e47..5d84d37f 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify-types/telegram.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify-types/telegram.tsx
@@ -1,12 +1,11 @@
 import { FormItem, FormLabel, FormSelect } from "components/generic/form";
+import { firstNonDefault, strToBool } from "utils";
 import { useEffect, useMemo } from "react";
 
 import { BooleanWithDefault } from "components/generic";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
 import { NotifyTelegramType } from "types/config";
-import { firstNonDefault } from "utils";
 import { normaliseForSelect } from "components/modals/service-edit/util";
-import { strToBool } from "utils";
 import { useFormContext } from "react-hook-form";
 
 export const TelegramParseModeOptions = [
diff --git a/web/ui/react-app/src/components/modals/service-edit/notify.tsx b/web/ui/react-app/src/components/modals/service-edit/notify.tsx
index f75c067d..7354cd1f 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify.tsx
@@ -85,7 +85,7 @@ const Notify: FC<Props> = ({
 
   const original = useMemo(() => {
     const original = originals?.find((o) => o.oldIndex === itemName);
-    return original || { options: {}, url_fields: {}, params: {} };
+    return original ?? { options: {}, url_fields: {}, params: {} };
   }, [originals]);
   const serviceURL =
     lvType === "github" && (lvURL?.match(/\//g) ?? []).length == 1
diff --git a/web/ui/react-app/src/components/modals/service-edit/util/api-ui-conversions.tsx b/web/ui/react-app/src/components/modals/service-edit/util/api-ui-conversions.tsx
index 51457a04..41099067 100644
--- a/web/ui/react-app/src/components/modals/service-edit/util/api-ui-conversions.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/util/api-ui-conversions.tsx
@@ -201,10 +201,10 @@ export const convertStringToFieldArray = (
 
   let list: string[];
   try {
-    list = JSON.parse(s as string);
-    list = Array.isArray(list) ? list : [s as string];
+    list = JSON.parse(s);
+    list = Array.isArray(list) ? list : [s];
   } catch (error) {
-    list = [s as string];
+    list = [s];
   }
 
   // map the []string to {arg: string} for the form
@@ -233,7 +233,7 @@ export const convertHeadersFromString = (
   const s = (str || defaults || "") as string;
   if (s === "") return [];
 
-  const usingStr = str ? true : false;
+  const usingStr = !!str;
 
   // convert from a JSON string
   try {
@@ -271,7 +271,7 @@ export const convertOpsGenieTargetFromString = (
   const s = (str || defaults || "") as string;
   if (s === "") return [];
 
-  const usingStr = str ? true : false;
+  const usingStr = !!str;
 
   // convert from a JSON string
   try {
@@ -320,7 +320,7 @@ export const convertNtfyActionsFromString = (
   const s = (str || defaults || "") as string;
   if (s === "") return [];
 
-  const usingStr = str ? true : false;
+  const usingStr = !!str;
 
   // convert from a JSON string
   try {
diff --git a/web/ui/react-app/src/components/notification/index.tsx b/web/ui/react-app/src/components/notification/index.tsx
index 7c6a22a0..28b998bc 100644
--- a/web/ui/react-app/src/components/notification/index.tsx
+++ b/web/ui/react-app/src/components/notification/index.tsx
@@ -1,6 +1,7 @@
 import { Button, Toast } from "react-bootstrap";
 import { FC, useEffect } from "react";
 import {
+  IconDefinition,
   faCheckCircle,
   faExclamationCircle,
   faExclamationTriangle,
@@ -37,15 +38,23 @@ const Notification: FC<NotificationType> = ({
 
   useEffect(() => {
     if (delay !== 0) {
-      const timer = setTimeout(
-        () => removeNotification(id),
-        delay ? delay : 10000
-      );
+      const timer = setTimeout(() => removeNotification(id), delay ?? 10000);
 
       return () => clearTimeout(timer);
     }
   }, [delay, id, removeNotification]);
 
+  const faIcon = () => {
+    const iconMap: Record<string, IconDefinition> = {
+      info: faInfoCircle,
+      success: faCheckCircle,
+      warning: faExclamationTriangle,
+      danger: faExclamationCircle,
+    };
+
+    return iconMap[type] || faQuestionCircle;
+  };
+
   return (
     <Toast
       id={`${id}`}
@@ -60,23 +69,13 @@ const Notification: FC<NotificationType> = ({
         closeButton={false}
       >
         <FontAwesomeIcon
-          icon={
-            type === "info"
-              ? faInfoCircle
-              : type === "success"
-              ? faCheckCircle
-              : type === "warning"
-              ? faExclamationTriangle
-              : type === "danger"
-              ? faExclamationCircle
-              : faQuestionCircle
-          }
+          icon={faIcon()}
           style={{ paddingRight: "0.5em", height: "1.25em" }}
         />
         <strong className="me-auto">{title}</strong>
 
         <small style={{ paddingLeft: "1rem", fontSize: "0.7em" }}>
-          <>{formatRelative(new Date(small), new Date())}</>
+          {formatRelative(new Date(small), new Date())}
         </small>
         <Button
           key="details"
diff --git a/web/ui/react-app/src/handlers/notifications.tsx b/web/ui/react-app/src/handlers/notifications.tsx
index e821e4ea..5dcc8ea5 100644
--- a/web/ui/react-app/src/handlers/notifications.tsx
+++ b/web/ui/react-app/src/handlers/notifications.tsx
@@ -31,12 +31,12 @@ export const handleNotifications = (props: Props) => {
         case "NEW":
           props.addNotification({
             type: "info",
-            title: props.event.service_data?.id || "Unknown",
+            title: props.event.service_data?.id ?? "Unknown",
             body: `New version: ${
-              props.event.service_data?.status?.latest_version || "Unknown"
+              props.event.service_data?.status?.latest_version ?? "Unknown"
             }`,
             small:
-              props.event.service_data?.status?.latest_version_timestamp ||
+              props.event.service_data?.status?.latest_version_timestamp ??
               new Date().toString(),
             delay: 0,
           });
@@ -44,12 +44,12 @@ export const handleNotifications = (props: Props) => {
         case "UPDATED":
           props.addNotification({
             type: "success",
-            title: props.event.service_data?.id || "Unknown",
+            title: props.event.service_data?.id ?? "Unknown",
             body: `Updated to version '${
-              props.event.service_data?.status?.deployed_version || "Unknown"
+              props.event.service_data?.status?.deployed_version ?? "Unknown"
             }'`,
             small:
-              props.event.service_data?.status?.deployed_version_timestamp ||
+              props.event.service_data?.status?.deployed_version_timestamp ??
               new Date().toString(),
             delay: 30000,
           });
@@ -57,9 +57,9 @@ export const handleNotifications = (props: Props) => {
         case "INIT":
           props.addNotification({
             type: "info",
-            title: props.event.service_data?.id || "Unknown",
+            title: props.event.service_data?.id ?? "Unknown",
             body: `Latest version: ${
-              props.event.service_data?.status?.latest_version || "Unknown"
+              props.event.service_data?.status?.latest_version ?? "Unknown"
             }`,
             small:
               props.event.service_data?.status?.latest_version_timestamp ?? "",
@@ -76,7 +76,7 @@ export const handleNotifications = (props: Props) => {
             )
               props.addNotification({
                 type: "info",
-                title: props.event.service_data?.id || "Unknown",
+                title: props.event.service_data?.id ?? "Unknown",
                 body: `Skipped version: ${props.event.service_data.status.approved_version.slice(
                   "SKIP_".length
                 )}`,
@@ -97,14 +97,14 @@ export const handleNotifications = (props: Props) => {
         props.event.command_data[key].failed === false
           ? props.addNotification({
               type: "success",
-              title: props.event.service_data?.id || "Unknown",
+              title: props.event.service_data?.id ?? "Unknown",
               body: `'${key}' Command ran successfully`,
               small: new Date().toString(),
               delay: 30000,
             })
           : props.addNotification({
               type: "danger",
-              title: props.event.service_data?.id || "Unknown",
+              title: props.event.service_data?.id ?? "Unknown",
               body: `'${key}' Command failed`,
               small: new Date().toString(),
               delay: 30000,
@@ -118,14 +118,14 @@ export const handleNotifications = (props: Props) => {
         props.event.webhook_data[key].failed === false
           ? props.addNotification({
               type: "success",
-              title: props.event.service_data?.id || "Unknown",
+              title: props.event.service_data?.id ?? "Unknown",
               body: `'${key}' WebHook sent successfully`,
               small: new Date().toString(),
               delay: 30000,
             })
           : props.addNotification({
               type: "danger",
-              title: props.event.service_data?.id || "Unknown",
+              title: props.event.service_data?.id ?? "Unknown",
               body: `'${key}' WebHook failed to send`,
               small: new Date().toString(),
               delay: 30000,
diff --git a/web/ui/react-app/src/index.css b/web/ui/react-app/src/index.css
index 218d6914..636cbd5a 100644
--- a/web/ui/react-app/src/index.css
+++ b/web/ui/react-app/src/index.css
@@ -7,7 +7,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
   transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
   padding: 0px;
-  /* background-color: var(--bs-main-bg); */
 }
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
diff --git a/web/ui/react-app/src/modals/action-release.tsx b/web/ui/react-app/src/modals/action-release.tsx
index 199952ff..dc52ddd9 100644
--- a/web/ui/react-app/src/modals/action-release.tsx
+++ b/web/ui/react-app/src/modals/action-release.tsx
@@ -1,6 +1,7 @@
 import {
   ActionAPIType,
   CommandSummaryListType,
+  ModalType,
   WebHookSummaryListType,
 } from "types/summary";
 import {
@@ -101,14 +102,13 @@ const ActionReleaseModal = () => {
           ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             !dateIsAfterNow(modalData.commands[command_id].next_runnable!)
           : true
-      ) ||
+      ) !== undefined ||
       Object.keys(modalData.webhooks).find((webhook_id) =>
         modalData.webhooks[webhook_id].next_runnable
           ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             !dateIsAfterNow(modalData.webhooks[webhook_id].next_runnable!)
           : true
-      ) ||
-      false
+      ) !== undefined
     );
   }, [isSendingThisService, modalData]);
 
@@ -254,6 +254,36 @@ const ActionReleaseModal = () => {
     }
   }, [modal.actionType, modal.service.id]);
 
+  const title = (actionType: NonNullable<ModalType>, hasWebHook: boolean) => {
+    const action = hasWebHook ? "WebHook" : "Command";
+
+    const titleMap: Record<string, string> = {
+      RESEND: `Resend the ${action}(s)?`,
+      SEND: `Send the ${action}(s) to upgrade?`,
+      SKIP: `Skip this release? (don't send any ${action}s)`,
+      SKIP_NO_WH: "Skip this release?",
+    };
+
+    return titleMap[actionType] || "";
+  };
+
+  const confirmButtonText = (
+    actionType: ModalType,
+    canSendUnspecific: boolean
+  ) => {
+    if (actionType === "SKIP" || actionType === "SKIP_NO_WH")
+      return "Skip release";
+
+    const buttonTextMap: Record<string, string> = {
+      RESEND: "Resend all",
+      SEND: "Confirm",
+      RETRY: "Retry all failed",
+    };
+
+    if (canSendUnspecific) return buttonTextMap[actionType] || "";
+    return "Done";
+  };
+
   return (
     <Modal
       show={!["", "EDIT"].includes(modal.actionType)}
@@ -262,21 +292,7 @@ const ActionReleaseModal = () => {
       <Modal.Header closeButton>
         <Modal.Title>
           <strong>
-            {modal.actionType === "RESEND"
-              ? `Resend the ${
-                  modal.service.webhook ? "WebHook" : "Command"
-                }(s)?`
-              : modal.actionType === "SEND"
-              ? `Send the  ${
-                  modal.service.webhook ? "WebHook" : "Command"
-                }(s) to upgrade?`
-              : modal.actionType === "SKIP"
-              ? `Skip this release? (don't send any  ${
-                  modal.service.webhook ? "WebHook" : "Command"
-                }s)`
-              : modal.actionType === "SKIP_NO_WH"
-              ? "Skip this release?"
-              : ""}
+            {title(modal.actionType, (modal.service?.webhook ?? 0) > 0)}
           </strong>
         </Modal.Title>
       </Modal.Header>
@@ -288,9 +304,7 @@ const ActionReleaseModal = () => {
         >
           <strong>{modal.service.id}</strong>
           {modal.actionType === "RESEND"
-            ? modal.service?.status?.latest_version
-              ? ` - ${modal.service?.status?.latest_version}`
-              : " - Unknown"
+            ? ` - ${modal.service?.status?.latest_version ?? "Unknown"}`
             : ""}
         </Container>
         <>
@@ -420,17 +434,7 @@ const ActionReleaseModal = () => {
           }}
           disabled={modal.actionType !== "SKIP" && isSendingThisService}
         >
-          {modal.actionType === "SKIP" || modal.actionType === "SKIP_NO_WH"
-            ? "Skip release"
-            : !canSendUnspecific
-            ? "Done"
-            : modal.actionType === "RESEND"
-            ? "Resend all"
-            : modal.actionType === "SEND"
-            ? "Confirm"
-            : modal.actionType === "RETRY"
-            ? "Retry all failed"
-            : ""}
+          {confirmButtonText(modal.actionType, canSendUnspecific)}
         </Button>
       </Modal.Footer>
     </Modal>
diff --git a/web/ui/react-app/src/reducers/monitor.tsx b/web/ui/react-app/src/reducers/monitor.tsx
index c514b365..46ddae67 100644
--- a/web/ui/react-app/src/reducers/monitor.tsx
+++ b/web/ui/react-app/src/reducers/monitor.tsx
@@ -18,17 +18,17 @@ export default function reducerMonitor(
   switch (action.type) {
     // INIT
     // ORDER
-    case "SERVICE":
+    case "SERVICE": {
       switch (action.sub_type) {
-        case "INIT":
+        case "INIT": {
           state = JSON.parse(JSON.stringify(state));
           if (action.service_data) {
             action.service_data.loading = false;
             state.service[action.service_data.id] = action.service_data;
           }
           break;
-
-        case "ORDER":
+        }
+        case "ORDER": {
           if (action.order === undefined) break;
           const newState: MonitorSummaryType = {
             order: action.order,
@@ -41,33 +41,35 @@ export default function reducerMonitor(
           }
           state = newState;
           break;
-
-        default:
+        }
+        default: {
           console.error(action);
           throw new Error();
+        }
       }
       return state;
+    }
 
     // QUERY
     // NEW
     // UPDATED
     // INIT
-    case "VERSION":
+    case "VERSION": {
       const id = action.service_data?.id as string;
       if (state.service[id] === undefined) return state;
       switch (action.sub_type) {
-        case "QUERY":
+        case "QUERY": {
           if (state.service[id]?.status === undefined) return state;
 
           // last_queried
           state.service[id].status!.last_queried =
             action.service_data?.status?.last_queried;
           break;
-
-        case "NEW":
+        }
+        case "NEW": {
           // url
           state.service[id].url =
-            action.service_data?.url || state.service[id].url;
+            action.service_data?.url ?? state.service[id].url;
 
           // status
           state.service[id].status = state.service[id].status ?? {};
@@ -82,8 +84,8 @@ export default function reducerMonitor(
           state.service[id].status!.last_queried =
             action.service_data?.status?.latest_version_timestamp;
           break;
-
-        case "UPDATED":
+        }
+        case "UPDATED": {
           // status
           state.service[id].status = state.service[id].status ?? {};
 
@@ -97,8 +99,8 @@ export default function reducerMonitor(
           state.service[id].status!.deployed_version_timestamp =
             action.service_data?.status?.deployed_version_timestamp;
           break;
-
-        case "INIT":
+        }
+        case "INIT": {
           // Check we have the service
           if (
             state.service[id] === undefined ||
@@ -117,21 +119,21 @@ export default function reducerMonitor(
           state.service[id].status!.last_queried =
             action.service_data?.status?.latest_version_timestamp;
 
-          // deployed_version
+          // deployed_version - if it doesn't exist, set it
           state.service[id].status!.deployed_version =
-            state.service[id].status!.deployed_version ||
+            state.service[id].status!.deployed_version ??
             action.service_data?.status?.latest_version;
           state.service[id].status!.deployed_version_timestamp =
-            state.service[id].status!.deployed_version_timestamp ||
+            state.service[id].status!.deployed_version_timestamp ??
             action.service_data?.status?.latest_version_timestamp;
 
           // url
           state.service[id].url =
-            action.service_data?.url || state.service[id].url;
+            action.service_data?.url ?? state.service[id].url;
 
           break;
-
-        case "ACTION":
+        }
+        case "ACTION": {
           if (state.service[id]?.status === undefined) return state;
 
           // approved_version
@@ -139,17 +141,19 @@ export default function reducerMonitor(
             action.service_data?.status?.approved_version;
 
           break;
-
-        default:
+        }
+        default: {
           return state;
+        }
       }
 
       // Gotta update the state more for the reload
       state = JSON.parse(JSON.stringify(state));
 
       return state;
+    }
 
-    case "EDIT":
+    case "EDIT": {
       let service = action.service_data;
       if (service === undefined) {
         console.error("No service data");
@@ -166,13 +170,13 @@ export default function reducerMonitor(
         }
 
         // Update the vars of this service
-        service.id = action.service_data?.id || service.id;
+        service.id = action.service_data?.id ?? service.id;
         service.active = action.service_data?.active ?? service.active;
-        service.type = action.service_data?.type || service.type;
-        service.url = action.service_data?.url || service.url;
-        service.icon = action.service_data?.icon || service.icon;
+        service.type = action.service_data?.type ?? service.type;
+        service.url = action.service_data?.url ?? service.url;
+        service.icon = action.service_data?.icon ?? service.icon;
         service.icon_link_to =
-          action.service_data?.icon_link_to || service.icon_link_to;
+          action.service_data?.icon_link_to ?? service.icon_link_to;
         service.has_deployed_version =
           action.service_data?.has_deployed_version ??
           service.has_deployed_version;
@@ -180,22 +184,22 @@ export default function reducerMonitor(
         service.webhook = action.service_data?.webhook ?? service.webhook;
         // status
         service.status!.approved_version =
-          action.service_data?.status?.approved_version ||
+          action.service_data?.status?.approved_version ??
           service.status!.approved_version;
         service.status!.deployed_version =
-          action.service_data?.status?.deployed_version ||
+          action.service_data?.status?.deployed_version ??
           service.status!.deployed_version;
         service.status!.deployed_version_timestamp =
-          action.service_data?.status?.deployed_version_timestamp ||
+          action.service_data?.status?.deployed_version_timestamp ??
           service.status!.deployed_version_timestamp;
         service.status!.latest_version =
-          action.service_data?.status?.latest_version ||
+          action.service_data?.status?.latest_version ??
           service.status!.latest_version;
         service.status!.latest_version_timestamp =
-          action.service_data?.status?.latest_version_timestamp ||
+          action.service_data?.status?.latest_version_timestamp ??
           service.status!.latest_version_timestamp;
         service.status!.last_queried =
-          action.service_data?.status?.last_queried ||
+          action.service_data?.status?.last_queried ??
           service.status!.last_queried;
         // create and the service already exists
       } else if (state.service[service.id] !== undefined) {
@@ -218,8 +222,9 @@ export default function reducerMonitor(
       state = JSON.parse(JSON.stringify(state));
 
       return state;
+    }
 
-    case "DELETE":
+    case "DELETE": {
       if (action.sub_type == undefined) {
         console.error("No sub_type for DELETE");
         return state;
@@ -253,9 +258,10 @@ export default function reducerMonitor(
       state = JSON.parse(JSON.stringify(state));
 
       return state;
-
-    default:
+    }
+    default: {
       console.error(action);
       throw new Error();
+    }
   }
 }
diff --git a/web/ui/react-app/src/utils/errors.tsx b/web/ui/react-app/src/utils/errors.tsx
index f04e3879..9213f045 100644
--- a/web/ui/react-app/src/utils/errors.tsx
+++ b/web/ui/react-app/src/utils/errors.tsx
@@ -17,7 +17,7 @@ export const getNestedError = (
 ): FieldError | undefined =>
   key
     .split(".")
-    .reduce((acc, key) => (acc && acc[key] ? acc[key] : undefined), errors);
+    .reduce((acc, key) => (acc?.[key] ? acc[key] : undefined), errors);
 
 /**
  * Extracts and flattens errors from a react-hook-form errors object
@@ -39,7 +39,7 @@ export const extractErrors = (
     for (const key in obj) {
       const value = obj[key];
       if (value !== null) {
-        const fullPath = `${prefix}${prefix ? `.${key}` : key}`;
+        const fullPath = prefix ? `${prefix}.${key}` : key;
         const atPath = fullPath.startsWith(path); // if the path is in the key
         if (atPath || path.includes(fullPath)) {
           if (typeof value === "object" && !value.hasOwnProperty("ref"))
diff --git a/web/ui/react-app/src/utils/first-non-empty.tsx b/web/ui/react-app/src/utils/first-non-empty.tsx
index 355481c1..c1f1c88d 100644
--- a/web/ui/react-app/src/utils/first-non-empty.tsx
+++ b/web/ui/react-app/src/utils/first-non-empty.tsx
@@ -4,13 +4,13 @@
  * @param args - The arguments to check for the first non-zero length
  * @returns The first non-zero length argument
  */
-const firstNonEmpty = <T extends unknown[] | unknown>(
+const firstNonEmpty = <T extends unknown[] | undefined>(
   ...args: T[]
 ): NonNullable<T> => {
   for (const arg of args) {
-    if (arg && (arg as unknown[]).length) return arg;
+    if (arg && arg.length) return arg;
   }
-  return [] as NonNullable<T>;
+  return [] as unknown as NonNullable<T>;
 };
 
 export default firstNonEmpty;
diff --git a/web/ui/react-app/src/utils/is-empty-or-null.tsx b/web/ui/react-app/src/utils/is-empty-or-null.tsx
index 612d89c0..6a22b5a2 100644
--- a/web/ui/react-app/src/utils/is-empty-or-null.tsx
+++ b/web/ui/react-app/src/utils/is-empty-or-null.tsx
@@ -4,7 +4,7 @@
  * @param value - The value to check
  * @returns Whether the value is empty, null, or undefined
  */
-const isEmptyOrNull = (value: unknown | undefined): boolean => {
+const isEmptyOrNull = (value: unknown): boolean => {
   return (value ?? "") === "";
 };
 
diff --git a/web/ui/react-app/src/utils/is-empty.tsx b/web/ui/react-app/src/utils/is-empty.tsx
index db24994d..ecc61c29 100644
--- a/web/ui/react-app/src/utils/is-empty.tsx
+++ b/web/ui/react-app/src/utils/is-empty.tsx
@@ -4,8 +4,9 @@
  * @param arg - The array to check
  * @returns Whether the array is empty, null, or undefined
  */
-export const isEmptyArray = <T extends unknown[] | unknown>(arg: T): boolean =>
-  ((arg as unknown[]) ?? []).length === 0;
+export const isEmptyArray = <T extends unknown[] | undefined>(
+  arg: T
+): boolean => ((arg as unknown[]) ?? []).length === 0;
 
 export const isEmptyObject = <T extends Record<string, unknown> | undefined>(
   arg: T
diff --git a/web/ui/react-app/tsconfig.json b/web/ui/react-app/tsconfig.json
index 6a0ab016..2c2125a2 100644
--- a/web/ui/react-app/tsconfig.json
+++ b/web/ui/react-app/tsconfig.json
@@ -22,7 +22,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "strict": true
+    "strict": true,
+    "strictNullChecks" : true
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

From b7eea855f6d013c3e920767982bee45ecfa27195 Mon Sep 17 00:00:00 2001
From: Joseph Kavanagh <Joseph@kav.io>
Date: Thu, 18 Apr 2024 17:45:35 +0100
Subject: [PATCH 2/2] refactor(web): explicit types for websocket
 messages/notify

---
 .../service-edit/notify-types/render.tsx      |  12 +-
 .../components/modals/service-edit/notify.tsx |  21 +--
 .../modals/service-edit/notifys.tsx           |   8 +-
 .../modals/service-edit/test-notify.tsx       |   9 +-
 .../service-edit/util/api-ui-conversions.tsx  |  53 ++++---
 .../service-edit/util/ui-api-conversions.tsx  |  13 +-
 web/ui/react-app/src/contexts/websocket.tsx   |   2 +-
 .../react-app/src/modals/action-release.tsx   |   1 -
 web/ui/react-app/src/modals/service-edit.tsx  |   9 +-
 .../react-app/src/reducers/action-release.tsx |  15 +-
 web/ui/react-app/src/types/config.tsx         | 137 +++++++-----------
 web/ui/react-app/src/types/service-edit.tsx   |   8 +-
 web/ui/react-app/src/types/websocket.tsx      | 101 ++++++-------
 web/ui/react-app/src/utils/errors.tsx         |   4 +-
 14 files changed, 185 insertions(+), 208 deletions(-)

diff --git a/web/ui/react-app/src/components/modals/service-edit/notify-types/render.tsx b/web/ui/react-app/src/components/modals/service-edit/notify-types/render.tsx
index 729e5dea..c449c02c 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify-types/render.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify-types/render.tsx
@@ -18,21 +18,21 @@ import {
   TELEGRAM,
   ZULIP,
 } from "components/modals/service-edit/notify-types";
-import { Dict, NotifyType, NotifyTypes } from "types/config";
 import { FC, memo } from "react";
+import { NotifyTypesKeys, NotifyTypesValues } from "types/config";
 
 import GENERIC from "./generic";
 
 interface RenderTypeProps {
   name: string;
-  type: NotifyTypes;
-  main?: NotifyType;
-  defaults?: Dict<NotifyType>;
-  hard_defaults?: NotifyType;
+  type: NotifyTypesKeys;
+  main?: NotifyTypesValues;
+  defaults?: NotifyTypesValues;
+  hard_defaults?: NotifyTypesValues;
 }
 
 const RENDER_TYPE_COMPONENTS: {
-  [key in NotifyTypes]: FC<{
+  [key in NotifyTypesKeys]: FC<{
     name: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     main: any;
diff --git a/web/ui/react-app/src/components/modals/service-edit/notify.tsx b/web/ui/react-app/src/components/modals/service-edit/notify.tsx
index 7354cd1f..d8117999 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notify.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notify.tsx
@@ -2,9 +2,10 @@ import { Accordion, Button, Col, Form, FormGroup, Row } from "react-bootstrap";
 import {
   Dict,
   LatestVersionLookupType,
-  NotifyType,
   NotifyTypes,
   NotifyTypesConst,
+  NotifyTypesKeys,
+  NotifyTypesValues,
 } from "types/config";
 import { FC, JSX, memo, useEffect, useMemo } from "react";
 import { FormItem, FormLabel, FormSelect } from "components/generic/form";
@@ -28,9 +29,9 @@ interface Props {
   serviceName: string;
   originals?: NotifyEditType[];
   globalOptions: JSX.Element;
-  mains?: Dict<NotifyType>;
-  defaults?: Dict<NotifyType>;
-  hard_defaults?: Dict<NotifyType>;
+  mains?: Dict<NotifyTypesValues>;
+  defaults?: NotifyTypes;
+  hard_defaults?: NotifyTypes;
 }
 
 /**
@@ -60,7 +61,7 @@ const Notify: FC<Props> = ({
   const { setValue, trigger } = useFormContext();
 
   const itemName: string = useWatch({ name: `${name}.name` });
-  const itemType: NotifyTypes = useWatch({ name: `${name}.type` });
+  const itemType: NotifyTypesKeys = useWatch({ name: `${name}.type` });
   const lvType: LatestVersionLookupType["type"] = useWatch({
     name: "latest_version.type",
   });
@@ -83,9 +84,11 @@ const Notify: FC<Props> = ({
     [name, itemName, itemType]
   );
 
-  const original = useMemo(() => {
+  const original: NotifyEditType = useMemo(() => {
     const original = originals?.find((o) => o.oldIndex === itemName);
-    return original ?? { options: {}, url_fields: {}, params: {} };
+    return (
+      original ?? { type: "discord", options: {}, url_fields: {}, params: {} }
+    );
   }, [originals]);
   const serviceURL =
     lvType === "github" && (lvURL?.match(/\//g) ?? []).length == 1
@@ -93,7 +96,7 @@ const Notify: FC<Props> = ({
       : lvURL;
 
   const onChangeNotifyType = (
-    newType: NotifyTypes,
+    newType: NotifyTypesKeys,
     original: NotifyEditType,
     otherOptionsData: ServiceEditOtherData
   ) => {
@@ -158,7 +161,7 @@ const Notify: FC<Props> = ({
               return true;
             }}
             onChange={(e) => {
-              const newType = e.target.value as NotifyTypes;
+              const newType = e.target.value as NotifyTypesKeys;
               const otherOptionsData: ServiceEditOtherData = {
                 notify: mains,
                 defaults: { notify: defaults },
diff --git a/web/ui/react-app/src/components/modals/service-edit/notifys.tsx b/web/ui/react-app/src/components/modals/service-edit/notifys.tsx
index aa8322ec..f344e3cb 100644
--- a/web/ui/react-app/src/components/modals/service-edit/notifys.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/notifys.tsx
@@ -1,5 +1,5 @@
 import { Accordion, Button, Stack } from "react-bootstrap";
-import { Dict, NotifyType } from "types/config";
+import { Dict, NotifyTypes, NotifyTypesValues } from "types/config";
 import { FC, memo, useCallback, useMemo } from "react";
 
 import Notify from "./notify";
@@ -11,9 +11,9 @@ interface Props {
   serviceName: string;
 
   originals?: NotifyEditType[];
-  mains?: Dict<NotifyType>;
-  defaults?: Dict<NotifyType>;
-  hard_defaults?: Dict<NotifyType>;
+  mains?: Dict<NotifyTypesValues>;
+  defaults?: NotifyTypes;
+  hard_defaults?: NotifyTypes;
 }
 
 /**
diff --git a/web/ui/react-app/src/components/modals/service-edit/test-notify.tsx b/web/ui/react-app/src/components/modals/service-edit/test-notify.tsx
index a3798a44..5ffb0947 100644
--- a/web/ui/react-app/src/components/modals/service-edit/test-notify.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/test-notify.tsx
@@ -9,7 +9,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { NotifyType } from "types/config";
+import { NotifyTypesValues } from "types/config";
 import { convertNotifyToAPI } from "components/modals/service-edit/util/ui-api-conversions";
 import { deepDiff } from "utils/query-params";
 import { useErrors } from "hooks/errors";
@@ -34,7 +34,7 @@ const Result: FC<{ status: "pending" | "success" | "error"; err?: string }> = ({
 
 interface Props {
   path: string;
-  original?: NotifyType;
+  original?: NotifyTypesValues;
   extras?: {
     service_name_previous?: string;
     service_url?: string;
@@ -47,12 +47,13 @@ const TestNotify: FC<Props> = ({ path, original, extras }) => {
   const [lastFetched, setLastFetched] = useState(0);
   const errors = useErrors(path, true);
 
-  const fetchTestNotifyJSON = (dataJSON: NotifyType) =>
+  const fetchTestNotifyJSON = (dataJSON: NotifyTypesValues) =>
     fetchJSON<{ message: string }>({
       url: "api/v1/notify/test",
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
+        type: getValues(`${path}.type`),
         ...deepDiff(dataJSON, original),
         ...extras,
         service_name: getValues("name"),
@@ -79,7 +80,7 @@ const TestNotify: FC<Props> = ({ path, original, extras }) => {
     ],
     queryFn: ({ queryKey }) =>
       fetchTestNotifyJSON(
-        (queryKey[2] as { params: unknown }).params as NotifyType
+        (queryKey[2] as { params: unknown }).params as NotifyTypesValues
       ),
     enabled: false,
     notifyOnChangeProps: "all",
diff --git a/web/ui/react-app/src/components/modals/service-edit/util/api-ui-conversions.tsx b/web/ui/react-app/src/components/modals/service-edit/util/api-ui-conversions.tsx
index 41099067..98066a8c 100644
--- a/web/ui/react-app/src/components/modals/service-edit/util/api-ui-conversions.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/util/api-ui-conversions.tsx
@@ -4,6 +4,7 @@ import {
   NotifyNtfyAction,
   NotifyOpsGenieTarget,
   NotifyTypes,
+  NotifyTypesKeys,
   StringFieldArray,
   StringStringMap,
   WebHookType,
@@ -143,7 +144,7 @@ export const convertAPIServiceDataEditToUI = (
           const notifyName = item.name as string;
           const notifyType = (item.type ||
             otherOptionsData?.notify?.[notifyName]?.type ||
-            notifyName) as NotifyTypes;
+            notifyName) as NotifyTypesKeys;
 
           return {
             ...item,
@@ -386,18 +387,21 @@ export const convertNtfyActionsFromString = (
  */
 export const convertNotifyURLFields = (
   name: string,
-  type: string,
+  type: NotifyTypesKeys,
   urlFields?: StringStringMap,
   otherOptionsData?: ServiceEditOtherData
 ) => {
   // Generic
-  if (type === "generic")
+  if (type === "generic") {
+    const main = otherOptionsData?.notify?.[name] as
+      | NotifyTypes[typeof type]
+      | undefined;
     return {
       ...urlFields,
       custom_headers: convertHeadersFromString(
         urlFields?.custom_headers,
         firstNonDefault(
-          otherOptionsData?.notify?.[name]?.url_fields?.custom_headers,
+          main?.url_fields?.custom_headers,
           otherOptionsData?.defaults?.notify?.[type]?.url_fields
             ?.custom_headers,
           otherOptionsData?.hard_defaults?.notify?.[type]?.url_fields
@@ -407,7 +411,7 @@ export const convertNotifyURLFields = (
       json_payload_vars: convertHeadersFromString(
         urlFields?.json_payload_vars,
         firstNonDefault(
-          otherOptionsData?.notify?.[name]?.url_fields?.json_payload_vars,
+          main?.url_fields?.json_payload_vars,
           otherOptionsData?.defaults?.notify?.[type]?.url_fields
             ?.json_payload_vars,
           otherOptionsData?.hard_defaults?.notify?.[type]?.url_fields
@@ -417,13 +421,14 @@ export const convertNotifyURLFields = (
       query_vars: convertHeadersFromString(
         urlFields?.query_vars,
         firstNonDefault(
-          otherOptionsData?.notify?.[name]?.url_fields?.query_vars,
+          main?.url_fields?.query_vars,
           otherOptionsData?.defaults?.notify?.[type]?.url_fields?.query_vars,
           otherOptionsData?.hard_defaults?.notify?.[type]?.url_fields
             ?.query_vars
         )
       ),
     };
+  }
 
   return urlFields;
 };
@@ -439,7 +444,7 @@ export const convertNotifyURLFields = (
  */
 export const convertNotifyParams = (
   name: string,
-  type: string,
+  type: NotifyTypesKeys,
   params?: StringStringMap,
   otherOptionsData?: ServiceEditOtherData
 ) => {
@@ -459,28 +464,34 @@ export const convertNotifyParams = (
       };
 
     // NTFY
-    case "ntfy":
+    case "ntfy": {
+      const main = otherOptionsData?.notify?.[name] as
+        | NotifyTypes[typeof type]
+        | undefined;
       return {
         icon: "", // controlled param
         ...params,
         actions: convertNtfyActionsFromString(
           params?.actions,
           firstNonDefault(
-            otherOptionsData?.notify?.[name]?.params?.actions,
+            main?.params?.actions,
             otherOptionsData?.defaults?.notify?.[type]?.params?.actions,
             otherOptionsData?.hard_defaults?.notify?.[type]?.params?.actions
           )
         ),
       };
-
+    }
     // OpsGenie
-    case "opsgenie":
+    case "opsgenie": {
+      const main = otherOptionsData?.notify?.[name] as
+        | NotifyTypes[typeof type]
+        | undefined;
       return {
         ...params,
         actions: convertStringToFieldArray(
           params?.actions,
           firstNonDefault(
-            otherOptionsData?.notify?.[name]?.params?.actions,
+            main?.params?.actions,
             otherOptionsData?.defaults?.notify?.[type]?.params?.actions,
             otherOptionsData?.hard_defaults?.notify?.[type]?.params?.actions
           )
@@ -488,7 +499,7 @@ export const convertNotifyParams = (
         details: convertHeadersFromString(
           params?.details,
           firstNonDefault(
-            otherOptionsData?.notify?.[name]?.params?.details,
+            main?.params?.details,
             otherOptionsData?.defaults?.notify?.[type]?.params?.details,
             otherOptionsData?.hard_defaults?.notify?.[type]?.params?.details
           )
@@ -496,7 +507,7 @@ export const convertNotifyParams = (
         responders: convertOpsGenieTargetFromString(
           params?.responders,
           firstNonDefault(
-            otherOptionsData?.notify?.[name]?.params?.responders,
+            main?.params?.responders,
             otherOptionsData?.defaults?.notify?.[type]?.params?.responders,
             otherOptionsData?.hard_defaults?.notify?.[type]?.params?.responders
           )
@@ -504,25 +515,25 @@ export const convertNotifyParams = (
         visibleto: convertOpsGenieTargetFromString(
           params?.visibleto,
           firstNonDefault(
-            otherOptionsData?.notify?.[name]?.params?.visibleto,
+            main?.params?.visibleto,
             otherOptionsData?.defaults?.notify?.[type]?.params?.visibleto,
             otherOptionsData?.hard_defaults?.notify?.[type]?.params?.visibleto
           )
         ),
       };
-
+    }
     // Slack
-    case "slack":
+    case "slack": {
       return {
         ...params,
         // Remove hashtag from hex
         color: (params?.color ?? "").replace("%23", "#").replace("#", ""),
       };
-
-    // Other
-    default:
-      return params;
+    }
   }
+
+  // Other
+  return params;
 };
 
 /**
diff --git a/web/ui/react-app/src/components/modals/service-edit/util/ui-api-conversions.tsx b/web/ui/react-app/src/components/modals/service-edit/util/ui-api-conversions.tsx
index 28149be8..574200a7 100644
--- a/web/ui/react-app/src/components/modals/service-edit/util/ui-api-conversions.tsx
+++ b/web/ui/react-app/src/components/modals/service-edit/util/ui-api-conversions.tsx
@@ -1,5 +1,10 @@
 import { ArgType, NotifyEditType, ServiceEditType } from "types/service-edit";
-import { Dict, NotifyType, ServiceType, WebHookType } from "types/config";
+import {
+  Dict,
+  NotifyTypesValues,
+  ServiceType,
+  WebHookType,
+} from "types/config";
 
 import { convertValuesToString } from "./notify-string-string-map";
 import { isEmptyArray } from "utils";
@@ -106,7 +111,7 @@ export const convertUIServiceDataEditToAPI = (
     payload.notify = data.notify.reduce((acc, notify) => {
       acc[notify.name as string] = convertNotifyToAPI(notify);
       return acc;
-    }, {} as Dict<NotifyType>);
+    }, {} as Dict<NotifyTypesValues>);
 
   // Dashboard
   payload.dashboard = {
@@ -126,11 +131,11 @@ export const convertUIServiceDataEditToAPI = (
  * @returns The notify object with string values and any empty values removed
  */
 export const convertNotifyToAPI = (notify: NotifyEditType) => {
-  notify = removeEmptyValues(notify);
+  notify = removeEmptyValues(notify) as NotifyEditType;
   if (notify?.url_fields)
     notify.url_fields = convertValuesToString(notify.url_fields, notify.type);
   if (notify?.params)
     notify.params = convertValuesToString(notify.params, notify.type);
 
-  return notify as NotifyType;
+  return notify as NotifyTypesValues;
 };
diff --git a/web/ui/react-app/src/contexts/websocket.tsx b/web/ui/react-app/src/contexts/websocket.tsx
index a589da4c..1fe5c337 100644
--- a/web/ui/react-app/src/contexts/websocket.tsx
+++ b/web/ui/react-app/src/contexts/websocket.tsx
@@ -147,7 +147,7 @@ export const WebSocketProvider = (props: Props) => {
         }
 
         if (
-          ["COMMAND", "WEBHOOK"].includes(msg.type) &&
+          (msg.type === "COMMAND" || msg.type === "WEBHOOK") &&
           msg.sub_type === "EVENT"
         ) {
           const queryKey = ["actions", { service: msg.service_data?.id }];
diff --git a/web/ui/react-app/src/modals/action-release.tsx b/web/ui/react-app/src/modals/action-release.tsx
index dc52ddd9..ff84bbc7 100644
--- a/web/ui/react-app/src/modals/action-release.tsx
+++ b/web/ui/react-app/src/modals/action-release.tsx
@@ -236,7 +236,6 @@ const ActionReleaseModal = () => {
         type: "ACTION",
         sub_type: "REFRESH",
         service_data: { id: modal.service.id },
-
         webhook_data: data?.webhook,
         command_data: data?.command,
       }),
diff --git a/web/ui/react-app/src/modals/service-edit.tsx b/web/ui/react-app/src/modals/service-edit.tsx
index 10fb90da..a5c3c9f9 100644
--- a/web/ui/react-app/src/modals/service-edit.tsx
+++ b/web/ui/react-app/src/modals/service-edit.tsx
@@ -6,7 +6,12 @@ import {
   Modal,
   Row,
 } from "react-bootstrap";
-import { CommandType, HeaderType, NotifyType, WebHookType } from "types/config";
+import {
+  CommandType,
+  HeaderType,
+  NotifyTypesValues,
+  WebHookType,
+} from "types/config";
 import {
   FC,
   useCallback,
@@ -43,7 +48,7 @@ export interface EditForm {
   dvAllowInvalidCerts?: boolean;
   commands?: CommandType[];
   webhooks?: WebHookType[];
-  notify?: NotifyType[];
+  notify?: NotifyTypesValues[];
   dashboardAutoApprove?: boolean;
 }
 
diff --git a/web/ui/react-app/src/reducers/action-release.tsx b/web/ui/react-app/src/reducers/action-release.tsx
index 88f648d2..391beb3f 100644
--- a/web/ui/react-app/src/reducers/action-release.tsx
+++ b/web/ui/react-app/src/reducers/action-release.tsx
@@ -16,9 +16,7 @@ export default function reducerActionModal(
   let newState: ActionModalData = JSON.parse(JSON.stringify(state));
 
   switch (action.type) {
-    // SUMMARY
     // EVENT
-    // SENDING
     // INIT
     case "COMMAND":
     case "WEBHOOK":
@@ -70,18 +68,22 @@ export default function reducerActionModal(
                 };
             }
           break;
-        case "INIT":
-          break;
         default:
           console.error(action);
           throw new Error();
       }
       break;
 
+    // REFRESH
     // RESET
     // SENDING
     case "ACTION":
       switch (action.sub_type) {
+        case "REFRESH":
+          newState.service_id = action.service_data?.id ?? newState.service_id;
+          newState.commands = action.command_data ?? {};
+          newState.webhooks = action.webhook_data ?? {};
+          break;
         case "RESET":
           newState.commands = {};
           newState.webhooks = {};
@@ -107,11 +109,6 @@ export default function reducerActionModal(
               newState.sentWH.push(`${action.service_data?.id} ${webhook_id}`);
             }
           break;
-        case "REFRESH":
-          newState.service_id = action.service_data?.id || newState.service_id;
-          newState.commands = action.command_data ? action.command_data : {};
-          newState.webhooks = action.webhook_data ? action.webhook_data : {};
-          break;
         default:
           console.error(action);
           throw new Error();
diff --git a/web/ui/react-app/src/types/config.tsx b/web/ui/react-app/src/types/config.tsx
index 45cac227..50f34cfd 100644
--- a/web/ui/react-app/src/types/config.tsx
+++ b/web/ui/react-app/src/types/config.tsx
@@ -51,7 +51,7 @@ export interface ConfigState {
 export interface ConfigType {
   settings?: SettingsType;
   defaults?: DefaultsType;
-  notify?: Dict<NotifyType>;
+  notify?: Dict<NotifyTypesValues>;
   webhook?: Dict<WebHookType>;
   service?: Dict<ServiceType>;
   order?: string[];
@@ -68,7 +68,7 @@ export interface LogSettingsType {
 
 export interface DefaultsType {
   service?: DefaultServiceType;
-  notify?: Dict<NotifyType>;
+  notify?: NotifyTypes;
   webhook?: WebHookType;
 }
 export interface WebSettingsType {
@@ -101,7 +101,7 @@ export interface ServiceType {
   deployed_version?: DeployedVersionLookupType;
   command?: string[][];
   webhook?: Dict<WebHookType>;
-  notify?: Dict<NotifyType>;
+  notify?: Dict<NotifyTypesValues>;
   dashboard?: ServiceDashboardOptionsType;
 }
 
@@ -213,27 +213,30 @@ export interface URLCommandType {
   old?: string; // replace
   new?: string; // replace
 }
-export type NotifyTypes =
-  | "bark"
-  | "discord"
-  | "smtp" // email
-  | "googlechat"
-  | "gotify"
-  | "ifttt"
-  | "join"
-  | "mattermost"
-  | "matrix"
-  | "ntfy"
-  | "opsgenie"
-  | "pushbullet"
-  | "pushover"
-  | "rocketchat"
-  | "slack"
-  | "teams"
-  | "telegram"
-  | "zulip"
-  | "generic";
-export const NotifyTypesConst: NotifyTypes[] = [
+export interface NotifyTypes {
+  bark: NotifyBarkType;
+  discord: NotifyDiscordType;
+  smtp: NotifySMTPType;
+  googlechat: NotifyGoogleChatType;
+  gotify: NotifyGotifyType;
+  ifttt: NotifyIFTTTType;
+  join: NotifyJoinType;
+  mattermost: NotifyMatterMostType;
+  matrix: NotifyMatrixType;
+  ntfy: NotifyNtfyType;
+  opsgenie: NotifyOpsGenieType;
+  pushbullet: NotifyPushbulletType;
+  pushover: NotifyPushoverType;
+  rocketchat: NotifyRocketChatType;
+  slack: NotifySlackType;
+  teams: NotifyTeamsType;
+  telegram: NotifyTelegramType;
+  zulip: NotifyZulipType;
+  generic: NotifyGenericType;
+}
+export type NotifyTypesKeys = keyof NotifyTypes;
+export type NotifyTypesValues = NotifyTypes[keyof NotifyTypes];
+export const NotifyTypesConst: NotifyTypesKeys[] = [
   "bark",
   "discord",
   "smtp", // email
@@ -254,38 +257,18 @@ export const NotifyTypesConst: NotifyTypes[] = [
   "zulip",
   "generic",
 ];
-export interface NotifyDefaults {
-  barl: NotifyBarkType;
-  discord: NotifyDiscordType;
-  smtp: NotifySMTPType;
-  googlechat: NotifyGoogleChatType;
-  gotify: NotifyGotifyType;
-  ifttt: NotifyIFTTTType;
-  join: NotifyJoinType;
-  mattermost: NotifyMatterMostType;
-  matrix: NotifyMatrixType;
-  ntfy: NotifyNtfyType;
-  opsgenie: NotifyOpsGenieType;
-  pushbullet: NotifyPushbulletType;
-  pushover: NotifyPushoverType;
-  rocketchat: NotifyRocketChatType;
-  slack: NotifySlackType;
-  teams: NotifyTeamsType;
-  telegram: NotifyTelegramType;
-  zulip: NotifyZulipType;
-}
-export interface NotifyType {
+
+export interface NotifyBaseType {
   [key: string]: any;
-  id?: number;
   name?: string;
 
-  type?: NotifyTypes;
+  type?: NotifyTypesKeys;
   options?: NotifyOptionsType;
-  url_fields?: NotifyURLFieldsType;
-  params?: NotifyParamsType;
+  url_fields?: {};
+  params?: {};
 }
 
-export interface NotifyBarkType extends NotifyType {
+export interface NotifyBarkType extends NotifyBaseType {
   type: "bark";
   url_fields: {
     devicekey?: string;
@@ -305,7 +288,7 @@ export interface NotifyBarkType extends NotifyType {
   };
 }
 
-export interface NotifyDiscordType extends NotifyType {
+export interface NotifyDiscordType extends NotifyBaseType {
   type: "discord";
   url_fields: {
     token?: string;
@@ -318,7 +301,7 @@ export interface NotifyDiscordType extends NotifyType {
     splitlines?: string;
   };
 }
-export interface NotifySMTPType extends NotifyType {
+export interface NotifySMTPType extends NotifyBaseType {
   type: "smtp";
   url_fields: {
     host?: string;
@@ -338,13 +321,13 @@ export interface NotifySMTPType extends NotifyType {
     usestarttls?: boolean | string;
   };
 }
-export interface NotifyGoogleChatType extends NotifyType {
+export interface NotifyGoogleChatType extends NotifyBaseType {
   type: "googlechat";
   url_fields: {
     raw?: string;
   };
 }
-export interface NotifyGotifyType extends NotifyType {
+export interface NotifyGotifyType extends NotifyBaseType {
   type: "gotify";
   url_fields: {
     host?: string;
@@ -358,7 +341,7 @@ export interface NotifyGotifyType extends NotifyType {
     title?: string;
   };
 }
-export interface NotifyIFTTTType extends NotifyType {
+export interface NotifyIFTTTType extends NotifyBaseType {
   type: "ifttt";
   url_fields: {
     usemessageasvalue: string | number | undefined;
@@ -374,7 +357,7 @@ export interface NotifyIFTTTType extends NotifyType {
     value3?: string;
   };
 }
-export interface NotifyJoinType extends NotifyType {
+export interface NotifyJoinType extends NotifyBaseType {
   type: "join";
   url_fields: {
     apikey?: string;
@@ -385,7 +368,7 @@ export interface NotifyJoinType extends NotifyType {
     title?: string;
   };
 }
-export interface NotifyMatterMostType extends NotifyType {
+export interface NotifyMatterMostType extends NotifyBaseType {
   type: "mattermost";
   url_fields: {
     host?: string;
@@ -400,7 +383,7 @@ export interface NotifyMatterMostType extends NotifyType {
     icon?: string;
   };
 }
-export interface NotifyMatrixType extends NotifyType {
+export interface NotifyMatrixType extends NotifyBaseType {
   type: "matrix";
   url_fields: {
     host?: string;
@@ -414,7 +397,7 @@ export interface NotifyMatrixType extends NotifyType {
     title?: string;
   };
 }
-export interface NotifyNtfyType extends NotifyType {
+export interface NotifyNtfyType extends NotifyBaseType {
   type: "ntfy";
   url_fields: {
     host?: string;
@@ -457,7 +440,7 @@ export interface NotifyNtfyAction {
   extras?: HeaderType[] | StringStringMap;
 }
 
-export interface NotifyOpsGenieType extends NotifyType {
+export interface NotifyOpsGenieType extends NotifyBaseType {
   type: "opsgenie";
   url_fields: {
     apikey?: string;
@@ -489,7 +472,7 @@ export interface NotifyOpsGenieTarget {
   sub_type: string;
   value: string;
 }
-export interface NotifyPushbulletType extends NotifyType {
+export interface NotifyPushbulletType extends NotifyBaseType {
   type: "pushbullet";
   url_fields: {
     targets?: string;
@@ -499,7 +482,7 @@ export interface NotifyPushbulletType extends NotifyType {
     title?: string;
   };
 }
-export interface NotifyPushoverType extends NotifyType {
+export interface NotifyPushoverType extends NotifyBaseType {
   type: "pushover";
   url_fields: {
     token?: string;
@@ -511,7 +494,7 @@ export interface NotifyPushoverType extends NotifyType {
     title?: string;
   };
 }
-export interface NotifyRocketChatType extends NotifyType {
+export interface NotifyRocketChatType extends NotifyBaseType {
   type: "rocketchat";
   url_fields: {
     channel?: string;
@@ -523,7 +506,7 @@ export interface NotifyRocketChatType extends NotifyType {
     username?: string;
   };
 }
-export interface NotifySlackType extends NotifyType {
+export interface NotifySlackType extends NotifyBaseType {
   type: "slack";
   url_fields: {
     channel?: string;
@@ -536,7 +519,7 @@ export interface NotifySlackType extends NotifyType {
     title?: string;
   };
 }
-export interface NotifyTeamsType extends NotifyType {
+export interface NotifyTeamsType extends NotifyBaseType {
   type: "teams";
   url_fields: {
     altid?: string;
@@ -550,7 +533,7 @@ export interface NotifyTeamsType extends NotifyType {
     title?: string;
   };
 }
-export interface NotifyTelegramType extends NotifyType {
+export interface NotifyTelegramType extends NotifyBaseType {
   type: "telegram";
   url_fields: {
     token?: string;
@@ -563,7 +546,7 @@ export interface NotifyTelegramType extends NotifyType {
     title?: string;
   };
 }
-export interface NotifyZulipType extends NotifyType {
+export interface NotifyZulipType extends NotifyBaseType {
   type: "zulip";
   url_fields: {
     botmail?: string;
@@ -585,7 +568,7 @@ export type NotifyGenericRequestMethods =
   | "DELETE"
   | "TRACE"
   | "CONNECT";
-export interface NotifyGenericType extends NotifyType {
+export interface NotifyGenericType extends NotifyBaseType {
   type: "generic";
   url_fields: {
     host?: string;
@@ -612,24 +595,6 @@ export interface NotifyOptionsType {
   max_tries?: number;
 }
 
-export interface NotifyURLFieldsType {
-  [key: string]: undefined | string | number | boolean | HeaderType[];
-}
-
-export interface NotifyParamsType {
-  [key: string]:
-    | undefined
-    | string
-    | number
-    | boolean
-    | StringFieldArray
-    | StringStringMap
-    | NotifyNtfyAction[]
-    | NotifyOpsGenieAction[]
-    | NotifyOpsGenieTarget[]
-    | HeaderType[];
-}
-
 export interface WebHookType {
   // For edit
   [key: string]: string | boolean | number | undefined | HeaderType[];
diff --git a/web/ui/react-app/src/types/service-edit.tsx b/web/ui/react-app/src/types/service-edit.tsx
index 4c430c65..35a6486d 100644
--- a/web/ui/react-app/src/types/service-edit.tsx
+++ b/web/ui/react-app/src/types/service-edit.tsx
@@ -5,8 +5,8 @@ import {
   DockerFilterType,
   HeaderType,
   NotifyOptionsType,
-  NotifyType,
   NotifyTypes,
+  NotifyTypesValues,
   ServiceDashboardOptionsType,
   ServiceOptionsType,
   StringStringMap,
@@ -20,7 +20,7 @@ export interface ServiceEditModalData {
 
 export interface ServiceEditOtherData {
   webhook?: Dict<WebHookType>;
-  notify?: Dict<NotifyType>;
+  notify?: Dict<NotifyTypesValues>;
   defaults?: DefaultsType;
   hard_defaults?: DefaultsType;
 }
@@ -92,9 +92,9 @@ export interface DeployedVersionLookupEditType {
   regex?: string;
 }
 
-export interface NotifyEditType extends NotifyType {
+export type NotifyEditType = NotifyTypesValues & {
   oldIndex?: string;
-}
+};
 
 export interface HeaderEditType extends HeaderType {
   oldIndex?: number; // Index of existing secret
diff --git a/web/ui/react-app/src/types/websocket.tsx b/web/ui/react-app/src/types/websocket.tsx
index 87a547d2..8be25f3e 100644
--- a/web/ui/react-app/src/types/websocket.tsx
+++ b/web/ui/react-app/src/types/websocket.tsx
@@ -13,71 +13,64 @@ export interface GorillaWebSocketMessage {
   data: WebSocketResponse;
   defaultPrevented: boolean;
   eventPhase: number;
-  explicitOriginalTarget: ExplicitOriginalTarget;
+  explicitOriginalTarget: wsMessageDetail;
   isTrusted: boolean;
   lastEventId: string;
   origin: string;
-  originalTarget: OriginalTarget;
+  originalTarget: wsMessageDetail;
   ports: number[];
   returnValue: boolean;
   source: null;
-  srcElement: SRCElement;
-  target: Target;
+  srcElement: wsMessageDetail;
+  target: wsMessageDetail;
   timeStamp: number;
   type: string;
 }
 
-export interface WebSocketResponse {
-  page: string;
-  type: string;
-  sub_type?: string;
-  order?: string[];
-  target?: string;
-  service_data?: ServiceSummaryType;
-  command_data?: CommandSummaryListType;
-  webhook_data?: WebHookSummaryListType;
-}
-
-export interface ExplicitOriginalTarget {
-  binaryType: string;
-  bufferedAmount: number;
-  extensions: string;
-  onclose: null;
-  onerror: null;
-  onmessage: null;
-  onopen: null;
-  protocol: string;
-  readyState: number;
-  url: string;
-}
-
-export interface OriginalTarget {
-  binaryType: string;
-  bufferedAmount: number;
-  extensions: string;
-  onclose: null;
-  onerror: null;
-  onmessage: null;
-  onopen: null;
-  protocol: string;
-  readyState: number;
-  url: string;
-}
-
-export interface SRCElement {
-  binaryType: string;
-  bufferedAmount: number;
-  extensions: string;
-  onclose: null;
-  onerror: null;
-  onmessage: null;
-  onopen: null;
-  protocol: string;
-  readyState: number;
-  url: string;
-}
+export type WebSocketResponse =
+  | {
+      page: "APPROVALS";
+      type: "ACTION";
+      sub_type: "SENDING" | "REFRESH" | "RESET";
+      service_data?: ServiceSummaryType;
+      command_data?: CommandSummaryListType;
+      webhook_data?: WebHookSummaryListType;
+    }
+  | {
+      page: "APPROVALS";
+      type: "COMMAND" | "WEBHOOK";
+      sub_type: "EVENT";
+      service_data: ServiceSummaryType;
+      command_data?: CommandSummaryListType;
+      webhook_data?: WebHookSummaryListType;
+    }
+  | {
+      page: "APPROVALS";
+      type: "DELETE";
+      sub_type: string;
+      order?: string[];
+    }
+  | {
+      page: "APPROVALS";
+      type: "EDIT";
+      sub_type: string;
+      service_data?: ServiceSummaryType;
+    }
+  | {
+      page: "APPROVALS";
+      type: "SERVICE";
+      sub_type: "INIT" | "ORDER";
+      order?: string[];
+      service_data?: ServiceSummaryType;
+    }
+  | {
+      page: "APPROVALS";
+      type: "VERSION";
+      sub_type: "ACTION" | "INIT" | "QUERY" | "UPDATED" | "NEW";
+      service_data: ServiceSummaryType;
+    };
 
-export interface Target {
+export interface wsMessageDetail {
   binaryType: string;
   bufferedAmount: number;
   extensions: string;
diff --git a/web/ui/react-app/src/utils/errors.tsx b/web/ui/react-app/src/utils/errors.tsx
index 9213f045..6b30c6a9 100644
--- a/web/ui/react-app/src/utils/errors.tsx
+++ b/web/ui/react-app/src/utils/errors.tsx
@@ -15,9 +15,7 @@ export const getNestedError = (
   errors: any,
   key: string
 ): FieldError | undefined =>
-  key
-    .split(".")
-    .reduce((acc, key) => (acc?.[key] ? acc[key] : undefined), errors);
+  key.split(".").reduce((acc, key) => acc?.[key], errors);
 
 /**
  * Extracts and flattens errors from a react-hook-form errors object