Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: [M3-7377] - Migrate dopdowns in Create Firewall Drawer from Autocomplete to LinodeSelect and NodeBalancerSelect #9886

Merged
merged 30 commits into from
Nov 22, 2023
Merged

refactor: [M3-7377] - Migrate dopdowns in Create Firewall Drawer from Autocomplete to LinodeSelect and NodeBalancerSelect #9886

merged 30 commits into from
Nov 22, 2023

Conversation

tyler-akamai
Copy link
Contributor

@tyler-akamai tyler-akamai commented Nov 8, 2023

Description 📝

Migrated dopdowns in Create Firewall Drawer from Autocomplete to LinodeSelect and NodeBalancerSelect.

Changes 🔄

List any change relevant to the reviewer.

  • Migrated dopdowns in Create Firewall Drawer from Autocomplete to LinodeSelect and NodeBalancerSelect.
  • Updated LinodeSelect to use new autocomplete component: src/components/Autocomplete/Autocomplete
  • Updated NodeSelect to use new autocomplete component
  • Added unit tests (based on LinodeSelect.test.tsx) for NodeBalancerSelect.tsx

Preview 📷

Include a screenshot or screen recording of the change

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

Before After
Screenshot 2023-11-09 at 11 23 55 AM Screenshot 2023-11-15 at 2 27 10 PM
Screenshot 2023-11-09 at 11 24 22 AM Screenshot 2023-11-15 at 2 27 56 PM

How to test 🧪

Prerequisites

(How to setup test environment)

  • There are no prerequisites

Reproduction steps

(How to reproduce the issue, if applicable)

  • Since this is a refactor, there are no reproduction steps

Verification steps

(How to verify changes)

  • Navigate to http://localhost:3000/linodes/create and ensure when clicking on 'Create Firewall' in the Firewall Panel, the label for the Linodes dropdown is 'Additional Linodes (Optional)'
  • Navigate to http://localhost:3000/nodebalancers/create and ensure when clicking on 'Create Firewall' in the Firewall Panel, the label for the NodeBalancers dropdown is 'Additional NodeBalancers (Optional)'

Ensure the LinodeSelect and NodeBalancerSelect dropdowns are working:

As an Author I have considered 🤔

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@@ -1,88 +1,178 @@
import { NodeBalancer } from '@linode/api-v4';
import Autocomplete from '@mui/material/Autocomplete';
import { APIError } from '@linode/api-v4/lib/types';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used the LinodeSelect file as a reference when updating this file to use the new Autocomplete component.

@@ -40,7 +39,7 @@ export const READ_ONLY_DEVICES_HIDDEN_MESSAGE =
'Only services you have permission to modify are shown.';

export interface CreateFirewallDrawerProps {
inCreateFlow?: boolean;
createFlow?: FirewallDeviceEntityType;
Copy link
Contributor Author

@tyler-akamai tyler-akamai Nov 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

undefined - Opened from Firewall Landing Page
linode - Opened from Create Linode Page
nodebalancer - Opened from Create NodeBalancer Page

if undefined, the labels in the Create Firewall Drawer will be 'Linodes' and 'NodeBalancers'
if linode, the Linode label will be 'Additional Linodes (Optional)'
if nodebalancer, the NodeBalancer label will be 'Additional NodeBalancers (Optional)'


const selectedNodebalancer =
options?.find((option) => option.id === value) ?? null;
const { data, error, isLoading } = useAllNodeBalancersQuery();
Copy link
Contributor Author

@tyler-akamai tyler-akamai Nov 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This query has a comment above it that says 'Please don't use'

it seems to be working fine, not sure if its outdated, does anyone have any thoughts on this?

Copy link
Member

@bnussman-akamai bnussman-akamai Nov 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We say Please don't use to try to prevent instances where we fetch all entities. The alternative to this would be to build an infinitly-scollable select like VolumeSelect. It would be nice to have, but there are pros and cons to both approaches. Using a fetch-all here is fine for now, but one day we might explore making infinitly-scollable selects more standard throughout the codebase.

@tyler-akamai tyler-akamai marked this pull request as ready for review November 9, 2023 19:08
@tyler-akamai tyler-akamai requested a review from a team as a code owner November 9, 2023 19:08
@tyler-akamai tyler-akamai requested review from jdamore-linode, hana-akamai and carrillo-erik and removed request for a team November 9, 2023 19:08
Copy link
Contributor

@hana-akamai hana-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Optional text for the Firewall drawer is a bit misleading since I was able to create a Firewall without a Linode/Nodebalancer. It seems like both options are optional?

image

Copy link
Member

@bnussman-akamai bnussman-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we know if the e2es are passing? We may need to push to kick-off a job

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be out of scope of this ticket but the UX of saying Linodes (Optional) and NodeBalancers (without optional) feels weird to me. It makes it unclear if NodeBalancers is required or optional.

Screenshot 2023-11-15 at 9 28 28 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this is a good catch.

Talked to UI:
"Our general rule is to call out the outlier(s). For example, in a given form, if most inputs are required add (optional) to label of the one(s) that are optional. If most inputs are optional add (required) to the label of the one(s) that are required. In your example above, the "Label" input should be called out as required. Btw., the font weight for the optional/required text should be regular."

so basically I changed it to:
Screenshot 2023-11-15 at 2 24 44 PM
Screenshot 2023-11-15 at 2 25 19 PM
Screenshot 2023-11-15 at 2 25 37 PM

@jdamore-linode
Copy link
Contributor

@tyler-akamai I'll try to spend some time looking into that unit test failure! I haven't been able to get CreateFirewallDrawer.test to fail yet, so I'm thinking another test is probably the source of the issue.

If it's not too much trouble you might want to merge in the latest changes from develop; that should resolve a few of the Cypress failures you're getting

bnussman and others added 3 commits November 16, 2023 09:21
… into M3-7377-Migrate-Autocomplete-to-Linode-Select-in-Firewall-Create-Drawer
Copy link
Contributor

@hana-akamai hana-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the linode-config.spec.ts e2e test is failing

image

Copy link
Member

@bnussman-akamai bnussman-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Functionality looks good!

Copy link
Contributor

@hana-akamai hana-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Navigate to http://localhost:3000/linodes/create and ensure when clicking on 'Create Firewall' in the Firewall Panel, the label for the Linodes dropdown is 'Additional Linodes (Optional)'
✅ Navigate to http://localhost:3000/nodebalancers/create and ensure when clicking on 'Create Firewall' in the Firewall Panel, the label for the NodeBalancers dropdown is 'Additional NodeBalancers (Optional)'

Ensure the LinodeSelect and NodeBalancerSelect dropdowns are working:
http://localhost:3000/firewalls/create
http://localhost:3000/domains/create

@tyler-akamai tyler-akamai merged commit e4a31d5 into linode:feature/firewall-nodebalancer Nov 22, 2023
11 checks passed
tyler-akamai added a commit that referenced this pull request Dec 7, 2023
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants