Bug 1621110 - Enable message editing for CFRs and Snippets on the general tab r=pdahiya

Differential Revision: https://phabricator.services.mozilla.com/D79916

browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.jsx

@@ -508,6 +508,7 @@ export class ASRouterAdminInner extends React.PureComponent {
       messageFilter: "all",
       WNMessages: [],
       collapsedMessages: [],
+      modifiedMessages: [],
       evaluationStatus: {},
       trailhead: {},
       stringTargetingParameters: null,
@@ -580,6 +581,23 @@ export class ASRouterAdminInner extends React.PureComponent {
     return () => ASRouterUtils.unblockById(msg.id);
   }
 
+  resetJSON(msg) {
+    // reset the displayed JSON for the given message
+    document.getElementById(`${msg.id}-textarea`).value = JSON.stringify(
+      msg,
+      null,
+      2
+    );
+    // remove the message from the list of modified IDs
+    let index = this.state.modifiedMessages.indexOf(msg.id);
+    this.setState(prevState => ({
+      modifiedMessages: [
+        ...prevState.modifiedMessages.slice(0, index),
+        ...prevState.modifiedMessages.slice(index + 1),
+      ],
+    }));
+  }
+
   handleOverride(id) {
     return () => ASRouterUtils.overrideMessage(id);
   }
@@ -788,6 +806,20 @@ export class ASRouterAdminInner extends React.PureComponent {
     }
   }
 
