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

mjac0bs · 2024-08-29T17:57:22Z

Description 📝

This is the first step in the two step process of sunsetting Gravatar. It adds new components and replaces the default icons for users currently without Gravatar with new avatars. For users with Gravatars, nothing changes yet except for an info dismissible banner informing Gravatar support will be sunset two weeks from the time this is released.

Changes 🔄

Creates a few new components:
- ColorPicker component based on the native HTML ColorPicker
- Avatar component to render a custom background color (stored in local storage) and first initial of username
  - Proxy avatars remain the same as in Parent/Child, but system events by Akamai/Linode have a default color and wave logo
- AvatarColorPickerDialog to change the background color from its default
Updates the Profile Display page to allow users without Gravatars to use the AvatarColorPickerDialog
Conditionally renders the new Avatar component for users without Gravatars in the following places:
- Top Menu
- Notification Center Event
- Events Landing > Event Table Row
- User Landing > User Table Row
- User SSH Key Panel
- Profile Display
- Support Ticket Details
Displays a global gravatar sunsetting banner for users with Gravatars only
Adds unit tests for new Avatar and AvatarColorPickerDialog components; updates EventRow unit test for changes
Adds Storybook stories for Avatar and ColorPicker components

Target release date 🗓️

09/16/24

Preview 📷

Gravatar	Non-Gravatar

More Photos 📸

Before	After





When logged in as another user on an account, the other users will display as the default color and the active user will see their own avatar color from local storage

How to test 🧪

Prerequisites

(How to setup test environment)

