add note for env var usage in webhook, remote schema urls (fix #970) (#1384)

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' },

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,13 +604,21 @@ 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>
+                <div>
                   {this.state.supportWebhookEnv ? (
                     <div className={styles.dropdown_wrapper}>
                       <DropdownButton
                         dropdownOptions={[
                           { display_text: 'URL', value: 'url' },
-                        { display_text: 'From env var', value: 'env' },
+                          { display_text: 'From env var', value: 'env' }
                         ]}
                         title={
                           (webhookUrlType === 'url' && 'URL') ||
@@ -650,6 +658,7 @@ class AddTrigger extends Component {
                     />
                   )}
                 </div>
+              </div>
               <hr />
               <div
                 onClick={this.toggleAdvanced.bind(this)}
@@ -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 : ''
   };
 };