Bug 1435090 - Allow to pass a hidePersistLogsCheckbox prop to the FilterBar; r=Honza. draft
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Thu, 08 Feb 2018 15:15:00 +0100
changeset 752602 6f5f278ea69af479c8e1eda87f939ac30a8d6ae7
parent 752511 0ac953fcddf10132eaecdb753d72b2ba5a43c32a
child 752603 fadfded4c1f7f20e8df1da408b7d83d0bddb790b
push id98314
push userbmo:nchevobbe@mozilla.com
push dateThu, 08 Feb 2018 17:33:39 +0000
reviewersHonza
bugs1435090
milestone60.0a1
Bug 1435090 - Allow to pass a hidePersistLogsCheckbox prop to the FilterBar; r=Honza. This will allow us to hide the input for the browser console. MozReview-Commit-ID: AOltH7HakQE
devtools/client/webconsole/new-console-output/components/FilterBar.js
devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
--- a/devtools/client/webconsole/new-console-output/components/FilterBar.js
+++ b/devtools/client/webconsole/new-console-output/components/FilterBar.js
@@ -26,20 +26,27 @@ class FilterBar extends Component {
     return {
       dispatch: PropTypes.func.isRequired,
       filter: PropTypes.object.isRequired,
       serviceContainer: PropTypes.shape({
         attachRefToHud: PropTypes.func.isRequired,
       }).isRequired,
       filterBarVisible: PropTypes.bool.isRequired,
       persistLogs: PropTypes.bool.isRequired,
+      hidePersistLogsCheckbox: PropTypes.bool.isRequired,
       filteredMessagesCount: PropTypes.object.isRequired,
     };
   }
 
