[GdpIntegration] Show the sign up dialog on createProfile click

* Drive-by: Move the view profile link to constants and open it
from the badge.

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

Author: ergunsh

front_end/core/host/GdpClient.ts

@@ -68,6 +68,9 @@ export interface Profile {
   };
 }
 
+// TODO(crbug.com/441679275): Update once the API is enabled for prod.
+export const GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK = 'https://developers.devsite.corp.google.com/profile/u/';
+
 async function makeHttpRequest<R extends object>(request: DispatchHttpRequestRequest): Promise<R|null> {
   if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
     return null;

front_end/panels/common/BadgeNotification.ts

@@ -11,6 +11,7 @@ import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import badgeNotificationStyles from './badgeNotification.css.js';
+import * as GdpSignUpDialog from './GdpSignUpDialog.js';
 
 const {html, render} = Lit;
 
@@ -194,7 +195,13 @@ export class BadgeNotification extends UI.Widget.Widget {
           label: i18nString(UIStrings.remindMeLater),
           onClick: () => {/* TODO(ergunsh): Implement */},
         },
-        {label: i18nString(UIStrings.createProfile), onClick: () => { /* TODO(ergunsh): Implement */ }}
+        {
+          label: i18nString(UIStrings.createProfile),
+          onClick: () => {
+            this.#close();
+            GdpSignUpDialog.GdpSignUpDialog.show();
+          }
+        }
       ],
       imageUri: badge.imageUri,
     });
@@ -208,7 +215,12 @@ export class BadgeNotification extends UI.Widget.Widget {
           label: i18nString(UIStrings.badgeSettings),
           onClick: () => {/* TODO(ergunsh): Implement */},
         },
-        {label: i18nString(UIStrings.viewProfile), onClick: () => { /* TODO(ergunsh): Implement */ }}
+        {
+          label: i18nString(UIStrings.viewProfile),
+          onClick: () => {
+            UI.UIUtils.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
+          }
+        }
       ],
       imageUri: badge.imageUri,
     });

front_end/panels/settings/components/SyncSection.ts

@@ -110,8 +110,6 @@ function getGdpSubscriptionText(profile: Host.GdpClient.Profile): Platform.UIStr
 }
 
 const GDP_LOGO_IMAGE_URL = new URL('../../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
-// TODO(crbug.com/441679275): Update once the API is enabled for prod.
-const GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK = 'https://developers.devsite.corp.google.com/profile/u/';
 
 export interface SyncSectionData {
   syncInfo: Host.InspectorFrontendHostAPI.SyncInformation;
@@ -262,7 +260,7 @@ function renderGdpSectionIfNeeded({
           <div class="plan-details">
             ${getGdpSubscriptionText(gdpProfile)}
             &nbsp;·&nbsp;
-            <x-link class="link" href=${GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK}>
+            <x-link class="link" href=${Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK}>
               ${i18nString(UIStrings.viewProfile)}
             </x-link></div>
             ${receiveBadgesSetting ? html`