fix: [M3-7038] - Add Firewall and Linode Configuration success toast notifications #9725

tyler-akamai · 2023-09-27T14:23:45Z

Description 📝

The Firewall and Linode Configuration toast notifications did not have a success message, causing no toast notifications when an action was successful.

Major Changes 🔄

Added success notifications for
- Firewall notifications (enable, disable, create, delete, device add, device remove)
- Linode configurations (create, delete, update)
Updated toast notification messages for consistency

Preview 📷

Before

M3-7038.mov

After

How to test 🧪

*** Note: The toast notifications take a couple seconds to pop up.

Navigate to the firewall landing page (/firewalls) and ensure:

Creating a Firewall triggers a successful toast notification
Disabling a Firewall triggers a successful toast notification
Enabling a Firewall triggers a successful toast notification
Deleting a Firewall triggers a successful toast notification

Navigate to the linodes tab within any firewall details page (/firewalls/[firewall_ID]/linodes) and ensure:

Adding a Linode triggers a successful toast notification
Deleting a Linode triggers a successful toast notification

Navigate to the config tab within any linode details page (/linodes/[linode_id]/configurations) and ensure:

Adding a Linode configuration triggers a successful toast notification
Deleting a Linode configuration triggers a successful toast notification
Editing a Linode configuration triggers a successful toast notification

…notifications

abailly-akamai

Thanks for working on this!

Do you know why we're getting those delays (VS creating or deleting a Linode for instance)? Pretty important IMO because the toast ends up being a bit distracting. It happens a few seconds afterwards (that was my experience at least, sometimes close to 5/6 seconds) and it's a bit odd since we can clearly see the UI update (ex row gets deleted), then the notification happens much later.

Considering the UI updates + the notification menu event notification, I wonder about the worth of this update if the delay is that long

bnussman-akamai

I feel like linode_config*, firewall_enable, firewall_disable, firewall_create, firewall_device_add, firewall_device_remove toasts should just be done on the initial request, not based on events polling. I'd have to look at the API code and see what actually takes place when some of these events are created but I feel like most of the events I listed above don't need to wait on an event to show, This is mostly my opinion. Anyone else have thoughts?

abailly-akamai · 2023-09-27T21:22:02Z

@bnussman-akamai ah yeah that makes sense, they're based on event polling. Agree 💯

tyler-akamai · 2023-09-28T14:27:28Z

Awesome, will change that over now.

abailly-akamai

Thanks for making those changes! Feels much better.

for consistency, in the firewall flows, do we also want to add toasts when adding inbound/outbound rules? /firewalls/{id}/rules

packages/manager/src/features/Firewalls/FirewallLanding/FirewallDialog.tsx

tyler-akamai · 2023-09-29T20:46:32Z

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding.tsx

@@ -191,6 +195,9 @@ const FirewallRulesLanding = (props: Props) => {
        // Reset editor state.
        inboundDispatch({ rules: _rules.inbound ?? [], type: 'RESET' });
        outboundDispatch({ rules: _rules.outbound ?? [], type: 'RESET' });
+        enqueueSnackbar('Successfully updated Firewall rules', {


The firewalls inbound/outbound details section is a little odd. Instead of having an api call for each action (edit, delete, add, clone), the user first executes an action and then when they click 'Save Changes', the api is called. This makes my job a little easier with the Toast Notifications since they are all routed through the function applyChanges

@abailly-akamai

packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddDeviceDrawer.tsx

packages/manager/src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog.tsx

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/DeleteConfigDialog.tsx

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx

packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx

tyler-akamai · 2023-10-04T13:20:41Z

packages/manager/src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog.tsx


-    onClose();
+      onClose();


@bnussman-akamai I got rid of the error toast notification and made it so the dialog only closed if the mutateasync does not return an error.

Could we clean this up still? Should we put queryClient.invalidateQueries in the then? Should we put onClose in the then too? Should we revert to the await syntax?

Right now, it's unclear to me why enqueueSnackbar is in the then but queryClient.invalidateQueries and onClose are not

@bnussman-akamai queryClient.invalidateQueries and onClose are in the then statement.

I can go back to the await syntax though to make it more clear.

tyler-akamai · 2023-10-04T13:21:23Z

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding.tsx

@@ -218,6 +225,9 @@ const FirewallRulesLanding = (props: Props) => {
            });
          }
        }