+  modifyJson(msg) {
+    ASRouterUtils.modifyMessageJson(
+      JSON.parse(document.getElementById(`${msg.id}-textarea`).value)
+    );
+  }
+
+  handleChange(msgId) {
+    if (!this.state.modifiedMessages.includes(msgId)) {
+      this.setState(prevState => ({
+        modifiedMessages: prevState.modifiedMessages.concat(msgId),
+      }));
+    }
+  }
+
   renderMessageItem(msg) {
     const isBlockedByGroup = this.state.groups
       .filter(group => msg.groups.includes(group.id))
@@ -805,6 +837,7 @@ export class ASRouterAdminInner extends React.PureComponent {
       ? this.state.messageImpressions[msg.id].length
       : 0;
     const isCollapsed = this.state.collapsedMessages.includes(msg.id);
+    const isModified = this.state.modifiedMessages.includes(msg.id);
 
     let itemClassName = "message-item";
     if (isBlocked) {
@@ -834,11 +867,32 @@ export class ASRouterAdminInner extends React.PureComponent {
           >
             {isBlocked ? "Unblock" : "Block"}
           </button>
-          {isBlocked ? null : (
+          {// eslint-disable-next-line no-nested-ternary
-            <button className="button" onClick={this.handleOverride(msg.id)}>
+          isBlocked ? null : isModified ? (
+            <button
+              className="button restore"
+              // eslint-disable-next-line react/jsx-no-bind
+              onClick={e => this.resetJSON(msg)}
+            >
+              Reset
+            </button>
+          ) : (
+            <button
+              className="button show"
+              onClick={this.handleOverride(msg.id)}
+            >
               Show
             </button>
           )}
+          {isBlocked ? null : (
+            <button
+              className="button modify"
+              // eslint-disable-next-line react/jsx-no-bind
+              onClick={e => this.modifyJson(msg)}
+            >
+              Modify
+            </button>
+          )}
           <br />({impressions} impressions)
         </td>
         <td className="message-summary">
@@ -852,7 +906,16 @@ export class ASRouterAdminInner extends React.PureComponent {
           )}
           <tr>
             <pre className={isCollapsed ? "collapsed" : "expanded"}>
+              <textarea
+                id={`${msg.id}-textarea`}
+                name={msg.id}
+                className="general-textarea"
+                disabled={isBlocked}
+                // eslint-disable-next-line react/jsx-no-bind
+                onChange={e => this.handleChange(msg.id)}
+              >
                 {JSON.stringify(msg, null, 2)}
+              </textarea>
             </pre>
           </tr>
         </td>
@@ -959,12 +1022,19 @@ export class ASRouterAdminInner extends React.PureComponent {
     return (
       <div>
         <button
-          className="ASRouterButton slim button"
+          className="ASRouterButton slim"
           // eslint-disable-next-line react/jsx-no-bind
           onClick={e => this.toggleAllMessages(messagesToShow)}
         >
           Collapse/Expand All
         </button>
+        <p className="helpLink">
+          <span className="icon icon-small-spacer icon-info" />{" "}
+          <span>
+            To modify a message, change the JSON and click 'Modify' to see your
+            changes. Click 'Reset' to restore the JSON to the original.
+          </span>
+        </p>
         <table>
           <tbody>
             {messagesToShow.map(msg => this.renderMessageItem(msg))}

browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss

@@ -78,6 +78,15 @@
     margin-bottom: 0;
   }
 
+  .general-textarea {
+    width: 740px;
+    height: 500px;
+    overflow: auto;
+    resize: none;
+    border-radius: 4px;
+    display: flex;
+  }
+
   .wnp-textarea {
     width: 740px;
     height: 500px;

browser/components/newtab/css/activity-stream-linux.css

@@ -1727,6 +1727,13 @@ main {
     padding: 6px 12px;
     margin-inline-start: 5px;
     margin-bottom: 0; }
+  .asrouter-admin .general-textarea {
+    width: 740px;
+    height: 500px;
+    overflow: auto;
+    resize: none;
+    border-radius: 4px;
+    display: flex; }
   .asrouter-admin .wnp-textarea {
     width: 740px;
     height: 500px;

browser/components/newtab/css/activity-stream-mac.css

@@ -1730,6 +1730,13 @@ main {
     padding: 6px 12px;
     margin-inline-start: 5px;
     margin-bottom: 0; }
+  .asrouter-admin .general-textarea {
+    width: 740px;
+    height: 500px;
+    overflow: auto;
+    resize: none;
+    border-radius: 4px;
+    display: flex; }
   .asrouter-admin .wnp-textarea {
     width: 740px;
     height: 500px;

browser/components/newtab/css/activity-stream-windows.css

@@ -1727,6 +1727,13 @@ main {
     padding: 6px 12px;
     margin-inline-start: 5px;
     margin-bottom: 0; }
+  .asrouter-admin .general-textarea {
+    width: 740px;
+    height: 500px;
+    overflow: auto;
+    resize: none;
+    border-radius: 4px;
+    display: flex; }
   .asrouter-admin .wnp-textarea {
     width: 740px;
     height: 500px;

browser/components/newtab/data/content/activity-stream.bundle.js

@@ -1189,6 +1189,7 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
       messageFilter: "all",
       WNMessages: [],
       collapsedMessages: [],
+      modifiedMessages: [],
       evaluationStatus: {},
       trailhead: {},
       stringTargetingParameters: null,
@@ -1266,6 +1267,16 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
     return () => _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__["ASRouterUtils"].unblockById(msg.id);
   }
 
+  resetJSON(msg) {
+    // reset the displayed JSON for the given message
+    document.getElementById(`${msg.id}-textarea`).value = JSON.stringify(msg, null, 2); // remove the message from the list of modified IDs
+
+    let index = this.state.modifiedMessages.indexOf(msg.id);
+    this.setState(prevState => ({
+      modifiedMessages: [...prevState.modifiedMessages.slice(0, index), ...prevState.modifiedMessages.slice(index + 1)]
+    }));
+  }
+
   handleOverride(id) {
     return () => _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__["ASRouterUtils"].overrideMessage(id);
   }
@@ -1510,6 +1521,18 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
     }
   }
 
+  modifyJson(msg) {
+    _asrouter_asrouter_content__WEBPACK_IMPORTED_MODULE_1__["ASRouterUtils"].modifyMessageJson(JSON.parse(document.getElementById(`${msg.id}-textarea`).value));
+  }
+
+  handleChange(msgId) {
+    if (!this.state.modifiedMessages.includes(msgId)) {
+      this.setState(prevState => ({
+        modifiedMessages: prevState.modifiedMessages.concat(msgId)
+      }));
+    }
+  }
+
   renderMessageItem(msg) {
     const isBlockedByGroup = this.state.groups.filter(group => msg.groups.includes(group.id)).some(group => !group.enabled);
     const msgProvider = this.state.providers.find(provider => provider.id === msg.provider) || {};
@@ -1518,6 +1541,7 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
     const isBlocked = isMessageBlocked || isBlockedByGroup || isProviderExcluded;
     const impressions = this.state.messageImpressions[msg.id] ? this.state.messageImpressions[msg.id].length : 0;
     const isCollapsed = this.state.collapsedMessages.includes(msg.id);
+    const isModified = this.state.modifiedMessages.includes(msg.id);
     let itemClassName = "message-item";
 
     if (isBlocked) {
@@ -1538,14 +1562,30 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
     }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
       className: `button ${isBlocked ? "" : " primary"}`,
       onClick: isBlocked ? this.handleUnblock(msg) : this.handleBlock(msg)
-    }, isBlocked ? "Unblock" : "Block"), isBlocked ? null : react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
+    }, isBlocked ? "Unblock" : "Block"), // eslint-disable-next-line no-nested-ternary
-      className: "button",
+    isBlocked ? null : isModified ? react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
+      className: "button restore" // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onClick: e => this.resetJSON(msg)
+    }, "Reset") : react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
+      className: "button show",
       onClick: this.handleOverride(msg.id)
-    }, "Show"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), "(", impressions, " impressions)"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", {
+    }, "Show"), isBlocked ? null : react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
+      className: "button modify" // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onClick: e => this.modifyJson(msg)
+    }, "Modify"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), "(", impressions, " impressions)"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", {
       className: "message-summary"
     }, isBlocked && react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tr", null, "Block reason:", isBlockedByGroup && " Blocked by group", isProviderExcluded && " Excluded by provider", isMessageBlocked && " Message blocked"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tr", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("pre", {
       className: isCollapsed ? "collapsed" : "expanded"
-    }, JSON.stringify(msg, null, 2)))));
+    }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("textarea", {
+      id: `${msg.id}-textarea`,
+      name: msg.id,
+      className: "general-textarea",
+      disabled: isBlocked // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onChange: e => this.handleChange(msg.id)
+    }, JSON.stringify(msg, null, 2))))));
   }
 
   restoreWNMessageState() {
@@ -1622,10 +1662,14 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
 
     const messagesToShow = this.state.messageFilter === "all" ? this.state.messages : this.state.messages.filter(message => message.provider === this.state.messageFilter);
     return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
-      className: "ASRouterButton slim button" // eslint-disable-next-line react/jsx-no-bind
+      className: "ASRouterButton slim" // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: e => this.toggleAllMessages(messagesToShow)
-    }, "Collapse/Expand All"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("table", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tbody", null, messagesToShow.map(msg => this.renderMessageItem(msg)))));
+    }, "Collapse/Expand All"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("p", {
+      className: "helpLink"
+    }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
+      className: "icon icon-small-spacer icon-info"
+    }), " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", null, "To modify a message, change the JSON and click 'Modify' to see your changes. Click 'Reset' to restore the JSON to the original.")), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("table", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tbody", null, messagesToShow.map(msg => this.renderMessageItem(msg)))));
   }
 
   renderWNMessages() {

browser/components/newtab/test/unit/content-src/components/ASRouterAdmin.test.jsx

@@ -266,7 +266,7 @@ describe("ASRouterAdmin", () => {
         });
 
         assert.lengthOf(wrapper.find(".message-id"), 1);
-        wrapper.find(".message-item button:not(.primary)").simulate("click");
+        wrapper.find(".message-item button.show").simulate("click");
         // first call is ADMIN_CONNECT_STATE
         assert.propertyVal(
           sendMessageStub.secondCall.args[1],