+  static get defaultProps() {
+    return {
+      hidePersistLogsCheckbox: false,
+    };
+  }
+
   constructor(props) {
     super(props);
     this.onClickMessagesClear = this.onClickMessagesClear.bind(this);
     this.onClickFilterBarToggle = this.onClickFilterBarToggle.bind(this);
     this.onClickRemoveAllFilters = this.onClickRemoveAllFilters.bind(this);
     this.onClickRemoveTextFilter = this.onClickRemoveTextFilter.bind(this);
     this.onSearchInput = this.onSearchInput.bind(this);
     this.onChangePersistToggle = this.onChangePersistToggle.bind(this);
@@ -215,16 +222,17 @@ class FilterBar extends Component {
   }
 
   render() {
     const {
       filter,
       filterBarVisible,
       persistLogs,
       filteredMessagesCount,
+      hidePersistLogsCheckbox,
     } = this.props;
 
     let children = [
       dom.div({
         className: "devtools-toolbar webconsole-filterbar-primary",
         key: "primary-bar",
       },
         dom.button({
@@ -243,17 +251,17 @@ class FilterBar extends Component {
         }),
         dom.input({
           className: "devtools-plaininput text-filter",
           type: "search",
           value: filter.text,
           placeholder: l10n.getStr("webconsole.filterInput.placeholder"),
           onInput: this.onSearchInput
         }),
-        FilterCheckbox({
+        !hidePersistLogsCheckbox && FilterCheckbox({
           label: l10n.getStr("webconsole.enablePersistentLogs.label"),
           title: l10n.getStr("webconsole.enablePersistentLogs.tooltip"),
           onChange: this.onChangePersistToggle,
           checked: persistLogs,
         }),
       )
     ];
 
--- a/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
@@ -28,20 +28,21 @@ const ServicesMock = require("Services")
 describe("FilterBar component:", () => {
   afterEach(() => {
     ServicesMock.prefs.testHelpers.clearPrefs();
   });
 
   it("initial render", () => {
     const store = setupStore();
 
-    const wrapper = render(Provider({store}, FilterBar({ serviceContainer })));
-    const toolbar = wrapper.find(
-      ".devtools-toolbar.webconsole-filterbar-primary"
-    );
+    const wrapper = render(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
+    const toolbar = wrapper.find(".devtools-toolbar.webconsole-filterbar-primary");
 
     // Clear button
     const clearButton = toolbar.children().eq(0);
     expect(clearButton.attr("class")).toBe("devtools-button devtools-clear-icon");
     expect(clearButton.attr("title")).toBe("Clear the Web Console output");
 
     // Separator
     expect(toolbar.children().eq(1).attr("class")).toBe("devtools-separator");
@@ -52,26 +53,32 @@ describe("FilterBar component:", () => {
     expect(filterBarButton.attr("title")).toBe("Toggle filter bar");
 
     // Text filter
     const textFilter = toolbar.children().eq(3);
     expect(textFilter.attr("class")).toBe("devtools-plaininput text-filter");
     expect(textFilter.attr("placeholder")).toBe("Filter output");
     expect(textFilter.attr("type")).toBe("search");
     expect(textFilter.attr("value")).toBe("");
+
+    // "Persist logs" checkbox
+    expect(wrapper.find(".filter-checkbox input").length).toBe(1);
   });
 
   it("displays the number of hidden messages when there are one hidden message", () => {
     const store = setupStore([
       "console.log('foobar', 'test')"
     ]);
     // Filter-out LOG messages
     store.dispatch(actions.filterToggle(FILTERS.LOG));
 
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
     const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
     expect(toolbar.exists()).toBeTruthy();
 
     const message = toolbar.find(".filter-message-text");
     expect(message.text()).toBe("1 item hidden by filters");
     expect(message.prop("title")).toBe("log: 1");
   });
 
@@ -98,17 +105,20 @@ describe("FilterBar component:", () => {
       "console.log('foobar', 'test')",
       "console.info('info message');",
       "console.warn('danger, will robinson!')",
       "console.debug('debug message');",
       "console.error('error message');",
     ]);
     store.dispatch(actions.filterTextSet("qwerty"));
 
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
     const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
     expect(toolbar.exists()).toBeTruthy();
 
     const message = toolbar.find(".filter-message-text");
     expect(message.text()).toBe("5 items hidden by filters");
     expect(message.prop("title")).toBe("text: 5");
   });
 
@@ -128,17 +138,20 @@ describe("FilterBar component:", () => {
 
     store.dispatch(actions.filterToggle(FILTERS.ERROR));
     store.dispatch(actions.filterToggle(FILTERS.WARN));
     store.dispatch(actions.filterToggle(FILTERS.LOG));
     store.dispatch(actions.filterToggle(FILTERS.INFO));
     store.dispatch(actions.filterToggle(FILTERS.DEBUG));
     store.dispatch(actions.filterTextSet("qwerty"));
 
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
     const message = wrapper.find(".filter-message-text");
 
     expect(message.prop("title")).toBe("text: 10");
   });
 
   it("displays expected tooltip when there is text & level hidden-messages", () => {
     const store = setupStore([
       "console.log('foobar', 'test')",
@@ -154,39 +167,48 @@ describe("FilterBar component:", () => {
     ]);
 
     store.dispatch(actions.filterToggle(FILTERS.ERROR));
     store.dispatch(actions.filterToggle(FILTERS.WARN));
     store.dispatch(actions.filterToggle(FILTERS.LOG));
     store.dispatch(actions.filterToggle(FILTERS.INFO));
     store.dispatch(actions.filterToggle(FILTERS.DEBUG));
 
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
     const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
     expect(toolbar.exists()).toBeTruthy();
 
     const message = toolbar.find(".filter-message-text");
     expect(message.text()).toBe("10 items hidden by filters");
     expect(message.prop("title")).toBe("error: 2, warn: 2, log: 2, info: 2, debug: 2");
   });
 
   it("does not display the number of hidden messages when there are no messages", () => {
     const store = setupStore();
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
     const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
     expect(toolbar.exists()).toBeFalsy();
   });
 
   it("does not display the number of hidden non-default filters (CSS, Network,…)", () => {
     const store = setupStore([
       "Unknown property ‘such-unknown-property’.  Declaration dropped.",
       "GET request",
       "XHR GET request"
     ]);
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
 
     // Let's make sure those non-default filters are off.
     const filters = getAllFilters(store.getState());
     expect(filters[FILTERS.CSS]).toBe(false);
     expect(filters[FILTERS.NET]).toBe(false);
     expect(filters[FILTERS.NETXHR]).toBe(false);
 
     const toolbar = wrapper.find(".webconsole-filterbar-filtered-messages");
@@ -194,17 +216,20 @@ describe("FilterBar component:", () => {
   });
 
   it("displays filter bar when button is clicked", () => {
     const store = setupStore();
 
     expect(getAllUi(store.getState()).filterBarVisible).toBe(false);
     expect(ServicesMock.prefs.getBoolPref(PREFS.UI.FILTER_BAR), false);
 
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
     wrapper.find(".devtools-filter-icon").simulate("click");
 
     expect(getAllUi(store.getState()).filterBarVisible).toBe(true);
     expect(ServicesMock.prefs.getBoolPref(PREFS.UI.FILTER_BAR), true);
 
     const secondaryBar = wrapper.find(".webconsole-filterbar-secondary");
     expect(secondaryBar.length).toBe(1);
 
@@ -234,37 +259,56 @@ describe("FilterBar component:", () => {
       expect(child.html()).toEqual(shallow(buttons[index]).html());
     });
   });
 
   it("fires MESSAGES_CLEAR action when clear button is clicked", () => {
     const store = setupStore();
     store.dispatch = sinon.spy();
 
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
     wrapper.find(".devtools-clear-icon").simulate("click");
     const call = store.dispatch.getCall(0);
     expect(call.args[0]).toEqual({
       type: MESSAGES_CLEAR
     });
   });
 
   it("sets filter text when text is typed", () => {
     const store = setupStore();
 
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
     wrapper.find(".devtools-plaininput").simulate("input", { target: { value: "a" } });
     expect(store.getState().filters.text).toBe("a");
   });
 
   it("toggles persist logs when checkbox is clicked", () => {
     const store = setupStore();
 
     expect(getAllUi(store.getState()).persistLogs).toBe(false);
     expect(ServicesMock.prefs.getBoolPref(PREFS.UI.PERSIST), false);
 
-    const wrapper = mount(Provider({store}, FilterBar({ serviceContainer })));
+    const wrapper = mount(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: false,
+    })));
     wrapper.find(".filter-checkbox input").simulate("change");
 
     expect(getAllUi(store.getState()).persistLogs).toBe(true);
     expect(ServicesMock.prefs.getBoolPref(PREFS.UI.PERSIST), true);
   });
+
+  it(`doesn't render "Persist logs" input when "hidePersistLogsCheckbox" is true`, () => {
+    const store = setupStore();
+
+    const wrapper = render(Provider({store}, FilterBar({
+      serviceContainer,
+      hidePersistLogsCheckbox: true,
+    })));
+    expect(wrapper.find(".filter-checkbox input").length).toBe(0);
+  });
 });