Merge branch 'release/0.31.0'

.github/workflows/coverage.yml

@@ -7,15 +7,15 @@ jobs:
     name: Coverage
     runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Setup Node
         run: yarn install --immutable --immutable-cache --check-cache
 
       - name: Generate coverage report
         run: yarn test:coverage
 
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
         with:
           directory: ./coverage
           version: v0.1.15

.github/workflows/test.yml

@@ -11,7 +11,8 @@ jobs:
     name: Test
     runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+      - run: yarn global add node-gyp
       - run: yarn install --immutable --immutable-cache --check-cache
       - run: yarn lint
       - run: yarn test

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

README.md

@@ -72,6 +72,10 @@ The build is then available from the build directory and can be served by simply
     yarn test:watch
     yarn test:coverage
 
+### Docker setup
+
+A Dockerfile is supplied that will build esc-configurator into a container image. A companion script called 'run.sh' is also supplied, which will trigger a build, start a container with the image and open the app in a google chrome.
+
 ## History & Credits
 This configurator is based on [BLHeli Configurator](https://github.com/blheli-configurator/blheli-configurator) which was based on [Cleanflight Configurator](https://github.com/cleanflight/cleanflight-configurator) which itself was based on [Baseflight Configurator](https://github.com/multiwii/baseflight-configurator). I would like to thank everyone who contributed to one of those projects, without you this project would not be possible.
 

docker/Dockerfile

@@ -0,0 +1,31 @@
+FROM ubuntu:23.10
+
+# Node installation instructions:
+# https://github.com/nodesource/distributions#installation-instructions
+ENV NODE_MAJOR=16
+
+ENV DEBIAN_FRONTEND="noninteractive"
+
+# Default version to check out is master. Use --build-arg to customize this
+ARG VERSION
+ENV VERSION=${VERSION:-master}
+
+# Install node, npm and a few utilities used for debugging
+RUN apt-get update \
+    && apt-get install -y ca-certificates gnupg sudo curl wget build-essential git vim \
+    && sudo mkdir -p /etc/apt/keyrings \
+    && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
+    && echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list \
+    && sudo apt-get update \
+    && sudo apt-get install -y npm \
+    && npm install -g yarn
+
+# Build the app
+RUN git clone https://github.com/stylesuxx/esc-configurator.git \
+    && cd esc-configurator \
+    && git checkout $VERSION \
+    && yarn \
+    && yarn global add serve \
+    && yarn build
+
+CMD ["serve", "-s", "/esc-configurator/build", "-l", "1234"]

docker/run.sh

@@ -0,0 +1,46 @@
+#!/bin/bash -eux
+
+# Port on your local machine that you want esc-configurator to be listening on
+LOCAL_PORT=8234
+
+# Fetch tag of latest release version
+VERSION=$(curl --silent "https://api.github.com/repos/stylesuxx/esc-configurator/releases/latest" | grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/')
+
+docker  buildx \
+        build \
+        --build-arg VERSION=$VERSION \
+        --progress plain \
+        --platform linux/amd64 \
+        --tag esc-configurator:latest \
+        .
+
+docker  run \
+        --detach \
+        --interactive \
+        --privileged \
+        --publish $LOCAL_PORT:1234 \
+        --volume /dev/bus/usb:/dev/bus/usb \
+        esc-configurator:latest
+
+# This bit tries to guess the binary name of google chrome
+BIN1=google-chrome
+BIN2=google-chrome-stable
+BIN3=google-chrome-unstable
+BIN4=google-chrome-beta
+
+if (which $BIN1 &>/dev/null); then
+    $BIN1 http://localhost:$LOCAL_PORT
+elif (which $BIN2 &>/dev/null); then
+    $BIN2 http://localhost:$LOCAL_PORT
+elif (which $BIN3 &>/dev/null); then
+    $BIN3 http://localhost:$LOCAL_PORT
+elif (which $BIN4 &>/dev/null); then
+    $BIN4 http://localhost:$LOCAL_PORT
+else
+    echo
+    echo "The $BIN1 binary was not found on this machine."
+    echo "It is required to open esc-configurator."
+    echo "Exiting."
+    echo
+    exit 1
+fi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "esc-configurator",
-  "version": "0.30.2",
+  "version": "0.31.0",
   "private": false,
   "license": "AGPL-3.0",
   "dependencies": {
@@ -93,6 +93,7 @@
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-jest": "^25.7.0",
     "eslint-plugin-react": "^7.28.0",
+    "node-gyp": "^10.0.0",
     "postcss": "^8.4.5",
     "pre-commit": "^1.2.2",
     "pre-push": "^0.1.1",
@@ -126,5 +127,8 @@
     "plugins": [
       "remark-preset-lint-recommended"
     ]
+  },
+  "engines": {
+    "node": ">=16.16.0 <19.0.0"
   }
 }

src/Components/FirmwareSelector/__tests__/index.test.jsx

@@ -386,10 +386,10 @@ describe('FirmwareSelector', () => {
     expect(onSubmit).toHaveBeenCalled();
   });
 
-  //TODO: Once v0.20.0 is released, add this test
+  //TODO: Once v0.22.0 is released, add this test
   /*
-  it('should not show PMW selection for Bluejay v0.20.0 and up', async() => {
-    const json = `[{ "tag_name": "v0.20.0", "assets": [{}] }]`;
+  it('should not show PMW selection for Bluejay v0.22.0 and up', async() => {
+    const json = `[{ "tag_name": "v0.22.0", "assets": [{}] }]`;
     global.caches = {
       open: jest.fn().mockImplementation(() =>
         new Promise((resolve) => {
@@ -445,7 +445,7 @@ describe('FirmwareSelector', () => {
 
     fireEvent.change(screen.getByRole(/combobox/i, { name: 'Version' }), {
       target: {
-        value: 'https://github.com/bird-sanctuary/bluejay/releases/download/v0.20.0/',
+        value: 'https://github.com/bird-sanctuary/bluejay/releases/download/v0.22.0/',
         name: 'Version',
       },
     });

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" : ""}

src/Components/Flash/Escs/Esc/__tests__/index.test.jsx

@@ -341,6 +341,7 @@ describe('Esc', () => {
     }));
 
     const esc = {
+      index: 0,
       firmwareName: 'Bluejay',
       layoutRevision: 207,
       settings: { DITHERING: 0 },
@@ -374,6 +375,7 @@ describe('Esc', () => {
     }));
 
     const esc = {
+      index: 0,
       firmwareName: 'Bluejay',
       layoutRevision: 207,
       settings: { DITHERING: 1 },

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!

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

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,

src/Containers/App/escsSlice.js

@@ -1,5 +1,17 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+/**
+ * NOTE: The individual array holds individual ESC settings, the actual index
+ *       in the array does not represent the actual index of the ESC. If for
+ *       example only one ESC is attached, the individual length will have a
+ *       length of 1. The actual index of the ESC must be reat from that object.
+ *
+ *       Eg.: Only one ESC is attached to motor pin 2 an an FC where 4 ESCs
+ *            are expected. The individual array will have a length of 1, but
+ *            at index 0 it will have the settings for the ESC attached to motor
+ *            pin 2.
+ */
+
 const initialState = {
   connected: 0,
   master: {},
@@ -42,10 +54,16 @@ export const escsSlice = createSlice({
         settings,
       } = action.payload;
 
-      state.individual[index] = {
-        ...state.individual[index],
-        ...settings,
-      };
+      for(let i = 0; i < state.individual.length; i += 1) {
+        if(state.individual[i].index === index) {
+          state.individual[i] = {
+            ...state.individual[i],
+            ...settings,
+          };
+
+          break;
+        }
+      }
     },
   },
 });