Prevent the deletion of an unsaved new slack config from deleting the default slack config

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

@@ -20,9 +20,11 @@ interface Props {
     specificConfig: string
   ) => void
   onTest: (e: MouseEvent<HTMLButtonElement>, specificConfig: string) => void
-  onDelete: (specificConfig: string) => void
+  onDelete: (specificConfig: string, workspaceID: string) => void
   enabled: boolean
   isNewConfig: boolean
+  workspaceID: string
+  isDefaultConfig: boolean
 }
 
 interface State {
@@ -155,32 +157,11 @@ class SlackConfig extends PureComponent<Props, State> {
   }
 
   private get isDefaultConfig(): boolean {
-    const {
-      config: {
-        options: {workspace},
-      },
-      isNewConfig,
-    } = this.props
-    return workspace === '' && !isNewConfig
+    return this.props.isDefaultConfig
   }
 
   private get workspaceID(): string {
-    const {
-      config: {
-        options: {workspace},
-      },
-      isNewConfig,
-    } = this.props
-
-    if (this.isDefaultConfig) {
-      return 'default'
-    }
-
-    if (isNewConfig) {
-      return 'new'
-    }
-
-    return workspace
+    return this.props.workspaceID
   }
 
   private handleTest = (e: MouseEvent<HTMLButtonElement>) => {
@@ -221,7 +202,7 @@ class SlackConfig extends PureComponent<Props, State> {
 
   private handleDelete = async e => {
     e.preventDefault()
-    await this.props.onDelete(this.workspace.value)
+    await this.props.onDelete(this.workspace.value, this.workspaceID)
   }
 
   private disableTest = () => {

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

@@ -1,5 +1,5 @@
 import React, {PureComponent, MouseEvent} from 'react'
-import _ from 'lodash'
+import {get} from 'src/utils/wrappers'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import SlackConfig from 'src/kapacitor/components/config/SlackConfig'
@@ -44,14 +44,16 @@ class SlackConfigs extends PureComponent<Props, State> {
 
   public render() {
     const {configs} = this.state
-    const {onSave, onTest, onDelete, onEnabled} = this.props
+    const {onSave, onTest, onEnabled} = this.props
 
     return (
       <div>
         {configs.map(config => {
-          const workspace = _.get(config, ['options', 'workspace'], 'new')
-          const isNewConfig = _.get(config, 'isNewConfig', false)
+          const workspace = this.getWorkspace(config)
+          const isNewConfig = this.isNewConfig(config)
           const enabled = onEnabled(workspace)
+          const isDefaultConfig = this.isDefaultConfig(config)
+          const workspaceID = this.getWorkspaceID(config)
 
           return (
             <SlackConfig
@@ -59,9 +61,11 @@ class SlackConfigs extends PureComponent<Props, State> {
               onSave={onSave}
               config={config}
               onTest={onTest}
-              onDelete={onDelete}
+              onDelete={this.deleteConfig}
               enabled={enabled}
               isNewConfig={isNewConfig}
+              isDefaultConfig={isDefaultConfig}
+              workspaceID={workspaceID}
             />
           )
         })}
@@ -78,18 +82,56 @@ class SlackConfigs extends PureComponent<Props, State> {
     return this.state.configs
   }
 
+  private isNewConfig = (config: Config): boolean => {
+    return get(config, 'isNewConfig', false)
+  }
+
+  private isDefaultConfig = (config: Config): boolean => {
+    return this.getWorkspace(config) === '' && !this.isNewConfig(config)
+  }
+
+  private getWorkspace = (config: Config): string => {
+    return get(config, 'options.workspace', 'new')
+  }
+
+  private getWorkspaceID = (config: Config): string => {
+    if (this.isDefaultConfig(config)) {
+      return 'default'
+    }
+
+    if (this.isNewConfig(config)) {
+      return 'new'
+    }
+
+    return this.getWorkspace(config)
+  }
+
   private addConfig = () => {
     const configs = this.configs
     const newConfig = {
       options: {
         url: false,
         channel: '',
-        workspace: '',
+        workspace: null,
       },
       isNewConfig: true,
     }
     this.setState({configs: [...configs, newConfig]})
   }
+
+  private deleteConfig = (
+    specificConfig: string,
+    workspaceID: string
+  ): void => {
+    if (workspaceID === 'new') {
+      const configs = this.configs.filter(
+        c => this.getWorkspaceID(c) !== workspaceID
+      )
+      this.setState({configs})
+    } else {
+      this.props.onDelete(specificConfig)
+    }
+  }
 }
 
 export default SlackConfigs

ui/src/shared/apis/index.js

@@ -1,4 +1,5 @@
 import AJAX from 'utils/ajax'
+import {AlertTypes} from 'src/kapacitor/constants'
 
 export function getSources() {
   return AJAX({
@@ -232,7 +233,7 @@ export const testAlertOutput = async (
     const service = services.find(s => s.name === outputName)
 
     let body = options
-    if (outputName === 'slack') {
+    if (outputName === AlertTypes.slack) {
       body = {workspace: specificConfig}
     }