From 25231012f6ee497d3103561ee7dc756df2bbfc44 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Tue, 20 Dec 2022 12:28:06 -0600
Subject: [PATCH] firmware: consolidate back/next button props

This reduces duplicate code and fixes "Back" not being translated on
the last step.
---
 .../DfuWindowsDriverInstallDialog.tsx         | 65 ++++---------------
 .../InstallPybricksDialog.tsx                 |  7 +-
 .../RestoreOfficialDialog.tsx                 |  7 +-
 .../translations/en.json                      |  9 ++-
 4 files changed, 23 insertions(+), 65 deletions(-)

diff --git a/src/firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog.tsx b/src/firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog.tsx
index 5ab158fd..ab9c0886 100644
--- a/src/firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog.tsx
+++ b/src/firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog.tsx
@@ -358,66 +358,23 @@ const DfuWindowsDriverInstallDialog: React.VoidFunctionComponent = () => {
             className="pb-dfu-windows-driver-install-dialog"
             isOpen={isOpen}
             onClose={() => dispatch(firmwareDfuWindowsDriverInstallDialogDialogHide())}
+            backButtonProps={{ text: i18n.translate('backButton.label') }}
+            nextButtonProps={{ text: i18n.translate('nextButton.label') }}
             finalButtonProps={{
                 text: i18n.translate('doneButton.label'),
                 onClick: () =>
                     dispatch(firmwareDfuWindowsDriverInstallDialogDialogHide()),
             }}
         >
-            <DialogStep
-                id="1"
-                panel={<Step1 />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
-            />
-            <DialogStep
-                id="2"
-                panel={<Step2 hub={hub} />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
-            />
-            <DialogStep
-                id="3"
-                panel={<Step3 hub={hub} />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
-            />
-            <DialogStep
-                id="4"
-                panel={<Step4 hub={hub} />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
-            />
-            <DialogStep
-                id="5"
-                panel={<Step5 hub={hub} />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
-            />
-            <DialogStep
-                id="6"
-                panel={<Step6 hub={hub} />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
-            />
-            <DialogStep
-                id="7"
-                panel={<Step7 hub={hub} />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
-            />
-            <DialogStep
-                id="8"
-                panel={<Step8 />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
-            />
-            <DialogStep
-                id="9"
-                panel={<Step9 hub={hub} />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
-            />
+            <DialogStep id="1" panel={<Step1 />} />
+            <DialogStep id="2" panel={<Step2 hub={hub} />} />
+            <DialogStep id="3" panel={<Step3 hub={hub} />} />
+            <DialogStep id="4" panel={<Step4 hub={hub} />} />
+            <DialogStep id="5" panel={<Step5 hub={hub} />} />
+            <DialogStep id="6" panel={<Step6 hub={hub} />} />
+            <DialogStep id="7" panel={<Step7 hub={hub} />} />
+            <DialogStep id="8" panel={<Step8 />} />
+            <DialogStep id="9" panel={<Step9 hub={hub} />} />
         </MultistepDialog>
     );
 };
diff --git a/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx b/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
index 27f124ad..3f0cec69 100644
--- a/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
+++ b/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
@@ -461,6 +461,8 @@ export const InstallPybricksDialog: React.VoidFunctionComponent = () => {
             title={i18n.translate('title')}
             isOpen={isOpen}
             onClose={() => dispatch(firmwareInstallPybricksDialogCancel())}
+            backButtonProps={{ text: i18n.translate('backButton.label') }}
+            nextButtonProps={{ text: i18n.translate('nextButton.label') }}
             finalButtonProps={{
                 text: i18n.translate('flashFirmwareButton.label'),
                 onClick: () =>
@@ -482,7 +484,6 @@ export const InstallPybricksDialog: React.VoidFunctionComponent = () => {
                         onCustomFirmwareZip={setCustomFirmwareZip}
                     />
                 }
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
             />
             <DialogStep
                 id="license"
@@ -495,7 +496,6 @@ export const InstallPybricksDialog: React.VoidFunctionComponent = () => {
                         onLicenseAcceptedChanged={setLicenseAccepted}
                     />
                 }
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
                 nextButtonProps={{
                     disabled: !licenseAccepted,
                     text: i18n.translate('nextButton.label'),
@@ -510,14 +510,11 @@ export const InstallPybricksDialog: React.VoidFunctionComponent = () => {
                         onChangeHubName={setHubName}
                     />
                 }
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
-                nextButtonProps={{ text: i18n.translate('nextButton.label') }}
             />
             <DialogStep
                 id="bootloader"
                 title={i18n.translate('bootloaderPanel.title')}
                 panel={<BootloaderModePanel hubType={selectedHubType} />}
-                backButtonProps={{ text: i18n.translate('backButton.label') }}
             />
         </MultistepDialog>
     );
diff --git a/src/firmware/restoreOfficialDialog/RestoreOfficialDialog.tsx b/src/firmware/restoreOfficialDialog/RestoreOfficialDialog.tsx
index 7f9c5bce..98f2bdc4 100644
--- a/src/firmware/restoreOfficialDialog/RestoreOfficialDialog.tsx
+++ b/src/firmware/restoreOfficialDialog/RestoreOfficialDialog.tsx
@@ -33,9 +33,7 @@ const SelectHubPanel: React.VoidFunctionComponent = () => {
             <p>
                 {i18n.translate('selectHubPanel.message', {
                     lego: legoRegisteredTrademark,
-                    next: (
-                        <strong>{i18n.translate('selectHubPanel.nextButton')}</strong>
-                    ),
+                    next: <strong>{i18n.translate('nextButton.label')}</strong>,
                 })}
             </p>
             <div className="pb-spacer" />
@@ -96,6 +94,8 @@ const RestoreOfficialDialog: React.VoidFunctionComponent = () => {
             isOpen={isOpen}
             title={i18n.translate('title', { lego: legoRegisteredTrademark })}
             onClose={() => dispatch(firmwareRestoreOfficialDialogHide())}
+            backButtonProps={{ text: i18n.translate('backButton.label') }}
+            nextButtonProps={{ text: i18n.translate('nextButton.label') }}
             finalButtonProps={{
                 text: i18n.translate('doneButton.label'),
                 onClick: () => dispatch(firmwareRestoreOfficialDialogHide()),
@@ -105,7 +105,6 @@ const RestoreOfficialDialog: React.VoidFunctionComponent = () => {
                 id="hub"
                 title={i18n.translate('selectHubPanel.title')}
                 panel={<SelectHubPanel />}
-                nextButtonProps={{ text: i18n.translate('selectHubPanel.nextButton') }}
             />
             <DialogStep
                 id="restore"
diff --git a/src/firmware/restoreOfficialDialog/translations/en.json b/src/firmware/restoreOfficialDialog/translations/en.json
index 96da7886..133e6709 100644
--- a/src/firmware/restoreOfficialDialog/translations/en.json
+++ b/src/firmware/restoreOfficialDialog/translations/en.json
@@ -1,12 +1,17 @@
 {
     "title": "Restore official {lego} Firmware",
+    "backButton": {
+        "label": "Back"
+    },
+    "nextButton": {
+        "label": "Next"
+    },
     "doneButton": {
         "label": "Done"
     },
     "selectHubPanel": {
         "title": "Select hub",
-        "message": "Select the hub to restore the official {lego} firmware on, then click {next}.",
-        "nextButton": "Next"
+        "message": "Select the hub to restore the official {lego} firmware on, then click {next}."
     },
     "restoreFirmwarePanel": {
         "title": "Restore firmware",