From f7754fc5ddd4ebedbc8815091a9082757a44d266 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 15 May 2018 16:37:03 -0700
Subject: [PATCH] Fix bug where new alert causes type error

---
 ui/src/kapacitor/components/RuleHandlers.tsx | 26 +++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/ui/src/kapacitor/components/RuleHandlers.tsx b/ui/src/kapacitor/components/RuleHandlers.tsx
index 21ab0d7405..aa4b78ed3e 100644
--- a/ui/src/kapacitor/components/RuleHandlers.tsx
+++ b/ui/src/kapacitor/components/RuleHandlers.tsx
@@ -117,9 +117,9 @@ class RuleHandlers extends PureComponent<Props, State> {
       ? 'rule-section--row rule-section--row-first rule-section--border-bottom'
       : 'rule-section--row rule-section--row-first rule-section--row-last'
 
-    const selectedHandlerWithText: HandlerWithText = this.mapWithNicknames([
-      selectedHandler,
-    ])[0]
+    const selectedHandlerWithText: HandlerWithText = this.addNicknameText(
+      selectedHandler
+    )
 
     return (
       <div className="rule-section">
@@ -261,7 +261,7 @@ class RuleHandlers extends PureComponent<Props, State> {
   }
 
   private getNickname = (handler: Handler): string => {
-    const configType: AlertTypes = handler.type
+    const configType: AlertTypes = _.get(handler, 'type')
     if (configType === 'slack') {
       const workspace: string = _.get<Handler, string>(handler, 'workspace')
 
@@ -275,14 +275,22 @@ class RuleHandlers extends PureComponent<Props, State> {
     return undefined
   }
 
-  private mapWithNicknames = (handlers: Handler[]): HandlerWithText[] => {
-    return _.map(handlers, h => {
-      const nickname: string = this.getNickname(h)
+  private addNicknameText = (handler: Handler): HandlerWithText => {
+    if (handler) {
+      const nickname: string = this.getNickname(handler)
       if (nickname) {
-        return {...h, text: `${h.type} (${nickname})`}
+        return {...handler, text: `${handler.type} (${nickname})`}
       }
 
-      return {...h, text: h.type}
+      return {...handler, text: handler.type}
+    }
+
+    return null
+  }
+
+  private mapWithNicknames = (handlers: Handler[]): HandlerWithText[] => {
+    return _.map(handlers, h => {
+      return this.addNicknameText(h)
     })
   }
 }