feat: [M3-8158] - Begin to sunset Gravatar

packages/manager/.changeset/pr-10859-added-1725550540714.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Gravatar sunset banner for existing Gravatar users ([#10859](https://github.com/linode/manager/pull/10859))

packages/manager/.changeset/pr-10859-changed-1725550568902.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Avatars for users without Gravatars ([#10859](https://github.com/linode/manager/pull/10859))

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

@@ -1,4 +1,4 @@
-import { Theme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -16,12 +16,17 @@ import { CreateSSHKeyDrawer } from 'src/features/Profile/SSHKeys/CreateSSHKeyDra
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/account/users';
 import { useProfile, useSSHKeysQuery } from 'src/queries/profile/profile';
+import { fadeIn } from 'src/styles/keyframes';
 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';
 
+import type { Theme } from '@mui/material/styles';
+
 export const MAX_SSH_KEYS_DISPLAY = 25;
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -34,6 +39,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '30%',
   },
   gravatar: {
+    animation: `${fadeIn} .2s ease-out forwards`,
     borderRadius: '50%',
     height: 24,
     marginRight: theme.spacing(1),
@@ -57,6 +63,7 @@ interface Props {
 
 const UserSSHKeyPanel = (props: Props) => {
   const { classes } = useStyles();
+  const theme = useTheme();
   const { authorizedUsers, disabled, setAuthorizedUsers } = props;
 
   const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState<boolean>(
@@ -145,9 +152,14 @@ const UserSSHKeyPanel = (props: Props) => {
           </TableCell>
           <TableCell className={classes.cellUser}>
             <div className={classes.userWrapper}>
-              <GravatarByEmail
-                className={classes.gravatar}
-                email={profile.email}
+              <GravatarOrAvatar
+                gravatar={
+                  <GravatarByEmail
+                    className={classes.gravatar}
+                    email={profile.email}
+                  />
+                }
+                avatar={<Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />}
               />
               {profile.username}
             </div>
@@ -177,7 +189,25 @@ const UserSSHKeyPanel = (props: Props) => {
         </TableCell>
         <TableCell className={classes.cellUser}>
           <div className={classes.userWrapper}>
-            <GravatarByEmail className={classes.gravatar} email={user.email} />
+            <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}
+                />
+              }
+            />
             {user.username}
           </div>
         </TableCell>

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { Avatar } from 'src/components/Avatar/Avatar';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import type { AvatarProps } from 'src/components/Avatar/Avatar';
+
+export const Default: StoryObj<AvatarProps> = {
+  render: (args) => <Avatar {...args} />,
+};
+
+export const System: StoryObj<AvatarProps> = {
+  render: (args) => <Avatar {...args} username="Linode" />,
+};
+
+const meta: Meta<AvatarProps> = {
+  args: {
+    color: '#0174bc',
+    height: 88,
+    sx: {},
+    username: 'MyUsername',
+    width: 88,
+  },
+  component: Avatar,
+  title: 'Components/Avatar',
+};
+export default meta;

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

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+import { profileFactory } from 'src/factories/profile';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { Avatar } from './Avatar';
+
+import type { AvatarProps } from './Avatar';
+
+const mockProps: AvatarProps = {};
+
+const queryMocks = vi.hoisted(() => ({
+  useProfile: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('src/queries/profile/profile', async () => {
+  const actual = await vi.importActual('src/queries/profile/profile');
+  return {
+    ...actual,
+    useProfile: queryMocks.useProfile,
+  };
+});
+
+describe('Avatar', () => {
+  it('should render the first letter of a username from /profile with default background color', () => {
+    queryMocks.useProfile.mockReturnValue({
+      data: profileFactory.build({ username: 'my-user' }),
+    });
+    const { getByTestId } = renderWithTheme(<Avatar {...mockProps} />);
+    const avatar = getByTestId('avatar');
+    const avatarStyles = getComputedStyle(avatar);
+
+    expect(getByTestId('avatar-letter')).toHaveTextContent('M');
+    expect(avatarStyles.backgroundColor).toBe('rgb(1, 116, 188)'); // theme.color.primary.dark (#0174bc)
+  });
+
+  it('should render a background color from props', () => {
+    queryMocks.useProfile.mockReturnValue({
+      data: profileFactory.build({ username: 'my-user' }),
+    });
+
+    const { getByTestId } = renderWithTheme(
+      <Avatar {...mockProps} color="#000000" />
+    );
+    const avatar = getByTestId('avatar');
+    const avatarText = getByTestId('avatar-letter');
+    const avatarStyles = getComputedStyle(avatar);
+    const avatarTextStyles = getComputedStyle(avatarText);
+
+    // Confirm background color contrasts with text color.
+    expect(avatarStyles.backgroundColor).toBe('rgb(0, 0, 0)'); // black
+    expect(avatarTextStyles.color).toBe('rgb(255, 255, 255)'); // white
+  });
+
+  it('should render the first letter of username from props', async () => {
+    const { getByTestId } = renderWithTheme(
+      <Avatar {...mockProps} username="test" />
+    );
+
+    expect(getByTestId('avatar-letter')).toHaveTextContent('T');
+  });
+
+  it('should render an svg instead of first letter for system users', async () => {
+    const systemUsernames = ['Linode', 'lke-service-account-123'];
+
+    systemUsernames.forEach((username, i) => {
+      const { getAllByRole, queryByTestId } = renderWithTheme(
+        <Avatar {...mockProps} username={username} />
+      );
+      expect(getAllByRole('img')[i]).toBeVisible();
+      expect(queryByTestId('avatar-letter')).toBe(null);
+    });
+  });
+});

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

@@ -0,0 +1,96 @@
+import { Typography, useTheme } from '@mui/material';
+import { default as _Avatar } from '@mui/material/Avatar';
+import * as React from 'react';
+
+import AkamaiWave from 'src/assets/logo/akamai-wave.svg';
+import { usePreferences } from 'src/queries/profile/preferences';
+import { useProfile } from 'src/queries/profile/profile';
+
+import type { SxProps } from '@mui/material';
+
+export const DEFAULT_AVATAR_SIZE = 28;
+
+export interface AvatarProps {
+  /**
+   * Optional background color to override the color set in user preferences
+   * */
+  color?: string;
+  /**
+   * Optional height
+   * @default 28px
+   * */
+  height?: number;
+  /**
+   * Optional styles
+   * */
+  sx?: SxProps;
+  /**
+   * Optional username to override the profile username; will display the first letter
+   * */
+  username?: string;
+  /**
+   * Optional width
+   * @default 28px
+   * */
+  width?: number;
+}
+
+/**
+ * The Avatar component displays the first letter of a username on a solid background color.
+ * For system avatars associated with Akamai-generated events, an Akamai logo is displayed in place of a letter.
+ */
+export const Avatar = (props: AvatarProps) => {
+  const {
+    color,
+    height = DEFAULT_AVATAR_SIZE,
+    sx,
+    username,
+    width = DEFAULT_AVATAR_SIZE,
+  } = props;
+
+  const theme = useTheme();
+
+  const { data: preferences } = usePreferences();
+  const { data: profile } = useProfile();
+
+  const _username = username ?? profile?.username ?? '';
+  const isAkamai =
+    _username === 'Linode' || _username.startsWith('lke-service-account');
+
+  const savedAvatarColor =
+    isAkamai || !preferences?.avatarColor
+      ? theme.palette.primary.dark
+      : preferences.avatarColor;
+  const avatarLetter = _username[0]?.toUpperCase() ?? '';
+
+  return (
+    <_Avatar
+      sx={{
+        '& svg': {
+          height: width / 2,
+          width: width / 2,
+        },
+        bgcolor: color ?? savedAvatarColor,
+        height,
+        width,
+        ...sx,
+      }}
+      alt={`Avatar for user ${username ?? profile?.email ?? ''}`}
+      data-testid="avatar"
+    >
+      {isAkamai ? (
+        <AkamaiWave />
+      ) : (
+        <Typography
+          sx={{
+            color: theme.palette.getContrastText(color ?? savedAvatarColor),
+            fontSize: width / 2,
+          }}
+          data-testid="avatar-letter"
+        >
+          {avatarLetter}
+        </Typography>
+      )}
+    </_Avatar>
+  );
+};

packages/manager/src/components/GravatarForProxy.tsx → packages/manager/src/components/AvatarForProxy.tsx

@@ -9,7 +9,7 @@ interface Props {
   width?: number;
 }
 
-export const GravatarForProxy = ({ height = 34, width = 34 }: Props) => {
+export const AvatarForProxy = ({ height = 34, width = 34 }: Props) => {
   return (
     <Box
       sx={(theme) => ({

packages/manager/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { ColorPicker } from 'src/components/ColorPicker/ColorPicker';
+
+import type { ColorPickerProps } from './ColorPicker';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<ColorPickerProps> = {
+  args: {
+    defaultColor: '#0174bc',
+    label: 'Label for color picker',
+    onChange: () => undefined,
+  },
+  component: ColorPicker,
+  title: 'Components/ColorPicker',
+};
+
+export const Default: StoryObj<ColorPickerProps> = {
+  render: (args) => {
+    return <ColorPicker {...args} />;
+  },
+};
+
+export default meta;

packages/manager/src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,54 @@
+import { useTheme } from '@mui/material';
+import React, { useState } from 'react';
+
+import type { CSSProperties } from 'react';
+
+export interface ColorPickerProps {
+  /**
+   * Optional color to specify as a default
+   * */
+  defaultColor?: string;
+  /**
+   * Optional styles for the input element
+   * */
+  inputStyles?: CSSProperties;
+  /**
+   * Visually hidden label to semantically describe the color picker for accessibility
+   * */
+  label: string;
+  /**
+   * Function to update the color based on user selection
+   * */
+  onChange: (color: string) => void;
+}
+
+/**
+ * The ColorPicker component serves as a wrapper for the native HTML input color picker.
+ */
+export const ColorPicker = (props: ColorPickerProps) => {
+  const { defaultColor, inputStyles, label, onChange } = props;
+
+  const theme = useTheme();
+  const [color, setColor] = useState<string>(
+    defaultColor ?? theme.palette.primary.dark
+  );
+
+  return (
+    <>
+      <label className="visually-hidden" htmlFor="color-picker">
+        {label}
+      </label>
+      <input
+        onChange={(e) => {
+          setColor(e.target.value);
+          onChange(e.target.value);
+        }}
+        color={color}
+        id="color-picker"
+        style={inputStyles}
+        type="color"
+        value={color}
+      />
+    </>
+  );
+};