Bug 1568067 - Adding in more to DS devtools (#5218)

* Bug 1568067 - Adding in more to DS devtools

* Updating spocs layout endpoint

* css

* test fixes

common/Actions.jsm

@@ -35,6 +35,7 @@ for (const type of [
   "AS_ROUTER_TELEMETRY_USER_EVENT",
   "BLOCK_URL",
   "BOOKMARK_URL",
+  "CLEAR_PREF",
   "COPY_DOWNLOAD_LINK",
   "DELETE_BOOKMARK_BY_ID",
   "DELETE_FROM_POCKET",
@@ -42,6 +43,7 @@ for (const type of [
   "DIALOG_CANCEL",
   "DIALOG_OPEN",
   "DISCOVERY_STREAM_CONFIG_CHANGE",
+  "DISCOVERY_STREAM_CONFIG_RESET_DEFAULTS",
   "DISCOVERY_STREAM_CONFIG_SETUP",
   "DISCOVERY_STREAM_CONFIG_SET_VALUE",
   "DISCOVERY_STREAM_FEEDS_UPDATE",

content-src/components/ASRouterAdmin/ASRouterAdmin.jsx

@@ -35,6 +35,7 @@ function relativeTime(timestamp) {
 
 const LAYOUT_VARIANTS = {
   basic: "Basic default layout (on by default in nightly)",
+  staging_spocs: "A layout with all spocs shown",
   "dev-test-all":
     "A little bit of everything. Good layout for testing all components",
   "dev-test-feeds": "Stress testing for slow feeds",
@@ -55,10 +56,36 @@ export class ToggleStoryButton extends React.PureComponent {
   }
 }
 
+export class TogglePrefCheckbox extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(event) {
+    this.props.onChange(this.props.pref, event.target.checked);
+  }
+
+  render() {
+    return (
+      <>
+        <input
+          type="checkbox"
+          checked={this.props.checked}
+          onChange={this.onChange}
+        />{" "}
+        {this.props.pref}{" "}
+      </>
+    );
+  }
+}
+
 export class DiscoveryStreamAdmin extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.onEnableToggle = this.onEnableToggle.bind(this);
+    this.restorePrefDefaults = this.restorePrefDefaults.bind(this);
+    this.setConfigValue = this.setConfigValue.bind(this);
+    this.expireCache = this.expireCache.bind(this);
     this.changeEndpointVariant = this.changeEndpointVariant.bind(this);
     this.onStoryToggle = this.onStoryToggle.bind(this);
     this.state = {
@@ -75,8 +102,22 @@ export class DiscoveryStreamAdmin extends React.PureComponent {
     );
   }
 
-  onEnableToggle(event) {
-    this.setConfigValue("enabled", event.target.checked);
+  restorePrefDefaults(event) {
+    this.props.dispatch(
+      ac.OnlyToMain({
+        type: at.DISCOVERY_STREAM_CONFIG_RESET_DEFAULTS,
+      })
+    );
+  }
+
+  expireCache() {
+    const { config } = this.props.state;
+    this.props.dispatch(
+      ac.OnlyToMain({
+        type: at.DISCOVERY_STREAM_CONFIG_CHANGE,
+        data: config,
+      })
+    );
   }
 
   changeEndpointVariant(event) {
@@ -229,23 +270,43 @@ export class DiscoveryStreamAdmin extends React.PureComponent {
   }
 
   render() {
+    const prefToggles = "enabled hardcoded_layout show_spocs personalized collapsible".split(
+      " "
+    );
     const { config, lastUpdated, layout } = this.props.state;
     return (
       <div>
-        <div className="dsEnabled">
-          <input
-            type="checkbox"
-            checked={config.enabled}
-            onChange={this.onEnableToggle}
-          />{" "}
-          enabled{" "}
-        </div>
+        <button className="button" onClick={this.restorePrefDefaults}>
+          Restore Pref Defaults
+        </button>{" "}
+        <button className="button" onClick={this.expireCache}>
+          Expire Cache
+        </button>
+        <table>
+          <tbody>
+            {prefToggles.map(pref => (
+              <Row key={pref}>
+                <td>
+                  <TogglePrefCheckbox
+                    checked={config[pref]}
+                    pref={pref}
+                    onChange={this.setConfigValue}
+                  />
+                </td>
+              </Row>
+            ))}
+          </tbody>
+        </table>
         <h3>Endpoint variant</h3>
         <p>
           You can also change this manually by changing this pref:{" "}
           <code>browser.newtabpage.activity-stream.discoverystream.config</code>
         </p>
-        <table style={config.enabled ? null : { opacity: 0.5 }}>
+        <table
+          style={
+            config.enabled && !config.hardcoded_layout ? null : { opacity: 0.5 }
+          }
+        >
           <tbody>
             {Object.keys(LAYOUT_VARIANTS).map(id => (
               <Row key={id}>
@@ -263,7 +324,6 @@ export class DiscoveryStreamAdmin extends React.PureComponent {
             ))}
           </tbody>
         </table>
-
         <h3>Caching info</h3>
         <table style={config.enabled ? null : { opacity: 0.5 }}>
           <tbody>
@@ -273,9 +333,7 @@ export class DiscoveryStreamAdmin extends React.PureComponent {
             </Row>
           </tbody>
         </table>
-
         <h3>Layout</h3>
-
         {layout.map((row, rowIndex) => (
           <div key={`row-${rowIndex}`}>
             {row.components.map((component, componentIndex) => (
@@ -285,10 +343,8 @@ export class DiscoveryStreamAdmin extends React.PureComponent {
             ))}
           </div>
         ))}
-
         <h3>Feeds Data</h3>
         {this.renderFeedsData()}
-
         <h3>Spocs</h3>
         {this.renderSpocs()}
       </div>

content-src/components/ASRouterAdmin/ASRouterAdmin.scss

@@ -209,13 +209,6 @@
     }
   }
 
-  .dsEnabled {
-    padding: 10px;
-    font-size: 16px;
-    margin-bottom: 20px;
-    border: 1px solid $border-color;
-  }
-
   .ds-component {
     margin-bottom: 20px;
   }

lib/DiscoveryStreamFeed.jsm

@@ -142,6 +142,15 @@ this.DiscoveryStreamFeed = class DiscoveryStreamFeed {
     return this._prefCache.config;
   }
 
+  resetConfigDefauts() {
+    this.store.dispatch({
+      type: at.CLEAR_PREF,
+      data: {
+        name: PREF_CONFIG,
+      },
+    });
+  }
+
   get showSpocs() {
     // Combine user-set sponsored opt-out with Mozilla-set config
     return (
@@ -1135,6 +1144,9 @@ this.DiscoveryStreamFeed = class DiscoveryStreamFeed {
           )
         );
         break;
+      case at.DISCOVERY_STREAM_CONFIG_RESET_DEFAULTS:
+        this.resetConfigDefauts();
+        break;
       case at.DISCOVERY_STREAM_RETRY_FEED:
         this.retryFeed(action.data.feed);
         break;

lib/PrefsFeed.jsm

@@ -111,6 +111,9 @@ this.PrefsFeed = class PrefsFeed {
       case at.UNINIT:
         this.removeListeners();
         break;
+      case at.CLEAR_PREF:
+        Services.prefs.clearUserPref(this._prefs._branchStr + action.data.name);
+        break;
       case at.SET_PREF:
         this._prefs.set(action.data.name, action.data.value);
         break;

test/unit/lib/DiscoveryStreamFeed.test.js

@@ -1489,6 +1489,22 @@ describe("DiscoveryStreamFeed", () => {
     });
   });
 
+  describe("#onAction: DISCOVERY_STREAM_CONFIG_RESET_DEFAULTS", async () => {
+    it("Should dispatch CLEAR_PREF with pref name", async () => {
+      sandbox.spy(feed.store, "dispatch");
+      await feed.onAction({
+        type: at.DISCOVERY_STREAM_CONFIG_RESET_DEFAULTS,
+      });
+
+      assert.calledWithMatch(feed.store.dispatch, {
+        data: {
+          name: CONFIG_PREF_NAME,
+        },
+        type: at.CLEAR_PREF,
+      });
+    });
+  });
+
   describe("#onAction: DISCOVERY_STREAM_RETRY_FEED", async () => {
     it("should call retryFeed", async () => {
       sandbox.spy(feed, "retryFeed");

test/unit/lib/PrefsFeed.test.js

@@ -8,6 +8,7 @@ describe("PrefsFeed", () => {
   let feed;
   let FAKE_PREFS;
   let sandbox;
+  let ServicesStub;
   beforeEach(() => {
     sandbox = sinon.createSandbox();
     FAKE_PREFS = new Map([
@@ -20,6 +21,13 @@ describe("PrefsFeed", () => {
       getAll: sandbox.stub().resolves(),
       set: sandbox.stub().resolves(),
     };
+    ServicesStub = {
+      prefs: {
+        clearUserPref: sinon.spy(),
+        getStringPref: sinon.spy(),
+        getBoolPref: sinon.spy(),
+      },
+    };
     feed.store = {
       dispatch: sinon.spy(),
       getState() {
@@ -37,8 +45,12 @@ describe("PrefsFeed", () => {
       ignore: sinon.spy(),
       ignoreBranch: sinon.spy(),
       reset: sinon.stub(),
+      _branchStr: "branch.str.",
     };
-    overrider.set({ PrivateBrowsingUtils: { enabled: true } });
+    overrider.set({
+      PrivateBrowsingUtils: { enabled: true },
+      Services: ServicesStub,
+    });
   });
   afterEach(() => {
     overrider.restore();
@@ -49,6 +61,10 @@ describe("PrefsFeed", () => {
     feed.onAction(ac.SetPref("foo", 2));
     assert.calledWith(feed._prefs.set, "foo", 2);
   });
+  it("should call clearUserPref with action CLEAR_PREF", () => {
+    feed.onAction({ type: at.CLEAR_PREF, data: { name: "pref.test" } });
+    assert.calledWith(ServicesStub.prefs.clearUserPref, "branch.str.pref.test");
+  });
   it("should dispatch PREFS_INITIAL_VALUES on init with pref values and .isPrivateBrowsingEnabled", () => {
     feed.onAction({ type: at.INIT });
     assert.calledOnce(feed.store.dispatch);