sqlpad/client-js/configuration/ConfigurationView.js

Web app for writing and running SQL queries and visualizing the results. Supports Postgres, MySQL, SQL Server, Crate and Vertica.

import React from 'react'
import Alert from 'react-s-alert'
import Col from 'react-bootstrap/lib/Col'
import Form from 'react-bootstrap/lib/Form'
import AutoAffix from 'react-overlays/lib/AutoAffix'
import debounce from 'lodash.debounce'
import CheckListItem from './CheckListItem'
import ConfigEnvDocumentation from './ConfigEnvDocumentation'
import ConfigItemInput from './ConfigItemInput'
import fetchJson from '../utilities/fetch-json.js'

class ConfigurationView extends React.Component {
  state = {
    configItems: []
  }

  loadConfigValuesFromServer = () => {
    fetchJson('GET', '/api/config-items').then(json => {
      if (json.error) Alert.error(json.error)
      this.setState({ configItems: json.configItems })
    })
  }

  saveConfigValue = (key, value) => {
    fetchJson('POST', '/api/config-values/' + key, {
      value: value
    }).then(json => {
      if (json.error) {
        Alert.error('Save failed')
      } else {
        Alert.success('Value saved')
        this.loadConfigValuesFromServer()
      }
    })
  }

  componentDidMount() {
    document.title = 'SQLPad - Configuration'
    this.loadConfigValuesFromServer()
    this.saveConfigValue = debounce(this.saveConfigValue, 500)
  }

  render() {
    var configItemInputNodes = this.state.configItems
      .filter(config => config.interface === 'ui')
      .map(config => {
        return (
          <ConfigItemInput
            key={config.key}
            config={config}
            saveConfigValue={this.saveConfigValue}
          />
        )
      })
    return (
      <div>
        <Col sm={6} smOffset={1}>
          <div className="configBox">
            <h1 style={{ textAlign: 'center' }}>Configuration</h1>
            <hr />
            <Form horizontal>{configItemInputNodes}</Form>
            <hr />
            <p>
              Some configuration is only accessible via environment variables or
              command-line-interface (CLI) flags. Below are the current values
              for these variables. Sensitive values are masked. Hover over input
              for additional information.
            </p>
            <hr />
            <ConfigEnvDocumentation configItems={this.state.configItems} />
          </div>
        </Col>
        <Col sm={3} smOffset={1} style={{ paddingTop: 90 }}>
          <AutoAffix viewportOffsetTop={95}>
            <div className="panel panel-default">
              <div className="panel-body">
                <p>
                  <strong>Feature Checklist</strong>
                </p>
                <p>Unlock features by providing the required configuration.</p>
                <hr />
                <strong>Email</strong>
                <ul style={{ paddingLeft: 20 }}>
                  <CheckListItem
                    configKey={'smtpUser'}
                    configItems={this.state.configItems}
                  />
                  <CheckListItem
                    configKey={'smtpHost'}
                    configItems={this.state.configItems}
                  />
                  <CheckListItem
                    configKey={'smtpPort'}
                    configItems={this.state.configItems}
                  />
                  <CheckListItem
                    configKey={'smtpFrom'}
                    configItems={this.state.configItems}
                  />
                  <CheckListItem
                    configKey={'publicUrl'}
                    configItems={this.state.configItems}
                  />
                </ul>
                <strong>Google OAuth</strong>
                <ul style={{ paddingLeft: 20 }}>
                  <CheckListItem
                    configKey={'googleClientId'}
                    configItems={this.state.configItems}
                  />
                  <CheckListItem
                    configKey={'googleClientSecret'}
                    configItems={this.state.configItems}
                  />
                  <CheckListItem
                    configKey={'publicUrl'}
                    configItems={this.state.configItems}
                  />
                </ul>
              </div>
            </div>
          </AutoAffix>
        </Col>
      </div>
    )
  }
}

export default ConfigurationView