feature: inline plugin main switches in the plugin list (#1190)

Move enable, enableLogging and enableDebug switches outside the rjsf generated form, with autosave. This enables plugins to provide their own configuration forms, keeping the server-managed config properties outside the form. Along the way remove the Redux connect dependency on serverstatistics as the data on the page is independent from that data.
SignalK · Nov 22, 2020 · 6db116d · 6db116d
1 parent a1863ad
commit 6db116d
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 56 deletions.
diff --git a/packages/server-admin-ui/src/views/Configuration/Configuration.js b/packages/server-admin-ui/src/views/Configuration/Configuration.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import { connect } from 'react-redux'
 import PluginConfigurationForm from './../ServerConfig/PluginConfigurationForm'
-import {Container, Card, CardBody, CardHeader, Collapse} from 'reactstrap'
+import {Container, Card, CardBody, CardHeader, Collapse, Row, Col, Input, InputGroup, Label} from 'reactstrap'
 
-class Dashboard extends Component {
-  constructor(props) {
+export default class PluginConfigurationList extends Component {
+  constructor() {
     super()
     this.state = {
       plugins: []
@@ -32,13 +32,6 @@ class Dashboard extends Component {
     })
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    const shouldUpdate = this.lastOpenedPlugin !== this.props.match.params.pluginid || this.state.plugins.length != nextState.plugins.length
-    this.lastOpenedPlugin = this.props.match.params.pluginid
-
-    return shouldUpdate
-  }
-
   render () {
     return (
       <Container>
@@ -50,57 +43,108 @@ class Dashboard extends Component {
               key={i}
               isOpen={isOpen}
               toggleForm={this.toggleForm.bind(this, i, plugin.id)}
-              saveData={saveData.bind(null, plugin.id)}/>
+              saveData={(data) => this.saveData(plugin.id, data, i)}/>
         )})}
       </Container>
     )
   }
-}
 
-function saveData(id, data) {
-  fetch(`${window.serverRoutesPrefix}/plugins/${id}/config`, {
-    method: 'POST',
-    body: JSON.stringify(data),
-    headers: new Headers({'Content-Type': 'application/json'}),
-    credentials: 'same-origin'
-  }).then((response) => {
-    if (response.status != 200) {
-      console.error(response)
-      alert('Saving plugin settings failed')
-    }
-  })
+  saveData(id, data, i) {
+    fetch(`${window.serverRoutesPrefix}/plugins/${id}/config`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+      headers: new Headers({'Content-Type': 'application/json'}),
+      credentials: 'same-origin'
+    }).then((response) => {
+      if (response.status != 200) {
+        console.error(response)
+        alert('Saving plugin settings failed')
+      } else {
+        const plugins = [...this.state.plugins]
+        plugins[i].data = data
+        this.setState({ plugins })
+      }
+    })
+  }
 }
 
 
+
 class PluginCard extends Component {
   render() {
+    const labelStyle = {marginLeft: '10px', marginBottom: '0px'}
     return (
     <div ref={(card) => { this.card = card }}>
-    <Card key={this.props.i}>
-    <CardHeader onClick={this.props.toggleForm}>
-      <i className={'fa fa-chevron-' + (this.props.isOpen ? 'down':'right')}/>
-        {this.props.plugin.name}
-    </CardHeader>
-    <Collapse isOpen={this.props.isOpen}>
-        <CardBody>
-        Package Name: {this.props.plugin.packageName}<br/>
+    <Card>
+      <CardHeader >
+        <Row>
+          <Col xs={4} onClick={this.props.toggleForm}>
+            <i style={{marginRight: '10px'}} className={'fa fa-chevron-' + (this.props.isOpen ? 'down' : 'right')} />
+            {this.props.plugin.name}
+          </Col>
+          <Col xs='2'>
+            Enabled
+              <Label style={labelStyle} className='switch switch-text switch-primary'>
+                <Input
+                  type='checkbox'
+                  name='enabled'
+                  className='switch-input'
+                  onChange={(e) => {
+                    this.props.saveData({...this.props.plugin.data, enabled: !this.props.plugin.data.enabled})
+                  }}
+                  checked={this.props.plugin.data.enabled}
+                />
+                <span className='switch-label' data-on='Yes' data-off='No' />
+                <span className='switch-handle' />
+              </Label>
+          </Col>
+          <Col xs='3'>
+            Log plugin output
+              <Label style={labelStyle} className='switch switch-text switch-primary'>
+                <Input
+                  type='checkbox'
+                  name='enableLogging'
+                  className='switch-input'
+                  onChange={(e) => {
+                    this.props.saveData({...this.props.plugin.data, enableLogging: !this.props.plugin.data.enableLogging})
+                  }}
+                  checked={this.props.plugin.data.enableLogging}
+                />
+                <span className='switch-label' data-on='Yes' data-off='No' />
+                <span className='switch-handle' />
+              </Label>
+          </Col>
+          <Col xs='3'>
+            Enable debug log
+              <Label style={labelStyle} className='switch switch-text switch-primary'>
+                <Input
+                  type='checkbox'
+                  name='enableDebug'
+                  className='switch-input'
+                  onChange={(e) => {
+                    this.props.saveData({...this.props.plugin.data, enableDebug: !this.props.plugin.data.enableDebug})
+                  }}
+                  checked={this.props.plugin.data.enableDebug}
+                />
+                <span className='switch-label' data-on='Yes' data-off='No' />
+                <span className='switch-handle' />
+              </Label>
+          </Col>
+        </Row>
+      </CardHeader>
+      {  this.props.isOpen &&
+      <CardBody>
         <PluginConfigurationForm plugin={this.props.plugin} onSubmit={this.props.saveData}/>
       </CardBody>
-    </Collapse>
+      }
   </Card>
   </div>
     )
   }
 
   componentDidMount() {
     if (this.props.isOpen) {
-      // ReactDOM.findDOMNode(this.card).scrollIntoView()
-      window.scrollTo({top: this.card.offsetTop -54})
+      window.scrollTo({top: this.card.offsetTop -54, behavior: 'smooth'})
     }
   }
 }
-
-
-export default connect(({ serverStatistics }) => ({ serverStatistics }))(
-  Dashboard
-)
diff --git a/packages/server-admin-ui/src/views/ServerConfig/PluginConfigurationForm.js b/packages/server-admin-ui/src/views/ServerConfig/PluginConfigurationForm.js
@@ -15,21 +15,6 @@ export default ({plugin, onSubmit}) => {
   const topSchema = {
     type: 'object',
     properties: {
-      enabled: {
-        type: 'boolean',
-        title: 'Active',
-        default: false
-      },
-      enableLogging: {
-        type: 'boolean',
-        title: 'Enable Logging',
-        default: false
-      },
-      enableDebug: {
-        type: 'boolean',
-        title: 'Enable Debug',
-        default: false
-      },
       configuration: {
         type: 'object',
         title: ' ',
@@ -44,13 +29,14 @@ export default ({plugin, onSubmit}) => {
     topSchema.description = `Status: ${plugin.statusMessage}`
   }
 
+  const { enabled, enableLogging, enableDebug } = plugin.data
   return (
     <Form
       schema={topSchema}
       uiSchema={uiSchema}
       formData={plugin.data || {}}
       onSubmit={submitData => {
-        onSubmit(submitData.formData)
+        onSubmit({...submitData.formData, enabled, enableLogging, enableDebug} )
       }}
     />
   )