feat: [M3-7019] - Create add Nodebalancer to Firewall drawer #9608

tyler-akamai · 2023-08-30T14:40:28Z

Description 📝

Added the "Add NodeBalancer to Firewall Drawer"

Major Changes 🔄

Added "Add Nodebalancer to Firewall" Drawer
Added a Notice to the top of the drawer - documentation link is still needed
Updated the text at the top of the landing page for both Linodes and NodeBalancers
Added toast notifications

Preview 📷

Before	After
	Screen.Recording.2023-08-30.at.3.03.55.PM.mov

How to test 🧪

Navigate to the Firewalls landing page
Click on any of your active firewalls
Navigate to the Nodebalancers tab
Ensure when you add a Nodebalancer, a toast notification appears and the number next to 'Nodebalancer' also updates (don't worry about the table, thats my next ticket)
To test errors
1. Create two test firewalls (firewall-test-1, firewall-test-2)
2. Assign a nodebalancer and a linode to a firewall-test-1
3. Try to assign the same linode and nodebalancer to firewal-test-2
4. For both drawers an error notice should appear with the link to the nodebalancer/linode landing page
5. Ensure that the toast notifications are correctly displayed
6. Ensure that the errors are removed when closing and reopening the tab

jdamore-linode · 2023-08-30T19:44:07Z

@tyler-akamai Pulling in the latest changes from develop should (🤞) fix the cause of the test failures on this PR

…Nodebalancer-to-Firewall-Drawer

tyler-akamai · 2023-08-31T14:18:46Z

@tyler-akamai Pulling in the latest changes from develop should (🤞) fix the cause of the test failures on this PR

Awesome! Thank you for the update

packages/manager/src/features/NodeBalancers/NodeBalancerSelect.tsx

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

packages/manager/src/features/NodeBalancers/NodeBalancerSelect.tsx

…Nodebalancer-to-Firewall-Drawer

carrillo-erik · 2023-09-05T23:38:16Z

Changes look good to me and I was able to successfully add NodeBalancers to an existing Firewall.

We do have conflicting changes in our PRs with regards to the Autocomplete component for this project. Your approach expands the current implementation which essentially is just another copy of LinodeSelect. In my opinion and in
retrospect, the LinodeSelect component should have been the component we expanded. Of course this is probably all moot since we are going to adopt the new version of the Autocomplete component upon approval.

tyler-akamai · 2023-09-06T13:13:01Z

Changes look good to me and I was able to successfully add NodeBalancers to an existing Firewall.

We do have conflicting changes in our PRs with regards to the Autocomplete component for this project. Your approach expands the current implementation which essentially is just another copy of LinodeSelect. In my opinion and in retrospect, the LinodeSelect component should have been the component we expanded. Of course this is probably all moot since we are going to adopt the new version of the Autocomplete component upon approval.

Yeah I kept going back and fourth between changing the LinodeSelect to DeviceSelect but found that there was a lot of conditional logic plus there was a lot of code specific to Linodes that we didnt need for nodebalancers. because of that I decided to just create nodebalancer select. But to your point, this will eventually get replaced by the Autocomplete component.

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

packages/manager/src/features/Linodes/LinodeSelect/LinodeSelect.tsx

packages/manager/src/features/NodeBalancers/NodeBalancerSelect.tsx

packages/manager/src/utilities/mapIdsToDevices.ts

bnussman-akamai

I think we should make it so the drawer does not close if a general error occours.

Screen.Recording.2023-09-06.at.2.08.47.PM.mov

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

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

jaalah-akamai · 2023-09-07T16:27:04Z

Yea let's hold on this until the newer Autocomplete is done instead of duplicating the LinodeSelect. Looking back we should not have added any data fetching within the LinodeSelect and that should have been at the parent level.

…Nodebalancer-to-Firewall-Drawer

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

bnussman-akamai

Looking back we should not have added any data fetching within the LinodeSelect and that should have been at the parent level.

I'm not sure I agree with this, but I don't want to block this ticket because of this because functionality looks good! 🎉 We can always come back and make changes later.

Can we update the table column label?

Yeah the table is another PR: #9610

* feat: [M3 7015] - Create nodebalancer tab in firewalls landing (#9590) * initial changes * finished the firewall device landing updates * Added changeset: Create nodebalancer tab in firewalls landing * fixed breadcrumb and variable names * added FirewallDeviceLanding test file * added initial unit tests * updated jest.mock function, still not working * swapped from jest.mock to MSW, still need some work * fixed unit tests * fixed tests for FirewallDeviceLanding --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7019] - Create add Nodebalancer to Firewall drawer (#9608) * initial drawer commit * finished the add nodebalancer drawer * Added changeset: Created 'Add Nodebalancer' to Firewall drawer * updated drawer and started to add event handlers * added toast notification * added multiple toast notifications * separated nodebalancer and linode drawer * added infinite scrolling * fixed pr suggestions * partially eliminated type definitions in LinodeSelect * eliminated type definitions in LinodeSelect * changed type definition of onSelectionChange in NodeBalancerSelect * eliminated type declarations in NodeBalancerSelect * erased commented out code * initial round of fixes * fixed linode error drawer not closing * eliminated event message * added todo comment * added todo comment * fixed toast notification, error reset, and error text * fixed toast notification, error reset, and error text for Linode Drawer * fixed nodebalancer drawer error notices * merged with develop * initial migration to new autocomplete component, still some errors * can select linodes now, but the linodes arent showing as selected * fixed selection issue with autocomplete * migrated to new autocomplete component * remove NodeBalancerSelect file changes * added banks PR suggestions --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7052] - Add NodeBalancer table under Firewall / Devices (#9664) * initial nodebalancer table commit * Added changeset: Added NodeBalancer table under Firewall/Devices * removed unnecessary prop extension --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7016] - Add Basic Filtering for Firewall Devices (#9626) * initial firewall device filter commit * Added changeset: Added Basic Filtering for Firewall Devices * cleaned up label content in TextField * initial ActionsPanel Storybook commit * reverted ActionsPanel changes * updated storybook * Fixed storybook * test commit - eslint issues * test commit * fixed text field * removed unnecessary code * added Alban's changes * test commit * removed test comment * fixed filtering error --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> Co-authored-by: Hana Xu <hxu@akamai.com> * feat: [M3-7033] - Update Firewall Landing Device Column (#9668) * initial update to device cell wrap functionality * added extra console line for width * still not working * updated the code, still not working * changes linodes column to devices column * fixed styling file * Added changeset: Updated Firewall Landing Device Column * removed unnecessary styling * fixed test results * added Connie's pr suggestions * updated styled row file * added line clamp to styled component * removed old test case * updated row spacing * fixed spacing --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7017] - Update firewall events (#9693) * feat: [M3-7017] - Update firewall events * Fix e2e test and secondary entity formatting * Add changeset * feat: [M3-7020] - Update Create Firewall drawer (#9630) * feat: [M3-7020] - Update Create Firewall drawer * Update firewall e2e tests for NodeBalancer UI improvements * Integrate new Autocomplete component * Change test description * Add UI indicator for errors and reset nb values * Add changeset * Move static strings outside component * Implement PR feedback suggestions * Remove unnecessary check and change var name --------- Co-authored-by: Joe D'Amore <jdamore@linode.com> * feat: [M3-7021] - Added Firewall panel to create NodeBalancer flow (#9733) * merged with upstream * Added changeset: Added Firewall Panel to NodeBalancer Create flow --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * fix: [M3-7245] - Replaced 'Devices' with 'Services' in Firewall Page (#9775) * replaced visible devices with services * fixed routing for drawers * Added changeset: Swapped 'Devices' to 'Services' in Firewall and updated Add Service to Firewall routing * updated unit tests, still need work * updated unit tests * updated capitalization and unit tests --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * fixed merge conflict * fix: [M3-7313] - Migrated Linode dropdown to Autocomplete in Firewall Landing > Create Firewall drawer (#9837) * migrated Linode dropdown to Autocomplete, fixed NodeBalancer dropdown, added successfull toast notification * Added changeset: Linode dropdown in Create Firewall drawer using LinodeSelect component instead of the Autocomplete component * fixed changeset message from last pr * updated unit tests * addressed Hana's feedback * removed helper text * initial changes to unnecessary state * addresses Banks feedback * addressed additional feedback * fixed syntax of optionsFilter * switched set to list for autocomplete --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * feat: [M3-7163] - Add Firewall Section to NodeBalancer Details Page (#9831) * first commit * Code cleanup * Fix quick bug * PR feedback changes * RQ changes * fixed toast notification errors * fixed toast notifications * PR feedback --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> * refactor: [M3-7377] - Migrate dopdowns in Create Firewall Drawer from Autocomplete to LinodeSelect and NodeBalancerSelect (#9886) * initial commit * updated font bold to use mui theme * migrated autocomplete to nodebalancer select * small naming changes * Updated CreateFirewallDrawer and SelectFirewallPanel * removed comments * Added changeset: Dropdowns in Create Firewall Drawer using Autocomplete instead of updated LinodeSelect and NodeBalancerSelect * fixed LinodeSelect unit tests * added NodeBalancer unit tests * fixed SelectFirewallPanel unit tests * added pr feedback * updated dropdown labels * fixed unit tests * fixed unit tests * fixed unit tests * working to fix timeout error * rerunning unit tests * test debug * merged with develop * testing unit tests * testing last unit test * testing last unit test * removed line to see if unit tests will pass * Replace calls to `jest.fn()` with `vi.fn()` * rerunning tests * fixed e2e tests * resolved pr suggestions --------- Co-authored-by: TylerWJ <tylerwjones99@gmail.com> Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Joe D'Amore <jdamore@linode.com> * feature: [M3-7442] - Put Firewall-Nodebalancer behind feature flag (#9931) * initial feature flag migration * Added remaining code under feature flag * updated text in drawer * Added changeset: Added feature flag to Firewall-NodeBalancer * fixed unit test * fixed unit tests * added feature flag to dev tools * test commit * test commit * fixed border issue in firewall's table * partially fixed border issue * partially fixed border issue * fixed border issue * feat: [M3-7018] - Add documentation links for Firewall NodeBalancer (#9926) * added links * fixed nodebalancer create flow text * made link format more consistent * added changeset * fixed filter issue * removed comment * started to address Alban's feedback * fixed other instance of unnecessary else * addressed feedback for Firewall Drawer Props * added clamp-js for firewall landing * added clamp-js library * addressed some comments * addressed onService required prop feedback * addressed test feedbacl for FirewallDeviceLanding * addressed test feedback for FirewallDeviceLanding * added a todo in FirewallRulesLanding * added unit tests for addNodebalancerDrawer and addLinodeDrawer * addressed Connie's feedback ab aria labels * sanitized error messages in add drawers * added interface for secondaryEntityTypeObj * fixed link in create NodeBalancer flow * fixed header in create drawer * Update packages/manager/.changeset/pr-9926-upcoming-features-1700672014523.md Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> * added period after Learn more in create firewall drawer * fixed nodebalancer create flow issue * NodeBalancer is now assigned to Firewall * removed unnecessary invalidate query * added doc link to NodeBalancer's details page * improved organization of the AddLinodeDrawer and AddNodeBalancerDrawer * added a constants file in FirewallLanding directory * Update packages/manager/.changeset/pr-9926-upcoming-features-1700672014523.md Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/.changeset/pr-9931-upcoming-features-1700686098973.md Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceTable.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceTable.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/api-v4/src/nodebalancers/nodebalancers.ts Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Update packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * fixed import error * mapIdsToLinodes to mapIdsToDevices * fixed Linodes Network tab Firewall Table error state * fixed Linodes Network tab Firewall Table error state * fixed Create NodeBalancer add firewall flow * removed firewall_id forom NodeBalancerConfigNode * added firewall_id to the payload * fixed spelling issue * Fix darkmode link color discrepancy * added tags to CreateNodeBalancerPayload * Replace html anchor tag with Link component * change: [M3-7546] - Revert FW table row changes (#9974) * change: [M3-7546] - Revert NB table row changes * Fix linking for NodeBalancers from the table cell * Remove the `clamp-js` package * Add changeset * added links to constants file * changed SecondaryEntityType from interface to type * changed improved mapIdsToDevices tests to cover nodebalancers * Update packages/manager/src/features/Events/eventMessageGenerator.ts Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> * eliminated ternary in Summary Panel * cleaned up NodeBalancerSettings displayFirewallInfotext * Fix dark mode color issue on NB settings page * invalidated device queries after firewall has been deleted --------- Co-authored-by: tyler-akamai <139489745+tyler-akamai@users.noreply.github.com> Co-authored-by: TylerWJ <tylerwjones99@gmail.com> Co-authored-by: Hana Xu <hxu@akamai.com> Co-authored-by: Joe D'Amore <jdamore@linode.com> Co-authored-by: Tyler Jones <tjones@akamai.com> Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>

TylerWJ added 2 commits August 29, 2023 20:09

initial drawer commit

a5cc2d9

finished the add nodebalancer drawer

8bf23e6

tyler-akamai added the Nodebalancer Firewall UX label Aug 30, 2023

tyler-akamai self-assigned this Aug 30, 2023

TylerWJ added 4 commits August 30, 2023 10:41

Added changeset: Created 'Add Nodebalancer' to Firewall drawer

f4f2512

updated drawer and started to add event handlers

c5ad21d

added toast notification

23dcc57

added multiple toast notifications

3cd6d7f

tyler-akamai marked this pull request as ready for review August 30, 2023 19:17

bnussman-akamai added the Ready for Review label Aug 30, 2023

Merge branch 'feature/firewall-nodebalancer' into M3-7019-Create-Add-…

c5f87f9

…Nodebalancer-to-Firewall-Drawer

bnussman-akamai reviewed Aug 31, 2023

View reviewed changes

TylerWJ added 3 commits September 1, 2023 12:16

Merge branch 'feature/firewall-nodebalancer' into M3-7019-Create-Add-…

2366ef7

…Nodebalancer-to-Firewall-Drawer

separated nodebalancer and linode drawer

47ae41f

added infinite scrolling

7e7c861

carrillo-erik approved these changes Sep 5, 2023

View reviewed changes

bnussman-akamai reviewed Sep 6, 2023

View reviewed changes

TylerWJ added 6 commits September 6, 2023 12:15

fixed pr suggestions

6822f99

partially eliminated type definitions in LinodeSelect

6d59e9e

eliminated type definitions in LinodeSelect

e01c79e

changed type definition of onSelectionChange in NodeBalancerSelect

5cbc9da

eliminated type declarations in NodeBalancerSelect

6451bdd

erased commented out code

8c8423e

bnussman-akamai reviewed Sep 6, 2023

View reviewed changes

TylerWJ added 2 commits September 6, 2023 15:12

initial round of fixes

f59fa25

fixed linode error drawer not closing

9cd1ac3

TylerWJ added 3 commits September 7, 2023 08:54

eliminated event message

a6bfbfe

added todo comment

33bba73

added todo comment

697d5fd

bnussman-akamai reviewed Sep 7, 2023

View reviewed changes

packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.tsx Outdated Show resolved Hide resolved

jaalah-akamai added Do Not Merge Work in Progress and removed Ready for Review labels Sep 7, 2023

TylerWJ added 9 commits September 7, 2023 17:58

fixed toast notification, error reset, and error text

eb2c4b4

fixed toast notification, error reset, and error text for Linode Drawer

5c5baf8

fixed nodebalancer drawer error notices

c9533de

Merge branch 'feature/firewall-nodebalancer' into M3-7019-Create-Add-…

4cf314f

…Nodebalancer-to-Firewall-Drawer

merged with develop

c70fa4d

initial migration to new autocomplete component, still some errors

b91edfb

can select linodes now, but the linodes arent showing as selected

ac3f050

fixed selection issue with autocomplete

64ed737

migrated to new autocomplete component

3cc936b

tyler-akamai added Add'tl Approval Needed Waiting on another approval! and removed Work in Progress Do Not Merge labels Sep 11, 2023

tyler-akamai requested a review from bnussman-akamai September 11, 2023 14:41

remove NodeBalancerSelect file changes

bdd6767

bnussman-akamai reviewed Sep 11, 2023

View reviewed changes

added banks PR suggestions

ce25f88

bnussman-akamai approved these changes Sep 11, 2023

View reviewed changes

tyler-akamai merged commit cb13d24 into linode:feature/firewall-nodebalancer Sep 11, 2023
11 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-7019] - Create add Nodebalancer to Firewall drawer #9608

feat: [M3-7019] - Create add Nodebalancer to Firewall drawer #9608

tyler-akamai commented Aug 30, 2023 •

edited

Loading

jdamore-linode commented Aug 30, 2023

tyler-akamai commented Aug 31, 2023

carrillo-erik commented Sep 5, 2023

tyler-akamai commented Sep 6, 2023 •

edited

Loading

bnussman-akamai left a comment

jaalah-akamai commented Sep 7, 2023

bnussman-akamai left a comment •

edited by tyler-akamai

Loading

feat: [M3-7019] - Create add Nodebalancer to Firewall drawer #9608

feat: [M3-7019] - Create add Nodebalancer to Firewall drawer #9608

Conversation

tyler-akamai commented Aug 30, 2023 • edited Loading

Description 📝

Major Changes 🔄

Preview 📷

How to test 🧪

jdamore-linode commented Aug 30, 2023

tyler-akamai commented Aug 31, 2023

carrillo-erik commented Sep 5, 2023

tyler-akamai commented Sep 6, 2023 • edited Loading

bnussman-akamai left a comment

Choose a reason for hiding this comment

jaalah-akamai commented Sep 7, 2023

bnussman-akamai left a comment • edited by tyler-akamai Loading

Choose a reason for hiding this comment

tyler-akamai commented Aug 30, 2023 •

edited

Loading

tyler-akamai commented Sep 6, 2023 •

edited

Loading

bnussman-akamai left a comment •

edited by tyler-akamai

Loading