From cf7d4826524a8a7963286b653d952e8faf0560bb Mon Sep 17 00:00:00 2001
From: Gopal Ojha <gopal.ojha.1989@gmail.com>
Date: Tue, 29 Jan 2019 21:26:57 +0530
Subject: [PATCH] add note for env var usage in webhook, remote schema urls
 (fix #970) (#1384)

---
 .../Services/CustomResolver/Common/Common.js  |  12 +-
 .../Services/EventTrigger/Add/AddTrigger.js   | 109 ++++++++++--------
 2 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/console/src/components/Services/CustomResolver/Common/Common.js b/console/src/components/Services/CustomResolver/Common/Common.js
index dc15638c19d..05e9b61268d 100644
--- a/console/src/components/Services/CustomResolver/Common/Common.js
+++ b/console/src/components/Services/CustomResolver/Common/Common.js
@@ -85,13 +85,19 @@ class Common extends React.Component {
           />
         </label>
         <hr />
-        <div className={styles.subheading_text}>
+        <h4 className={styles.subheading_text}>
           GraphQL server URL *
           <OverlayTrigger placement="right" overlay={graphqlurl}>
             <i className="fa fa-question-circle" aria-hidden="true" />
           </OverlayTrigger>
-        </div>
-        <div className={styles.addPaddCommom + ' ' + styles.wd_300}>
+          <br />
+          <br />
+          <small>
+            Note: Specifying the server URL via an environmental variable is
+            recommended if you have different URLs for multiple environments.
+          </small>
+        </h4>
+        <div className={styles.wd_300}>
           <DropdownButton
             dropdownOptions={[
               { display_text: 'URL', value: 'manualUrl' },
diff --git a/console/src/components/Services/EventTrigger/Add/AddTrigger.js b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
index 4c3472806ea..2231918f17d 100644
--- a/console/src/components/Services/EventTrigger/Add/AddTrigger.js
+++ b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
@@ -21,7 +21,7 @@ import {
   operationToggleAllColumns,
   setOperationSelection,
   setDefaults,
-  UPDATE_WEBHOOK_URL_TYPE,
+  UPDATE_WEBHOOK_URL_TYPE
 } from './AddActions';
 import { listDuplicate } from '../../../../utils/data';
 import { showErrorNotification } from '../Notification';
@@ -39,7 +39,7 @@ class AddTrigger extends Component {
     this.state = {
       advancedExpanded: false,
       supportColumnChangeFeature: false,
-      supportWebhookEnv: false,
+      supportWebhookEnv: false
     };
   }
   componentDidMount() {
@@ -89,7 +89,7 @@ class AddTrigger extends Component {
 
   updateSupportColumnChangeFeature(val) {
     this.setState({
-      supportColumnChangeFeature: val,
+      supportColumnChangeFeature: val
     });
   }
 
@@ -173,7 +173,7 @@ class AddTrigger extends Component {
     } else {
       this.props.dispatch(
         showErrorNotification('Error creating trigger!', errorMsg, '', {
-          custom: customMsg,
+          custom: customMsg
         })
       );
     }
@@ -196,7 +196,7 @@ class AddTrigger extends Component {
       internalError,
       headers,
       webhookURL,
-      webhookUrlType,
+      webhookUrlType
     } = this.props;
 
     const { supportColumnChangeFeature } = this.state;
@@ -302,7 +302,7 @@ class AddTrigger extends Component {
               className={styles.display_inline + ' ' + styles.add_mar_right}
               style={{
                 marginTop: '10px',
-                marginBottom: '10px',
+                marginBottom: '10px'
               }}
             >
               Applicable to update operation only.
@@ -401,7 +401,7 @@ class AddTrigger extends Component {
             <DropdownButton
               dropdownOptions={[
                 { display_text: 'Value', value: 'static' },
-                { display_text: 'From env var', value: 'env' },
+                { display_text: 'From env var', value: 'env' }
               ]}
               title={
                 (header.type === 'static' && 'Value') ||
@@ -604,51 +604,60 @@ class AddTrigger extends Component {
                   >
                     <i className="fa fa-question-circle" aria-hidden="true" />
                   </OverlayTrigger>{' '}
+                  <br />
+                  <br />
+                  <small>
+                    Note: Specifying the webhook URL via an environmental
+                    variable is recommended if you have different URLs for
+                    multiple environments.
+                  </small>
                 </h4>
-                {this.state.supportWebhookEnv ? (
-                  <div className={styles.dropdown_wrapper}>
-                    <DropdownButton
-                      dropdownOptions={[
-                        { display_text: 'URL', value: 'url' },
-                        { display_text: 'From env var', value: 'env' },
-                      ]}
-                      title={
-                        (webhookUrlType === 'url' && 'URL') ||
-                        (webhookUrlType === 'env' && 'From env var') ||
-                        'Value'
-                      }
-                      dataKey={
-                        (webhookUrlType === 'url' && 'url') ||
-                        (webhookUrlType === 'env' && 'env')
-                      }
-                      onButtonChange={this.updateWebhookUrlType.bind(this)}
-                      onInputChange={e => {
+                <div>
+                  {this.state.supportWebhookEnv ? (
+                    <div className={styles.dropdown_wrapper}>
+                      <DropdownButton
+                        dropdownOptions={[
+                          { display_text: 'URL', value: 'url' },
+                          { display_text: 'From env var', value: 'env' }
+                        ]}
+                        title={
+                          (webhookUrlType === 'url' && 'URL') ||
+                          (webhookUrlType === 'env' && 'From env var') ||
+                          'Value'
+                        }
+                        dataKey={
+                          (webhookUrlType === 'url' && 'url') ||
+                          (webhookUrlType === 'env' && 'env')
+                        }
+                        onButtonChange={this.updateWebhookUrlType.bind(this)}
+                        onInputChange={e => {
+                          dispatch(setWebhookURL(e.target.value));
+                        }}
+                        required
+                        bsClass={styles.dropdown_button}
+                        inputVal={webhookURL}
+                        id="webhook-url"
+                        inputPlaceHolder={
+                          (webhookUrlType === 'url' &&
+                            'http://httpbin.org/post') ||
+                          (webhookUrlType === 'env' && 'MY_WEBHOOK_URL')
+                        }
+                        testId="webhook"
+                      />
+                    </div>
+                  ) : (
+                    <input
+                      type="url"
+                      required
+                      data-test="webhook"
+                      placeholder="webhook url"
+                      className={`${styles.tableNameInput} form-control`}
+                      onChange={e => {
                         dispatch(setWebhookURL(e.target.value));
                       }}
-                      required
-                      bsClass={styles.dropdown_button}
-                      inputVal={webhookURL}
-                      id="webhook-url"
-                      inputPlaceHolder={
-                        (webhookUrlType === 'url' &&
-                          'http://httpbin.org/post') ||
-                        (webhookUrlType === 'env' && 'MY_WEBHOOK_URL')
-                      }
-                      testId="webhook"
                     />
-                  </div>
-                ) : (
-                  <input
-                    type="url"
-                    required
-                    data-test="webhook"
-                    placeholder="webhook url"
-                    className={`${styles.tableNameInput} form-control`}
-                    onChange={e => {
-                      dispatch(setWebhookURL(e.target.value));
-                    }}
-                  />
-                )}
+                  )}
+                </div>
               </div>
               <hr />
               <div
@@ -774,14 +783,14 @@ AddTrigger.propTypes = {
   lastError: PropTypes.object,
   internalError: PropTypes.string,
   lastSuccess: PropTypes.bool,
-  dispatch: PropTypes.func.isRequired,
+  dispatch: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => {
   return {
     ...state.addTrigger,
     schemaList: state.tables.schemaList,
-    serverVersion: state.main.serverVersion ? state.main.serverVersion : '',
+    serverVersion: state.main.serverVersion ? state.main.serverVersion : ''
   };
 };