From 753f1b2fc546c213da22dab05c7ec894047de63a Mon Sep 17 00:00:00 2001
From: Chris L <stylesuxx@gmail.com>
Date: Thu, 14 Sep 2023 16:20:05 +0200
Subject: [PATCH] Display checklist for new ESC firmware, link to release notes
 #412

---
 src/Components/FirmwareSelector/index.jsx | 41 +++++++++++++++++++++
 src/Components/Home/index.jsx             |  3 +-
 src/Components/Home/style.scss            | 11 ------
 src/Components/MainContent/style.scss     | 44 +++++++++++++++++++----
 src/sources/Bluejay/index.js              |  2 +-
 src/sources/GithubSource.js               |  1 +
 src/translations/en/common.json           |  8 ++++-
 7 files changed, 88 insertions(+), 22 deletions(-)

diff --git a/src/Components/FirmwareSelector/index.jsx b/src/Components/FirmwareSelector/index.jsx
index e1a166780..0b3e0eeac 100644
--- a/src/Components/FirmwareSelector/index.jsx
+++ b/src/Components/FirmwareSelector/index.jsx
@@ -66,6 +66,7 @@ function FirmwareSelector({
     version: null,
     url: null,
     pwm: null,
+    releaseUrl: null,
   });
 
   const [layoutSelectionDisabled, setLayoutSelectionDisabled] = useState(false);
