feat: [M3-7288] - AGLB create page with Actions buttons. #9825

cpathipa · 2023-10-23T15:07:57Z

Description 📝

AGLB create page with Actions buttons.

Note: Action buttons behavior, Stepper component contents are not part of this PR scope will be implemented in the followup subtasks.

Preview 📷

How to test 🧪

Prerequisites

(How to setup test environment)

Checkout the branch and run the app locally
Enable MSW

Verification steps

(How to verify changes)

Navigate to http://localhost:3000/loadbalancers
Click on "Create Load Balancer" Button.
Verify Load Balancer Create page W.R.T mockup.
Verify Stepper component functionality by clicking next and previous.

As an Author I have considered 🤔

Check all that apply

...ges/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx

cpathipa · 2023-10-23T21:50:22Z

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx

+      {/* TODO:
+       * Implement Review Load Balancer Action Behavior
+       * Implement Cancel Behavior
+       * Implement Add Another Configuration Behavior
+       */}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          marginTop: '16px',
+          width: '100%',
+        }}
+      >
+        <div>
+          <StyledAddConfigurationButton
+            buttonType="outlined"
+            data-qa-api-cli-linode
+            onClick={() => null}
+          >
+            Add Another Configuration
+          </StyledAddConfigurationButton>
+        </div>
+
+        <ActionsPanel
+          primaryButtonProps={{
+            label: 'Review Load Balancer',
+            onClick: () => null,
+          }}
+          secondaryButtonProps={{ label: 'Cancel', onClick: () => null }}
+          sx={{ margin: 0, padding: 0 }}
+        />
+      </div>
+    </Grid>


Action button behaviors will be implement in followup tickets.

cpathipa · 2023-10-23T21:52:18Z

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

+// TODO: Regious should be updated with the real values
+const regions = [
+  { country: 'ga', id: 'us-southeast', label: 'Atlanta, GA' },
+  { country: 'ca', id: 'ca-central', label: 'Toronto, CA' },
+  { country: 'au', id: 'ap-southeast', label: 'Sydney, AU' },
+  { country: 'gb', id: 'eu-west', label: 'London, UK' },
+  { country: 'fr', id: 'fr-par', label: 'Paris, FR' },
+];


These are the hardcoded dummy regions used for the dev purpose. These are replace with correct regions once we get them.

coliu-akamai

great work Chandra! Left a few minor non-blocking comments and also had a question regarding the mockup -- should it say Global Load Balancers / Create for the title, or Loadbalancers / Create?

UX Mockup	This PR

packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts

packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx

...ges/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

bnussman-akamai · 2023-10-24T14:17:47Z

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

+            <Grid
+              alignItems={'center'}
+              container
+              direction="row"
+              justifyContent="flex-start"
+              key={region.id}
+              marginBottom={theme.spacing(1)}
+              spacing={2}
+            >


Would a Stack make more sense here?

hana-akamai

I think the breadcrumb should be Global Load Balancers / Create instead of Loadbalancers / Create according to the mocks

This branch	UX Mocks

The action buttons at the bottom for mobile look a bit awkward imo, do we have mobile UX mocks?

packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx

hana-akamai · 2023-10-24T16:06:14Z

...ges/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx

