Merge pull request #1001 from ibi-group/otp-configs-url-download

allow URL type for router and build config

lib/manager/components/deployment/CustomConfig.js

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 // @flow
 
 import Icon from '@conveyal/woonerf/components/icon'
@@ -10,10 +11,10 @@ import {
   Radio
 } from 'react-bootstrap'
 import { LinkContainer } from 'react-router-bootstrap'
+import validator from 'validator'
 
 import * as deploymentActions from '../../actions/deployments'
 import {isValidJSONC} from '../../../common/util/json'
-
 import type {
   Deployment
 } from '../../../types'
@@ -30,6 +31,11 @@ const SAMPLE_ROUTER_CONFIG = `{
   }
 }`
 
+const CONFIG_OPTIONS = {
+  custom: 'custom',
+  url: 'url'
+}
+
 export default class CustomConfig extends Component<{
   deployment: Deployment,
   label: string,
@@ -38,24 +44,49 @@ export default class CustomConfig extends Component<{
 }, {[string]: any}> {
   state = {}
 
-  _toggleCustomConfig = (evt: SyntheticInputEvent<HTMLInputElement>) => {
-    const {deployment, updateDeployment} = this.props
-    const {name} = evt.target
-    const value = deployment[name]
-      ? null
-      : name === 'customBuildConfig'
-        ? SAMPLE_BUILD_CONFIG
-        : SAMPLE_ROUTER_CONFIG
-    updateDeployment(deployment, {[name]: value})
+  getName = (option?: string) => {
+    let {name} = this.props
+    if (option === CONFIG_OPTIONS.url) {
+      name += 'Url'
+    }
+    return name
   }
 
-  _onChangeConfig = (evt: SyntheticInputEvent<HTMLInputElement>) =>
-    this.setState({[this.props.name]: evt.target.value})
-
-  _onSaveConfig = () => {
+  _toggleCustomConfig = (evt: SyntheticInputEvent<HTMLInputElement>, option?: string) => {
     const {deployment, name, updateDeployment} = this.props
+    let value = 'https://'
+    if (name === 'customBuildConfig' && option === CONFIG_OPTIONS.custom) value = deployment[name] || SAMPLE_BUILD_CONFIG
+    if (name === 'customRouterConfig' && option === CONFIG_OPTIONS.custom) value = deployment[name] || SAMPLE_ROUTER_CONFIG
+
+    // If no option, clear everything
+    if (!option) {
+      updateDeployment(deployment, {[name + 'Url']: null, [name]: null})
+    }
+
+    // If custom content, clear URL
+    if (option === CONFIG_OPTIONS.custom) {
+      updateDeployment(deployment, {[name + 'Url']: null, [name]: value})
+    }
+
+    // If custom URL, clear content
+    if (option === CONFIG_OPTIONS.url) {
+      updateDeployment(deployment, {[name + 'Url']: value})
+    }
+  }
+
+  _onChangeConfig = (evt: SyntheticInputEvent<HTMLInputElement>, option?: string) => {
+    const name = this.getName(option)
+
+    this.setState({[name]: evt.target.value})
+  }
+
+  _onSaveConfig = (option?: string) => {
+    const {deployment, updateDeployment} = this.props
+    const name = this.getName(option)
+
     const value = this.state[name]
-    if (!isValidJSONC(value)) return window.alert('Must provide valid JSON string.')
+    if (option === CONFIG_OPTIONS.custom && !isValidJSONC(value)) return window.alert('Must provide valid JSON string.')
+    else if (option === CONFIG_OPTIONS.url && !validator.isURL(value)) return window.alert('Must provide valid URL string.')
     else {
       updateDeployment(deployment, {[name]: value})
       this.setState({[name]: undefined})
@@ -65,39 +96,48 @@ export default class CustomConfig extends Component<{
   render () {
     const {deployment, name, label} = this.props
     const useCustom = deployment[name] !== null
+    const useCustomUrl = deployment[name + 'Url'] !== null
     const value = this.state[name] || deployment[name]
+    const urlValue = this.state[name + 'Url'] || deployment[name + 'Url']
     const validJSON = isValidJSONC(value)
+    const validURL = !!urlValue && validator.isURL(urlValue)
     return (
       <div>
         <h5>{label} configuration</h5>
         <FormGroup>
           <Radio
-            checked={!useCustom}
+            checked={!useCustom && !useCustomUrl}
             name={name}
-            onChange={this._toggleCustomConfig}
+            onChange={(e) => this._toggleCustomConfig(e)}
             inline>
             Project default
           </Radio>
           <Radio
-            checked={useCustom}
+            checked={useCustom && !useCustomUrl}
             name={name}
-            onChange={this._toggleCustomConfig}
+            onChange={e => this._toggleCustomConfig(e, CONFIG_OPTIONS.custom)}
             inline>
             Custom
           </Radio>
+          <Radio
+            checked={useCustomUrl}
+            name={name}
+            onChange={e => this._toggleCustomConfig(e, CONFIG_OPTIONS.url)}
+            inline>
+            URL
+          </Radio>
         </FormGroup>
         <p>
-          {useCustom
-            ? `Use custom JSON defined below for ${label} configuration.`
-            : `Use the ${label} configuration defined in the project deployment settings.`
-          }
+          {useCustom && `Use custom JSON defined below for ${label} configuration.`}
+          {useCustomUrl && `Download ${label} configuration from URL defined below.`}
+          {!useCustom && !useCustomUrl && `Use the ${label} configuration defined in the project deployment settings.`}
           <span>{' '}
-            {useCustom
+            {useCustom || useCustomUrl
               ? <Button
                 style={{marginLeft: '15px'}}
                 bsSize='xsmall'
-                disabled={!this.state[name] || !validJSON}
-                onClick={this._onSaveConfig}>Save</Button>
+                disabled={!this.state[useCustomUrl ? name + 'Url' : name] || (useCustomUrl ? !validURL : !validJSON)}
+                onClick={() => this._onSaveConfig(useCustomUrl ? CONFIG_OPTIONS.url : CONFIG_OPTIONS.custom)}>Save</Button>
               : <LinkContainer
                 to={`/project/${deployment.projectId}/settings/deployment`}>
                 <Button bsSize='xsmall'>
@@ -107,17 +147,27 @@ export default class CustomConfig extends Component<{
             }
           </span>
         </p>
-        {useCustom &&
+        {useCustom && !useCustomUrl &&
           <FormGroup validationState={validJSON ? null : 'error'}>
             <FormControl
               componentClass='textarea'
               style={{height: '125px'}}
               placeholder='{"blah": true}'
-              onChange={this._onChangeConfig}
+              onChange={e => this._onChangeConfig(e, CONFIG_OPTIONS.custom)}
               value={value} />
             {!validJSON && <HelpBlock>Must provide valid JSON string.</HelpBlock>}
           </FormGroup>
         }
+        {useCustomUrl &&
+          <FormGroup validationState={validURL ? null : 'error'}>
+            <FormControl
+              componentClass='input'
+              placeholder='http://example.com'
+              onChange={e => this._onChangeConfig(e, CONFIG_OPTIONS.url)}
+              value={urlValue} />
+            {!validURL && <HelpBlock>Must provide valid URL.</HelpBlock>}
+          </FormGroup>
+        }
       </div>
     )
   }