refactor/upcoming: [M3-8116] - Event Messages - Part 1 #10517

abailly-akamai · 2024-05-24T19:31:59Z

Description 📝

This PR is part 1 of several contributions to refactor the way we are rendering event messages to our users.

It does not currently affect production. It is behind a feature flag, and once merged meant to sit in develop for some time in order to catch potential formatting issues.

The goals behind the refactor are rather simple:

Deprecate the formatting & parsing of event messages in favor of composing & rendering JSX messages
Improve structure, consistency, typing, control and stability of Event Messages

Changes 🔄

Create new utils and JSX components to compose messages
- Provide coverage and JSDocs
- Include in Storybook as needed
- Include future deprecation/deletion comments
Compose all existing messages and add missing ones
Implement rendering of new messages behind eventMessagesV2 feature flag
- Event table (/events + /linodes/{linodeId}/activity)
- Notification Center (popup)
Improve styling/layout according to approved UX guides
Update documentation

For more details about changes, see self review and screenshots

Target release date 🗓️

Preview 📷

Include a screenshot or screen recording of the change

💡 Use <video src="" /> tag when including recordings in table.

Before	After

How to test 🧪

Prerequisites

Turn on the eventMessagesV2 flag

Verification steps

Cloud Manager

Confirm formatting and displaying of messages in
- Notification Center (events popup)
- /events page
- /linodes/{linodeId}/activity

Storybook

Navigate to http://localhost:6006/?path=/docs/features-event-messages--documentation
- Verify formatting and typos
Navigate to http://localhost:6006/?path=/story/components-notifications-snackbar-toast--with-event-message
- Confirm single message in snackbar

Docs

run yarn docs
navigate to http://localhost:5173/manager/development-guide/15-api-events.html
confirm page formatting and copy

As an Author I have considered 🤔

Check all that apply

abailly-akamai · 2024-05-30T16:50:49Z

packages/api-v4/src/account/types.ts

+  'vpc_update',
+] as const;
+
+export type EventAction = typeof EventActionValues[number];


No change affecting the types (only some added from fetching the hosting Db for events

Exporting EventActionValues allows us to iterate over a list of values for our tests, ensuring we have a corresponding message for each action.

Thanks for adding some of the missing ones. I'd noticed firewall_apply recently was lacking an event message, and that'll be fixed here.

abailly-akamai · 2024-05-30T16:51:43Z

packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx

+      </Snackbar>
+    );
+  },
+};


Adding an example on how to fetch a single event for a snackbar

abailly-akamai · 2024-05-30T16:52:25Z

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

+  const link = getLinkForEvent(event.action, entity);
+
+  return link ? <Link to={link}>{entity.label}</Link> : renderDefault();
+};


Instead of parsing and formatting event, we compose them with reusable components

abailly-akamai · 2024-05-30T16:52:33Z

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

+  display: 'inline',
+  fontSize: '0.75rem',
+  padding: '0.15rem 0.25rem',
+});


Instead of parsing and formatting event, we compose them with reusable components

abailly-akamai · 2024-05-30T16:53:27Z

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

replaced with the v2 version. This did not have much value as it was.

abailly-akamai · 2024-05-30T16:54:28Z

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

  },
-  width: '60%',
+  width: 'calc(100% - 400px)',


improves /event table row layout in both v1 and v2 (very slight changes)

abailly-akamai · 2024-05-30T16:55:50Z

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

            <Hidden mdDown>
-              <StyledTableCell data-qa-events-time-header>
+              <StyledTableCell data-qa-events-time-header sx={{ width: 150 }}>


Implementing approved events table UX changes

remove avatar from table

add a user column

improve responsive handling

I'm all for removing the avatar. 🚀

User column looks great too, but I did notice that in mobile view, if there is no username, we get a by .

abailly-akamai · 2024-05-30T16:57:47Z

packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/ActivityRow.tsx

This file was not in use at all 🧹

abailly-akamai · 2024-05-30T17:00:06Z

packages/manager/src/features/NotificationCenter/NotificationData/RenderEvent.tsx

+        </>
+      ) : null
+    );
+  }


New version contains approved UX changes

User name is not appended to message, and added next to the timestamp, separated by a pipe

Gravatar size is slightly decreased

The gravatar size of in-progress events is still a slightly larger size. (Can turn on the MSW to see this, rather than kick off an action that takes a while.)