+
+describe('LoadBalancerConfiguration', () => {
+  test('Should render Details content', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);


We can clean this up a little by doing this instead and with the other tests

const { getByText, queryByText } = renderWithTheme( <LoadBalancerConfiguration /> );

IMO, I don't see any significant benefits in choosing between using 'screen' methods
and destructuring the 'render' result. Both approaches are concise and easy to read, and I have
no strong opinions on which one to use. It largely depends on personal preference.

While screen works great, I also have a deep fear that it one day will cause issues. It scares me that it's just some magic global that happens to have the correct scope when used in a test. I have no idea how it is implemented but I generally prefer destructuring the 'render' result because it seems more direct and less "magic" to me. I'm sure either method is fine but just wanted to provide another perspective.

Had a quick look in into testing-library documentation, looks like they are recommending screen methods to find DOM elements (Didn't do in-depth research) and it also supports multiple frameworks.

Very interesting, good find. 🔎

...ges/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx

mjac0bs

I think the breadcrumb should be Global Load Balancers / Create instead of Loadbalancers / Create according to the mocks

Agreed. Unless: are we keeping "Global" in the terminology, @bnussman-akamai? I don't fully remember what UX showed in the last cafe in regard to the AGLB menu options -- was "Global" still in there? Was wondering if this should be Load Balancers / Create.

packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md

...ges/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

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

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

…/LoadBalancerConfiguration.tsx Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>

…/LoadBalancerRegions.tsx Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>

hana-akamai · 2023-10-25T15:32:32Z

@cpathipa can we swap the order of the cancel and action buttons for the mobile view to match the desktop version more? It also feels weird to have the cancel to the right side

Desktop	Mobile

cpathipa · 2023-10-25T15:48:29Z

Thanks @hana-linode, removed the row-reverse. Now its in sync with desktop view

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLable.tsx

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx

...ges/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx

mjac0bs

Nice work, looking good and matches the mocks! 🚢

I did notice one file name typo.

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLable.tsx

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx

…/LoadBalancerConfiguration.test.tsx Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>

bnussman-akamai · 2023-10-25T23:55:54Z

UI looks great! I think the last thing we need to do is make the stepper wrap on mobile

cpathipa · 2023-10-26T05:42:29Z

Wrapped Stepper component for small screen.

abailly-akamai

Nice Job!

Ui looks good ✅
Test coverage added 👍

left a small comment for using a util instead of duplicating logic

packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx

bnussman-akamai

Awesome job! Looks great!

cpathipa · 2023-10-26T13:51:45Z

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

+  { country: 'us', id: 'us-iad', label: 'Washington, DC' },
+  { country: 'us', id: 'us-lax', label: 'Los Angeles, CA' },
  { country: 'fr', id: 'fr-par', label: 'Paris, FR' },
+  { country: 'jp', id: 'jp-osa', label: 'Osaka, JP' },
+  { country: 'au', id: 'ap-southeast', label: 'Sydney, AU' },


TY @bnussman for updating with approved regions. Was about to push this change then realized your commit.

coliu-akamai

UI looks good + looks good on smaller screens! 🎉

feat: [M3-7288] - AGLB create page with Actions buttons.

d120b11

cpathipa requested a review from a team as a code owner October 23, 2023 15:07

cpathipa requested review from hana-akamai and coliu-akamai and removed request for a team October 23, 2023 15:07

cpathipa marked this pull request as draft October 23, 2023 15:08

cpathipa self-assigned this Oct 23, 2023

cpathipa added ACLB Relating to the Akamai Cloud Load Balancer Work in Progress labels Oct 23, 2023

cpathipa added 7 commits October 23, 2023 10:09

Merge remote-tracking branch 'origin/develop' into M3-7288

e2a78e3

Add configuration header section

7f56fb9

Add Actions buttons

0d77241

Render Regions as per the mockup

c767907

Added changeset: AGLB create page with Actions buttons.

3d2dc73

Unit test coverage for LoadBalancerLabel

aa2d981

Unit test for LoadBalancerConfiguration

a9ceab7

cpathipa commented Oct 23, 2023

View reviewed changes

cpathipa removed the Work in Progress label Oct 23, 2023

cpathipa marked this pull request as ready for review October 23, 2023 21:52

coliu-akamai reviewed Oct 24, 2023

View reviewed changes

bnussman-akamai reviewed Oct 24, 2023

View reviewed changes

hana-akamai reviewed Oct 24, 2023

View reviewed changes

mjac0bs reviewed Oct 24, 2023

View reviewed changes

cpathipa and others added 7 commits October 24, 2023 12:05

Update packages/manager/src/features/LoadBalancers/LoadBalancerCreate…

078df04

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

Update packages/manager/.changeset/pr-9825-upcoming-features-16980932…

f8b765e

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

PR - Feedback

af618d6

Merge branch 'M3-7288' of github.com:cpathipa/manager into M3-7288

4d4e84c

PR - feedback

47fea16

Update packages/manager/src/features/LoadBalancers/LoadBalancerCreate…

19ccdaf

…/LoadBalancerConfiguration.tsx Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>

Update packages/manager/src/features/LoadBalancers/LoadBalancerCreate…

f529242

…/LoadBalancerRegions.tsx Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>

cpathipa requested review from hana-akamai, coliu-akamai and bnussman-akamai October 24, 2023 20:01

Adjust actions buttons order for small screens.

949349c

bnussman-akamai requested changes Oct 25, 2023

View reviewed changes

mjac0bs approved these changes Oct 25, 2023

View reviewed changes

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLable.tsx Outdated Show resolved Hide resolved

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx Outdated Show resolved Hide resolved

cpathipa and others added 3 commits October 25, 2023 15:25

Update packages/manager/src/features/LoadBalancers/LoadBalancerCreate…

6fd6386

…/LoadBalancerConfiguration.test.tsx Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>

Rename file name - LoadBalancerLabel

413b325

Merge branch 'M3-7288' of github.com:cpathipa/manager into M3-7288

c50c029

mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Oct 25, 2023

simplify styles and use less grid

f5930a6

Wrap stepper component for mobile view

d1f4b08

cpathipa requested a review from bnussman-akamai October 26, 2023 05:46

abailly-akamai approved these changes Oct 26, 2023

View reviewed changes

packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx Outdated Show resolved Hide resolved

bnussman-akamai approved these changes Oct 26, 2023

View reviewed changes

bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Oct 26, 2023

bnussman and others added 3 commits October 26, 2023 09:44

add real regions

a7344f2

Use util - convertToKebabCase

71e8ff1

Merge branch 'M3-7288' of github.com:cpathipa/manager into M3-7288

8aba807

cpathipa commented Oct 26, 2023

View reviewed changes

coliu-akamai approved these changes Oct 26, 2023

View reviewed changes

cpathipa merged commit 9cd7af2 into linode:develop Oct 26, 2023
12 of 13 checks passed

cpathipa deleted the M3-7288 branch October 26, 2023 14:08

This was referenced Nov 8, 2023

Release v1.107.0 - release → staging #9889

Merged

Release v1.107.0 - staging → master #9898

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-7288] - AGLB create page with Actions buttons. #9825

feat: [M3-7288] - AGLB create page with Actions buttons. #9825

cpathipa commented Oct 23, 2023 •

edited

Loading

cpathipa Oct 23, 2023

cpathipa Oct 23, 2023

coliu-akamai left a comment

bnussman-akamai Oct 24, 2023

hana-akamai left a comment •

edited

Loading

hana-akamai Oct 24, 2023

cpathipa Oct 24, 2023

bnussman-akamai Oct 25, 2023

cpathipa Oct 25, 2023

bnussman-akamai Oct 25, 2023

mjac0bs left a comment

hana-akamai commented Oct 25, 2023

cpathipa commented Oct 25, 2023

mjac0bs left a comment

bnussman-akamai commented Oct 25, 2023

cpathipa commented Oct 26, 2023

abailly-akamai left a comment

bnussman-akamai left a comment

cpathipa Oct 26, 2023

coliu-akamai left a comment

feat: [M3-7288] - AGLB create page with Actions buttons. #9825

feat: [M3-7288] - AGLB create page with Actions buttons. #9825

Conversation

cpathipa commented Oct 23, 2023 • edited Loading

Description 📝

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author I have considered 🤔

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coliu-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hana-akamai left a comment • 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

mjac0bs left a comment

Choose a reason for hiding this comment

hana-akamai commented Oct 25, 2023

cpathipa commented Oct 25, 2023

mjac0bs left a comment

Choose a reason for hiding this comment

bnussman-akamai commented Oct 25, 2023

cpathipa commented Oct 26, 2023

abailly-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coliu-akamai left a comment

Choose a reason for hiding this comment

cpathipa commented Oct 23, 2023 •

edited

Loading

hana-akamai left a comment •

edited

Loading