Bug 1594125 - Allow showing remote triplets with different header r=k88hudson

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

--HG--
extra : moz-landing-system : lando

browser/components/newtab/content-src/asrouter/templates/FirstRun/FirstRun.jsx

@@ -22,12 +22,18 @@ export const helpers = {
     const hasInterrupt =
       interruptCleared === true ? false : Boolean(message.content);
     const hasTriplets = Boolean(message.bundle && message.bundle.length);
+    // Allow 1) falsy to not render a header 2) default welcome 3) custom header
+    const tripletsHeaderId =
+      message.tripletsHeaderId === undefined
+        ? "onboarding-welcome-header"
+        : message.tripletsHeaderId;
     const UTMTerm = message.utm_term || "";
     return {
       hasTriplets,
       hasInterrupt,
       interrupt: hasInterrupt ? message : null,
       triplets: hasTriplets ? message.bundle : null,
+      tripletsHeaderId,
       UTMTerm,
     };
   },
@@ -55,6 +61,7 @@ export class FirstRun extends React.PureComponent {
 
       interrupt: undefined,
       triplets: undefined,
+      tripletsHeaderId: "",
 
       isInterruptVisible: false,
       isTripletsContainerVisible: false,
@@ -87,6 +94,7 @@ export class FirstRun extends React.PureComponent {
         hasInterrupt,
         interrupt,
         triplets,
+        tripletsHeaderId,
         UTMTerm,
       } = helpers.selectInterruptAndTriplets(message, interruptCleared);
 
@@ -99,6 +107,7 @@ export class FirstRun extends React.PureComponent {
 
         interrupt,
         triplets,
+        tripletsHeaderId,
 
         isInterruptVisible: hasInterrupt,
         isTripletsContainerVisible: hasTriplets,
@@ -172,6 +181,7 @@ export class FirstRun extends React.PureComponent {
     const {
       interrupt,
       triplets,
+      tripletsHeaderId,
       isInterruptVisible,
       isTripletsContainerVisible,
       isTripletsContentVisible,
@@ -201,6 +211,7 @@ export class FirstRun extends React.PureComponent {
           <Triplets
             document={props.document}
             cards={triplets}
+            headerId={tripletsHeaderId}
             showCardPanel={isTripletsContainerVisible}
             showContent={isTripletsContentVisible}
             hideContainer={this.closeTriplets}

browser/components/newtab/content-src/asrouter/templates/FirstRun/Triplets.jsx

@@ -55,6 +55,7 @@ export class Triplets extends React.PureComponent {
   render() {
     const {
       cards,
+      headerId,
       showCardPanel,
       showContent,
       sendUserActionTelemetry,
@@ -64,7 +65,7 @@ export class Triplets extends React.PureComponent {
         className={`trailheadCards ${showCardPanel ? "expanded" : "collapsed"}`}
       >
         <div className="trailheadCardsInner" aria-hidden={!showContent}>
-          <h1 data-l10n-id="onboarding-welcome-header" />
+          {headerId && <h1 data-l10n-id={headerId} />}
           <div className={`trailheadCardGrid${showContent ? " show" : ""}`}>
             {cards.map(card => (
               <OnboardingCard

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

@@ -3619,6 +3619,7 @@ class Triplets extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComponen
   render() {
     const {
       cards,
+      headerId,
       showCardPanel,
       showContent,
       sendUserActionTelemetry
@@ -3628,8 +3629,8 @@ class Triplets extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComponen
     }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
       className: "trailheadCardsInner",
       "aria-hidden": !showContent
-    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {
-      "data-l10n-id": "onboarding-welcome-header"
+    }, headerId && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {
+      "data-l10n-id": headerId
     }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
       className: `trailheadCardGrid${showContent ? " show" : ""}`
     }, cards.map(card => react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_templates_OnboardingMessage_OnboardingMessage__WEBPACK_IMPORTED_MODULE_1__["OnboardingCard"], _extends({
@@ -14697,12 +14698,14 @@ const helpers = {
   selectInterruptAndTriplets(message = {}, interruptCleared) {
     const hasInterrupt = interruptCleared === true ? false : Boolean(message.content);
     const hasTriplets = Boolean(message.bundle && message.bundle.length);
+    const tripletsHeaderId = message.tripletsHeaderId === undefined ? "onboarding-welcome-header" : message.tripletsHeaderId;
     const UTMTerm = message.utm_term || "";
     return {
       hasTriplets,
       hasInterrupt,
       interrupt: hasInterrupt ? message : null,
       triplets: hasTriplets ? message.bundle : null,
+      tripletsHeaderId,
       UTMTerm
     };
   },
@@ -14726,6 +14729,7 @@ class FirstRun_FirstRun extends external_React_default.a.PureComponent {
       hasTriplets: false,
       interrupt: undefined,
       triplets: undefined,
+      tripletsHeaderId: "",
       isInterruptVisible: false,
       isTripletsContainerVisible: false,
       isTripletsContentVisible: false,
@@ -14754,6 +14758,7 @@ class FirstRun_FirstRun extends external_React_default.a.PureComponent {
         hasInterrupt,
         interrupt,
         triplets,
+        tripletsHeaderId,
         UTMTerm
       } = helpers.selectInterruptAndTriplets(message, interruptCleared);
       return {
@@ -14763,6 +14768,7 @@ class FirstRun_FirstRun extends external_React_default.a.PureComponent {
         hasTriplets,
         interrupt,
         triplets,
+        tripletsHeaderId,
         isInterruptVisible: hasInterrupt,
         isTripletsContainerVisible: hasTriplets,
         isTripletsContentVisible: !(hasInterrupt || !hasTriplets),
@@ -14844,6 +14850,7 @@ class FirstRun_FirstRun extends external_React_default.a.PureComponent {
     const {
       interrupt,
       triplets,
+      tripletsHeaderId,
       isInterruptVisible,
       isTripletsContainerVisible,
       isTripletsContentVisible,
@@ -14866,6 +14873,7 @@ class FirstRun_FirstRun extends external_React_default.a.PureComponent {
     }) : null, hasTriplets ? external_React_default.a.createElement(Triplets["Triplets"], {
       document: props.document,
       cards: triplets,
+      headerId: tripletsHeaderId,
       showCardPanel: isTripletsContainerVisible,
       showContent: isTripletsContentVisible,
       hideContainer: this.closeTriplets,

browser/components/newtab/lib/ASRouter.jsm

@@ -1981,7 +1981,6 @@ class _ASRouter {
     } else {
       // On new tab, send cards if they match; othwerise send a snippet
       message = await this.handleMessageRequest({
-        provider: "onboarding",
         template: "extended_triplets",
       });
 

browser/components/newtab/test/unit/asrouter/ASRouter.test.js

@@ -1388,7 +1388,6 @@ describe("ASRouter", () => {
         );
         handleMessageRequestStub
           .withArgs({
-            provider: "onboarding",
             template: "extended_triplets",
           })
           .resolves({ id: "foo" });
@@ -1409,7 +1408,6 @@ describe("ASRouter", () => {
         );
         handleMessageRequestStub
           .withArgs({
-            provider: "onboarding",
             template: "extended_triplets",
           })
           .resolves({ id: "foo" });
@@ -1421,7 +1419,6 @@ describe("ASRouter", () => {
 
         assert.calledTwice(handleMessageRequestStub);
         assert.calledWithExactly(handleMessageRequestStub, {
-          provider: "onboarding",
           template: "extended_triplets",
         });
         assert.calledWithExactly(handleMessageRequestStub, {
@@ -1435,7 +1432,6 @@ describe("ASRouter", () => {
         );
         handleMessageRequestStub
           .withArgs({
-            provider: "onboarding",
             template: "extended_triplets",
           })
           .resolves(null);
@@ -1449,7 +1445,6 @@ describe("ASRouter", () => {
         assert.notCalled(spy);
         assert.calledTwice(handleMessageRequestStub);
         assert.calledWithExactly(handleMessageRequestStub, {
-          provider: "onboarding",
           template: "extended_triplets",
         });
         assert.calledWithExactly(handleMessageRequestStub, {