upcoming: [M3-7294] - Add AGLB Routes Step to Full Create Flow

[bnussman-akamai]

Description 📝

• Adds Route support to the AGLB full create flow
• Updates service targets to be scoped to each configuration based on UX request

Note

This PR adds Routes, but does not support rules yet. I will add rule functionality in a separate PR to keep the size down. Rules are complex because of the drag and drop.

Preview 📷

How to test 🧪

Prerequisites

• Turn on the AGLB Full Create Flow feature flag
• Go to http://localhost:3000/loadbalancers/create

Verification steps

• Verify you can add, update, and remove routes on the AGLB create flow

As an Author I have considered 🤔

• 👀 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

[github-actions]

Coverage Report: ✅
Base Coverage: 77.96%
Current Coverage: 78%

[cpathipa]

LGMT, functionality is working as expected!

• - Verified add, update, and remove routes on the AGLB create flow.
• - Confirmed state is updating as expected.
  

Noticed console log error while creating service targets followed by routes.

[coliu-akamai]

this looks awesome! great work Banks 🎉
✅ verified adding, removing, editing routes
✅ verified unit tests

A couple things I noticed, but they might be unrelated to this PR/out of scope:

The search bar
a) changes size whenever I start typing in it
b) a console error pops up -- changing from uncontrolled to controlled input (you can see in the video it pops up)
This is an issue on the Service Targets part too

search bar size change	console error
Screen.Recording.2023-12-18.at.4.41.42.PM.mov

[coliu-akamai]

Suggested change

	const otherRoutes = configuration.routes!.filter((r, index) => {
	const otherRoutes = configuration.routes!.filter((_, index) => {

[coliu-akamai]

this is a very small nitpick so feel free to ignore lol

[mjac0bs]

Tested:

• This was looking good from my testing of adding HTTP/S and TCP routes, updating, and removing routes in the AGLB full create flow, and checking for label uniqueness and validation.
• Tests are passing.
• Confirmed no console errors - thanks for fixing the uncontrolled input error Connie mentioned; I'd noticed that too. 🙏🏼

Question:

• What prompted the UX request to scope service targets to each configuration?

Non-blocking:

• Let's do a find and replace on "handleAddServiceTraget" and "handleEditServiceTraget" to correct typos. I suggested changes as I saw them reading through the code, but likely missed some.
• Agreed that that search bar size change Connie mentioned to accommodate the 'x' looks weird. Can we set it to a constant width at the larger breakpoints?

[mjac0bs]

Do you know why we have to apply the important custom styling here?

[bnussman-akamai]

I think it was the only way I could easily achieve what the UX mockups showed. As AGLB progresses, I'll likely turn this "filter" TextField into a more reusable component. It's currently duplicated a lot 😖

[coliu-akamai]

thanks for the fixes Banks! approving pending Mariah's comments addressed 🎉