Bug 1514006 - Part 2, add CLICK pings for the Hero and CardGrid (#4666)

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -32,9 +32,12 @@ export class _DiscoveryStreamBase extends React.PureComponent {
           data={component.data}
           feed={component.feed}
           style={component.properties.style}
+          type={component.type}
+          dispatch={this.props.dispatch}
           items={component.properties.items} />);
       case "Hero":
-        const items = Math.min(component.properties.items, MAX_ROWS_HERO);
+        const items = Math.min(MAX_ROWS_HERO,
+          component.properties.items || component.data ? component.data.recommendations.length : 0);
         const rows = component.data ? component.data.recommendations.slice(0, items) : [];
         return (
           <ImpressionStats rows={rows} dispatch={this.props.dispatch} source={component.type}>
@@ -42,6 +45,8 @@ export class _DiscoveryStreamBase extends React.PureComponent {
               title={component.header && component.header.title}
               data={component.data}
               style={component.properties.style}
+              type={component.type}
+              dispatch={this.props.dispatch}
               items={items} />
           </ImpressionStats>
         );

content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

@@ -19,6 +19,10 @@ export class CardGrid extends React.PureComponent {
         title={rec.title}
         excerpt={rec.title}
         url={rec.url}
+        id={rec.id}
+        index={index}
+        type={this.props.type}
+        dispatch={this.props.dispatch}
         source={rec.domain} />
     ));
 

content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx

@@ -1,9 +1,29 @@
+import {actionCreators as ac} from "common/Actions.jsm";
 import React from "react";
 
 export class DSCard extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onLinkClick = this.onLinkClick.bind(this);
+  }
+
+  onLinkClick(event) {
+    this.props.dispatch(ac.UserEvent({
+      event: "CLICK",
+      source: this.props.type.toUpperCase(),
+      action_position: this.props.index,
+    }));
+
+    this.props.dispatch(ac.ImpressionStats({
+      source: this.props.type.toUpperCase(),
+      click: 0,
+      tiles: [{id: this.props.id, pos: this.props.index}],
+    }));
+  }
+
   render() {
     return (
-      <a href={this.props.url} className="ds-card">
+      <a href={this.props.url} className="ds-card" onClick={this.onLinkClick}>
         <div className="img-wrapper">
           <div className="img" style={{backgroundImage: `url(${this.props.image_src}`}} />
         </div>

content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx

@@ -1,7 +1,27 @@
+import {actionCreators as ac} from "common/Actions.jsm";
 import {DSCard} from "../DSCard/DSCard.jsx";
 import React from "react";
 
 export class Hero extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onLinkClick = this.onLinkClick.bind(this);
+  }
+
+  onLinkClick(event) {
+    this.props.dispatch(ac.UserEvent({
+      event: "CLICK",
+      source: this.props.type.toUpperCase(),
+      action_position: 0,
+    }));
+
+    this.props.dispatch(ac.ImpressionStats({
+      source: this.props.type.toUpperCase(),
+      click: 0,
+      tiles: [{id: this.heroRec.id, pos: 0}],
+    }));
+  }
+
   render() {
     const {data} = this.props;
 
@@ -12,15 +32,21 @@ export class Hero extends React.PureComponent {
       );
     }
 
-    let [heroRec, ...otherRecs] = data.recommendations;
+    let [heroRec, ...otherRecs] = data.recommendations.slice(0, this.props.items);
+    this.heroRec = heroRec;
     let truncateText = (text, cap) => `${text.substring(0, cap)}${text.length > cap ? `...` : ``}`;
 
-    let cards = otherRecs.slice(1, this.props.items).map((rec, index) => (
+    // Note that `{index + 1}` is necessary below for telemetry since we treat heroRec as index 0.
+    let cards = otherRecs.map((rec, index) => (
       <DSCard
         key={`dscard-${index}`}
         image_src={rec.image_src}
         title={truncateText(rec.title, 44)}
         url={rec.url}
+        id={rec.id}
+        index={index + 1}
+        type={this.props.type}
+        dispatch={this.props.dispatch}
         source={truncateText(`TODO: SOURCE`, 22)} />
     ));
 
@@ -28,7 +54,7 @@ export class Hero extends React.PureComponent {
       <div>
         <div className="ds-header">{this.props.title}</div>
         <div className={`ds-hero ds-hero-${this.props.style}`}>
-          <a href={heroRec.url} className="wrapper">
+          <a href={heroRec.url} className="wrapper" onClick={this.onLinkClick}>
             <div className="img-wrapper">
               <div className="img" style={{backgroundImage: `url(${heroRec.image_src})`}} />
             </div>