Refactor UI of the Appstore page

package.json

@@ -71,6 +71,7 @@
     "packages/resources-provider-plugin"
   ],
   "dependencies": {
+    "@meri-imperiumi/signalk-teltonika-rutx11": "^0.6.0",
     "@signalk/course-provider": "^1.0.0",
     "@signalk/n2k-signalk": "^3.0.0",
     "@signalk/nmea0183-signalk": "^3.0.0",
@@ -130,13 +131,13 @@
     "@signalk/instrumentpanel": "0.x",
     "@signalk/set-system-time": "^1.2.0",
     "@signalk/signalk-to-nmea0183": "^1.0.0",
-    "@signalk/vesselpositions": "^1.0.0",
     "@signalk/udp-nmea-plugin": "^2.0.0",
+    "@signalk/vesselpositions": "^1.0.0",
     "@signalk/zones": "^1.0.0",
-    "signalk-to-nmea2000": "^2.16.0",
-    "signalk-n2kais-to-nmea0183": "^1.3.1",
     "mdns": "^2.5.1",
-    "serialport": "^11.0.0"
+    "serialport": "^11.0.0",
+    "signalk-n2kais-to-nmea0183": "^1.3.1",
+    "signalk-to-nmea2000": "^2.16.0"
   },
   "devDependencies": {
     "@types/busboy": "^1.5.0",

packages/server-admin-ui/src/views/appstore/Apps/Apps.js

@@ -4,10 +4,9 @@ import { Button, Input } from 'reactstrap'
 import { AgGridReact } from 'ag-grid-react' // React Grid Logic
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faMagnifyingGlass,
-  faTriangleExclamation,
-} from '@fortawesome/free-solid-svg-icons'
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
+
+import WarningBox from './WarningBox'
 
 /* Cell rendering */
 import TypeCellRenderer from '../Grid/TypeCellRenderer'
@@ -21,7 +20,7 @@ import 'ag-grid-community/styles/ag-theme-quartz.css' // Theme
 
 /* FIXME: Temporary simply to code to be replace with data coming from backend */
 const tags = [
-  'Alls',
+  'All',
   'AIS',
   'Chart Plotters',
   'Cloud',
@@ -38,8 +37,8 @@ const tags = [
 /** Main component */
 const Apps = function (props) {
   /** State */
-  const [selectedView, setSelectedView] = useState('Alls')
-  const [selectedTag, setSelectedTag] = useState('Alls')
+  const [selectedView, setSelectedView] = useState('All')
+  const [selectedTag, setSelectedTag] = useState('All')
 
   /* Effects / Watchers */
   useEffect(() => {
@@ -55,8 +54,7 @@ const Apps = function (props) {
   }, [])
 
   useEffect(() => {
-    console.log('SelectedTag', selectedTag)
-    if (selectedView === 'Alls') {
+    if (selectedView === 'All') {
       refreshGridData(selectedTag, allAppList())
     } else if (selectedView === 'Installed')
       refreshGridData(selectedTag, installedAppList())
@@ -145,7 +143,7 @@ const Apps = function (props) {
    * Set the rowData with the filter selected
    */
   const refreshGridData = useCallback((item, gridData) => {
-    if (!item || item === 'Alls') return setRowData(gridData)
+    if (!item || item === 'All') return setRowData(gridData)
     let newData = []
     newData = gridData.filter((el) => el.categories.includes(item))
     setRowData(newData)
@@ -169,24 +167,18 @@ const Apps = function (props) {
   return (
     <div className="appstore animated fadeIn">
       <section className="appstore__warning section">
-        <div className="message__container">
-          <p className="message">
-            <span>
-              <FontAwesomeIcon icon={faTriangleExclamation} />
-            </span>
-            Sorry you need to restart the server every time you install or
-            update a plugin. We will improve this in the future.
-          </p>
-        </div>
+        <WarningBox>
+          Please restart the server after installing or updating a plugin.
+        </WarningBox>
       </section>
       <header className="appstore__header">
         <div className="title__container">
           <h3 className="title">Apps & Plugins</h3>
           <Button
-            color={selectedView === 'Alls' ? 'primary' : 'secondary'}
-            onClick={() => setSelectedView('Alls')}
+            color={selectedView === 'All' ? 'primary' : 'secondary'}
+            onClick={() => setSelectedView('All')}
           >
-            Alls
+            All
           </Button>
           <Button
             color={selectedView === 'Installed' ? 'primary' : 'secondary'}

packages/server-admin-ui/src/views/appstore/Apps/WarningBox.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
+
+export default function WarningBox({ children }) {
+  return (
+    <div className="message__container">
+      <p className="message">
+        <span>
+          <FontAwesomeIcon icon={faTriangleExclamation} />
+        </span>
+        {children}
+      </p>
+    </div>
+  )
+}

packages/server-admin-ui/src/views/appstore/Grid/ActionCellRenderer.js

@@ -1,19 +1,49 @@
 import React from 'react'
 import { Button } from 'reactstrap'
+import { NavLink } from 'react-router-dom'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGear, faTrashCan } from '@fortawesome/free-solid-svg-icons'
 
 export default function ActionCellRenderer(props) {
-  const handleInstallClick = () => {
-    /* TODO: TO BE IMPLEMENTED */
+  const handleInstallClick = async () => {
+    const response = await fetch(
+      `${window.serverRoutesPrefix}/appstore/install/${props.data.name}/${props.data.version}`,
+      {
+        method: 'POST',
+        credentials: 'include',
+      }
+    )
+    if (response.status === 200) {
+      // TODO: Show the progress bar and the warning display messaege
+      // Also show a restart message indicating that the user must restart the server
+    }
   }
+
+  const handleRemoveClick = async () => {
+    if (confirm(`Are you sure you want to uninstall ${props.data.name}?`)) {
+      const response = await fetch(
+        `${window.serverRoutesPrefix}/appstore/remove/${props.data.name}`,
+        {
+          method: 'POST',
+          credentials: 'include',
+        }
+      )
+      if (response.status === 200) {
+        // TODO: Show the user the warning message that the server must be restarted
+      }
+    }
+  }
+
   return (
     <div className="cell__renderer cell-action center">
       {props.data.installed ? (
         <>
-          <FontAwesomeIcon icon={faTrashCan} />
-          <FontAwesomeIcon icon={faGear} />{' '}
+          <NavLink to={`/serverConfiguration/plugins/${props.data.name}`}>
+            <FontAwesomeIcon icon={faGear} />
+          </NavLink>
+
+          <FontAwesomeIcon icon={faTrashCan} onClick={handleRemoveClick} />
         </>
       ) : (
         <Button color="primary" onClick={handleInstallClick}>