Merge pull request #18333 from mozilla/fxa-10935

fix(settings): Fix bug with disconnecting an "unknown" service

Author: vbudhram

packages/fxa-settings/src/components/Settings/ConnectedServices/index.test.tsx

@@ -389,6 +389,138 @@ describe('Connected Services', () => {
     );
   });
 
+  it('on disconnect, with empty client name', async () => {
+    const attachedClients = [
+      {
+        clientId: 'a8c528140153d1c6',
+        refreshTokenId:
+          'f0b7dae0043cb07cdb0f1ff160367a0b3214a91f037621e892060d9a146f2d8e',
+        name: undefined,
+        createdTime: 1571412069000,
+        lastAccessTime: 1571412069000,
+        userAgent: '',
+        os: null,
+        location: {
+          city: null,
+          country: null,
+          state: null,
+          stateCode: null,
+        },
+        isCurrentSession: false,
+        createdTimeFormatted: 'a month ago',
+        lastAccessTimeFormatted: 'a month ago',
+        approximateLastAccessTime: null,
+        approximateLastAccessTimeFormatted: null,
+      },
+    ];
+
+    const account = {
+      attachedClients,
+      disconnectClient: jest.fn().mockResolvedValue(true),
+    } as unknown as Account;
+
+    renderWithRouter(
+      <AppContext.Provider value={mockAppContext({ account })}>
+        <ConnectedServices />
+      </AppContext.Provider>
+    );
+
+    await clickFirstSignOutButton();
+    expect(logViewEvent).toHaveBeenCalledWith(
+      'settings.clients.disconnect',
+      'submit.no-reason'
+    );
+
+    expect(account.disconnectClient).toBeCalledTimes(1);
+  });
+
+  it('on disconnect, with more than one empty client name', async () => {
+    const attachedClients = [
+      {
+        clientId: 'a8c528140153d1c6',
+        refreshTokenId:
+          'f0b7dae0043cb07cdb0f1ff160367a0b3214a91f037621e892060d9a146f2d8e',
+        name: undefined,
+        createdTime: 1571412069000,
+        lastAccessTime: 1571412069000,
+        userAgent: '',
+        os: null,
+        location: {
+          city: null,
+          country: null,
+          state: null,
+          stateCode: null,
+        },
+        isCurrentSession: false,
+        createdTimeFormatted: 'a month ago',
+        lastAccessTimeFormatted: 'a month ago',
+        approximateLastAccessTime: null,
+        approximateLastAccessTimeFormatted: null,
+      },
+      {
+        clientId: 'a8c528140153d1c7',
+        refreshTokenId:
+          'f0b7dae0043cb07cdb0f1ff160367a0b3214a91f037621e892060d9a146f2d8d',
+        name: undefined,
+        createdTime: 1571412069000,
+        lastAccessTime: 1571412069000,
+        userAgent: '',
+        os: null,
+        location: {
+          city: null,
+          country: null,
+          state: null,
+          stateCode: null,
+        },
+        isCurrentSession: false,
+        createdTimeFormatted: 'a month ago',
+        lastAccessTimeFormatted: 'a month ago',
+        approximateLastAccessTime: null,
+        approximateLastAccessTimeFormatted: null,
+      },
+      {
+        clientId: 'a8c528140153d1c8',
+        refreshTokenId:
+          'f0b7dae0043cb07cdb0f1ff160367a0b3214a91f037621e892060d9a146f2d8c',
+        name: undefined,
+        createdTime: 1571412069000,
+        lastAccessTime: 1571412069000,
+        userAgent: '',
+        os: null,
+        location: {
+          city: null,
+          country: null,
+          state: null,
+          stateCode: null,
+        },
+        isCurrentSession: false,
+        createdTimeFormatted: 'a month ago',
+        lastAccessTimeFormatted: 'a month ago',
+        approximateLastAccessTime: null,
+        approximateLastAccessTimeFormatted: null,
+      },
+    ];
+
+    const account = {
+      attachedClients,
+      disconnectClient: jest.fn().mockResolvedValue(true),
+    } as unknown as Account;
+
+    renderWithRouter(
+      <AppContext.Provider value={mockAppContext({ account })}>
+        <ConnectedServices />
+      </AppContext.Provider>
+    );
+
+    await clickFirstSignOutButton();
+    expect(logViewEvent).toHaveBeenCalledWith(
+      'settings.clients.disconnect',
+      'submit.no-reason'
+    );
+
+    expect(account.disconnectClient).toBeCalledTimes(3);
+  });
+
   describe('redirects to /signin when active session is signed out', () => {
     const mockWindowAssign = jest.fn();
     Object.defineProperty(window, 'location', {

packages/fxa-settings/src/components/Settings/ConnectedServices/index.tsx

@@ -106,7 +106,8 @@ export const ConnectedServices = forwardRef<HTMLDivElement>((_, ref) => {
         // disconnect all clients/sessions with this name since only unique names
         // are displayed to the user. This is batched into one network request
         // via BatchHttpLink
-        const clientsWithMatchingName = groupedByName[client.name || 'unknown'];
+        const groupByKey = client.name ?? 'undefined';
+        const clientsWithMatchingName = groupedByName[groupByKey];
         const hasMultipleSessions = clientsWithMatchingName.length > 1;
         if (hasMultipleSessions) {
           await Promise.all(