[GdpIntegration] Render badges in BadgeNotification

Bug: 436201262
Change-Id: I0a738d6c49284c6d86af5a35788bc7c0020764f8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6919231
Reviewed-by: Natallia Harshunova <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

front_end/models/badges/Badge.test.ts

@@ -9,6 +9,7 @@ import * as Badges from './badges.js';
 class TestBadge extends Badges.Badge {
   override name = 'badges/test-badge';
   override title = 'test-badge-title';
+  override imageUri = 'image-uri';
   override interestedActions: readonly Badges.BadgeAction[] = [
     Badges.BadgeAction.PERFORMANCE_INSIGHT_CLICKED,
   ] as const;

front_end/models/badges/Badge.ts

@@ -26,6 +26,7 @@ export abstract class Badge {
 
   abstract readonly name: string;
   abstract readonly title: string;
+  abstract readonly imageUri: string;
   abstract readonly interestedActions: readonly BadgeAction[];
   readonly isStarterBadge: boolean = false;
 

front_end/models/badges/DOMDetectiveBadge.ts

@@ -4,9 +4,11 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
+const DOM_DETECTIVE_BADGE_IMAGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
 export class DOMDetectiveBadge extends Badge {
   override readonly name = 'awards/dom-detective-badge';
   override readonly title = 'DOM Detective';
+  override readonly imageUri = DOM_DETECTIVE_BADGE_IMAGE_URI;
 
   override readonly interestedActions = [
     BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,

front_end/models/badges/SpeedsterBadge.ts

@@ -4,11 +4,13 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
+const SPEEDSTER_BADGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
 export class SpeedsterBadge extends Badge {
   // TODO(ergunsh): Update the name to be the actual badge for DevTools.
   override readonly name = 'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Flegacy%2Ftest';
   override readonly title = 'Speedster';
   override readonly interestedActions = [BadgeAction.PERFORMANCE_INSIGHT_CLICKED] as const;
+  override readonly imageUri = SPEEDSTER_BADGE_URI;
 
   handleAction(_action: BadgeAction): void {
     this.trigger();

front_end/models/badges/StarterBadge.ts

@@ -4,11 +4,13 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
+const STARTER_BADGE_IMAGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
 export class StarterBadge extends Badge {
   override readonly isStarterBadge = true;
   // TODO(ergunsh): Update the name to be the actual badge for DevTools.
   override readonly name = 'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Fprofile%2Fcreated-profile';
   override readonly title = 'Chrome DevTools User';
+  override readonly imageUri = STARTER_BADGE_IMAGE_URI;
 
   // TODO(ergunsh): Add remaining non-trivial event definitions
   override readonly interestedActions = [

front_end/models/badges/UserBadges.test.ts

@@ -11,6 +11,7 @@ import * as Badges from './badges.js';
 class MockActivityBadge extends Badges.Badge {
   override name = 'badges/test-badge';
   override title = 'test-badge-title';
+  override imageUri = 'test-image-uri';
   override interestedActions: readonly Badges.BadgeAction[] = [
     Badges.BadgeAction.PERFORMANCE_INSIGHT_CLICKED,
   ] as const;
@@ -23,6 +24,7 @@ class MockActivityBadge extends Badges.Badge {
 class MockStarterBadge extends Badges.Badge {
   override name = 'badges/starter-test-badge';
   override title = 'starter-test-badge';
+  override imageUri = 'starte-test-image-uri';
   override isStarterBadge = true;
   override interestedActions: readonly Badges.BadgeAction[] = [
     Badges.BadgeAction.CSS_RULE_MODIFIED,

front_end/models/badges/UserBadges.ts

@@ -137,4 +137,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
   reconcileBadgesFinishedForTest(): void {
   }
+
+  isReceiveBadgesSettingEnabled(): boolean {
+    return Boolean(this.#receiveBadgesSetting?.get());
+  }
 }

front_end/panels/common/BUILD.gn

@@ -35,6 +35,7 @@ devtools_module("common") {
     "../../core/host:bundle",
     "../../core/i18n:bundle",
     "../../core/platform:bundle",
+    "../../models/badges:bundle",
     "../../models/geometry:bundle",
     "../../ui/components/buttons:bundle",
     "../../ui/components/snackbars:bundle",

front_end/panels/common/BadgeNotification.test.ts

@@ -2,23 +2,61 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as Badges from '../../models/badges/badges.js';
 import {
   renderElementIntoDOM,
 } from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Lit from '../../ui/lit/lit.js';
 
 import * as BadgeNotification from './BadgeNotification.js';
 
-const {html} = Lit;
+class TestBadge extends Badges.Badge {
+  override name = 'testBadge';
+  override title = 'title';
+  override imageUri = 'image-uri';
+  override interestedActions: readonly Badges.BadgeAction[] = [];
+  override handleAction(): void {
+    throw new Error('Method not implemented.');
+  }
+}
+
+class TestStarterBadge extends Badges.Badge {
+  override name = 'testStarterBadge';
+  override title = 'starterBadgeTitle';
+  override imageUri = 'starter-badge-image-uri';
+  override isStarterBadge = true;
+  override interestedActions: readonly Badges.BadgeAction[] = [];
+  override handleAction(): void {
+    throw new Error('Method not implemented.');
+  }
+}
+
+function createMockBadge(badgeCtor: new (badgeContext: Badges.BadgeContext) => Badges.Badge): Badges.Badge {
+  return new badgeCtor({
+    onTriggerBadge: () => {},
+    badgeActionEventTarget: new Common.ObjectWrapper.ObjectWrapper<Badges.BadgeActionEvents>(),
+  });
+}
+
+function assertMessageIncludes(messageInput: HTMLElement|string, textToInclude: string): void {
+  let actualText: string;
+  if (messageInput instanceof HTMLElement) {
+    actualText = messageInput.textContent;
+  } else {
+    actualText = messageInput;
+  }
+  assert.include(actualText, textToInclude);
+}
 
 describeWithEnvironment('BadgeNotification', () => {
   async function createWidget(properties?: Partial<BadgeNotification.BadgeNotificationProperties>) {
     const view = createViewFunctionStub(BadgeNotification.BadgeNotification);
     const widget = new BadgeNotification.BadgeNotification(undefined, view);
-    widget.message = properties?.message ?? html`Test message`;
+    widget.message = properties?.message ?? 'Test message';
     widget.imageUri = properties?.imageUri ?? 'test.png';
     widget.actions = properties?.actions ?? [];
     widget.markAsRoot();
@@ -54,4 +92,70 @@ describeWithEnvironment('BadgeNotification', () => {
     view.input.onCloseClick();
     assert.isFalse(inspectorViewRootElementStub.contains(widget.element));
   });
+
+  it('presents an activity-based badge', async () => {
+    const {view, widget} = await createWidget();
+    const badge = createMockBadge(TestBadge);
+
+    await widget.present(badge);
+    const input = await view.nextInput;
+
+    assert.strictEqual(input.imageUri, badge.imageUri);
+    assert.lengthOf(input.actions, 2);
+    assert.strictEqual(input.actions[0].label, 'Badge settings');
+    assert.strictEqual(input.actions[1].label, 'View profile');
+    assertMessageIncludes(input.message, 'It has been added to your Developer Profile.');
+  });
+
+  it('presents a starter badge as an activity-based badge if the user has a profile and has enabled badges',
+     async () => {
+       sinon.stub(Host.GdpClient.GdpClient.instance(), 'getProfile').resolves({} as Host.GdpClient.Profile);
+       sinon.stub(Badges.UserBadges.instance(), 'isReceiveBadgesSettingEnabled').returns(true);
+
+       const {view, widget} = await createWidget();
+       const badge = createMockBadge(TestStarterBadge);
+
+       await widget.present(badge);
+       const input = await view.nextInput;
+
+       // Should fall back to the activity-based badge flow.
+       assert.strictEqual(input.imageUri, 'starter-badge-image-uri');
+       assert.lengthOf(input.actions, 2);
+       assert.strictEqual(input.actions[0].label, 'Badge settings');
+       assert.strictEqual(input.actions[1].label, 'View profile');
+       assertMessageIncludes(input.message, 'It has been added to your Developer Profile.');
+     });
+
+  it('presents a starter badge with an opt-in message if the user has a profile but has disabled badges', async () => {
+    sinon.stub(Host.GdpClient.GdpClient.instance(), 'getProfile').resolves({} as Host.GdpClient.Profile);
+    sinon.stub(Badges.UserBadges.instance(), 'isReceiveBadgesSettingEnabled').returns(false);
+
+    const {view, widget} = await createWidget();
+    const badge = createMockBadge(TestStarterBadge);
+
+    await widget.present(badge);
+    const input = await view.nextInput;
+
+    assert.strictEqual(input.imageUri, badge.imageUri);
+    assert.lengthOf(input.actions, 2);
+    assert.strictEqual(input.actions[0].label, 'Remind me later');
+    assert.strictEqual(input.actions[1].label, 'Receive badges');
+    assertMessageIncludes(input.message, 'Turn on badges to claim it.');
+  });
+
+  it('presents a starter badge with a create profile message if the user does not have a profile', async () => {
+    sinon.stub(Host.GdpClient.GdpClient.instance(), 'getProfile').resolves(null);
+
+    const {view, widget} = await createWidget();
+    const badge = createMockBadge(TestStarterBadge);
+
+    await widget.present(badge);
+    const input = await view.nextInput;
+
+    assert.strictEqual(input.imageUri, badge.imageUri);
+    assert.lengthOf(input.actions, 2);
+    assert.strictEqual(input.actions[0].label, 'Remind me later');
+    assert.strictEqual(input.actions[1].label, 'Create profile');
+    assertMessageIncludes(input.message, 'Create a profile to claim your badge.');
+  });
 });

front_end/panels/common/BadgeNotification.ts

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -17,10 +19,50 @@ const UIStrings = {
    * @description Title for close button
    */
   dismiss: 'Dismiss',
+  /**
+   * @description Activity based badge award notification text
+   * @example {Badge Title} PH1
+   */
+  activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It has been added to your Developer Profile.',
+  /**
+   * @description Action title for navigating to the badge settings in Google Developer Profile section
+   */
+  badgeSettings: 'Badge settings',
+  /**
+   * @description Action title for opening the Google Developer Program profile page of the user in a new tab
+   */
+  viewProfile: 'View profile',
+  /**
+   * @description Starter badge award notification text when the user has a Google Developer Program profile but did not enable receiving badges in DevTools yet
+   * @example {Badge Title} PH1
+   * @example {Google Developer Program link} PH2
+   */
+  starterBadgeAwardMessageSettingDisabled: 'You earned the {PH1} badge for the {PH2}! Turn on badges to claim it.',
+  /**
+   * @description Starter badge award notification text when the user does not have a Google Developer Program profile.
+   * @example {Badge Title} PH1
+   * @example {Google Developer Program link} PH2
+   */
+  starterBadgeAwardMessageNoGdpProfile:
+      'You earned the {PH1} badge for the {PH2}! Create a profile to claim your badge.',
+  /**
+   * @description Action title for snoozing the starter badge.
+   */
+  remindMeLater: 'Remind me later',
+  /**
+   * @description Action title for enabling the "Receive badges" setting
+   */
+  receiveBadges: 'Receive badges',
+  /**
+   * @description Action title for creating a Google Developer Program profle
+   */
+  createProfile: 'Create profile',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/common/BadgeNotification.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
+const lockedString = i18n.i18n.lockedString;
 
 export interface BadgeNotificationAction {
   label: string;
@@ -30,7 +72,7 @@ export interface BadgeNotificationAction {
 }
 
 export interface BadgeNotificationProperties {
-  message: Lit.LitTemplate;
+  message: HTMLElement|string;
   imageUri: string;
   actions: BadgeNotificationAction[];
 }
@@ -80,7 +122,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 type View = typeof DEFAULT_VIEW;
 
 export class BadgeNotification extends UI.Widget.Widget {
-  message: Lit.LitTemplate = html``;
+  message: HTMLElement|string = '';
   imageUri = '';
   actions: BadgeNotificationAction[] = [];
 
@@ -91,13 +133,81 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#view = view;
   }
 
-  static show(properties: BadgeNotificationProperties): BadgeNotification {
-    const widget = new BadgeNotification();
-    widget.message = properties.message;
-    widget.imageUri = properties.imageUri;
-    widget.actions = properties.actions;
-    widget.show(UI.InspectorView.InspectorView.instance().element);
-    return widget;
+  async present(badge: Badges.Badge): Promise<void> {
+    if (badge.isStarterBadge) {
+      await this.#presentStarterBadge(badge);
+    } else {
+      this.#presentActivityBasedBadge(badge);
+    }
+  }
+
+  #show(properties: BadgeNotificationProperties): void {
+    this.message = properties.message;
+    this.imageUri = properties.imageUri;
+    this.actions = properties.actions;
+    this.requestUpdate();
+    this.show(UI.InspectorView.InspectorView.instance().element);
+  }
+
+  async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
+    const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+    const receiveBadgesSettingEnabled = Badges.UserBadges.instance().isReceiveBadgesSettingEnabled();
+    const googleDeveloperProgramLink = UI.XLink.XLink.create(
+        'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
+        'gdp.program-link');
+
+    // If the user already has a GDP profile and the receive badges setting enabled,
+    // starter badge behaves as if it's an activity based badge.
+    if (gdpProfile && receiveBadgesSettingEnabled) {
+      this.#presentActivityBasedBadge(badge);
+      return;
+    }
+
+    // If the user already has a GDP profile and the receive badges setting disabled,
+    // starter badge behaves as a nudge for opting into receiving badges.
+    if (gdpProfile && !receiveBadgesSettingEnabled) {
+      this.#show({
+        message: i18nFormatString(
+            UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+        actions: [
+          {
+            label: i18nString(UIStrings.remindMeLater),
+            onClick: () => {/* To implement */},
+          },
+          {label: i18nString(UIStrings.receiveBadges), onClick: () => { /* To implement */ }}
+        ],
+        imageUri: badge.imageUri,
+      });
+      return;
+    }
+
+    // The user does not have a GDP profile, starter badge acts as a nudge for creating a GDP profile.
+    this.#show({
+      message: i18nFormatString(
+          UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      actions: [
+        {
+          label: i18nString(UIStrings.remindMeLater),
+          onClick: () => {/* TODO(ergunsh): Implement */},
+        },
+        {label: i18nString(UIStrings.createProfile), onClick: () => { /* TODO(ergunsh): Implement */ }}
+      ],
+      imageUri: badge.imageUri,
+    });
+  }
+
+  #presentActivityBasedBadge(badge: Badges.Badge): void {
+    this.#show({
+      message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
+      actions: [
+        {
+          label: i18nString(UIStrings.badgeSettings),
+          onClick: () => {/* TODO(ergunsh): Implement */},
+        },
+        {label: i18nString(UIStrings.viewProfile), onClick: () => { /* TODO(ergunsh): Implement */ }}
+      ],
+      imageUri: badge.imageUri,
+    });
   }
 
   #close = (): void => {