Add ability to create new slack node

ui/src/kapacitor/components/AlertTabs.tsx

@@ -233,7 +233,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <KafkaConfig
             onSave={this.handleSaveConfig('kafka')}
-            config={this.getSection(configSections, 'kafka')}
+            config={this.getSectionElement(configSections, 'kafka')}
             onTest={this.handleTestConfig('kafka', {
               cluster: this.getProperty(configSections, 'kafka', 'id'),
             })}
@@ -327,18 +327,6 @@ class AlertTabs extends PureComponent<Props, State> {
           />
         ),
       },
-      // slack: {
-      //   type: 'Slack',
-      //   enabled: this.getEnabled(configSections, 'slack'),
-      //   renderComponent: () => (
-      //     <SlackConfig
-      //       onSave={this.handleSaveConfig('slack')}
-      //       config={this.getSectionElement(configSections, 'slack')}
-      //       onTest={this.handleTestConfig('slack')}
-      //       enabled={this.getEnabled(configSections, 'slack')}
-      //     />
-      //   ),
-      // },
       smtp: {
         type: 'SMTP',
         enabled: this.getEnabled(configSections, 'smtp'),
@@ -491,16 +479,25 @@ class AlertTabs extends PureComponent<Props, State> {
   }
 
   private handleSaveConfig = (section: string) => async (
-    properties
+    properties,
+    isNewConfigInSection?: boolean
   ): Promise<boolean> => {
     if (section !== '') {
       const propsToSend = this.sanitizeProperties(section, properties)
       try {
-        await updateKapacitorConfigSection(
+        if (isNewConfigInSection) {
-          this.props.kapacitor,
+          await addKapacitorConfigInSection(
-          section,
+            this.props.kapacitor,
-          propsToSend
+            section,
-        )
+            propsToSend
+          )
+        } else {
+          await updateKapacitorConfigSection(
+            this.props.kapacitor,
+            section,
+            propsToSend
+          )
+        }
         this.refreshKapacitorConfig(this.props.kapacitor)
         this.props.notify(notifyAlertEndpointSaved(section))
         return true

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

@@ -19,9 +19,10 @@ interface Config {
 
 interface Props {
   config: Config
-  onSave: (properties: Properties) => void
+  onSave: (properties: Properties, isNewConfigInSection: boolean) => void
   onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
   enabled: boolean
+  isNewConfig: boolean
 }
 
 interface State {
@@ -33,6 +34,7 @@ interface State {
 class SlackConfig extends PureComponent<Props, State> {
   private url: HTMLInputElement
   private channel: HTMLInputElement
+  private workspace: HTMLInputElement
 
   constructor(props) {
     super(props)
@@ -55,7 +57,7 @@ class SlackConfig extends PureComponent<Props, State> {
             id="nickname"
             type="text"
             placeholder="Optional unless multiple Slack configurations exist"
-            // ref={r => (this.channel = r)}
+            ref={r => (this.workspace = r)}
             defaultValue={workspace}
             onChange={this.disableTest}
           />
@@ -132,13 +134,15 @@ class SlackConfig extends PureComponent<Props, State> {
   }
 
   private handleSubmit = async e => {
+    const {isNewConfig} = this.props
     e.preventDefault()
     const properties = {
       url: this.url.value,
       channel: this.channel.value,
       enabled: this.state.enabled,
+      workspace: this.workspace.value,
     }
-    const success = await this.props.onSave(properties)
+    const success = await this.props.onSave(properties, isNewConfig)
     if (success) {
       this.setState({testEnabled: true})
     }

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

@@ -1,4 +1,6 @@
 import React, {PureComponent} from 'react'
+import _ from 'lodash'
+
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import SlackConfig from 'src/kapacitor/components/config/SlackConfig'
 
@@ -17,7 +19,7 @@ interface Config {
 interface Props {
   slackConfigs: any[]
   config: Config
-  onSave: (properties: Properties) => void
+  onSave: (properties: Properties, isNewConfigInSection: boolean) => void
   onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
   enabled: boolean
 }
@@ -47,6 +49,7 @@ class SlackConfigs extends PureComponent<Props, State> {
             config={config}
             onTest={onTest}
             enabled={enabled}
+            isNewConfig={_.get(config, 'isNewConfig', false)}
           />
         ))}
         <button className="btn btn-md btn-default" onClick={this.addConfig}>
@@ -67,6 +70,7 @@ class SlackConfigs extends PureComponent<Props, State> {
         url: false,
         channel: '',
       },
+      isNewConfig: true,
     }
     this.setState({slackConfigs: [...configs, newConfig]})
   }