Merge pull request #176 from henryk86/develop

gh-165 finalized Migration Messages to notifications
toniebox-reverse-engineering · Nov 12, 2024 · b624081 · b624081
2 parents cf74b83 + cd123a5
commit b624081
Show file tree

Hide file tree

Showing 27 changed files with 817 additions and 386 deletions.
diff --git a/public/translations/de.json b/public/translations/de.json
diff --git a/public/translations/en.json b/public/translations/en.json
diff --git a/public/translations/es.json b/public/translations/es.json
diff --git a/public/translations/fr.json b/public/translations/fr.json
diff --git a/src/TeddyCloudContext.tsx b/src/TeddyCloudContext.tsx
@@ -172,7 +172,7 @@ export function TeddyCloudProvider({ children, linkOverlay }: TeddyCloudProvider
             description,
             icon: <LoadingOutlined />,
             duration: 0,
-            placement: "topRight",
+            placement: "bottomRight",
         });
     };
 

diff --git a/src/components/form/CertificatesDragAndDrop.tsx b/src/components/form/CertificatesDragAndDrop.tsx
@@ -1,16 +1,17 @@
 import { useTranslation } from "react-i18next";
-import { Upload, message, UploadFile } from "antd";
+import { Upload, UploadFile } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
 
 import { ApiUploadCertPostRequest, TeddyCloudApi } from "../../api";
 import { defaultAPIConfig } from "../../config/defaultApiConfig";
 import { useTeddyCloud } from "../../TeddyCloudContext";
