refactor(web): funcs for empty/null/undefined check, 1st non-empty list

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-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-list.tsx

@@ -68,7 +68,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

@@ -16,6 +16,7 @@ import { NotifyNtfyAction } from "types/config";
 import NtfyAction from "./action";
 import { convertNtfyActionsFromString } from "components/modals/service-edit/util";
 import { diffObjects } from "utils/diff-objects";
+import { isEmptyOrNull } from "utils";
 
 interface Props {
   name: string;
@@ -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/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";

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

@@ -2,7 +2,7 @@ import { FormLabel, FormTextArea } from "components/generic/form";
 
 import { NotifyGoogleChatType } 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 { useMemo } from "react";
 
 /**

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

@@ -3,7 +3,7 @@ import { FormItem, FormLabel } from "components/generic/form";
 import { BooleanWithDefault } from "components/generic";
 import { NotifyGotifyType } 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/ifttt.tsx

@@ -2,7 +2,7 @@ import { FormItem, FormLabel } from "components/generic/form";
 
 import { NotifyIFTTTType } 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 { useMemo } from "react";
 
 /**

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

@@ -6,7 +6,7 @@ import {
 
 import { NotifyJoinType } 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 { useMemo } from "react";
 
 /**

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

@@ -3,7 +3,7 @@ import { FormItem, FormLabel } from "components/generic/form";
 import { BooleanWithDefault } from "components/generic";
 import { NotifyMatrixType } 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/mattermost.tsx

@@ -6,7 +6,7 @@ import {
 
 import { NotifyMatterMostType } 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 { useMemo } from "react";
 
 /**

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

@@ -14,7 +14,7 @@ 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 "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { strToBool } from "utils";
 import { useFormContext } from "react-hook-form";
 

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

@@ -13,7 +13,7 @@ import {
 import { NotifyOpsGenieType } from "types/config";
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
 import { OpsGenieTargets } from "components/modals/service-edit/notify-types/extra";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { useMemo } from "react";
 
 /**

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

@@ -2,7 +2,7 @@ import { FormItem, FormLabel } from "components/generic/form";
 
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
 import { NotifyPushbulletType } from "types/config";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { useMemo } from "react";
 
 /**

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

@@ -2,7 +2,7 @@ import { FormItem, FormLabel } from "components/generic/form";
 
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
 import { NotifyPushoverType } from "types/config";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { useMemo } from "react";
 
 /**

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

@@ -2,7 +2,7 @@ import { FormItem, FormLabel } from "components/generic/form";
 
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
 import { NotifyRocketChatType } from "types/config";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { useMemo } from "react";
 
 /**

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

@@ -2,7 +2,7 @@ import { FormItem, FormLabel, FormTextArea } from "components/generic/form";
 import { memo, useMemo } from "react";
 
 import { NotifyOptionsType } from "types/config";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 
 /**
  * Returns the form fields for the `notify.X.options` section

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

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

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

@@ -4,7 +4,7 @@ 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 "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { normaliseForSelect } from "components/modals/service-edit/util/normalise-selects";
 import { strToBool } from "utils";
 import { useFormContext } from "react-hook-form";

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

@@ -2,7 +2,7 @@ import { FormItem, FormItemColour, FormLabel } from "components/generic/form";
 
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
 import { NotifyTeamsType } from "types/config";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { useMemo } from "react";
 
 /**

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

@@ -4,7 +4,7 @@ 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 "components/modals/service-edit/notify-types/util";
+import { firstNonDefault } from "utils";
 import { normaliseForSelect } from "components/modals/service-edit/util";
 import { strToBool } from "utils";
 import { useFormContext } from "react-hook-form";

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

@@ -1,3 +1,5 @@
+import { isEmptyOrNull } from "utils";
+
 /**
  * Returns the first non-empty value from a list of values
  *
@@ -9,7 +11,7 @@ export const firstNonDefault: (...args: unknown[]) => string = (
 ) => {
   // Iterate through all arguments and return the first non-empty one
   for (const arg of args) {
-    if ((arg ?? "") !== "") return `${arg}`;
+    if (!isEmptyOrNull(arg)) return `${arg}`;
   }
   // If no non-empty argument is found, return an empty string by default
   return "";

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

@@ -2,7 +2,7 @@ import { FormItem, FormLabel } from "components/generic/form";
 
 import NotifyOptions from "components/modals/service-edit/notify-types/shared";
 import { NotifyZulipType } from "types/config";
-import { firstNonDefault } from "components/modals/service-edit/util";
+import { firstNonDefault } from "utils";
 import { useMemo } from "react";
 
 /**

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

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

web/ui/react-app/src/components/modals/service-edit/util/api-ui-conversions.tsx

@@ -11,8 +11,8 @@ import {
   ServiceEditOtherData,
   ServiceEditType,
 } from "types/service-edit";
+import { firstNonDefault, firstNonEmpty, isEmptyOrNull } from "utils";
 
-import { firstNonDefault } from "./first-non-default";
 import { urlCommandsTrimArray } from "./url-command-trim";
 
 /**
@@ -66,8 +66,9 @@ export const convertAPIServiceDataEditToUI = (
             ...header,
             oldIndex: key,
           })) ?? [],
-        template_toggle:
-          (serviceData?.deployed_version?.regex_template ?? "") !== "",
+        template_toggle: !isEmptyOrNull(
+          serviceData?.deployed_version?.regex_template
+        ),
       },
       command: serviceData?.command?.map((args) => ({
         args: args.map((arg) => ({ arg })),
@@ -83,18 +84,19 @@ export const convertAPIServiceDataEditToUI = (
               ...header,
               oldIndex: index,
             }))
-          : otherOptionsData?.webhook?.[whName]?.custom_headers ??
-            (
-              otherOptionsData?.defaults?.webhook?.[whType] as
-                | WebHookType
-                | undefined
-            )?.custom_headers ??
-            (
-              otherOptionsData?.hard_defaults?.webhook?.[whType] as
-                | WebHookType
-                | undefined
-            )?.custom_headers ??
-            [];
+          : firstNonEmpty(
+              otherOptionsData?.webhook?.[whName]?.custom_headers,
+              (
+                otherOptionsData?.defaults?.webhook?.[whType] as
+                  | WebHookType
+                  | undefined
+              )?.custom_headers,
+              (
+                otherOptionsData?.hard_defaults?.webhook?.[whType] as
+                  | WebHookType
+                  | undefined
+              )?.custom_headers
+            ).map(() => ({ key: "", value: "" }));
 
         // Return modified item
         return {

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

@@ -18,7 +18,6 @@ import {
 } from "./url-command-trim";
 
 import { convertValuesToString } from "./notify-string-string-map";
-import { firstNonDefault } from "./first-non-default";
 import { normaliseForSelect } from "./normalise-selects";
 
 export {
@@ -32,7 +31,6 @@ export {
   convertNotifyToAPI,
   convertUIServiceDataEditToAPI,
   convertValuesToString,
-  firstNonDefault,
   normaliseForSelect,
   urlCommandsTrim,
   urlCommandTrim,