feat: [M3-8570] - Finish sunsetting Gravatar (#10930)

* Clean up, clean up

* Remove missed clean up on Profile Details page

* Add changeset

* Use 'Akamai' instead of 'Linode' username for sys events

* Update unit tests

packages/manager/.changeset/pr-10930-removed-1726159393499.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Support for Gravatar as user profile avatars ([#10930](https://github.com/linode/manager/pull/10930))

packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx

@@ -19,8 +19,6 @@ import { useProfile, useSSHKeysQuery } from 'src/queries/profile/profile';
 import { truncateAndJoinList } from 'src/utilities/stringUtils';
 
 import { Avatar } from '../Avatar/Avatar';
-import { GravatarByEmail } from '../GravatarByEmail';
-import { GravatarOrAvatar } from '../GravatarOrAvatar';
 import { PaginationFooter } from '../PaginationFooter/PaginationFooter';
 import { TableRowLoading } from '../TableRowLoading/TableRowLoading';
 
@@ -37,12 +35,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
   cellUser: {
     width: '30%',
   },
-  gravatar: {
-    borderRadius: '50%',
-    height: 24,
-    marginRight: theme.spacing(1),
-    width: 24,
-  },
   title: {
     marginBottom: theme.spacing(2),
   },
@@ -150,15 +142,7 @@ const UserSSHKeyPanel = (props: Props) => {
           </TableCell>
           <TableCell className={classes.cellUser}>
             <div className={classes.userWrapper}>
-              <GravatarOrAvatar
-                gravatar={
-                  <GravatarByEmail
-                    className={classes.gravatar}
-                    email={profile.email}
-                  />
-                }
-                avatar={<Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />}
-              />
+              <Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />
               {profile.username}
             </div>
           </TableCell>
@@ -187,25 +171,16 @@ const UserSSHKeyPanel = (props: Props) => {
         </TableCell>
         <TableCell className={classes.cellUser}>
           <div className={classes.userWrapper}>
-            <GravatarOrAvatar
-              avatar={
-                <Avatar
-                  color={
-                    user.username !== profile?.username
-                      ? theme.palette.primary.dark
-                      : undefined
-                  }
-                  sx={{ borderRadius: '50%', marginRight: 1 }}
-                  username={user.username}
-                />
-              }
-              gravatar={
-                <GravatarByEmail
-                  className={classes.gravatar}
-                  email={user.email}
-                />
+            <Avatar
+              color={
+                user.username !== profile?.username
+                  ? theme.palette.primary.dark
+                  : undefined
               }
+              sx={{ borderRadius: '50%', marginRight: 1 }}
+              username={user.username}
             />
+
             {user.username}
           </div>
         </TableCell>

packages/manager/src/components/Avatar/Avatar.test.tsx

@@ -61,7 +61,7 @@ describe('Avatar', () => {
   });
 
   it('should render an svg instead of first letter for system users', async () => {
-    const systemUsernames = ['Linode', 'lke-service-account-123'];
+    const systemUsernames = ['Akamai', 'lke-service-account-123'];
 
     systemUsernames.forEach((username, i) => {
       const { getAllByRole, queryByTestId } = renderWithTheme(

packages/manager/src/components/Avatar/Avatar.tsx

@@ -55,7 +55,7 @@ export const Avatar = (props: AvatarProps) => {
 
   const _username = username ?? profile?.username ?? '';
   const isAkamai =
-    _username === 'Linode' || _username.startsWith('lke-service-account');
+    _username === 'Akamai' || _username.startsWith('lke-service-account');
 
   const savedAvatarColor =
     isAkamai || !preferences?.avatarColor

packages/manager/src/features/Events/EventRow.tsx

@@ -5,14 +5,12 @@ import { Avatar } from 'src/components/Avatar/Avatar';
 import { BarPercent } from 'src/components/BarPercent';
 import { Box } from 'src/components/Box';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
-import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { useProfile } from 'src/queries/profile/profile';
 import { getEventTimestamp } from 'src/utilities/eventUtils';
 
-import { StyledGravatar } from './EventRow.styles';
 import {
   formatProgressEvent,
   getEventMessage,
@@ -60,25 +58,14 @@ export const EventRow = (props: EventRowProps) => {
       <Hidden smDown>
         <TableCell data-qa-event-username-cell parentColumn="Username">
           <Box alignItems="center" display="flex" gap={1}>
-            <GravatarOrAvatar
-              avatar={
-                <Avatar
-                  color={
-                    username !== profile?.username
-                      ? theme.palette.primary.dark
-                      : undefined
-                  }
-                  height={24}
-                  username={username}
-                  width={24}
-                />
-              }
-              gravatar={
-                <StyledGravatar
-                  username={username === 'Linode' ? '' : username}
-                />
+            <Avatar
+              color={
+                username !== profile?.username
+                  ? theme.palette.primary.dark
+                  : undefined
               }
               height={24}
+              username={username}
               width={24}
             />
             {username}

packages/manager/src/features/Events/utils.test.tsx

@@ -116,7 +116,7 @@ describe('getEventUsername', () => {
       username: 'test-user',
     });
 
-    expect(getEventUsername(mockEvent)).toBe('Linode');
+    expect(getEventUsername(mockEvent)).toBe('Akamai');
   });
 
   it('returns "Linode" if the username does not exist', () => {
@@ -125,7 +125,7 @@ describe('getEventUsername', () => {
       username: null,
     });
 
-    expect(getEventUsername(mockEvent)).toBe('Linode');
+    expect(getEventUsername(mockEvent)).toBe('Akamai');
   });
 
   it('returns "Linode" if the username does not exist and action is in ACTIONS_WITHOUT_USERNAMES', () => {
@@ -140,7 +140,7 @@ describe('getEventUsername', () => {
       username: null,
     });
 
-    expect(getEventUsername(mockEvent)).toBe('Linode');
+    expect(getEventUsername(mockEvent)).toBe('Akamai');
   });
 });
 

packages/manager/src/features/Events/utils.tsx

@@ -55,7 +55,7 @@ export const getEventUsername = (event: Event) => {
     return event.username;
   }
 
-  return 'Linode';
+  return 'Akamai';
 };
 
 /**

packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx

@@ -15,7 +15,6 @@ import { APIMaintenanceBanner } from './APIMaintenanceBanner';
 import { ComplianceBanner } from './ComplianceBanner';
 import { ComplianceUpdateModal } from './ComplianceUpdateModal';
 import { EmailBounceNotificationSection } from './EmailBounce';
-import { GravatarSunsetBanner } from './GravatarSunsetBanner';
 import { RegionStatusBanner } from './RegionStatusBanner';
 import { TaxCollectionBanner } from './TaxCollectionBanner';
 import { DesignUpdateBanner } from './TokensUpdateBanner';
@@ -87,7 +86,6 @@ export const GlobalNotifications = () => {
       Object.keys(flags.taxCollectionBanner).length > 0 ? (
         <TaxCollectionBanner />
       ) : null}
-      <GravatarSunsetBanner email={profile?.email ?? ''} />
     </>
   );
 };

packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 
 import { BarPercent } from 'src/components/BarPercent';
 import { Box } from 'src/components/Box';
-import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Typography } from 'src/components/Typography';
 import {
   formatProgressEvent,
@@ -14,7 +13,6 @@ import { useProfile } from 'src/queries/profile/profile';
 
 import {
   NotificationEventAvatar,
-  NotificationEventGravatar,
   NotificationEventStyledBox,
   notificationEventStyles,
 } from '../NotificationCenter.styles';
@@ -55,21 +53,15 @@ export const NotificationCenterEvent = React.memo(
         data-qa-event-seen={event.seen}
         data-testid={event.action}
       >
-        <GravatarOrAvatar
-          avatar={
-            <NotificationEventAvatar
-              color={
-                username !== profile?.username
-                  ? theme.palette.primary.dark
-                  : undefined
-              }
-              username={username}
-            />
+        <NotificationEventAvatar
+          color={
+            username !== profile?.username
+              ? theme.palette.primary.dark
+              : undefined
           }
-          gravatar={<NotificationEventGravatar username={username} />}
-          height={32}
-          width={32}
+          username={username}
         />
+
         <Box sx={{ marginTop: '-2px', paddingRight: 1, width: '100%' }}>
           {message}
           {showProgress && (