@@ -133,6 +134,7 @@ function FirmwareSelector({
           key: version.key,
           value: version.url,
           name: version.name,
+          releaseUrl: version.releaseUrl ? version.releaseUrl : null,
         }));
 
         const firmwareOptions = validFirmware.map((key) => ({
@@ -205,6 +207,8 @@ function FirmwareSelector({
     const selected = e.target.options.selectedIndex;
     const selectedOption = e.target.options[selected];
 
+    const releaseUrl = options.versions[selected - 1].releaseUrl;
+
     const firmwareName = selection.firmware;
     const firmwareVersion = options.versions[selected - 1].key;
 
@@ -223,6 +227,7 @@ function FirmwareSelector({
     setSelection({
       ...selection,
       url: e.target.value,
+      releaseUrl,
       version: selectedOption && options.versions[selected - 1].key,
     });
   }, [options, selection]);
@@ -375,6 +380,42 @@ function FirmwareSelector({
                   />}
               </>}
 
+            <div className="alert">
+              <p>
+                <strong>
+                  {t('selectionAttention')}
+                </strong>
+              </p>
+
+              <p>
+                {t('selectionHint')}
+              </p>
+
+              <p>
+                <ul>
+                  <li>
+                    {t('selectionLi1')}
+                  </li>
+
+                  <li>
+                    {t('selectionLi2')}
+                  </li>
+
+                  <li>
+                    {t('selectionLi3')}
+                  </li>
+                </ul>
+              </p>
+
+              {selection.releaseUrl &&
+                <a
+                  href={selection.releaseUrl}
+                  target="_blank"
+                >
+                  {t('selectionLinkText')}
+                </a>}
+            </div>
+
             <div className="default-btn">
               <button
                 className={disableFlashButton ? "disabled" : ""}
diff --git a/src/Components/Home/index.jsx b/src/Components/Home/index.jsx
index 2a6b14885..b12917cac 100644
--- a/src/Components/Home/index.jsx
+++ b/src/Components/Home/index.jsx
@@ -110,9 +110,8 @@ function HomeColumnCenter() {
   }, [dispatch]);
 
   return(
-    <div className="column third_center text2">
+    <div className="column third_center text2 tab">
       <div className="wrap">
-
         <div className="alert">
           <strong>
             Attention Bluejay users!
diff --git a/src/Components/Home/style.scss b/src/Components/Home/style.scss
index 6a2f07acb..b4013e364 100644
--- a/src/Components/Home/style.scss
+++ b/src/Components/Home/style.scss
@@ -219,15 +219,4 @@
       list-style: disc;
     }
   }
-
-  .alert {
-    color: #721c24;
-    background-color: #f8d7da;
-    border-color: #f5c6cb;
-    position: relative;
-    padding: 0.75rem 1.25rem;
-    margin-bottom: 1rem;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-  }
 }
diff --git a/src/Components/MainContent/style.scss b/src/Components/MainContent/style.scss
index 212da2f57..9d6514093 100644
--- a/src/Components/MainContent/style.scss
+++ b/src/Components/MainContent/style.scss
@@ -13,14 +13,14 @@
 
   .note {
     background-color: #fff3cd;
-    border: 1px solid #ffeeba;
+    border-color: #ffeeba;
     color: #856404;
-    margin-top: 5px;
-    margin-bottom: 25px;
-    border-radius: 3px;
-    font-size: 11px;
-    font-family: 'open_sansregular', Arial, sans-serif;
-    padding: 5px 7px;
+
+    position: relative;
+    padding: 0.75rem 1.25rem;
+    margin-bottom: 10px;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
 
     @media screen and (width <= 768px) {
       margin-bottom: 18px;
@@ -104,6 +104,36 @@
       }
     }
 
+    .alert {
+      color: #721c24;
+      background-color: #f8d7da;
+      border-color: #f5c6cb;
+      position: relative;
+      padding: 0.75rem 1.25rem;
+      margin-bottom: 10px;
+      border: 1px solid transparent;
+      border-radius: 0.25rem;
+
+      p {
+        margin-bottom: 10px;
+        font-weight: normal;
+
+        ul {
+          font-weight: normal;
+          li {
+            list-style-type: disc;
+            margin-left: 20px;
+          }
+        }
+      }
+
+      span,
+      a {
+        color: #721c24;
+        font-size: inherit;
+      }
+    }
+
     .checkbox,
     .number,
     .number-text,
diff --git a/src/sources/Bluejay/index.js b/src/sources/Bluejay/index.js
index 65d48c34e..b5e9f1460 100644
--- a/src/sources/Bluejay/index.js
+++ b/src/sources/Bluejay/index.js
@@ -76,7 +76,7 @@ class BluejaySource extends GithubSource {
   }
 
   async getVersions() {
-    return this.getRemoteVersionsList(GITHUB_REPO, blacklist, 5);
+    return this.getRemoteVersionsList(GITHUB_REPO, blacklist, 8);
   }
 
   isValidName(name) {
diff --git a/src/sources/GithubSource.js b/src/sources/GithubSource.js
index 2fdd8cb83..d4595a26b 100644
--- a/src/sources/GithubSource.js
+++ b/src/sources/GithubSource.js
@@ -28,6 +28,7 @@ class GithubSource extends Source {
       name: release.name || release.tag_name.replace(/^v/, ''),
       key: release.tag_name,
       url: `https://github.com/${repo}/releases/download/${release.tag_name}/`,
+      releaseUrl: `https://github.com/${repo}/releases/tag/${release.tag_name}/`,
       prerelease: release.prerelease,
       published_at: release.published_at,
     }));
diff --git a/src/translations/en/common.json b/src/translations/en/common.json
index 4570e80d1..81e6923e3 100644
--- a/src/translations/en/common.json
+++ b/src/translations/en/common.json
@@ -186,5 +186,11 @@
   "mistaggedDetected": "Detected",
   "update": "Update available! To update the app, refresh or restart it.",
   "resettingDevice": "Resetting device...",
-  "disabled": "Disabled"
+  "disabled": "Disabled",
+  "selectionAttention": "Attention!",
+  "selectionHint": "When flashing new (or different) ESC firmware it is best practice to adhere to the following checklist:",
+  "selectionLi1": "Read the relese notes to understand what changed and what you might need to adjust",
+  "selectionLi2": "Make sure your motors spin up reliably on arm and in the correct direction",
+  "selectionLi3": "Check motor temperatures after a short test flight and adjust tune if they are too hot",
+  "selectionLinkText": "Show release notes on Github"
 }