refactor(web): helper util funcs for empty/null/undefined vars

* firstNonDefault
* firstNonEmpty
* isEmptyArray
* isEmptyOrNull

web/ui/react-app/package.json

@@ -6,11 +6,11 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@tanstack/react-query": "^5.28.12",
+    "@tanstack/react-query": "^5.28.14",
     "@types/bootstrap": "^5.2.10",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.74",
@@ -56,8 +56,8 @@
     ]
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^5.28.12",
-    "@types/node": "^20.12.2",
+    "@tanstack/react-query-devtools": "^5.28.14",
+    "@types/node": "^20.12.3",
     "@types/styled-components": "^5.1.34"
   }
 }

web/ui/react-app/src/components/approvals/service-info.tsx

@@ -20,6 +20,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ModalContext } from "contexts/modal";
 import { formatRelative } from "date-fns";
+import { isEmptyOrNull } from "utils";
 
 interface Props {
   service: ServiceSummaryType;
@@ -57,7 +58,7 @@ export const ServiceInfo: FC<Props> = ({
     () => ({
       // If version hasn't been found or a new version has been found (and not skipped)
       warning:
-        (service?.status?.deployed_version ?? "") === "" ||
+        isEmptyOrNull(service?.status?.deployed_version) ||
         (updateAvailable && !updateSkipped),
       // If the latest version is the same as the approved version
       updateApproved:

web/ui/react-app/src/components/generic/form-item-colour.tsx

@@ -45,7 +45,7 @@ const FormItemColour: FC<FormItemColourProps> = ({
   positionXS = position,
 }) => {
   const { register, setValue } = useFormContext();
-  const hexColour = useWatch({ name: name });
+  const hexColour: string = useWatch({ name: name });
   const trimmedHex = hexColour?.replace("#", "");
   const error = useError(name, true);
   const padding = formPadding({ col_xs, col_sm, position, positionXS });
@@ -66,6 +66,7 @@ const FormItemColour: FC<FormItemColourProps> = ({
               type="text"
               defaultValue={trimmedHex}
               placeholder={defaultVal}
+              maxLength={6}
               autoFocus={false}
               {...register(name, {
                 pattern: {
@@ -80,10 +81,8 @@ const FormItemColour: FC<FormItemColourProps> = ({
               style={{ width: "30%" }}
               type="color"
               title="Choose your color"
-              value={hexColour || defaultVal}
-              onChange={(event) => {
-                setColour(event.target.value);
-              }}
+              value={`#${trimmedHex || defaultVal?.replace("#", "")}`}
+              onChange={(event) => setColour(event.target.value)}
               autoFocus={false}
             />
           </InputGroup>

web/ui/react-app/src/components/generic/form-item-with-preview.tsx

@@ -3,6 +3,7 @@ import { FC, useMemo } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 
 import FormLabel from "./form-label";
+import { isEmptyOrNull } from "utils";
 import { useError } from "hooks/errors";
 
 interface Props {
@@ -70,7 +71,7 @@ const FormItemWithPreview: FC<Props> = ({
             {...register(name, {
               validate: (value: string | undefined) => {
                 // Allow empty values
-                if ((value ?? "") === "") return true;
+                if (isEmptyOrNull(value)) return true;
 
                 // Validate that it's a URL (with prefix)
                 try {

web/ui/react-app/src/components/generic/form-key-val-map.tsx

@@ -15,6 +15,7 @@ import FormKeyVal from "./form-key-val";
 import { FormLabel } from "components/generic/form";
 import { HeaderType } from "types/config";
 import { diffObjects } from "utils/diff-objects";
+import { isEmptyArray } from "utils";
 
 interface Props {
   name: string;
@@ -59,7 +60,9 @@ const FormKeyValMap: FC<Props> = ({
   // useDefaults when the fieldValues are undefined or the same as the defaults
   const useDefaults = useMemo(
     () =>
-      (defaults && diffObjects(fieldValues ?? fields ?? [], defaults)) ?? false,
+      (!isEmptyArray(defaults) &&
+        diffObjects(fieldValues ?? fields ?? [], defaults)) ??
+      false,
     [fieldValues, defaults]
   );
   // trigger validation on change of defaults being used/not

web/ui/react-app/src/components/generic/form-list.tsx

@@ -7,6 +7,7 @@ import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { StringFieldArray } from "types/config";
 import { diffObjects } from "utils/diff-objects";
+import { isEmptyArray } from "utils";
 
 interface Props {
   name: string;
@@ -45,7 +46,9 @@ const FormList: FC<Props> = ({
   // useDefaults when the fieldValues are undefined or the same as the defaults
   const useDefaults = useMemo(
     () =>
-      (defaults && diffObjects(fieldValues ?? fields ?? [], defaults)) ?? false,
+      (!isEmptyArray(defaults) &&
+        diffObjects(fieldValues ?? fields ?? [], defaults)) ??
+      false,
     [fieldValues, defaults]
   );
   // trigger validation on change of defaults being used/not
@@ -68,7 +71,8 @@ const FormList: FC<Props> = ({
   // and give the defaults if not overridden
   useEffect(() => {
     for (const item of fieldValues ?? fields ?? []) {
-      if ((item.arg ?? "") === "") {
+      const keys = Object.keys(item);
+      if (keys.length > 1 || !keys.includes("arg")) {
         setValue(name, []);
         break;
       }

web/ui/react-app/src/components/modals/service-edit/dashboard.tsx

@@ -4,7 +4,7 @@ import { FormItem, FormItemWithPreview } from "components/generic/form";
 import { Accordion } from "react-bootstrap";
 import { BooleanWithDefault } from "components/generic";
 import { ServiceDashboardOptionsType } from "types/config";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 
 interface Props {
   defaults?: ServiceDashboardOptionsType;

web/ui/react-app/src/components/modals/service-edit/latest-version-require.tsx

@@ -7,10 +7,10 @@ import {
 } from "types/config";
 import { FC, memo, useEffect, useMemo } from "react";
 import { FormItem, FormLabel, FormSelect } from "components/generic/form";
+import { firstNonDefault, isEmptyOrNull } from "utils";
 import { useFormContext, useWatch } from "react-hook-form";
 
 import Command from "./command";
-import { firstNonDefault } from "components/modals/service-edit/util";
 
 const DockerRegistryOptions = [
   { label: "Docker Hub", value: "hub" },
@@ -87,7 +87,7 @@ const EditServiceLatestVersionRequire: FC<Props> = ({
 
   useEffect(() => {
     // Default to Docker Hub if no registry is selected and no default registry.
-    if ((selectedDockerRegistry ?? "") === "")
+    if (isEmptyOrNull(selectedDockerRegistry))
       setValue("latest_version.require.docker.type", "hub");
   }, []);
 

web/ui/react-app/src/components/modals/service-edit/latest-version.tsx

@@ -11,7 +11,7 @@ import EditServiceLatestVersionRequire from "./latest-version-require";
 import FormURLCommands from "./latest-version-urlcommands";
 import { LatestVersionLookupEditType } from "types/service-edit";
 import VersionWithRefresh from "./version-with-refresh";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { useWatch } from "react-hook-form";
 
 interface Props {

web/ui/react-app/src/components/modals/service-edit/notify-types/bark.tsx

@@ -8,7 +8,7 @@ import { useEffect, useMemo } from "react";
 
 import { NotifyBarkType } from "types/config";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { normaliseForSelect } from "components/modals/service-edit/util";
 import { useFormContext } from "react-hook-form";
 

web/ui/react-app/src/components/modals/service-edit/notify-types/discord.tsx

@@ -7,7 +7,7 @@ import {
 import { BooleanWithDefault } from "components/generic";
 import { NotifyDiscordType } from "types/config";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { strToBool } from "utils";
 import { useMemo } from "react";
 

web/ui/react-app/src/components/modals/service-edit/notify-types/extra/ntfy/actions.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-bootstrap";
 import { FC, memo, useCallback, useEffect, useMemo } from "react";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { isEmptyArray, isEmptyOrNull } from "utils";
 import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -55,7 +56,7 @@ const NtfyActions: FC<Props> = ({ name, label, tooltip, defaults }) => {
   // useDefaults when the fieldValues are unset or the same as the defaults
   const useDefaults = useMemo(
     () =>
-      defaults &&
+      !isEmptyArray(defaults) &&
       diffObjects(fieldValues ?? fields ?? [], defaults, [".action"]),
     [fieldValues, defaults]
   );
@@ -82,7 +83,7 @@ const NtfyActions: FC<Props> = ({ name, label, tooltip, defaults }) => {
   useEffect(() => {
     // ensure we don't have another types actions
     for (const item of fieldValues ?? fields ?? []) {
-      if ((item.action ?? "") === "") {
+      if (isEmptyOrNull(item.action)) {
         setValue(name, []);
         break;
       }

web/ui/react-app/src/components/modals/service-edit/notify-types/extra/opsgenie/targets.tsx

@@ -16,6 +16,7 @@ import { NotifyOpsGenieTarget } from "types/config";
 import OpsGenieTarget from "./target";
 import { convertOpsGenieTargetFromString } from "components/modals/service-edit/util";
 import { diffObjects } from "utils/diff-objects";
+import { isEmptyArray } from "utils";
 
 interface Props {
   name: string;
@@ -55,7 +56,7 @@ const OpsGenieTargets: FC<Props> = ({ name, label, tooltip, defaults }) => {
   // useDefaults when the fieldValues are undefined or the same as the defaults
   const useDefaults = useMemo(
     () =>
-      defaults &&
+      !isEmptyArray(defaults) &&
       diffObjects(fieldValues ?? fields ?? [], defaults, [
         ".type",
         ".sub_type",

web/ui/react-app/src/components/modals/service-edit/notify-types/generic.tsx

@@ -12,7 +12,7 @@ import {
 
 import { BooleanWithDefault } from "components/generic";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { strToBool } from "utils";
 import { useMemo } from "react";
 import { useWatch } from "react-hook-form";