console: fix checkbox for forwarding client headers in actions (close #4595) (#4669)

CHANGELOG.md

@@ -16,6 +16,7 @@ RETURNS boolean AS $$
   );
 $$ LANGUAGE sql STABLE;
 ```
+
 and make a query like:
 
 ```
@@ -25,7 +26,7 @@ query {
     content
     likedByMe
   }
-}     
+}
 ```
 
 Support for this is now added through the `add_computed_field` API.
@@ -39,6 +40,7 @@ Read more about the session argument for computed fields in the [docs](https://h
 - console: avoid count queries for large tables (#4692)
 - console: add read replica support section to pro popup (#4118)
 - console: allow modifying default value for PK (fix #4075) (#4679)
+- console: fix checkbox for forwarding client headers in actions (#4595)
 - cli: list all avialable commands in root command help (fix #4623)
 - docs: add section on actions vs. remote schemas to actions documentation (#4284)
 - docs: fix wrong info about excluding scheme in CORS config
@@ -107,6 +109,7 @@ The `internal` field for action errors is improved with more debug information.
 `response` and `error` fields instead of just `webhook_response` field.
 
 Before:
+
 ```json
 {
   "errors": [
@@ -127,7 +130,9 @@ Before:
   ]
 }
 ```
+
 After:
+
 ```json
 {
   "errors": [
@@ -191,6 +196,7 @@ ENV vars can now be read from .env file present at the project root directory. A
 ```
 hasura console --envfile production.env
 ```
+
 The above command will read ENV vars from `production.env` file present at the project root directory.
 
 (close #4129) (#4454)

console/src/components/Services/Actions/Add/Add.js

@@ -63,8 +63,7 @@ const AddAction = ({
     dispatch(dispatchNewHeaders(hs));
   };
 
-  const toggleForwardClientHeaders = e => {
+  const toggleForwardClientHeaders = () => {
-    e.preventDefault();
     dispatch(toggleFCH());
   };
 

console/src/components/Services/Actions/Common/components/HeaderConfEditor.js

@@ -32,15 +32,12 @@ const HandlerEditor = ({
         />
       </h2>
       <div className={`${styles.add_mar_bottom_mid}`}>
-        <label
+        <label className={`${styles.add_mar_right} ${styles.cursorPointer}`}>
-          className={`${styles.add_mar_right} ${styles.cursorPointer}`}
-          onClick={toggleForwardClientHeaders}
-        >
           <input
             type="checkbox"
             checked={forwardClientHeaders}
-            readOnly
+            onChange={toggleForwardClientHeaders}
-            className={`${styles.add_mar_right_small}`}
+            className={`${styles.add_mar_right_small} ${styles.cursorPointer}`}
           />
           Forward client headers to webhook
         </label>

console/src/components/Services/Actions/Modify/ActionEditor.js

@@ -74,8 +74,7 @@ const ActionEditor = ({
     dispatch(dispatchNewHeaders(hs));
   };
 
-  const toggleForwardClientHeaders = e => {
+  const toggleForwardClientHeaders = () => {
-    e.preventDefault();
     dispatch(toggleFCH());
   };