Merge pull request #13698 from mozilla/FXA-417-in-devices-apps-use-th…

…e-envelope-icon-for-email-preferences feat(settings): Add icon+link for email prefs. Fix FXA-417
mozilla · Aug 1, 2022 · 55a9136 · 55a9136
2 parents 6b29ddd + 09b1b49
commit 55a9136
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/packages/fxa-settings/src/components/ConnectedServices/Service.tsx b/packages/fxa-settings/src/components/ConnectedServices/Service.tsx
@@ -19,6 +19,7 @@ import { ReactComponent as RelayIcon } from './relay.svg';
 import { ReactComponent as AddonIcon } from './addon.svg';
 import { ReactComponent as MDNPlusIcon } from './mdnplus.svg';
 import { ReactComponent as PontoonIcon } from './pontoon.svg';
+import { ReactComponent as MailIcon } from './mail.svg';
 import { Localized } from '@fluent/react';
 
 export function Service({
@@ -72,6 +73,10 @@ export function Service({
       serviceLink = 'https://developer.mozilla.org/';
       Icon = <MDNPlusIcon data-testid="mdnplus-icon" />;
       break;
+    case 'Mozilla email preferences':
+      serviceLink = 'https://basket.mozilla.org/fxa/';
+      Icon = <MailIcon data-testid="mail-icon" />;
+      break;
     case 'Pontoon':
       serviceLink = 'https://pontoon.mozilla.org/';
       Icon = <PontoonIcon data-testid="pontoon-icon" />;

diff --git a/packages/fxa-settings/src/components/ConnectedServices/index.test.tsx b/packages/fxa-settings/src/components/ConnectedServices/index.test.tsx
@@ -113,7 +113,7 @@ describe('Connected Services', () => {
     const { sortedAndUniqueClients, groupedByName } =
       sortAndFilterConnectedClients(MOCK_SERVICES);
 
-    expect(sortedAndUniqueClients.length).toEqual(12);
+    expect(sortedAndUniqueClients.length).toEqual(13);
 
     expect(
       sortedAndUniqueClients.filter((item) => item.name === 'Firefox Monitor')
@@ -205,6 +205,18 @@ describe('Connected Services', () => {
     });
   });
 
+  it('should show the Mail preferences icon and link', async () => {
+    await getIconAndServiceLink('Mozilla email preferences', 'mail-icon').then(
+      (result) => {
+        expect(result.icon).toBeTruthy();
+        expect(result.link).toHaveAttribute(
+          'href',
+          'https://basket.mozilla.org/fxa/'
+        );
+      }
+    );
+  });
+
   it('should show the Pontoon icon and link', async () => {
     await getIconAndServiceLink('Pontoon', 'pontoon-icon').then((result) => {
       expect(result.icon).toBeTruthy();
@@ -259,7 +271,7 @@ describe('Connected Services', () => {
     );
     expect(
       await screen.findAllByTestId('connected-service-sign-out')
-    ).toHaveLength(12);
+    ).toHaveLength(13);
   });
 
   it('renders proper modal when "sign out" is clicked', async () => {

diff --git a/packages/fxa-settings/src/components/ConnectedServices/mail.svg b/packages/fxa-settings/src/components/ConnectedServices/mail.svg
diff --git a/packages/fxa-settings/src/components/ConnectedServices/mocks.ts b/packages/fxa-settings/src/components/ConnectedServices/mocks.ts
@@ -256,6 +256,31 @@ const OAUTH_SERVICE_MOCKS = [
     approximateLastAccessTime: null,
     approximateLastAccessTimeFormatted: null,
   },
+  {
+    clientId: 'c40f32fd2938f0b6',
+    deviceId: null,
+    sessionTokenId: null,
+    refreshTokenId:
+      'e2e4001b8184721aba5cb7bf5df8f5af16d6f36dc144c1f40d9c86397cc22222',
+    isCurrentSession: false,
+    deviceType: null,
+    name: 'Mozilla email preferences',
+    createdTime: 1556745521001,
+    lastAccessTime: 1556745521001,
+    scope: null,
+    location: {
+      city: null,
+      country: null,
+      state: null,
+      stateCode: null,
+    },
+    userAgent: '',
+    os: null,
+    createdTimeFormatted: '6 months ago',
+    lastAccessTimeFormatted: '6 months ago',
+    approximateLastAccessTime: null,
+    approximateLastAccessTimeFormatted: null,
+  },
   {
     clientId: 'c87d36d7fd9a1bcf',
     deviceId: null,