+import { NotificationTypeEnum } from "../../types/teddyCloudNotificationTypes";
 
 const api = new TeddyCloudApi(defaultAPIConfig());
 
 export const CertificateDragNDrop: React.FC<{ overlay?: string }> = ({ overlay }) => {
     const { t } = useTranslation();
-    const { setFetchCloudStatus } = useTeddyCloud();
+    const { addNotification, setFetchCloudStatus } = useTeddyCloud();
 
     const handleUpload = async (file: UploadFile<any>) => {
         const formData = new FormData();
@@ -30,19 +31,32 @@ export const CertificateDragNDrop: React.FC<{ overlay?: string }> = ({ overlay }
                 try {
                     triggerWriteConfig();
                 } catch (e) {
-                    message.error("Error while saving config to file.");
+                    addNotification(
+                        NotificationTypeEnum.Error,
+                        t("settings.errorWhileSavingConfig"),
+                        t("settings.errorWhileSavingConfigDetails") + e,
+                        overlay ? t("tonieboxes.navigationTitle") : t("settings.navigationTitle")
+                    );
                 }
-                message.success(
-                    t("settings.certificates.uploadSuccessful", {
+                addNotification(
+                    NotificationTypeEnum.Success,
+                    t("settings.certificates.uploadSuccessful"),
+                    t("settings.certificates.uploadSuccessfulDetails", {
                         filename: file.name,
-                    })
+                    }),
+                    overlay ? t("tonieboxes.navigationTitle") : t("settings.navigationTitle")
                 );
                 setFetchCloudStatus((prev) => !prev);
             } catch (err) {
-                message.error(
-                    t("settings.certificates.uploadFailed", {
+                addNotification(
+                    NotificationTypeEnum.Error,
+                    t("settings.certificates.uploadFailed"),
+                    t("settings.certificates.uploadFailedDetails", {
                         filename: file.name,
-                    })
+                    }) +
+                        ": " +
+                        err,
+                    overlay ? t("tonieboxes.navigationTitle") : t("settings.navigationTitle")
                 );
             }
         };
@@ -53,6 +67,22 @@ export const CertificateDragNDrop: React.FC<{ overlay?: string }> = ({ overlay }
     const props = {
         name: "file",
         multiple: true,
+        beforeUpload: (file: UploadFile) => {
+            if (file.type !== "application/x-x509-ca-cert" && !file.name.endsWith(".der")) {
+                addNotification(
+                    NotificationTypeEnum.Error,
+                    t("settings.certificates.uploadFailed"),
+                    t("settings.certificates.uploadFailedDetails", {
+                        filename: file.name,
+                    }) +
+                        ": " +
+                        t("settings.certificates.invalidFileType"),
+                    overlay ? t("tonieboxes.navigationTitle") : t("settings.navigationTitle")
+                );
+                return Upload.LIST_IGNORE;
+            }
+            return true;
+        },
         customRequest: async (options: any) => {
             const { onSuccess, onError, file } = options;
             try {

diff --git a/src/components/settings/SettingsSubNav.tsx b/src/components/settings/SettingsSubNav.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { MenuProps, message } from "antd";
+import { MenuProps } from "antd";
 import {
     SafetyCertificateOutlined,
     SettingOutlined,
@@ -17,51 +17,59 @@ import { defaultAPIConfig } from "../../config/defaultApiConfig";
 
 import { StyledSubMenu } from "../StyledComponents";
 import { restartServer } from "../../utils/restartServer";
+import { useTeddyCloud } from "../../TeddyCloudContext";
+import { NotificationTypeEnum } from "../../types/teddyCloudNotificationTypes";
 
 const api = new TeddyCloudApi(defaultAPIConfig());
 
 export const SettingsSubNav = () => {
     const { t } = useTranslation();
+    const { addNotification, addLoadingNotification, closeLoadingNotification } = useTeddyCloud();
     const [selectedKey, setSelectedKey] = useState("");
-    const [messageApi, contextHolder] = message.useMessage();
-    const handleRestartServer = async () => {
-        await restartServer(true);
-        setSelectedKey("");
-    };
 
     const extractBaseUrl = (fullUrl: URL) => {
         const url = new URL(fullUrl);
         const port = url.port ? `:${url.port}` : "";
         return `${url.protocol}//${url.hostname}${port}`;
     };
 
+    const handleRestartServer = async () => {
+        await restartServer(true, addNotification, addLoadingNotification, closeLoadingNotification);
+        setSelectedKey("");
+    };
+
     const handleReloadToniesJson = async () => {
-        const hideLoading = message.loading(t("settings.toniesJsonReloadInProgress"), 0);
+        const key = "reloadToniesJson";
+        addLoadingNotification(key, t("settings.toniesJsonReload"), t("settings.toniesJsonReloadInProgress"));
 
         try {
             const response = await api.apiGetTeddyCloudApiRaw("/api/toniesJsonReload");
             const data = await response.text();
             setSelectedKey("");
 
+            closeLoadingNotification(key);
             if (data.toString() !== "OK") {
-                hideLoading();
-                messageApi.open({
-                    type: "error",
-                    content: t("settings.toniesJsonReloadFailed"),
-                });
+                addNotification(
+                    NotificationTypeEnum.Error,
+                    t("settings.toniesJsonReloadFailed"),
+                    t("settings.toniesJsonReloadFailed") + ": " + data.toString(),
+                    t("settings.navigationTitle")
+                );
             } else {
-                hideLoading();
-                messageApi.open({
-                    type: "success",
-                    content: t("settings.toniesJsonReloadSuccessful"),
-                });
+                addNotification(
+                    NotificationTypeEnum.Success,
+                    t("settings.toniesJsonReloadSuccessful"),
+                    t("settings.toniesJsonReloadSuccessful"),
+                    t("settings.navigationTitle")
+                );
             }
         } catch (error) {
-            hideLoading();
-            messageApi.open({
-                type: "error",
-                content: t("settings.toniesJsonReloadFailed"),
-            });
+            addNotification(
+                NotificationTypeEnum.Error,
+                t("settings.toniesJsonReloadFailed"),
+                t("settings.toniesJsonReloadFailed") + ": " + error,
+                t("settings.navigationTitle")
+            );
         }
     };
 
@@ -118,7 +126,6 @@ export const SettingsSubNav = () => {
 
     return (
         <>
-            {contextHolder}
             <StyledSubMenu mode="inline" selectedKeys={[selectedKey]} defaultOpenKeys={["sub"]} items={subnav} />
         </>
     );

diff --git a/src/components/tonieboxes/boxSetup/CommonContent.tsx b/src/components/tonieboxes/boxSetup/CommonContent.tsx
@@ -12,6 +12,7 @@ import tbEsp32Uart from "../../../assets/boxSetup/tb-esp32-uart.png";
 
 import { BoxVersionsEnum, TonieboxCardProps } from "../../../types/tonieboxTypes";
 import CodeSnippet from "../../utils/CodeSnippet";
+import { handleTCCADerDownload } from "../../../utils/helpers";
 
 interface TonieboxPropsWithStatusAndVersion extends TonieboxCardProps {
     status: string;
@@ -121,11 +122,16 @@ J103 Pinout`}
     );
 }
 
-export function certificateIntro(): JSX.Element {
+export function certificateIntro(asC2Der: boolean): JSX.Element {
     const { t } = useTranslation();
     return (
         <>
             <Paragraph>{t("tonieboxes.boxFlashingCommon.certificatesIntro")}</Paragraph>
+            <Paragraph>
+                <Button onClick={() => handleTCCADerDownload(asC2Der)}>
+                    {asC2Der ? t("tonieboxes.downloadC2DerFile") : t("tonieboxes.downloadCADerFile")}
+                </Button>
+            </Paragraph>
             <h4>{t("tonieboxes.boxFlashingCommon.dumpCertificates")}</h4>
             <Paragraph>{t("tonieboxes.boxFlashingCommon.dumpCertificatesIntro1")}</Paragraph>
             <Paragraph>{t("tonieboxes.boxFlashingCommon.dumpCertificatesIntro2")}</Paragraph>

diff --git a/src/components/tonies/ToniesCustomJsonEditor.tsx b/src/components/tonies/ToniesCustomJsonEditor.tsx
@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Modal, Form, Input, Button, Col, Row, message, Tooltip, Alert } from "antd";
+import { Modal, Form, Input, Button, Col, Row, Tooltip, Alert } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 
 import { TonieCardProps } from "../../types/tonieTypes";
 
 import { TeddyCloudApi } from "../../api";
 import { defaultAPIConfig } from "../../config/defaultApiConfig";
 import CodeSnippet from "../utils/CodeSnippet";
+import { useTeddyCloud } from "../../TeddyCloudContext";
 
 const api = new TeddyCloudApi(defaultAPIConfig());
 
@@ -31,6 +32,7 @@ export const ToniesCustomJsonEditor: React.FC<ToniesCustomJsonEditorProps> = ({
     hash,
 }) => {
     const { t } = useTranslation();
+    const { addNotification } = useTeddyCloud();
     const [form] = Form.useForm();
 
     useEffect(() => {
@@ -101,10 +103,20 @@ export const ToniesCustomJsonEditor: React.FC<ToniesCustomJsonEditorProps> = ({
             }
 
             resetForm();
-            message.success(t("tonies.addNewCustomTonieModal.successfullyCreated"));
+            addNotification(
+                NotificationTypeEnum.Success,
+                t("tonies.addNewCustomTonieModal.successfullyCreated"),
+                t("tonies.addNewCustomTonieModal.successfullyCreatedDetails", { series: values.series, model: values.model }),
+                t("tonies.addToniesCustomJsonEntry")
+            );
             onClose();
         } catch (error) {
-            message.error(t("tonies.addNewCustomTonieModal.failedToCreate") + error);
+            addNotification(
+                NotificationTypeEnum.Error,
+                t("tonies.addNewCustomTonieModal.failedToCreate"),
+                t("tonies.addNewCustomTonieModal.failedToCreateDetails", { series: values.series, model: values.model }) + error,
+                t("tonies.addToniesCustomJsonEntry")
+            );
         }
         */
     };