refactor(web): tidying

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/

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,

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

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(

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}
         />

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} />}
       </>
 

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;

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

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");
       }
     }

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>

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>
               </>
             }

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(
     () =>

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";
 
 /**

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";
 

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";
 
 /**

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";
 
 /**

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 = [