refactor(web): use empty array/object functions

* some places, empty arrays were undefined, which wasn't caught by .length
also prettified rendering in cases of 4 or less services, not stretching them to the full width

web/ui/react-app/package.json

@@ -10,10 +10,10 @@
     "@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.29.0",
+    "@tanstack/react-query": "^5.29.2",
     "@types/bootstrap": "^5.2.10",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.74",
+    "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
     "@vitejs/plugin-react": "^4.2.1",
     "bootstrap": "^5.3.3",
@@ -26,7 +26,7 @@
     "react-router-dom": "^6.22.3",
     "reconnecting-websocket": "^4.4.0",
     "styled-components": "^6.1.8",
-    "typescript": "^5.4.4",
+    "typescript": "^5.4.5",
     "vite": "^5.2.8",
     "vite-tsconfig-paths": "^4.3.2",
     "yaml": "^2.4.1"
@@ -56,8 +56,8 @@
     ]
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^5.29.0",
-    "@types/node": "^20.12.5",
+    "@tanstack/react-query-devtools": "^5.29.2",
+    "@types/node": "^20.12.7",
     "@types/styled-components": "^5.1.34"
   }
 }

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

@@ -101,7 +101,7 @@ const FormKeyValMap: FC<Props> = ({
               className="btn-unchecked mb-1"
               variant="danger"
               style={{ float: "left" }}
-              disabled={fields.length === 0}
+              disabled={isEmptyArray(fields)}
               onClick={removeLast}
             >
               <FontAwesomeIcon icon={faMinus} />

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

@@ -54,7 +54,7 @@ const FormList: FC<Props> = ({
     trigger(name);
 
     // Give the defaults back if the field is empty
-    if (fieldValues?.length === 0)
+    if (isEmptyArray(fieldValues))
       defaults?.forEach(() => {
         addItem();
       });
@@ -105,7 +105,7 @@ const FormList: FC<Props> = ({
               variant="danger"
               style={{ float: "left" }}
               onClick={removeLast}
-              disabled={fields.length === 0}
+              disabled={isEmptyArray(fields)}
             >
               <FontAwesomeIcon icon={faMinus} />
             </Button>

web/ui/react-app/src/components/modals/action-release/list.tsx

@@ -8,6 +8,7 @@ import { Container } from "react-bootstrap";
 import { FC } from "react";
 import { Item } from "components/modals/action-release/item";
 import { Loading } from "components/modals/action-release/loading";
+import { isEmptyObject } from "utils";
 
 interface Props {
   itemType: "COMMAND" | "WEBHOOK";
@@ -42,7 +43,7 @@ export const ModalList: FC<Props> = ({
   delayedRender,
 }) => {
   // LOADING
-  if (Object.keys(data ? data : {}).length === 0)
+  if (isEmptyObject(data))
     return (
       <Container fluid className="list">
         {[...Array.from(Array(data).keys())].map((id) => (

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

@@ -4,6 +4,7 @@ import { faMinus, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FormItem } from "components/generic/form";
+import { isEmptyArray } from "utils";
 import { useFieldArray } from "react-hook-form";
 
 interface Props {
@@ -70,7 +71,7 @@ const Command: FC<Props> = ({ name, removeMe }) => {
           className="btn-unchecked mb-3"
           style={{ float: "right" }}
           onClick={removeLast}
-          disabled={fields.length === 0}
+          disabled={isEmptyArray(fields)}
         >
           <FontAwesomeIcon icon={faMinus} />
         </Button>

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

@@ -2,6 +2,7 @@ import { Accordion, Button, FormGroup, Row } from "react-bootstrap";
 import { FC, memo, useCallback } from "react";
 
 import Command from "./command";
+import { isEmptyArray } from "utils";
 import { useFieldArray } from "react-hook-form";
 
 interface Props {
@@ -40,7 +41,7 @@ const EditServiceCommands: FC<Props> = ({ name }) => {
           </Row>
           <Row>
             <Button
-              className={fields.length > 0 ? "" : "mt-2"}
+              className={isEmptyArray(fields) ? "mt-2" : ""}
               variant="secondary"
               onClick={addItem}
             >

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

@@ -6,6 +6,7 @@ import { memo, useCallback } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FormLabel } from "components/generic/form";
 import FormURLCommand from "./latest-version-urlcommand";
+import { isEmptyArray } from "utils";
 import { useFieldArray } from "react-hook-form";
 
 /**
@@ -56,7 +57,7 @@ const FormURLCommands = () => {
               variant="danger"
               style={{ float: "left" }}
               onClick={removeLast}
-              disabled={fields.length === 0}
+              disabled={isEmptyArray(fields)}
             >
               <FontAwesomeIcon icon={faMinus} />
             </Button>
@@ -78,7 +79,7 @@ const FormURLCommands = () => {
           </Row>
         );
       })}
-      {fields.length !== 0 && <br />}
+      {!isEmptyArray(fields) && <br />}
     </>
   );
 };

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

@@ -117,7 +117,7 @@ const NtfyActions: FC<Props> = ({ name, label, tooltip, defaults }) => {
               className="btn-unchecked"
               style={{ float: "left" }}
               onClick={removeLast}
-              disabled={fields.length === 0}
+              disabled={isEmptyArray(fields)}
             >
               <FontAwesomeIcon icon={faMinus} />
             </Button>

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

@@ -99,7 +99,7 @@ const OpsGenieTargets: FC<Props> = ({ name, label, tooltip, defaults }) => {
               className="btn-unchecked"
               style={{ float: "left" }}
               onClick={removeLast}
-              disabled={fields.length === 0}
+              disabled={isEmptyArray(fields)}
             >
               <FontAwesomeIcon icon={faMinus} />
             </Button>

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

@@ -4,6 +4,7 @@ import { FC, memo, useCallback, useMemo } from "react";
 
 import Notify from "./notify";
 import { NotifyEditType } from "types/service-edit";
+import { isEmptyArray } from "utils";
 import { useFieldArray } from "react-hook-form";
 
 interface Props {
@@ -85,7 +86,7 @@ const EditServiceNotifys: FC<Props> = ({
             />
           ))}
           <Button
-            className={fields.length > 0 ? "" : "mt-2"}
+            className={isEmptyArray(fields) ? "mt-2" : ""}
             variant="secondary"
             style={{ width: "100%", marginTop: "1rem" }}
             onClick={addItem}

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

@@ -537,8 +537,10 @@ const convertStringMapToHeaderType = (
   omitValues?: boolean
 ): HeaderType[] => {
   if (!headers) return [];
+
   if (omitValues)
     return Object.keys(headers).map(() => ({ key: "", value: "" }));
+
   return Object.keys(headers).map((key) => ({
     key: key,
     value: headers[key],

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

@@ -47,8 +47,8 @@ export const convertValuesToString = (
         // Ntfy - `label` empty means defaults were used. Skip.
         // OpsGenie - `arg` empty means defaults were used. Skip.
         if (
-          (value as StringFieldArray).find(
-            (item) => (item.label || item.arg || "") == ""
+          (value as StringFieldArray).find((item) =>
+            isEmptyOrNull(item.label || item.arg)
           )
         ) {
           return result;

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

@@ -2,6 +2,7 @@ import { ArgType, NotifyEditType, ServiceEditType } from "types/service-edit";
 import { Dict, NotifyType, ServiceType, WebHookType } from "types/config";
 
 import { convertValuesToString } from "./notify-string-string-map";
+import { isEmptyArray } from "utils";
 import removeEmptyValues from "utils/remove-empty-values";
 import { urlCommandTrim } from "./url-command-trim";
 
@@ -72,8 +73,8 @@ export const convertUIServiceDataEditToAPI = (
     : {};
 
   // Command
-  if (data.command && data.command.length > 0)
-    payload.command = data.command.map((item) => item.args.map((a) => a.arg));
+  if (!isEmptyArray(data?.command))
+    payload.command = data.command?.map((item) => item.args.map((a) => a.arg));
 
   // WebHook
   if (data.webhook)

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

@@ -1,9 +1,9 @@
 import { Accordion, Button, Stack } from "react-bootstrap";
 import { Dict, WebHookType } from "types/config";
 import { FC, useCallback, useMemo } from "react";
+import { firstNonEmpty, isEmptyArray } from "utils";
 
 import EditServiceWebHook from "components/modals/service-edit/webhook";
-import { firstNonEmpty } from "utils";
 import { useFieldArray } from "react-hook-form";
 
 interface Props {
@@ -78,7 +78,7 @@ const EditServiceWebHooks: FC<Props> = ({ mains, defaults, hard_defaults }) => {
             />
           ))}
           <Button
-            className={fields.length > 0 ? "" : "mt-2"}
+            className={isEmptyArray(fields) ? "mt-2" : ""}
             variant="secondary"
             style={{ width: "100%", marginTop: "1rem" }}
             onClick={addItem}

web/ui/react-app/src/contexts/notification.tsx

@@ -11,6 +11,7 @@ import { NotificationType } from "types/notification";
 import { ToastContainer } from "react-bootstrap";
 import { addMessageHandler } from "./websocket";
 import { handleNotifications } from "handlers/notifications";
+import { isEmptyArray } from "utils";
 
 interface NotificationCtx {
   notifications: NotificationType[];
@@ -44,10 +45,9 @@ const NotificationProvider = () => {
       ...prevState,
       {
         ...notification,
-        id:
-          prevState.length === 0
-            ? 0
-            : (prevState[prevState.length - 1].id as number) + 1,
+        id: isEmptyArray(prevState)
+          ? 0
+          : (prevState[prevState.length - 1].id as number) + 1,
       },
     ]);
   };

web/ui/react-app/src/index.css

@@ -52,9 +52,10 @@ code {
 
 .services {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
   grid-template-rows: 1fr;
   grid-gap: 1.25rem;
+  padding: 0;
 }
 
 .service {