Bug 1676627 - Add telemetry to track opening and closing of the fly out component on newtab page. r=thecount,nanj

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

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

@@ -151,12 +151,14 @@ export class BaseContent extends React.PureComponent {
 
   openCustomizationMenu() {
     this.setState({ customizeMenuVisible: true });
+    this.props.dispatch(ac.UserEvent({ event: "SHOW_PERSONALIZE" }));
   }
 
   closeCustomizationMenu() {
     if (this.state.customizeMenuVisible) {
       this.setState({ customizeMenuVisible: false });
     }
+    this.props.dispatch(ac.UserEvent({ event: "HIDE_PERSONALIZE" }));
   }
 
   handleOnKeyDown(e) {

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

@@ -686,6 +686,9 @@ class BaseContent extends react__WEBPACK_IMPORTED_MODULE_8___default.a.PureCompo
     this.setState({
       customizeMenuVisible: true
     });
+    this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].UserEvent({
+      event: "SHOW_PERSONALIZE"
+    }));
   }
 
   closeCustomizationMenu() {
@@ -694,6 +697,10 @@ class BaseContent extends react__WEBPACK_IMPORTED_MODULE_8___default.a.PureCompo
         customizeMenuVisible: false
       });
     }
+
+    this.props.dispatch(common_Actions_jsm__WEBPACK_IMPORTED_MODULE_0__["actionCreators"].UserEvent({
+      event: "HIDE_PERSONALIZE"
+    }));
   }
 
   handleOnKeyDown(e) {

browser/components/newtab/docs/v2-system-addon/data_events.md

@@ -50,7 +50,7 @@ A user event ping includes some basic metadata (tab id, addon version, etc.) as
 ```js
 {
   // This indicates the type of interaction
-  "event": ["CLICK", "SEARCH", "BLOCK", "DELETE", "OPEN_NEW_WINDOW", "OPEN_PRIVATE_WINDOW", "BOOKMARK_DELETE", "BOOKMARK_ADD", "OPEN_NEWTAB_PREFS", "CLOSE_NEWTAB_PREFS", "SEARCH_HANDOFF"],
+  "event": ["CLICK", "SEARCH", "BLOCK", "DELETE", "OPEN_NEW_WINDOW", "OPEN_PRIVATE_WINDOW", "BOOKMARK_DELETE", "BOOKMARK_ADD", "OPEN_NEWTAB_PREFS", "CLOSE_NEWTAB_PREFS", "SEARCH_HANDOFF", "SHOW_PERSONALIZE", "HIDE_PERSONALIZE"],
 
   // Optional field indicating the UI component type
   "source": "TOP_SITES",
@@ -78,6 +78,22 @@ A user event ping includes some basic metadata (tab id, addon version, etc.) as
 
 ### Types of user interactions
 
+#### Show/hide Personalization Panel
+
+```js
+{
+  "event": [ "SHOW_PERSONALIZE" | "HIDE_PERSONALIZE" ],  // Basic metadata
+  "action": "activity_stream_event",
+  "page": ["about:newtab" | "about:home" | "about:welcome" | "unknown"],
+  "client_id": "26288a14-5cc4-d14f-ae0a-bb01ef45be9c",
+  "session_id": "005deed0-e3e4-4c02-a041-17405fd703f6",
+  "browser_session_id": "e7e52665-7db3-f348-9918-e93160eb2ef3",
+  "addon_version": "20180710100040",
+  "locale": "en-US",
+  "user_prefs": 7
+}
+```
+
 #### Performing a search
 
 ```js

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

@@ -8,6 +8,7 @@ import { ErrorBoundary } from "content-src/components/ErrorBoundary/ErrorBoundar
 import React from "react";
 import { Search } from "content-src/components/Search/Search";
 import { shallow } from "enzyme";
+import { actionCreators as ac } from "common/Actions.jsm";
 
 describe("<Base>", () => {
   let DEFAULT_PROPS = {
@@ -106,6 +107,21 @@ describe("<BaseContent>", () => {
     assert.equal(wrapper.find(PrefsButton).prop("icon"), "icon-foo");
   });
 
+  it("should dispatch a user event when the customize menu is opened or closed", () => {
+    const dispatch = sinon.stub();
+    const wrapper = shallow(
+      <BaseContent
+        {...DEFAULT_PROPS}
+        Prefs={{ values: { "newNewtabExperience.enabled": "true" } }}
+        dispatch={dispatch}
+      />
+    );
+    wrapper.instance().openCustomizationMenu();
+    assert.calledWith(dispatch, ac.UserEvent({ event: "SHOW_PERSONALIZE" }));
+    wrapper.instance().closeCustomizationMenu();
+    assert.calledWith(dispatch, ac.UserEvent({ event: "HIDE_PERSONALIZE" }));
+  });
+
   it("should render only search if no Sections are enabled", () => {
     const onlySearchProps = Object.assign({}, DEFAULT_PROPS, {
       Sections: [{ id: "highlights", enabled: false }],

toolkit/components/telemetry/Events.yaml

@@ -38,6 +38,8 @@ activity_stream:
       "CLICK",
       "CLICK_PRIVACY_INFO",
       "CLOSE_NEWTAB_PREFS",
+      "SHOW_PERSONALIZE",
+      "HIDE_PERSONALIZE",
       "DELETE",
       "DELETE_FROM_POCKET",
       "DELETE_CONFIRM",