From 4147836a8e37fc692f91d42f1ab754835169a3a0 Mon Sep 17 00:00:00 2001
From: Karthik Venkateswaran <karthik@hasura.io>
Date: Fri, 26 Oct 2018 18:02:37 +0530
Subject: [PATCH 1/2] Removes insert/update from advanced settings, changes
 advanced settings header

---
 .../Services/EventTrigger/Add/AddTrigger.js   | 74 ++++---------------
 .../Services/EventTrigger/Add/Tooltips.js     |  3 +-
 2 files changed, 18 insertions(+), 59 deletions(-)

diff --git a/console/src/components/Services/EventTrigger/Add/AddTrigger.js b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
index 75dc32cb7e3a0..355cf9e54f9be 100644
--- a/console/src/components/Services/EventTrigger/Add/AddTrigger.js
+++ b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
@@ -394,7 +394,7 @@ class AddTrigger extends Component {
                   {tableName ? (
                     <div>
                       <h4 className={styles.subheading_text}>
-                        Advanced - Operation/Columns &nbsp; &nbsp;
+                        Listen columns for update &nbsp; &nbsp;
                         <OverlayTrigger
                           placement="right"
                           overlay={tooltip.advancedOperationDescription}
@@ -405,65 +405,23 @@ class AddTrigger extends Component {
                           />
                         </OverlayTrigger>{' '}
                       </h4>
-                      <div>
+                      {selectedOperations.update ? (
+                        <div>{getColumnList('update')}</div>
+                      ) : (
                         <div>
-                          <label>
-                            <input
-                              onChange={handleOperationSelection}
-                              className={
-                                styles.display_inline +
-                                ' ' +
-                                styles.add_mar_right
-                              }
-                              type="checkbox"
-                              value="insert"
-                              checked={selectedOperations.insert}
-                            />
-                            Insert
-                          </label>
+                          <div
+                            className={
+                              styles.display_inline + ' ' + styles.add_mar_right
+                            }
+                            style={{
+                              marginTop: '10px',
+                              marginBottom: '10px',
+                            }}
+                          >
+                            Applicable to update operation only.
+                          </div>
                         </div>
-                        {getColumnList('insert')}
-                      </div>
-                      <hr />
-                      <div>
-                        <div>
-                          <label>
-                            <input
-                              onChange={handleOperationSelection}
-                              className={
-                                styles.display_inline +
-                                ' ' +
-                                styles.add_mar_right
-                              }
-                              type="checkbox"
-                              value="update"
-                              checked={selectedOperations.update}
-                            />
-                            Update
-                          </label>
-                        </div>
-                        {getColumnList('update')}
-                      </div>
-                      <hr />
-                      <div>
-                        <div>
-                          <label>
-                            <input
-                              onChange={handleOperationSelection}
-                              className={
-                                styles.display_inline +
-                                ' ' +
-                                styles.add_mar_right
-                              }
-                              type="checkbox"
-                              value="delete"
-                              checked={selectedOperations.delete}
-                            />
-                            Delete
-                          </label>
-                        </div>
-                        {getColumnList('delete')}
-                      </div>
+                      )}
                     </div>
                   ) : null}
                   <div
diff --git a/console/src/components/Services/EventTrigger/Add/Tooltips.js b/console/src/components/Services/EventTrigger/Add/Tooltips.js
index 934bc4855c361..7b5688be53932 100644
--- a/console/src/components/Services/EventTrigger/Add/Tooltips.js
+++ b/console/src/components/Services/EventTrigger/Add/Tooltips.js
@@ -21,7 +21,8 @@ export const webhookUrlDescription = (
 
 export const advancedOperationDescription = (
   <Tooltip id="tooltip-advanced-operation-description">
-    Columns to be sent in the payload of webhook
+    For update triggers, webhook will be triggered only when selected columns
+    are modified
   </Tooltip>
 );
 

From 557545cece587f8f815a1008aeec98af2ddb13b4 Mon Sep 17 00:00:00 2001
From: Karthik Venkateswaran <karthik@hasura.io>
Date: Fri, 26 Oct 2018 19:15:23 +0530
Subject: [PATCH 2/2] Add version check to show columns update change on event
 trigger creation page

---
 .../Services/EventTrigger/Add/AddTrigger.js   | 165 ++++++++++++++----
 console/src/helpers/semver.js                 |   1 +
 2 files changed, 132 insertions(+), 34 deletions(-)

diff --git a/console/src/components/Services/EventTrigger/Add/AddTrigger.js b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
index 355cf9e54f9be..441ca2a96670e 100644
--- a/console/src/components/Services/EventTrigger/Add/AddTrigger.js
+++ b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
@@ -20,21 +20,58 @@ import { showErrorNotification } from '../Notification';
 import { createTrigger } from './AddActions';
 import { fetchTableListBySchema } from './AddActions';
 
+import semverCheck from '../../../../helpers/semver';
+
 class AddTrigger extends Component {
   constructor(props) {
     super(props);
     this.props.dispatch(fetchTableListBySchema('public'));
-    this.state = { advancedExpanded: false };
+    this.state = {
+      advancedExpanded: false,
+      supportColumnChangeFeature: false,
+    };
   }
   componentDidMount() {
     // set defaults
     this.props.dispatch(setDefaults());
+    if (this.props.serverVersion) {
+      this.checkSemVer(this.props.serverVersion);
+    }
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.serverVersion !== this.props.serverVersion) {
+      this.checkSemVer(nextProps.serverVersion);
+    }
   }
   componentWillUnmount() {
     // set defaults
     this.props.dispatch(setDefaults());
   }
 
+  checkSemVer(version) {
+    try {
+      const supportColumnChangeFeature = semverCheck(
+        'supportColumnChangeTrigger',
+        version
+      );
+      if (supportColumnChangeFeature) {
+        this.updateSupportColumnChangeFeature(true);
+      } else {
+        this.updateSupportColumnChangeFeature(false);
+      }
+    } catch (e) {
+      this.updateSupportColumnChangeFeature(false);
+      console.error(e);
+    }
+  }
+
+  updateSupportColumnChangeFeature(val) {
+    this.setState({
+      ...this.state,
+      supportColumnChangeFeature: val,
+    });
+  }
+
   submitValidation(e) {
     // validations
     e.preventDefault();
@@ -108,6 +145,9 @@ class AddTrigger extends Component {
       lastSuccess,
       internalError,
     } = this.props;
+
+    const { supportColumnChangeFeature } = this.state;
+
     const styles = require('../TableCommon/Table.scss');
     let createBtnText = 'Create';
     if (ongoingRequest) {
@@ -188,6 +228,94 @@ class AddTrigger extends Component {
       return null;
     };
 
+    const advancedColumnSection = supportColumnChangeFeature ? (
+      <div>
+        <h4 className={styles.subheading_text}>
+          Listen columns for update &nbsp; &nbsp;
+          <OverlayTrigger
+            placement="right"
+            overlay={tooltip.advancedOperationDescription}
+          >
+            <i className="fa fa-question-circle" aria-hidden="true" />
+          </OverlayTrigger>{' '}
+        </h4>
+        {selectedOperations.update ? (
+          <div>{getColumnList('update')}</div>
+        ) : (
+          <div>
+            <div
+              className={styles.display_inline + ' ' + styles.add_mar_right}
+              style={{
+                marginTop: '10px',
+                marginBottom: '10px',
+              }}
+            >
+              Applicable to update operation only.
+            </div>
+          </div>
+        )}
+      </div>
+    ) : (
+      <div>
+        <h4 className={styles.subheading_text}>
+          Advanced - Operation/Columns &nbsp; &nbsp;
+          <OverlayTrigger
+            placement="right"
+            overlay={tooltip.advancedOperationDescription}
+          >
+            <i className="fa fa-question-circle" aria-hidden="true" />
+          </OverlayTrigger>{' '}
+        </h4>
+        <div>
+          <div>
+            <label>
+              <input
+                onChange={handleOperationSelection}
+                className={styles.display_inline + ' ' + styles.add_mar_right}
+                type="checkbox"
+                value="insert"
+                checked={selectedOperations.insert}
+              />
+              Insert
+            </label>
+          </div>
+          {getColumnList('insert')}
+        </div>
+        <hr />
+        <div>
+          <div>
+            <label>
+              <input
+                onChange={handleOperationSelection}
+                className={styles.display_inline + ' ' + styles.add_mar_right}
+                type="checkbox"
+                value="update"
+                checked={selectedOperations.update}
+              />
+              Update
+            </label>
+          </div>
+          {getColumnList('update')}
+        </div>
+        <hr />
+        <div>
+          <div>
+            <label>
+              <input
+                onChange={handleOperationSelection}
+                className={styles.display_inline + ' ' + styles.add_mar_right}
+                type="checkbox"
+                value="delete"
+                checked={selectedOperations.delete}
+              />
+              Delete
+            </label>
+          </div>
+          {getColumnList('delete')}
+        </div>
+      </div>
+    );
+
     return (
       <div
         className={`${styles.addTablesBody} ${styles.main_wrapper} ${
@@ -391,39 +519,7 @@ class AddTrigger extends Component {
                     styles.add_mar_top
                   }
                 >
-                  {tableName ? (
-                    <div>
-                      <h4 className={styles.subheading_text}>
-                        Listen columns for update &nbsp; &nbsp;
-                        <OverlayTrigger
-                          placement="right"
-                          overlay={tooltip.advancedOperationDescription}
-                        >
-                          <i
-                            className="fa fa-question-circle"
-                            aria-hidden="true"
-                          />
-                        </OverlayTrigger>{' '}
-                      </h4>
-                      {selectedOperations.update ? (
-                        <div>{getColumnList('update')}</div>
-                      ) : (
-                        <div>
-                          <div
-                            className={
-                              styles.display_inline + ' ' + styles.add_mar_right
-                            }
-                            style={{
-                              marginTop: '10px',
-                              marginBottom: '10px',
-                            }}
-                          >
-                            Applicable to update operation only.
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  ) : null}
+                  {tableName ? advancedColumnSection : null}
                   <div
                     className={styles.add_mar_bottom + ' ' + styles.add_mar_top}
                   >
@@ -510,6 +606,7 @@ const mapStateToProps = state => {
   return {
     ...state.addTrigger,
     schemaList: state.tables.schemaList,
+    serverVersion: state.main.serverVersion ? state.main.serverVersion : '',
   };
 };
 
diff --git a/console/src/helpers/semver.js b/console/src/helpers/semver.js
index a9a490542a01c..851a0d1c5bc68 100644
--- a/console/src/helpers/semver.js
+++ b/console/src/helpers/semver.js
@@ -6,6 +6,7 @@ const componentsSemver = {
   eventRedeliver: '1.0.0-alpha17',
   sqlAnalyze: '1.0.0-alpha25',
   aggregationPerm: '1.0.0-alpha26',
+  supportColumnChangeTrigger: '1.0.0-alpha26',
 };
 
 const getPreRelease = version => {