Refactor UI of the Appstore page (#1679)

SignalK · Apr 1, 2024 · a2ab14c · a2ab14c
1 parent e49e42c
commit a2ab14c
Show file tree

Hide file tree

Showing 17 changed files with 690 additions and 459 deletions.
diff --git a/package.json b/package.json
@@ -177,4 +177,4 @@
     "typescript": "^4.8.3"
   },
   "funding": "https://opencollective.com/signalk"
-}
+}
diff --git a/packages/server-admin-ui/package.json b/packages/server-admin-ui/package.json
@@ -1,4 +1,4 @@
-  {
+{
   "name": "@signalk/server-admin-ui",
   "version": "2.6.0",
   "description": "Signal K server admin webapp",
@@ -16,6 +16,10 @@
     "@babel/core": "^7.11.6",
     "@babel/preset-react": "^7.10.4",
     "@fortawesome/fontawesome-free": "^5.15.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@signalk/server-admin-ui-dependencies": "1.0.1",
     "ansi-to-html": "^0.6.14",
     "babel-loader": "^8.1.0",
@@ -33,7 +37,6 @@
     "moment": "^2.29.1",
     "node-sass": "^8.0.0",
     "prettier": "^2.3.2",
-    "react": "^16.13.1",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^16.13.1",
     "react-html-parser": "^2.0.2",
@@ -42,16 +45,17 @@
     "react-redux": "^5.1.2",
     "react-router-dom": "^4.3.1",
     "react-select": "^3.1.0",
+    "react": "^16.13.1",
     "reactstrap": "^5.0.0",
     "reconnecting-websocket": "^4.4.0",
-    "redux": "^3.7.2",
     "redux-thunk": "2.3.0",
+    "redux": "^3.7.2",
     "sass-loader": "^13.2.0",
     "simple-line-icons": "^2.5.5",
     "style-loader": "^2.0.0",
-    "webpack": "^5.0.0",
     "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^4.2.0"
+    "webpack-cli": "^4.2.0",
+    "webpack": "^5.0.0"
   },
   "scripts": {
     "prepublishOnly": "npm run clean && npm run build",

diff --git a/packages/server-admin-ui/scss/core/_grid.scss b/packages/server-admin-ui/scss/core/_grid.scss
@@ -1,15 +1,16 @@
 .row.row-equal {
   padding-right: ($grid-gutter-width / 4);
-  padding-left:  ($grid-gutter-width / 4);
+  padding-left: ($grid-gutter-width / 4);
   margin-right: ($grid-gutter-width / -2);
-  margin-left:  ($grid-gutter-width / -2);
+  margin-left: ($grid-gutter-width / -2);
 
-  [class*="col-"] {
+  [class*='col-'] {
     padding-right: ($grid-gutter-width / 4);
-    padding-left:  ($grid-gutter-width / 4);
+    padding-left: ($grid-gutter-width / 4);
   }
 }
 
 .main .container-fluid {
   padding: 0 30px;
+  height: 100%;
 }
diff --git a/packages/server-admin-ui/scss/style.scss b/packages/server-admin-ui/scss/style.scss
@@ -7,16 +7,16 @@
  */
 
 // Override Boostrap variables
-@import "bootstrap-variables";
+@import 'bootstrap-variables';
 
 // Import Bootstrap source files
-@import "~bootstrap/scss/bootstrap";
+@import '~bootstrap/scss/bootstrap';
 
 // Override core variables
-@import "core-variables";
+@import 'core-variables';
 
 // Import core styles
-@import "core/core";
+@import 'core/core';
 
 // Custom styles
-@import "custom";
+@import 'custom';
diff --git a/packages/server-admin-ui/src/components/Sidebar/Sidebar.js b/packages/server-admin-ui/src/components/Sidebar/Sidebar.js
@@ -155,15 +155,14 @@ class Sidebar extends Component {
 const mapStateToProps = (state) => {
   var appUpdates = state.appStore.updates.length
   var updatesBadge = null
-  var availableBadge = null
   var serverUpdateBadge = null
   var accessRequestsBadge = null
 
   if (appUpdates > 0) {
     updatesBadge = {
-      variant: 'danger',
+      variant: 'success',
       text: `${appUpdates}`,
-      color: 'danger',
+      color: 'success',
     }
   }
 
@@ -175,8 +174,8 @@ const mapStateToProps = (state) => {
     }
   }
 
-  if (!state.appStore.storeAvailable) {
-    updatesBadge = availableBadge = {
+  if (state.appStore.storeAvailable === false) {
+    updatesBadge = {
       variant: 'danger',
       text: 'OFFLINE',
     }
@@ -220,22 +219,7 @@ const mapStateToProps = (state) => {
         name: 'Appstore',
         url: '/appstore',
         icon: 'icon-basket',
-        children: [
-          {
-            name: 'Available',
-            url: '/appstore/apps',
-            badge: availableBadge,
-          },
-          {
-            name: 'Installed',
-            url: '/appstore/installed',
-          },
-          {
-            name: 'Updates',
-            url: '/appstore/updates',
-            badge: updatesBadge,
-          },
-        ],
+        badge: updatesBadge,
       },
       {
         name: 'Server',

diff --git a/packages/server-admin-ui/src/containers/Full/Full.js b/packages/server-admin-ui/src/containers/Full/Full.js
@@ -81,7 +81,8 @@ class Full extends Component {
                   component={loginOrOriginal(Playground, true)}
                 />
                 <Route
-                  path="/appstore/:view"
+                  path="/appstore"
+                  name="Appstore"
                   component={loginOrOriginal(Apps)}
                 />
                 <Route