Update SlackConfig to disable nickname if its a new config

ui/src/kapacitor/components/config/SlackConfig.tsx

@@ -47,7 +47,12 @@ class SlackConfig extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {url, channel, workspace} = this.props.config.options
+    const {
+      config: {
+        options: {url, channel, workspace},
+      },
+      isNewConfig,
+    } = this.props
     const {testEnabled, enabled} = this.state
     const workspaceID = workspace || 'default'
 
@@ -65,6 +70,7 @@ class SlackConfig extends PureComponent<Props, State> {
             ref={r => (this.workspace = r)}
             defaultValue={workspace || ''}
             onChange={this.disableTest}
+            disabled={!isNewConfig}
           />
         </div>
         <div className="form-group col-xs-12">

ui/src/kapacitor/components/config/SlackConfigs.tsx

@@ -7,12 +7,14 @@ import SlackConfig from 'src/kapacitor/components/config/SlackConfig'
 interface Properties {
   channel: string
   url: string
+  workspace?: string
 }
 
 interface Config {
   options: {
     url: boolean
     channel: string
+    workspace: string
   }
 }
 
@@ -40,19 +42,28 @@ class SlackConfigs extends PureComponent<Props, State> {
   public render() {
     const {slackConfigs} = this.state
     const {onSave, onTest, enabled} = this.props
+    const configNums = slackConfigs.length
 
     return (
       <div>
-        {slackConfigs.map(config => (
-          <SlackConfig
-            key={_.get(config, ['options', 'workspace'], 'default')}
-            onSave={onSave}
-            config={config}
-            onTest={onTest}
-            enabled={enabled}
-            isNewConfig={_.get(config, 'isNewConfig', false)}
-          />
-        ))}
+        {slackConfigs.map(config => {
+          const key = _.get(config, ['options', 'workspace'], 'default')
+          const configEnabled = _.get(config, ['options', 'enabled'], false)
+          const isFirstConfigNew = configNums === 1 && !configEnabled
+          const isNewConfig =
+            isFirstConfigNew || _.get(config, 'isNewConfig', false)
+
+          return (
+            <SlackConfig
+              key={key}
+              onSave={onSave}
+              config={config}
+              onTest={onTest}
+              enabled={enabled}
+              isNewConfig={isNewConfig}
+            />
+          )
+        })}
         <button className="btn btn-md btn-default" onClick={this.addConfig}>
           <span className="icon plus" /> Add Another Config
         </button>