abailly-akamai · 2024-05-30T17:01:00Z

packages/manager/src/features/NotificationCenter/NotificationSection.tsx

@@ -235,7 +235,6 @@ const StyledNotificationItem = styled(Box, {
  shouldForwardProp: omittedProps(['header']),
 })<{ header: string }>(({ theme, ...props }) => ({
  '& p': {
-    color: theme.textColors.headlineStatic,


removing to make messages the same color as regular copy (not sure why it was overridden)

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

abailly-akamai · 2024-06-03T13:39:22Z

Thanks for all the suggestions and the thorough review, @mjac0bs! I know it's a lot to read through! Updated PR with all copy and type suggestions.

jdamore-linode

This is such an awesome improvement! Thanks @abailly-akamai.

packages/manager/src/features/NotificationCenter/NotificationData/RenderEvent.tsx

packages/manager/cypress/e2e/core/notificationsAndEvents/events.spec.ts

mjac0bs

Confirmed:

Updated Storybook stories load
Test coverage is added for the changes and tests pass
The edge case for no usernames with the | or "by " showing up was addressed

Suggested:

A lot of minor nits in event message factories. Some typos (that probably existed before this PR), the need for a couple periods, some places where we missed bolding and might have missed linking an entity.
The need to fix a contrast issue with pre code block styling in dark mode.
The need to shrink the gravatar size for in-progress events.

Pending the resolution of my 19 or so comments (😅 ), I'm approving this because I've been through all 71 files. Let me know if you want me to circle back to confirm any fixes that are implemented. Thanks, @abailly-akamai!

packages/manager/src/features/Events/factories/backup.tsx

packages/manager/src/features/Events/factories/disk.tsx

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

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

packages/manager/src/features/Events/factories/reserved.tsx

packages/manager/src/features/Events/factories/volume.tsx

mjac0bs · 2024-06-03T20:11:57Z

packages/manager/src/features/NotificationCenter/NotificationData/RenderEvent.tsx

+        </>
+      ) : null
+    );
+  }


The gravatar size of in-progress events is still a slightly larger size. (Can turn on the MSW to see this, rather than kick off an action that takes a while.)

packages/manager/src/features/Events/factories/volume.tsx

packages/manager/src/features/Events/factories/lke.tsx

docs/development-guide/15-api-events.md

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

abailly-akamai · 2024-06-03T21:26:47Z

Thanks @mjac0bs and @dwiley-akamai - all feedback addressed (either committed from your suggestion or committed myself). Feedback much appreciated!

mjac0bs · 2024-06-03T21:35:49Z

@abailly-akamai There are some hidden comments that github collapsed (which I wish it wouldn't do), that I'm seeing neither marked as Outdated or Resolved. Did those get missed by accident?

abailly-akamai · 2024-06-03T21:39:06Z

@mjac0bs oops! will certainly address those, thx for catching!

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

abailly-akamai self-assigned this May 24, 2024

abailly-akamai force-pushed the M3-8116 branch from ada0457 to 0f5b3d0 Compare May 29, 2024 15:28

abailly-akamai added the Tech Debt label May 30, 2024

abailly-akamai commented May 30, 2024

View reviewed changes

abailly-akamai changed the title ~~refactor: [M3-8116] - Event Messages~~ refactor: [M3-8116] - Event Messages - Part 1 May 30, 2024

abailly-akamai and others added 24 commits May 31, 2024 09:08

initial commit - save progress

da4efe5

wrappers and more cases

63dca94

save work

37349cb

save work

c54d807

save progress

913e363

save progress

0e675c0

save progress

b6743ac

save progress

7623800

save progress

f92bdf5

add flag and events row v2

fc09822

event dropdown and lke

2d2cb7b

more events & cleanup

da14de6

cleanup

229c72b

cleanup and updates

410d5b4

lastest known events

478d199

typing and coverage

80ba295

styling

f09d35f

tests and comments - part 1

1cf5b70

tests and comments - part 2

4a479ba

tests and comments - part 3

0d42979

fix test

913af6e

better types

78c96e9

Rename nodeBalancer.tsx to nodebalancer.tsx

cadcedd

Rename stackScript.tsx to stackscript.tsx

78f9d32

abailly-akamai force-pushed the M3-8116 branch from 8af4b30 to 78f9d32 Compare May 31, 2024 13:09

abailly-akamai and others added 2 commits June 3, 2024 09:32

Update docs/development-guide/15-api-events.md

4f6842c

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

Update docs/development-guide/15-api-events.md

549d028

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

abailly-akamai requested a review from mjac0bs June 3, 2024 13:39

Feedback @mjac0bs

8ac8e8d

jdamore-linode approved these changes Jun 3, 2024

View reviewed changes

packages/manager/src/features/NotificationCenter/NotificationData/RenderEvent.tsx Outdated Show resolved Hide resolved

packages/manager/cypress/e2e/core/notificationsAndEvents/events.spec.ts Show resolved Hide resolved

Feedback @jdamore-linode

f8c6ebd

bnussman-akamai approved these changes Jun 3, 2024

View reviewed changes

missing space and linking

ba93c8d

mjac0bs approved these changes Jun 3, 2024

View reviewed changes

dwiley-akamai approved these changes Jun 3, 2024

View reviewed changes

packages/manager/src/features/Events/factories/volume.tsx Outdated Show resolved Hide resolved

packages/manager/src/features/Events/factories/lke.tsx Outdated Show resolved Hide resolved

docs/development-guide/15-api-events.md Outdated Show resolved Hide resolved

abailly-akamai and others added 7 commits June 3, 2024 17:08

Update packages/manager/src/features/Events/factories/backup.tsx

76ede76

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

feedback @mjac0bs & @dwiley-akamai

f0ea6aa

Update packages/manager/src/features/Events/factories/reserved.tsx

d255620

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

Update packages/manager/src/features/Events/factories/volume.tsx

b8471f5

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

Update docs/development-guide/15-api-events.md

3c3af97

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

Update packages/manager/src/features/Events/factories/reserved.tsx

5843c14

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

Update packages/manager/src/features/Events/factories/reserved.tsx

920631f

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

abailly-akamai and others added 6 commits June 3, 2024 20:07

more feedback from @mjac0bs

4f017d5

Update packages/manager/src/features/Events/factories/linode.tsx

38e7999

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

Update packages/manager/src/features/Events/factories/linode.tsx

a7d66dc

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

Update packages/manager/src/features/Events/factories/linode.tsx

df37c81

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

Update packages/manager/src/features/Events/factories/lke.tsx

f533d91

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

Update packages/manager/src/features/Events/factories/reserved.tsx

6cc307a

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

abailly-akamai merged commit 55c8101 into linode:develop Jun 4, 2024
18 checks passed

jaalah-akamai mentioned this pull request Jun 6, 2024

Release v1.121.0 - release → staging #10553

Merged

cpathipa mentioned this pull request Jun 10, 2024

Release v1.121.0 - staging → master #10563

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor/upcoming: [M3-8116] - Event Messages - Part 1 #10517

refactor/upcoming: [M3-8116] - Event Messages - Part 1 #10517

abailly-akamai commented May 24, 2024 •

edited

Loading

abailly-akamai May 30, 2024 •

edited

Loading

mjac0bs May 31, 2024

abailly-akamai May 30, 2024

abailly-akamai May 30, 2024

abailly-akamai May 30, 2024

abailly-akamai May 30, 2024 •

edited

Loading

abailly-akamai May 30, 2024

abailly-akamai May 30, 2024

mjac0bs May 31, 2024

abailly-akamai May 30, 2024

abailly-akamai May 30, 2024

mjac0bs Jun 3, 2024

abailly-akamai May 30, 2024

abailly-akamai commented Jun 3, 2024

jdamore-linode left a comment

mjac0bs left a comment

mjac0bs Jun 3, 2024

abailly-akamai commented Jun 3, 2024

mjac0bs commented Jun 3, 2024

abailly-akamai commented Jun 3, 2024

refactor/upcoming: [M3-8116] - Event Messages - Part 1 #10517

refactor/upcoming: [M3-8116] - Event Messages - Part 1 #10517

Conversation

abailly-akamai commented May 24, 2024 • edited Loading

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

abailly-akamai May 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai May 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai commented Jun 3, 2024

jdamore-linode left a comment

Choose a reason for hiding this comment

mjac0bs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai commented Jun 3, 2024

mjac0bs commented Jun 3, 2024

abailly-akamai commented Jun 3, 2024

abailly-akamai commented May 24, 2024 •

edited

Loading

abailly-akamai May 30, 2024 •

edited

Loading

abailly-akamai May 30, 2024 •

edited

Loading