Replace UI with React and Rendition

Change-type: minor Signed-off-by: Stevche Radevski <stevche@balena.io>
balena-os · Apr 21, 2020 · dfe7802 · dfe7802
1 parent a203aae
commit dfe7802
Show file tree

Hide file tree

Showing 38 changed files with 18,329 additions and 152 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ build: &build
     - checkout
 
     - run: cargo build --release --target=$TARGET
- 
+
     - run: cross-strip target/$TARGET/release/$BINARY
 
     - run: |
@@ -31,7 +31,7 @@ build: &build
 
     - run: mkdir -p pack /tmp/dist
     - run: mv target/$TARGET/release/$BINARY pack/$BINARY
-    - run: cp -R ui pack/ui
+    - run: cp -R ui/build pack/ui
     - run: tar -czvf $ARCHIVE_PATH -C pack .
     - run: rm -rdf pack
 

diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,6 @@
 # will have compiled files and executables
 /target/
 
+.DS_Store
 # These are backup files generated by rustfmt
 **/*.rs.bk
diff --git a/src/server.rs b/src/server.rs
@@ -147,6 +147,7 @@ pub fn start_server(
 
     let mut assets = Mount::new();
     assets.mount("/", router);
+    assets.mount("/static", Static::new(&ui_directory.join("static")));
     assets.mount("/css", Static::new(&ui_directory.join("css")));
     assets.mount("/img", Static::new(&ui_directory.join("img")));
     assets.mount("/js", Static::new(&ui_directory.join("js")));

diff --git a/ui/.gitignore b/ui/.gitignore
@@ -0,0 +1,29 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+# /build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/ui/.huskyrc b/ui/.huskyrc
@@ -0,0 +1,5 @@
+{
+	"hooks": {
+		"pre-commit": "lint-staged"
+	}
+}
diff --git a/ui/.lintstagedrc b/ui/.lintstagedrc
@@ -0,0 +1,9 @@
+{
+  "*.ts": [
+		"balena-lint --typescript --fix"
+	],
+
+	"*.tsx": [
+		"balena-lint --typescript --fix"
+	],
+}
diff --git a/ui/README.md b/ui/README.md
@@ -0,0 +1,13 @@
+# WiFi Connect UI
+
+## Setting up the development environment
+
+The UI for **WiFi Connect** is built using **React**, bootstrapped by **create-react-app**. In order to develop for the UI you need to do the following:
+
+1. Run `npm install` in the UI folder.
+2. Run `npm start` to start the development server. This will serve the UI on `localhost:3000` by default.
+3. Any changes to the code will automatically reflect in the UI without having to manually refresh.
+
+The production bundle is generated by running `npm build`, which will bundle and minify the react code. This will create a `build` folder where all the static resources will be located. You can then serve the `index.html` file and the contents of the `build` folder however you wish.
+
+All networking requests are done using the `fetch` API. Polyfills are added for `fetch` and `Promise` which should improve the support for older browsers.
diff --git a/ui/build/asset-manifest.json b/ui/build/asset-manifest.json
@@ -0,0 +1,19 @@
+{
+  "files": {
+    "main.css": "/static/css/main.7c90acc6.chunk.css",
+    "main.js": "/static/js/main.fbfa97b4.chunk.js",
+    "runtime-main.js": "/static/js/runtime-main.2a78626f.js",
+    "static/js/2.c530163b.chunk.js": "/static/js/2.c530163b.chunk.js",
+    "index.html": "/index.html",
+    "precache-manifest.a619d5c0df1bb38186cdf977820ec568.js": "/precache-manifest.a619d5c0df1bb38186cdf977820ec568.js",
+    "service-worker.js": "/service-worker.js",
+    "static/js/2.c530163b.chunk.js.LICENSE.txt": "/static/js/2.c530163b.chunk.js.LICENSE.txt",
+    "static/media/logo.svg": "/static/media/logo.69120045.svg"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.2a78626f.js",
+    "static/js/2.c530163b.chunk.js",
+    "static/css/main.7c90acc6.chunk.css",
+    "static/js/main.fbfa97b4.chunk.js"
+  ]
+}
diff --git a/ui/build/index.html b/ui/build/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/static/favicon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/static/manifest.json"/><title>WiFi Connect</title><link href="/static/css/main.7c90acc6.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,f=t[0],l=t[1],c=t[2],p=0,s=[];p<f.length;p++)i=f[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(a&&a(t);s.length;)s.shift()();return u.push.apply(u,c||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,f=1;f<r.length;f++){var l=r[f];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/";var f=this["webpackJsonpwifi-connect-ui"]=this["webpackJsonpwifi-connect-ui"]||[],l=f.push.bind(f);f.push=t,f=f.slice();for(var c=0;c<f.length;c++)t(f[c]);var a=l;r()}([])</script><script src="/static/js/2.c530163b.chunk.js"></script><script src="/static/js/main.fbfa97b4.chunk.js"></script></body></html>
diff --git a/ui/build/precache-manifest.a619d5c0df1bb38186cdf977820ec568.js b/ui/build/precache-manifest.a619d5c0df1bb38186cdf977820ec568.js
@@ -0,0 +1,30 @@
+self.__precacheManifest = (self.__precacheManifest || []).concat([
+  {
+    "revision": "f94cb0dfe54dcb66c6ad5088f18ed9c7",
+    "url": "/index.html"
+  },
+  {
+    "revision": "25c9d8d2643926c1e954",
+    "url": "/static/css/main.7c90acc6.chunk.css"
+  },
+  {
+    "revision": "a9705d5f3c5307bbec57",
+    "url": "/static/js/2.c530163b.chunk.js"
+  },
+  {
+    "revision": "63748a42c768e6232479f8dd8348a100",
+    "url": "/static/js/2.c530163b.chunk.js.LICENSE.txt"
+  },
+  {
+    "revision": "25c9d8d2643926c1e954",
+    "url": "/static/js/main.fbfa97b4.chunk.js"
+  },
+  {
+    "revision": "0e903404fe668039b1a7",
+    "url": "/static/js/runtime-main.2a78626f.js"
+  },
+  {
+    "revision": "691200456c8c1a14713ad8f715ffd600",
+    "url": "/static/media/logo.69120045.svg"
+  }
+]);
diff --git a/ui/build/service-worker.js b/ui/build/service-worker.js
@@ -0,0 +1,39 @@
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
+
+importScripts(
+  "/precache-manifest.a619d5c0df1bb38186cdf977820ec568.js"
+);
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+workbox.core.clientsClaim();
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
+
+  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
+});
diff --git a/ui/build/static/css/main.7c90acc6.chunk.css b/ui/build/static/css/main.7c90acc6.chunk.css
diff --git a/ui/build/static/favicon.png b/ui/build/static/favicon.png
diff --git a/ui/build/static/js/2.c530163b.chunk.js b/ui/build/static/js/2.c530163b.chunk.js
diff --git a/ui/build/static/js/2.c530163b.chunk.js.LICENSE.txt b/ui/build/static/js/2.c530163b.chunk.js.LICENSE.txt
@@ -0,0 +1,65 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license URI.js v4.2.1 (c) 2011 Gary Court. License: http://github.com/garycourt/uri-js */
diff --git a/ui/build/static/js/main.fbfa97b4.chunk.js b/ui/build/static/js/main.fbfa97b4.chunk.js
diff --git a/ui/build/static/js/runtime-main.2a78626f.js b/ui/build/static/js/runtime-main.2a78626f.js
diff --git a/ui/build/static/manifest.json b/ui/build/static/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "WiFi Connect",
+  "name": "Easy WiFi setup for Linux devices from your mobile phone or laptop",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/ui/img/logo.svg → ui/build/static/media/logo.69120045.svg b/ui/img/logo.svg → ui/build/static/media/logo.69120045.svg
diff --git a/ui/css/bootstrap.min.css b/ui/css/bootstrap.min.css
diff --git a/ui/img/favicon.png b/ui/img/favicon.png
diff --git a/ui/index.html b/ui/index.html
diff --git a/ui/js/bootstrap.min.js b/ui/js/bootstrap.min.js