Make SyncSection fetch its own GDP profile

This change refactors the `SyncSection` component to fetch its own
Google Developer Program (GDP) profile information instead of receiving
it from the parent `SettingsScreen` component.

This is necessary to allow the `SyncSection` to re-render and show the
user's new profile information after they successfully sign up for the
GDP. Previously, the `SettingsScreen` would fetch the profile and pass
it down, but there was no mechanism to trigger a refresh after the
sign-up flow was completed.

The tests for `SyncSection` have been updated to mock the GDP profile
fetching and ensure the component renders correctly in all states.

Fixed: 443050804
Change-Id: I12e03a5bcd94506314a15099cc6317e187c54829
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6919150
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Natallia Harshunova <[email protected]>

Author: Natallia Harshunova

front_end/core/host/GdpClient.test.ts

@@ -41,6 +41,16 @@ describe('GdpClient', () => {
     sinon.assert.calledOnce(dispatchHttpRequestStub);
   });
 
+  it('should clear cache after creating a profile', async () => {
+    await Host.GdpClient.GdpClient.instance().getProfile();
+    await Host.GdpClient.GdpClient.instance().createProfile(
+        {user: 'test', emailPreference: Host.GdpClient.EmailPreference.ENABLED});
+    await Host.GdpClient.GdpClient.instance().getProfile();
+    await Host.GdpClient.GdpClient.instance().getProfile();
+
+    sinon.assert.calledThrice(dispatchHttpRequestStub);
+  });
+
   describe('when the integration is disabled', () => {
     it('should not make a request', async () => {
       updateHostConfig({

front_end/core/host/GdpClient.ts

@@ -131,16 +131,26 @@ export class GdpClient {
     return (await this.checkEligibility())?.createProfile === EligibilityStatus.ELIGIBLE;
   }
 
-  createProfile({user, emailPreference}: {user: string, emailPreference: EmailPreference}): Promise<Profile|null> {
-    return makeHttpRequest({
+  async createProfile({user, emailPreference}: {user: string, emailPreference: EmailPreference}):
+      Promise<Profile|null> {
+    const result = await makeHttpRequest<Profile>({
       service: SERVICE_NAME,
       path: '/v1beta1/profiles',
       method: 'POST',
       body: JSON.stringify({
         user,
         newsletter_email: emailPreference,
-      })
+      }),
     });
+    if (result) {
+      this.#clearCache();
+    }
+    return result;
+  }
+
+  #clearCache(): void {
+    this.#cachedProfilePromise = undefined;
+    this.#cachedEligibilityPromise = undefined;
   }
 
   createAward({name}: {name: string}): Promise<Award|null> {

front_end/panels/settings/SettingsScreen.ts

@@ -336,19 +336,13 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
       this.#updateSyncSectionTimerId = -1;
     }
 
-    void Promise
-        .all([
-          new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
-              resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve)),
-          Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled ? Host.GdpClient.GdpClient.instance().getProfile() :
-                                                                 Promise.resolve(undefined),
-        ])
-        .then(([syncInfo, gdpProfile]) => {
+    void new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
+        resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve))
+        .then(syncInfo => {
           this.syncSection.data = {
             syncInfo,
             syncSetting: Common.Settings.moduleSetting('sync-preferences') as Common.Settings.Setting<boolean>,
             receiveBadgesSetting: Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges'),
-            gdpProfile: gdpProfile ?? undefined,
           };
           if (!syncInfo.isSyncActive || !syncInfo.arePreferencesSynced) {
             this.#updateSyncSectionTimerId = window.setTimeout(this.updateSyncSection.bind(this), 500);

front_end/panels/settings/components/SyncSection.test.ts

@@ -150,6 +150,9 @@ describeWithLocale('SyncSection', () => {
     });
 
     it('renders the sign-up state when the user does not have a GDP profile', async () => {
+      const gdpClient = Host.GdpClient.GdpClient.instance();
+      sinon.stub(gdpClient, 'getProfile').resolves(null);
+
       const syncSetting = createFakeSetting<boolean>('setting', true);
       const receiveBadgesSetting = createFakeSetting<boolean>('receive-badges', true);
       const {shadowRoot} = await renderSyncSection({
@@ -160,7 +163,6 @@ describeWithLocale('SyncSection', () => {
         },
         syncSetting,
         receiveBadgesSetting,
-        gdpProfile: undefined,  // No profile
       });
       const gdpSection = shadowRoot.querySelector('.gdp-profile-container');
       assert.instanceOf(gdpSection, HTMLElement);
@@ -175,9 +177,14 @@ describeWithLocale('SyncSection', () => {
     });
 
     it('renders the profile details with standard plan', async () => {
+      const gdpClient = Host.GdpClient.GdpClient.instance();
+      sinon.stub(gdpClient, 'getProfile').resolves({
+        name: 'test-profile',
+        activeSubscription: undefined,
+      });
+
       const syncSetting = createFakeSetting<boolean>('setting', true);
       const receiveBadgesSetting = createFakeSetting<boolean>('receive-badges', true);
-      const gdpProfile: Host.GdpClient.Profile = {name: 'profile-name'};  // No active subscription
       const {shadowRoot} = await renderSyncSection({
         syncInfo: {
           isSyncActive: true,
@@ -186,7 +193,6 @@ describeWithLocale('SyncSection', () => {
         },
         syncSetting,
         receiveBadgesSetting,
-        gdpProfile,
       });
 
       const gdpSection = shadowRoot.querySelector('.gdp-profile-container');
@@ -229,15 +235,17 @@ describeWithLocale('SyncSection', () => {
 
     for (const {tier, expectedText} of subscriptionTiers) {
       it(`renders the profile details with ${expectedText} plan`, async () => {
-        const syncSetting = createFakeSetting<boolean>('setting', true);
-        const receiveBadgesSetting = createFakeSetting<boolean>('receive-badges', true);
-        const gdpProfile: Host.GdpClient.Profile = {
-          name: 'profile-name',
+        const gdpClient = Host.GdpClient.GdpClient.instance();
+        sinon.stub(gdpClient, 'getProfile').resolves({
+          name: 'test-profile',
           activeSubscription: {
+            subscriptionTier: tier as Host.GdpClient.SubscriptionTier,
             subscriptionStatus: Host.GdpClient.SubscriptionStatus.ENABLED,
-            subscriptionTier: tier,
           },
-        };
+        });
+
+        const syncSetting = createFakeSetting<boolean>('setting', true);
+        const receiveBadgesSetting = createFakeSetting<boolean>('receive-badges', true);
         const {shadowRoot} = await renderSyncSection({
           syncInfo: {
             isSyncActive: true,
@@ -246,7 +254,6 @@ describeWithLocale('SyncSection', () => {
           },
           syncSetting,
           receiveBadgesSetting,
-          gdpProfile,
         });
 
         const gdpSection = shadowRoot.querySelector('.gdp-profile-container');

front_end/panels/settings/components/SyncSection.ts

@@ -117,7 +117,6 @@ export interface SyncSectionData {
   syncInfo: Host.InspectorFrontendHostAPI.SyncInformation;
   syncSetting: Common.Settings.Setting<boolean>;
   receiveBadgesSetting: Common.Settings.Setting<boolean>;
-  gdpProfile?: Host.GdpClient.Profile;
 }
 
 export class SyncSection extends HTMLElement {
@@ -132,7 +131,7 @@ export class SyncSection extends HTMLElement {
     this.#syncInfo = data.syncInfo;
     this.#syncSetting = data.syncSetting;
     this.#receiveBadgesSetting = data.receiveBadgesSetting;
-    this.#gdpProfile = data.gdpProfile;
+    void this.#updateGdpProfile();
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
@@ -157,6 +156,11 @@ export class SyncSection extends HTMLElement {
     `, this.#shadow, {host: this});
     // clang-format on
   }
+
+  async #updateGdpProfile(): Promise<void> {
+    this.#gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile() ?? undefined;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  }
 }
 
 function renderSettingCheckboxIfNeeded(