use separate confirmModals for reboot and shutdown; add tests for ActionBox and DebugLogBox

src/pages/Settings/ActionBox.tsx

@@ -1,25 +1,40 @@
-import type { FC, ReactElement } from "react";
+import type { FC, ReactElement, ReactNode } from "react";
 
 export type Props = {
   name: string | ReactElement;
   actionName: string;
   action: () => void;
+  showChild: boolean;
+  children: ReactNode;
 };
 
-const ActionBox: FC<Props> = ({ name, action, actionName }) => {
+/**
+ * displays a box with a title and a button which triggers an action (e.g. reboot)
+ * has a child component which is displayed if showChild is true
+ */
+const ActionBox: FC<Props> = ({
+  name,
+  action,
+  actionName,
+  showChild,
+  children,
+}) => {
   return (
-    <div className="box-border w-full transition-colors dark:text-white">
-      <article className="relative rounded bg-white p-5 shadow-xl dark:bg-gray-800">
-        <div className="flex justify-between">
-          <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">
-            <span>{name}</span>
-          </h4>
-          <button className="bd-button w-1/2 py-1 xl:w-1/3" onClick={action}>
-            {actionName}
-          </button>
-        </div>
-      </article>
-    </div>
+    <>
+      {showChild && children}
+      <div className="box-border w-full transition-colors dark:text-white">
+        <article className="relative rounded bg-white p-5 shadow-xl dark:bg-gray-800">
+          <div className="flex justify-between">
+            <h4 className="flex w-1/2 items-center font-bold xl:w-2/3">
+              <span>{name}</span>
+            </h4>
+            <button className="bd-button w-1/2 py-1 xl:w-1/3" onClick={action}>
+              {actionName}
+            </button>
+          </div>
+        </article>
+      </div>
+    </>
   );
 };
 

src/pages/Settings/DebugLogBox.tsx

@@ -7,6 +7,9 @@ import { toast } from "react-toastify";
 import { checkError } from "utils/checkError";
 import { instance } from "utils/interceptor";
 
+/**
+ * Displays a button to generate a debug report which is downloaded as a file
+ */
 const DebugLogBox: FC = () => {
   const { t } = useTranslation();
   const { isGeneratingReport, setIsGeneratingReport } = useContext(AppContext);

src/pages/Settings/I18nBox.tsx

@@ -2,6 +2,9 @@ import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import I18nDropdown from "../../components/I18nDropdown";
 
+/**
+ * Displays the current language and allows the user to change it.
+ */
 const I18nBox: FC = () => {
   const { t } = useTranslation();
 

src/pages/Settings/RebootModal.tsx

@@ -0,0 +1,64 @@
+import { FC, useContext } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import ModalDialog from "../../layouts/ModalDialog";
+import { AppContext } from "../../context/app-context";
+import { instance } from "../../utils/interceptor";
+import { MODAL_ROOT } from "../../utils";
+import { HttpStatusCode } from "axios";
+
+export type Props = {
+  confirmText: string;
+  confirmEndpoint?: string; // TODO #345 remove
+  onConfirm?: () => void;
+  onClose: () => void;
+};
+
+const btnClasses =
+  "w-full xl:w-1/2 text-center h-10 m-2 bg-yellow-500 hover:bg-yellow-400 rounded text-white";
+
+const RebootModal: FC<Props> = ({
+  confirmText,
+  confirmEndpoint,
+  onConfirm,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const { setIsLoggedIn } = useContext(AppContext);
+  const navigate = useNavigate();
+
+  const shutdownHandler = async () => {
+    if (confirmEndpoint) {
+      const resp = await instance.post(confirmEndpoint);
+      if (resp.status === HttpStatusCode.Ok) {
+        setIsLoggedIn(false);
+        navigate("/login");
+      }
+    }
+  };
+
+  return createPortal(
+    <ModalDialog close={onClose}>
+      {confirmText}
+      <div className="flex flex-col p-3 xl:flex-row">
+        <button className={btnClasses} onClick={onClose}>
+          {t("settings.cancel")}
+        </button>
+        {onConfirm && (
+          <button className={btnClasses} onClick={onConfirm}>
+            {t("settings.confirm")}
+          </button>
+        )}
+        {!onConfirm && (
+          <button className={btnClasses} onClick={shutdownHandler}>
+            {t("settings.confirm")}
+          </button>
+        )}
+      </div>
+    </ModalDialog>,
+    MODAL_ROOT,
+  );
+};
+
+export default RebootModal;

src/pages/Settings/ShutdownModal.tsx

@@ -0,0 +1,64 @@
+import { FC, useContext } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import ModalDialog from "../../layouts/ModalDialog";
+import { AppContext } from "../../context/app-context";
+import { instance } from "../../utils/interceptor";
+import { MODAL_ROOT } from "../../utils";
+import { HttpStatusCode } from "axios";
+
+export type Props = {
+  confirmText: string;
+  confirmEndpoint?: string; // TODO #345 remove
+  onConfirm?: () => void;
+  onClose: () => void;
+};
+
+const btnClasses =
+  "w-full xl:w-1/2 text-center h-10 m-2 bg-yellow-500 hover:bg-yellow-400 rounded text-white";
+
+const ShutdownModal: FC<Props> = ({
+  confirmText,
+  confirmEndpoint,
+  onConfirm,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const { setIsLoggedIn } = useContext(AppContext);
+  const navigate = useNavigate();
+
+  const shutdownHandler = async () => {
+    if (confirmEndpoint) {
+      const resp = await instance.post(confirmEndpoint);
+      if (resp.status === HttpStatusCode.Ok) {
+        setIsLoggedIn(false);
+        navigate("/login");
+      }
+    }
+  };
+
+  return createPortal(
+    <ModalDialog close={onClose}>
+      {confirmText}
+      <div className="flex flex-col p-3 xl:flex-row">
+        <button className={btnClasses} onClick={onClose}>
+          {t("settings.cancel")}
+        </button>
+        {onConfirm && (
+          <button className={btnClasses} onClick={onConfirm}>
+            {t("settings.confirm")}
+          </button>
+        )}
+        {!onConfirm && (
+          <button className={btnClasses} onClick={shutdownHandler}>
+            {t("settings.confirm")}
+          </button>
+        )}
+      </div>
+    </ModalDialog>,
+    MODAL_ROOT,
+  );
+};
+
+export default ShutdownModal;

src/pages/Settings/VersionBox.tsx

@@ -7,6 +7,9 @@ type Props = {
   apiVersion: string;
 };
 
+/**
+ * Displays the versions of RaspiBlitz, the WebUI and the Blitz-API
+ */
 const VersionBox: FC<Props> = ({ platformVersion, apiVersion }) => {
   const { t } = useTranslation();
   return (

src/pages/Settings/__tests__/ActionBox.test.tsx

@@ -0,0 +1,76 @@
+import { render, fireEvent } from "test-utils";
+import ActionBox from "../ActionBox";
+
+describe("ActionBox component", () => {
+  it("renders the name prop", () => {
+    const { getByText } = render(
+      <ActionBox
+        name="Test Name"
+        action={() => {}}
+        actionName="Test Action"
+        showChild={false}
+      >
+        <div>Test Child</div>
+      </ActionBox>,
+    );
+    expect(getByText("Test Name")).toBeInTheDocument();
+  });
+
+  it("renders the action button with the correct text", () => {
+    const { getByText } = render(
+      <ActionBox
+        name="Test Name"
+        action={() => {}}
+        actionName="Test Action"
+        showChild={false}
+      >
+        <div>Test Child</div>
+      </ActionBox>,
+    );
+    expect(getByText("Test Action")).toBeInTheDocument();
+  });
+
+  it("calls the action prop when the button is clicked", () => {
+    const mockAction = vitest.fn();
+    const { getByText } = render(
+      <ActionBox
+        name="Test Name"
+        action={mockAction}
+        actionName="Test Action"
+        showChild={false}
+      >
+        <div>Test Child</div>
+      </ActionBox>,
+    );
+    fireEvent.click(getByText("Test Action"));
+    expect(mockAction).toHaveBeenCalled();
+  });
+
+  it("renders the child component when showChild is true", () => {
+    const { getByText } = render(
+      <ActionBox
+        name="Test Name"
+        action={() => {}}
+        actionName="Test Action"
+        showChild={true}
+      >
+        <div>Test Child</div>
+      </ActionBox>,
+    );
+    expect(getByText("Test Child")).toBeInTheDocument();
+  });
+
+  it("does not render the child component when showChild is false", () => {
+    const { queryByText } = render(
+      <ActionBox
+        name="Test Name"
+        action={() => {}}
+        actionName="Test Action"
+        showChild={false}
+      >
+        <div>Test Child</div>
+      </ActionBox>,
+    );
+    expect(queryByText("Test Child")).toBeNull();
+  });
+});

src/pages/Settings/__tests__/DebugLogBox.test.tsx

@@ -0,0 +1,51 @@
+import { toast } from "react-toastify";
+import { fireEvent, render, screen } from "test-utils";
+import DebugLogBox from "../DebugLogBox";
+
+vitest.mock("react-toastify", () => ({
+  toast: {
+    info: vitest.fn(),
+    error: vitest.fn(),
+  },
+}));
+
+describe("DebugLogBox", () => {
+  it("renders without crashing", () => {
+    render(<DebugLogBox />);
+  });
+
+  it("displays a button to generate a debug report", () => {
+    render(<DebugLogBox />);
+    const button = screen.getByRole("button", {
+      name: /settings.generate/i,
+    });
+    expect(button).toBeInTheDocument();
+  });
+
+  it("sets isGeneratingReport to true when the button is clicked", async () => {
+    const setIsGeneratingReport = vitest.fn();
+    render(<DebugLogBox />, {
+      providerOptions: {
+        appProps: {
+          setIsGeneratingReport,
+        },
+      },
+    });
+    const button = screen.getByRole("button", {
+      name: /settings.generate/i,
+    });
+    fireEvent.click(button);
+    expect(setIsGeneratingReport).toHaveBeenCalledWith(true);
+  });
+
+  it("displays a loading toast while the report is being generated", async () => {
+    render(<DebugLogBox />);
+    const button = screen.getByRole("button", {
+      name: /settings.generate/i,
+    });
+    fireEvent.click(button);
+    expect(toast.info).toHaveBeenCalledWith(expect.any(String), {
+      isLoading: true,
+    });
+  });
+});