+        enqueueSnackbar('Failed to update Firewall rules', {


Kept this error because there is no "Save Changes" dialog

…ll-and-Linode-Config

abailly-akamai

Creating a Firewall triggers a successful toast notification 🚫
Disabling a Firewall triggers a successful toast notification ✅
Enabling a Firewall triggers a successful toast notification ✅
Deleting a Firewall triggers a successful toast notification ✅

Adding a Linode triggers a successful toast notification 🚫
Deleting a Linode triggers a successful toast notification ✅

Adding a Linode configuration triggers a successful toast notification ✅
Deleting a Linode configuration triggers a successful toast notification ✅
Editing a Linode configuration triggers a successful toast notification ✅

bnussman-akamai · 2023-10-04T14:35:40Z

packages/manager/src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog.tsx


-    onClose();
+      onClose();


Could we clean this up still? Should we put queryClient.invalidateQueries in the then? Should we put onClose in the then too? Should we revert to the await syntax?

Right now, it's unclear to me why enqueueSnackbar is in the then but queryClient.invalidateQueries and onClose are not

packages/manager/src/features/Firewalls/FirewallLanding/FirewallDialog.tsx

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/DeleteConfigDialog.tsx

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx

tyler-akamai · 2023-10-04T17:21:27Z

Creating a Firewall triggers a successful toast notification 🚫 Disabling a Firewall triggers a successful toast notification ✅ Enabling a Firewall triggers a successful toast notification ✅ Deleting a Firewall triggers a successful toast notification ✅

Adding a Linode triggers a successful toast notification 🚫 Deleting a Linode triggers a successful toast notification ✅

Adding a Linode configuration triggers a successful toast notification ✅ Deleting a Linode configuration triggers a successful toast notification ✅ Editing a Linode configuration triggers a successful toast notification ✅

The two tests that failed are corrected in the nodebalancer-firewall feature branch. Banks left a comment pointing out that the changes conflict with the feature branch.

So the functionality will be added shortly once the feature branch is merged.

abailly-akamai

Approving based on latest comments about expected cases to be handled in a different PR

bnussman-akamai · 2023-10-06T17:44:55Z

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx

Looks like we might need to update an e2e test

…t-Notification-for-Firewall-and-Linode-Config

tyler-akamai · 2023-10-10T22:25:24Z

packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts

@@ -116,7 +116,7 @@ describe('clone linode', () => {

      ui.toast.assertMessage(`Your Linode ${newLinodeLabel} is being created.`);
      ui.toast.assertMessage(
-        `Linode ${linode.label} has been cloned successfully to ${newLinodeLabel}.`
+        `Linode ${linode.label} successfully cloned to ${newLinodeLabel}.`


I had to update the E2E tests to match the toast notification messages.

bnussman-akamai

Looks good! Thanks for resolving the e2e failures! 🎉

initial commit

62625c6

tyler-akamai requested a review from a team as a code owner September 27, 2023 14:23

tyler-akamai requested review from bnussman-akamai and jaalah-akamai and removed request for a team September 27, 2023 14:23

Added changeset: Add Firewall and Linode Configuration success toast …

720614c

…notifications

tyler-akamai requested a review from abailly-akamai September 27, 2023 14:25

updated linode config notification

9a4f10f

mjac0bs assigned tyler-akamai Sep 27, 2023

abailly-akamai reviewed Sep 27, 2023

View reviewed changes

bnussman-akamai reviewed Sep 27, 2023

View reviewed changes

swapped toast notifications from event handlers to manual

a38c453

tyler-akamai requested review from abailly-akamai and bnussman-akamai September 28, 2023 17:31

tyler-akamai added the Ready for Review label Sep 28, 2023

abailly-akamai reviewed Sep 29, 2023

View reviewed changes

packages/manager/src/features/Firewalls/FirewallLanding/FirewallDialog.tsx Outdated Show resolved Hide resolved

added toast notifications for firewall rules

2ae21b0

tyler-akamai commented Sep 29, 2023

View reviewed changes

added error to error map

0c58e89

tyler-akamai requested a review from abailly-akamai October 3, 2023 17:32

bnussman-akamai reviewed Oct 3, 2023

View reviewed changes

tyler-akamai commented Oct 3, 2023

View reviewed changes

packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx Outdated Show resolved Hide resolved

TylerWJ added 2 commits October 3, 2023 16:51

addressed @ bnussman-akamai feedback

357f125

removed unnecessary action type declaration

4fb77ac

tyler-akamai commented Oct 4, 2023

View reviewed changes

TylerWJ added 2 commits October 4, 2023 09:25

removed unnecessary error toast notification in delete config

7a0af89

reverted onDelete back to original format

81f6564

tyler-akamai requested a review from bnussman-akamai October 4, 2023 13:31

Merge branch 'develop' into M3-7038-Add-Toast-Notification-for-Firewa…

4db222c

…ll-and-Linode-Config

abailly-akamai reviewed Oct 4, 2023

View reviewed changes

bnussman-akamai reviewed Oct 4, 2023

View reviewed changes

TylerWJ added 4 commits October 4, 2023 11:00

reverted back to await syntax in RemoveDevoceDialog for clarity

46b7b12

addressed @ bnussman-akamai feedback

b1793fb

made toast notifications more consistent

afbc2d1

moved comment up to correct spot

f8faeed

tyler-akamai requested review from abailly-akamai and bnussman-akamai October 4, 2023 17:23

abailly-akamai approved these changes Oct 4, 2023

View reviewed changes

bnussman-akamai reviewed Oct 6, 2023

View reviewed changes

TylerWJ added 3 commits October 10, 2023 10:42

Merge remote-tracking branch 'upstream/develop' into M3-7038-Add-Toas…

e9ef22f

…t-Notification-for-Firewall-and-Linode-Config

fixed e2e tests

5583c4a

fixed e2e tests

26b7f61

tyler-akamai requested a review from bnussman-akamai October 10, 2023 22:24

tyler-akamai commented Oct 10, 2023

View reviewed changes

bnussman-akamai approved these changes Oct 11, 2023

View reviewed changes

tyler-akamai merged commit 5ba8ec5 into linode:develop Oct 11, 2023

This was referenced Oct 12, 2023

Release v1.105.0 - release → staging #9789

Merged

Release v1.105.0 - staging → master (#9789) #9792

Closed

Release v1.105.0 - release → staging #9793

Merged

Release v1.105.0 - staging → master (#9789) #9794

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: [M3-7038] - Add Firewall and Linode Configuration success toast notifications #9725

fix: [M3-7038] - Add Firewall and Linode Configuration success toast notifications #9725

tyler-akamai commented Sep 27, 2023 •

edited

Loading

abailly-akamai left a comment

bnussman-akamai left a comment

abailly-akamai commented Sep 27, 2023

tyler-akamai commented Sep 28, 2023

abailly-akamai left a comment

tyler-akamai Sep 29, 2023 •

edited

Loading

tyler-akamai Sep 29, 2023

tyler-akamai Oct 4, 2023

bnussman-akamai Oct 4, 2023

tyler-akamai Oct 4, 2023 •

edited

Loading

tyler-akamai Oct 4, 2023

abailly-akamai left a comment

bnussman-akamai Oct 4, 2023

tyler-akamai commented Oct 4, 2023

abailly-akamai left a comment

bnussman-akamai Oct 6, 2023

tyler-akamai Oct 10, 2023

bnussman-akamai left a comment

fix: [M3-7038] - Add Firewall and Linode Configuration success toast notifications #9725

fix: [M3-7038] - Add Firewall and Linode Configuration success toast notifications #9725

Conversation

tyler-akamai commented Sep 27, 2023 • edited Loading

Description 📝

Major Changes 🔄

Preview 📷

How to test 🧪

abailly-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

abailly-akamai commented Sep 27, 2023

tyler-akamai commented Sep 28, 2023

abailly-akamai left a comment

Choose a reason for hiding this comment

tyler-akamai Sep 29, 2023 • edited Loading

Choose a reason for hiding this comment

tyler-akamai Sep 29, 2023

Choose a reason for hiding this comment

tyler-akamai Oct 4, 2023

Choose a reason for hiding this comment

bnussman-akamai Oct 4, 2023

Choose a reason for hiding this comment

tyler-akamai Oct 4, 2023 • edited Loading

Choose a reason for hiding this comment

tyler-akamai Oct 4, 2023

Choose a reason for hiding this comment

abailly-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai Oct 4, 2023

Choose a reason for hiding this comment

tyler-akamai commented Oct 4, 2023

abailly-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai Oct 6, 2023

Choose a reason for hiding this comment

tyler-akamai Oct 10, 2023

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

tyler-akamai commented Sep 27, 2023 •

edited

Loading

tyler-akamai Sep 29, 2023 •

edited

Loading

tyler-akamai Oct 4, 2023 •

edited

Loading