Have an account with a Gravatar and one without (use a test account if you don't have one without)

Verification steps

(How to verify changes)

For an account with a Gravatar:
- Check the following places and confirm the user's Gravatar is still displayed:
  - Top Menu
  - Notification Center Event
  - Events Landing > Event Table Row
  - User Landing > User Table Row
  - User SSH Key Panel
  - Profile Display
  - Support Ticket Details (test this in dev with a dummy support ticket you comment on)
- Confirm the sunsetting banner is visible on every page and is dismissible
For an account without a Gravatar:
- Check the following places and confirm the new Avatar component is displayed:
  - Top Menu
  - Notification Center Event
  - Events Landing > Event Table Row
  - User Landing > User Table Row
  - User SSH Key Panel
  - Profile Display
  - Support Ticket Details (test this in dev with a dummy support ticket you comment on)
- Confirm the sunsetting banner is not visible
- Confirm that you can Change Avatar Color on http://localhost:3000/profile/display and the changes are reflected everywhere the Avatar is displayed
yarn storybook and check the Avatar and ColorPicker stories in Storybook

As an Author I have considered 🤔

Check all that apply

abailly-akamai

This is looking great! some improvement can still be made but I really like the placeholder improvement 💅 and code cleanup 🧹

packages/manager/src/components/GravatarOrAvatar.tsx

packages/manager/src/features/Events/EventRow.styles.ts

packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts

packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx

packages/manager/src/hooks/useGravatar.ts

mjac0bs · 2024-09-10T17:31:30Z

packages/manager/src/features/Linodes/LinodeCreatev2/Security.test.tsx

I am confused. This change did fix the CI failure on the test-manager job, which is now passing here, but it was a failure on a component not touched in this PR. There still seems to be something more going on here because Code Coverage / current branch is still failing. Local runs of unit tests don't reproduce errors.

Seeing the same thing here. Test suite passes locally by CI is unhappy

Reverted this change so it can be addressed in its own PR (M3-8559).

…CI?" This reverts commit c373a53.

abailly-akamai

Great work! Confirmed Avatar/Gravatar behaviors are working as expected and async rendering is handled as best as possible.

Thanks for working with me on improving the flickering issues even if this feels like micro-improvements and who knows, the 2 weeks period may be expended and we have a good UI to support it!

Can't wait to remove a lot of logic related to having to fetch the gravatar and kiss goodbye to this unnecessary burden 👋

Note: fine skipping the the failing test which has become a flake ❄️

This reverts commit 04c0b6b.

mjac0bs · 2024-09-10T22:26:30Z

packages/manager/src/components/GravatarByUsername.tsx

+export const GravatarByUsername = (props: GravatarByUsernameProps) => {
  const { className, username } = props;
-  const { data: user } = useAccountUser(username ?? '');
+  const { data: user, isLoading } = useAccountUser(username ?? '');
  const url = user?.email ? getGravatarUrl(user.email) : undefined;

+  // Render placeholder instead of flashing default user icon briefly
+  if (isLoading) {
+    return <Box height={DEFAULT_AVATAR_SIZE} width={DEFAULT_AVATAR_SIZE} />;
+  }
+


Latest change:

Adds isLoading to render a placeholder for GravatarByUsername while we're waiting for the user. This impacts the events landing and notification center gravatars. Without a placeholder here, while the query loaded, we were setting url to undefined, which rendered the default icon briefly and previously had me adding an extra long fade in (>1s) to avoid. With this actual fix, we still slightly (.2s) fade in the gravatar so the transition from loading to the icon is less abrupt.

Between this change and the cache in useGravatar, we shouldn't be seeing anymore flickering, even at slow speeds.

mjac0bs · 2024-09-11T14:40:55Z

Going to merge this now. The two failed tests in CI were unrelated and flaky - I've seensmoke-delete-linode.spec.ts and clone-linode.spec.ts pass locally.

* Swap out gravatar for colored avatar on Profile > Display * Add utils to determine letter color * Bring back checkForGravatar event and fix hasGravatar boolean * Hide tooltip if user unless user hasGravatar * Add GravatarSunsetBanner.tsx * Use util for banner and profile page * Add Akamai wave icon for Akamai-generated user events * Clean up of theme colors and conditional rendering * Style ColorPicker * Try to handle constrast ratio * Address UX feedback: show avatar preview in dialog * Add new avatar to EventRow on Event Landing page * Conditionally render Gravatar in EventRow until sunset * Replace gravatar conditionally in UserRow of Users Landing * Conditionally render styled Avatar in UserSSHKeyPanel * Conditionally render Avatar in TopMenu; rename GravatarForProxy * Conditionally render styled Avatar in NotificationCenterEvent * Fix sunset date * Use MUI theme function to get contrasting text color * Clean up; change color default to darker color * Clean up Avatar, ColorPicker; add stories * Clean up and add unit tests * Clean up; fix test * Forgot to push last changes for Support; default color fix * Add changesets * Fix an accidentally skipped test * Address UX feedback: use 'Avatar' over 'Profile photo' * Address feedback: avoid regex * Fix bug: NotificationCenterEvent missing Linode system avatar * Use hook throughout gravatar replacement * improve useGravatar hook * Fix: showing new system/support avatars when user has Gravatar enabled * Experiment with component for loading/gravatar/avatar * Handle loading state and fade per-component to fix flickering * Fix username for support tickets; clean up * Fix avatar color for additional account users * Switch over to single GravatarOrAvatar component for rendering * Clean up commented code * Use const for default avatar size * Address feedback: use Map * Does not using the deprecated function fix the unit tests in CI? * Revert "Does not using the deprecated function fix the unit tests in CI?" This reverts commit c373a53. * Skip failing test with JSDom issues for now * Improve fading behavior * Revert "Improve fading behavior" because it causes other issues This reverts commit 04c0b6b. * Add GravatarByUsername loading placeholder; adjust other fades --------- Co-authored-by: Alban Bailly <abailly@akamai.com>

mjac0bs added the Work in Progress label Aug 29, 2024

mjac0bs self-assigned this Aug 29, 2024

mjac0bs force-pushed the M3-8158-replace-gravatar-with-new-avatars branch from 2a5aa36 to ae25868 Compare September 3, 2024 21:33

mjac0bs added 23 commits September 5, 2024 07:04

Swap out gravatar for colored avatar on Profile > Display

0115e51

Add utils to determine letter color

36cc621

Bring back checkForGravatar event and fix hasGravatar boolean

24296ca

Hide tooltip if user unless user hasGravatar

c2bd8c7

Add GravatarSunsetBanner.tsx

e99f755

Use util for banner and profile page

c904496

Add Akamai wave icon for Akamai-generated user events

c76b89b

Clean up of theme colors and conditional rendering

86bf9fc

Style ColorPicker

242f570

Try to handle constrast ratio

0885902

Address UX feedback: show avatar preview in dialog

1136b91

Add new avatar to EventRow on Event Landing page

2b9df00

Conditionally render Gravatar in EventRow until sunset

9c520d4

Replace gravatar conditionally in UserRow of Users Landing

5d65177

Conditionally render styled Avatar in UserSSHKeyPanel

a708fb6

Conditionally render Avatar in TopMenu; rename GravatarForProxy

33a9b94

Conditionally render styled Avatar in NotificationCenterEvent

9e7ed75

Fix sunset date

357bd7e

Use MUI theme function to get contrasting text color

b3c0fe7

Clean up; change color default to darker color

d460d59

Clean up Avatar, ColorPicker; add stories

b26814d

Clean up and add unit tests

f093384

Clean up; fix test

ccea1bd

mjac0bs force-pushed the M3-8158-replace-gravatar-with-new-avatars branch from 93c8efe to ccea1bd Compare September 5, 2024 14:14

mjac0bs marked this pull request as ready for review September 5, 2024 15:33

mjac0bs requested a review from a team as a code owner September 5, 2024 15:34

mjac0bs removed the request for review from a team September 5, 2024 15:34

mjac0bs added 5 commits September 8, 2024 22:49

Fix avatar color for additional account users

b0f7a7d

Merge branch 'develop' into M3-8158-replace-gravatar-with-new-avatars

10399db

Switch over to single GravatarOrAvatar component for rendering

130aec7

Clean up commented code

d48352b

Use const for default avatar size

f4d32f3

mjac0bs requested review from bnussman-akamai and abailly-akamai September 10, 2024 14:26

abailly-akamai reviewed Sep 10, 2024

View reviewed changes

mjac0bs added 3 commits September 10, 2024 09:10

Address feedback: use Map

6a3eca7

Merge branch 'develop' into M3-8158-replace-gravatar-with-new-avatars

e8a6afa

Does not using the deprecated function fix the unit tests in CI?

c373a53

mjac0bs commented Sep 10, 2024

View reviewed changes

Revert "Does not using the deprecated function fix the unit tests in …

2e56cb8

…CI?" This reverts commit c373a53.

abailly-akamai approved these changes Sep 10, 2024

View reviewed changes

mjac0bs added 4 commits September 10, 2024 11:46

Skip failing test with JSDom issues for now

b9d597b

Improve fading behavior

04c0b6b

Revert "Improve fading behavior" because it causes other issues

1e589a8

This reverts commit 04c0b6b.

Add GravatarByUsername loading placeholder; adjust other fades

5835140

mjac0bs commented Sep 10, 2024

View reviewed changes

bnussman-akamai added the Approved Multiple approvals and ready to merge! label Sep 11, 2024

mjac0bs removed the Ready for Review label Sep 11, 2024

bnussman-akamai approved these changes Sep 11, 2024

View reviewed changes

mjac0bs merged commit 3bc6e76 into linode:develop Sep 11, 2024
18 of 19 checks passed

This was referenced Sep 11, 2024

fix: [M3-8158] - Fix inaccurate Gravatar sunset banner date and rendering for users without Gravatar #10919

Merged

change: [M3-6546] - Volume drawers and action menu refactored #10820

Open

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

Merged

This was referenced Sep 13, 2024

Release v1.128.0 - release → staging #10935

Merged

Release v1.128.0 - staging → master #10946

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mjac0bs commented Aug 29, 2024 •

edited

Loading

abailly-akamai left a comment

mjac0bs Sep 10, 2024

abailly-akamai Sep 10, 2024 •

edited

Loading

mjac0bs Sep 10, 2024 •

edited

Loading

abailly-akamai left a comment

mjac0bs Sep 10, 2024

mjac0bs commented Sep 11, 2024

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

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

Conversation

mjac0bs commented Aug 29, 2024 • edited Loading

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

abailly-akamai left a comment

Choose a reason for hiding this comment

mjac0bs Sep 10, 2024

Choose a reason for hiding this comment

abailly-akamai Sep 10, 2024 • edited Loading

Choose a reason for hiding this comment

mjac0bs Sep 10, 2024 • edited Loading

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

mjac0bs Sep 10, 2024

Choose a reason for hiding this comment

mjac0bs commented Sep 11, 2024

mjac0bs commented Aug 29, 2024 •

edited

Loading

abailly-akamai Sep 10, 2024 •

edited

Loading

mjac0bs Sep 10, 2024 •

edited

Loading