From d4f136c986a8d9a21d38de361789aca98252953f Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 3 May 2018 16:15:39 -0700
Subject: [PATCH] Update RedactedInput and AlertConfigs to redact necesary
 fields afterwhen submitting form

---
 ui/src/kapacitor/components/config/AlertaConfig.tsx   |  2 ++
 ui/src/kapacitor/components/config/HipChatConfig.tsx  |  2 ++
 ui/src/kapacitor/components/config/OpsGenieConfig.tsx |  2 ++
 .../kapacitor/components/config/PagerDutyConfig.tsx   |  3 +++
 ui/src/kapacitor/components/config/PushoverConfig.tsx |  3 +++
 ui/src/kapacitor/components/config/RedactedInput.tsx  | 11 +++++++++--
 ui/src/kapacitor/components/config/SlackConfig.tsx    |  2 ++
 ui/src/kapacitor/components/config/TalkConfig.tsx     |  2 ++
 ui/src/kapacitor/components/config/TelegramConfig.tsx |  2 ++
 .../kapacitor/components/config/VictorOpsConfig.tsx   |  2 ++
 10 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/ui/src/kapacitor/components/config/AlertaConfig.tsx b/ui/src/kapacitor/components/config/AlertaConfig.tsx
index 1bbcc57b8b..a1faa2e04d 100644
--- a/ui/src/kapacitor/components/config/AlertaConfig.tsx
+++ b/ui/src/kapacitor/components/config/AlertaConfig.tsx
@@ -46,6 +46,7 @@ class AlertaConfig extends PureComponent<Props, State> {
 
   public render() {
     const {environment, origin, token, url} = this.props.config.options
+    const {testEnabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -80,6 +81,7 @@ class AlertaConfig extends PureComponent<Props, State> {
             id="token"
             refFunc={this.handleTokenRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>
 
diff --git a/ui/src/kapacitor/components/config/HipChatConfig.tsx b/ui/src/kapacitor/components/config/HipChatConfig.tsx
index 26875496cd..27d1499d34 100644
--- a/ui/src/kapacitor/components/config/HipChatConfig.tsx
+++ b/ui/src/kapacitor/components/config/HipChatConfig.tsx
@@ -46,6 +46,7 @@ class HipchatConfig extends PureComponent<Props, State> {
   public render() {
     const {options} = this.props.config
     const {url, room, token} = options
+    const {testEnabled} = this.state
 
     const subdomain = url
       .replace('https://', '')
@@ -89,6 +90,7 @@ class HipchatConfig extends PureComponent<Props, State> {
             id="token"
             refFunc={this.handleTokenRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>
 
diff --git a/ui/src/kapacitor/components/config/OpsGenieConfig.tsx b/ui/src/kapacitor/components/config/OpsGenieConfig.tsx
index 81220edbc6..3f09e42f5b 100644
--- a/ui/src/kapacitor/components/config/OpsGenieConfig.tsx
+++ b/ui/src/kapacitor/components/config/OpsGenieConfig.tsx
@@ -54,6 +54,7 @@ class OpsGenieConfig extends PureComponent<Props, State> {
   public render() {
     const {options} = this.props.config
     const apiKey = options['api-key']
+    const {testEnabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -64,6 +65,7 @@ class OpsGenieConfig extends PureComponent<Props, State> {
             id="api-key"
             refFunc={this.handleApiKeyRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>
 
diff --git a/ui/src/kapacitor/components/config/PagerDutyConfig.tsx b/ui/src/kapacitor/components/config/PagerDutyConfig.tsx
index 576a700a6b..7def068017 100644
--- a/ui/src/kapacitor/components/config/PagerDutyConfig.tsx
+++ b/ui/src/kapacitor/components/config/PagerDutyConfig.tsx
@@ -41,6 +41,8 @@ class PagerDutyConfig extends PureComponent<Props, State> {
     const {options} = this.props.config
     const {url} = options
     const serviceKey = options['service-key']
+    const {testEnabled} = this.state
+
     return (
       <form onSubmit={this.handleSubmit}>
         <div className="form-group col-xs-12">
@@ -50,6 +52,7 @@ class PagerDutyConfig extends PureComponent<Props, State> {
             id="service-key"
             refFunc={this.handleServiceKeyRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>
 
diff --git a/ui/src/kapacitor/components/config/PushoverConfig.tsx b/ui/src/kapacitor/components/config/PushoverConfig.tsx
index 91301df25d..2ad9656a68 100644
--- a/ui/src/kapacitor/components/config/PushoverConfig.tsx
+++ b/ui/src/kapacitor/components/config/PushoverConfig.tsx
@@ -48,6 +48,7 @@ class PushoverConfig extends PureComponent<Props, State> {
     const {options} = this.props.config
     const {token, url} = options
     const userKey = options['user-key']
+    const {testEnabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -64,6 +65,7 @@ class PushoverConfig extends PureComponent<Props, State> {
             id="user-key"
             refFunc={this.handleUserKeyRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>
 
@@ -80,6 +82,7 @@ class PushoverConfig extends PureComponent<Props, State> {
             id="token"
             refFunc={this.handleTokenRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>
 
diff --git a/ui/src/kapacitor/components/config/RedactedInput.tsx b/ui/src/kapacitor/components/config/RedactedInput.tsx
index f61bb41790..7b1b3b430e 100644
--- a/ui/src/kapacitor/components/config/RedactedInput.tsx
+++ b/ui/src/kapacitor/components/config/RedactedInput.tsx
@@ -6,6 +6,7 @@ interface Props {
   defaultValue?: boolean
   refFunc: (r: any) => void
   disableTest?: () => void
+  isFormEditing: boolean
 }
 
 interface State {
@@ -21,6 +22,12 @@ class RedactedInput extends PureComponent<Props, State> {
     }
   }
 
+  public componentWillReceiveProps(nextProps) {
+    if (!nextProps.isFormEditing) {
+      this.setState({editing: false})
+    }
+  }
+
   public render() {
     const {defaultValue, id, refFunc, disableTest} = this.props
     const {editing} = this.state
@@ -31,9 +38,9 @@ class RedactedInput extends PureComponent<Props, State> {
           <span className="alert-value-set">
             <span className="icon checkmark" /> Value set
           </span>
-          <button className="btn btn-xs btn-link" onClick={this.handleClick}>
+          <div className="btn btn-xs btn-link" onClick={this.handleClick}>
             Change
-          </button>
+          </div>
           <input
             className="form-control"
             id={id}
diff --git a/ui/src/kapacitor/components/config/SlackConfig.tsx b/ui/src/kapacitor/components/config/SlackConfig.tsx
index 212a1fa377..2bbd6510b1 100644
--- a/ui/src/kapacitor/components/config/SlackConfig.tsx
+++ b/ui/src/kapacitor/components/config/SlackConfig.tsx
@@ -39,6 +39,7 @@ class SlackConfig extends PureComponent<Props, State> {
 
   public render() {
     const {url, channel} = this.props.config.options
+    const {testEnabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -55,6 +56,7 @@ class SlackConfig extends PureComponent<Props, State> {
             id="url"
             refFunc={this.handleUrlRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>
 
diff --git a/ui/src/kapacitor/components/config/TalkConfig.tsx b/ui/src/kapacitor/components/config/TalkConfig.tsx
index 0d4345a64c..c37838dd20 100644
--- a/ui/src/kapacitor/components/config/TalkConfig.tsx
+++ b/ui/src/kapacitor/components/config/TalkConfig.tsx
@@ -40,6 +40,7 @@ class TalkConfig extends PureComponent<Props, State> {
 
   public render() {
     const {url, author_name: author} = this.props.config.options
+    const {testEnabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -50,6 +51,7 @@ class TalkConfig extends PureComponent<Props, State> {
             id="url"
             refFunc={this.handleUrlRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>
 
diff --git a/ui/src/kapacitor/components/config/TelegramConfig.tsx b/ui/src/kapacitor/components/config/TelegramConfig.tsx
index 626a8abffb..cc9bddc0d9 100644
--- a/ui/src/kapacitor/components/config/TelegramConfig.tsx
+++ b/ui/src/kapacitor/components/config/TelegramConfig.tsx
@@ -57,6 +57,7 @@ class TelegramConfig extends PureComponent<Props, State> {
     const disableNotification = options['disable-notification']
     const disableWebPagePreview = options['disable-web-page-preview']
     const parseMode = options['parse-mode']
+    const {testEnabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -88,6 +89,7 @@ class TelegramConfig extends PureComponent<Props, State> {
             id="token"
             refFunc={this.handleTokenRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>
 
diff --git a/ui/src/kapacitor/components/config/VictorOpsConfig.tsx b/ui/src/kapacitor/components/config/VictorOpsConfig.tsx
index 477301073e..9939174728 100644
--- a/ui/src/kapacitor/components/config/VictorOpsConfig.tsx
+++ b/ui/src/kapacitor/components/config/VictorOpsConfig.tsx
@@ -46,6 +46,7 @@ class VictorOpsConfig extends PureComponent<Props, State> {
     const apiKey = options['api-key']
     const routingKey = options['routing-key']
     const {url} = options
+    const {testEnabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -56,6 +57,7 @@ class VictorOpsConfig extends PureComponent<Props, State> {
             id="api-key"
             refFunc={this.handleApiRef}
             disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
           />
         </div>