From d120b114fb19cab95e9883a7a2dc1b70357a8a3d Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Mon, 23 Oct 2023 10:06:00 -0500
Subject: [PATCH 01/24] feat: [M3-7288] - AGLB create page with Actions
 buttons.

---
 .../VerticalLinearStepper.tsx                 |  1 -
 .../LoadBalancerConfiguration.tsx             | 37 +++++++++++++++++++
 .../LoadBalancerCreate/LoadBalancerCreate.tsx | 25 +++++++++++--
 .../LoadBalancerCreate/LoadBalancerLable.tsx  | 36 ++++++++++++++++++
 .../LoadBalancerRegions.tsx                   | 20 ++++++++++
 5 files changed, 114 insertions(+), 5 deletions(-)
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLable.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
index 7efed690d24..b2aa7629bba 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
@@ -46,7 +46,6 @@ export const VerticalLinearStepper = ({
         backgroundColor: theme.bg.bgPaper,
         display: 'flex',
         margin: 'auto',
-        maxWidth: 800,
         p: `${theme.spacing(2)}`,
       })}
     >
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
new file mode 100644
index 00000000000..0991261a10c
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
@@ -0,0 +1,37 @@
+import { useTheme } from '@mui/material/styles';
+import * as React from 'react';
+
+import { Paper } from 'src/components/Paper';
+import { VerticalLinearStepper } from 'src/components/VerticalLinearStepper/VerticalLinearStepper';
+
+export const LoadBalancerConfiguration = () => {
+  const theme = useTheme();
+
+  const steps = [
+    {
+      content: <>TODO: Implement Details step content.</>,
+      label: 'Details',
+    },
+    {
+      content: <>TODO: Implement Service Targets Configuration.</>,
+      label: 'Service Targets',
+    },
+    {
+      content: <>TODO: Implement Routes Confiugataion.</>,
+      label: 'Routes',
+    },
+  ];
+
+  return (
+    <Paper
+      sx={{
+        flexGrow: 1,
+        marginTop: theme.spacing(3),
+        width: '100%',
+      }}
+      data-qa-label-header
+    >
+      <VerticalLinearStepper steps={steps} />
+    </Paper>
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index 6d9e2f9e479..4c5965ed4b9 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -1,13 +1,30 @@
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle/DocumentTitle';
+import { LandingHeader } from 'src/components/LandingHeader';
+
+import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
+import { LoadBalancerLabel } from './LoadBalancerLable';
+import { LoadBalancerRegions } from './LoadBalancerRegions';
 
 const LoadBalancerCreate = () => {
   return (
-    <>
-      <DocumentTitleSegment segment="Load Balancers" />
-      TODO: AGLB M3-6815: Load Balancer Create
-    </>
+    <Grid className="m0" container spacing={0}>
+      <DocumentTitleSegment segment="Create a Load Balancer" />
+      <LandingHeader title="Create" />
+      <LoadBalancerLabel
+        labelFieldProps={{
+          disabled: false,
+          errorText: '',
+          label: 'Linode Label',
+          onChange: () => null,
+          value: '',
+        }}
+      />
+      <LoadBalancerRegions />
+      <LoadBalancerConfiguration />
+    </Grid>
   );
 };
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLable.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLable.tsx
new file mode 100644
index 00000000000..1bff990ab83
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLable.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { Notice } from 'src/components/Notice/Notice';
+import { Paper } from 'src/components/Paper';
+import { TextField, TextFieldProps } from 'src/components/TextField';
+
+interface LabelProps {
+  error?: string;
+  labelFieldProps: TextFieldProps;
+}
+
+export const LoadBalancerLabel = (props: LabelProps) => {
+  const { error, labelFieldProps } = props;
+
+  return (
+    <Paper
+      sx={{
+        flexGrow: 1,
+        width: '100%',
+      }}
+      data-qa-label-header
+    >
+      {error && <Notice text={error} variant="error" />}
+      <TextField
+        data-qa-label-input
+        disabled={labelFieldProps.disabled}
+        errorText={labelFieldProps.errorText}
+        label="Load Balancer Label"
+        noMarginTop
+        onChange={() => labelFieldProps.onChange}
+        placeholder="Enter a label"
+        value={labelFieldProps.value}
+      />
+    </Paper>
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
new file mode 100644
index 00000000000..100ad842c6b
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -0,0 +1,20 @@
+import { useTheme } from '@mui/material/styles';
+import * as React from 'react';
+
+import { Paper } from 'src/components/Paper';
+
+export const LoadBalancerRegions = () => {
+  const theme = useTheme();
+  return (
+    <Paper
+      sx={{
+        flexGrow: 1,
+        marginTop: theme.spacing(3),
+        width: '100%',
+      }}
+      data-qa-label-header
+    >
+      TODO: Implement Regions Field.
+    </Paper>
+  );
+};

From 7f56fb9e536f4248d24bd7749ca9c45376aab3db Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Mon, 23 Oct 2023 10:56:44 -0500
Subject: [PATCH 02/24] Add configuration header section

---
 .../VerticalLinearStepper.styles.ts             |  2 +-
 .../VerticalLinearStepper.tsx                   |  1 -
 .../LoadBalancerConfiguration.tsx               | 17 ++++++++++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts
index 03eb7eff8c1..771f1d13407 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts
@@ -48,6 +48,6 @@ export const StyledColorlibConnector = styled(StepConnector, {
   '& .MuiStepConnector-line': {
     borderColor: '#eaeaf0',
     borderLeftWidth: '3px',
-    minHeight: '28px',
+    minHeight: '16px',
   },
 }));
diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
index b2aa7629bba..bb16d2fcdab 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
@@ -45,7 +45,6 @@ export const VerticalLinearStepper = ({
       sx={(theme: Theme) => ({
         backgroundColor: theme.bg.bgPaper,
         display: 'flex',
-        margin: 'auto',
         p: `${theme.spacing(2)}`,
       })}
     >
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
index 0991261a10c..33e9d2779f2 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
@@ -1,7 +1,9 @@
+import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Paper } from 'src/components/Paper';
+import { Typography } from 'src/components/Typography';
 import { VerticalLinearStepper } from 'src/components/VerticalLinearStepper/VerticalLinearStepper';
 
 export const LoadBalancerConfiguration = () => {
@@ -31,7 +33,20 @@ export const LoadBalancerConfiguration = () => {
       }}
       data-qa-label-header
     >
-      <VerticalLinearStepper steps={steps} />
+      <Typography
+        data-qa-tp-title
+        sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+        variant="h2"
+      >
+        Configuration -{' '}
+      </Typography>
+      <Stack>
+        <Typography sx={(theme) => ({ marginBottom: theme.spacing(1) })}>
+          A Configuration listens on a port and uses Route Rules to forward
+          request to Service Target Endpoints
+        </Typography>
+        <VerticalLinearStepper steps={steps} />
+      </Stack>
     </Paper>
   );
 };

From 0d772415a61f389bb21b5f1e59ee68a255ecfbe9 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Mon, 23 Oct 2023 11:46:09 -0500
Subject: [PATCH 03/24] Add Actions buttons

---
 .../LoadBalancerCreate/LoadBalancerCreate.tsx | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index 4c5965ed4b9..56359e19693 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -1,6 +1,9 @@
 import Grid from '@mui/material/Unstable_Grid2';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
 
@@ -8,6 +11,14 @@ import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
 import { LoadBalancerLabel } from './LoadBalancerLable';
 import { LoadBalancerRegions } from './LoadBalancerRegions';
 
+export const StyledAddConfigurationButton = styled(Button, {
+  label: 'StyledAddConfigurationButton',
+})(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    marginRight: theme.spacing(1),
+  },
+}));
+
 const LoadBalancerCreate = () => {
   return (
     <Grid className="m0" container spacing={0}>
@@ -24,6 +35,38 @@ const LoadBalancerCreate = () => {
       />
       <LoadBalancerRegions />
       <LoadBalancerConfiguration />
+      {/* 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>
   );
 };

From c767907262e92e151e44f5c321f30ef6f95fc9cd Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Mon, 23 Oct 2023 15:20:29 -0500
Subject: [PATCH 04/24] Render Regions as per the mockup

---
 .../LoadBalancerRegions.tsx                   | 55 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
index 100ad842c6b..2819f112e84 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -1,7 +1,22 @@
+import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
+import { BetaChip } from 'src/components/BetaChip/BetaChip';
+import { Country } from 'src/components/EnhancedSelect/variants/RegionSelect/utils';
+import { Flag } from 'src/components/Flag';
 import { Paper } from 'src/components/Paper';
+import { Typography } from 'src/components/Typography';
+
+// 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' },
+];
 
 export const LoadBalancerRegions = () => {
   const theme = useTheme();
@@ -14,7 +29,45 @@ export const LoadBalancerRegions = () => {
       }}
       data-qa-label-header
     >
-      TODO: Implement Regions Field.
+      <Typography
+        data-qa-tp-title
+        sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+        variant="h2"
+      >
+        Regions
+      </Typography>
+      <Stack>
+        <Typography sx={(theme) => ({ marginBottom: theme.spacing(1) })}>
+          Where this Load Balancer instance will be deployed.
+        </Typography>
+        <Grid container>
+          <BetaChip sx={{ marginLeft: '0 !important' }} />
+          <Typography sx={(theme) => ({ marginBottom: theme.spacing(1) })}>
+            Load Balancers will be automatically provisioned in these 5 Regions.
+            No charges with be incured.
+          </Typography>
+        </Grid>
+        <Grid marginTop={theme.spacing(2)}>
+          {regions.map((region) => (
+            <Grid
+              alignItems={'center'}
+              container
+              direction="row"
+              justifyContent="flex-start"
+              key={region.id}
+              marginBottom={theme.spacing(1)}
+              spacing={2}
+            >
+              <Grid className="py0">
+                <Flag country={region.country as Lowercase<Country>} />
+              </Grid>
+              <Grid>
+                <Typography>{`${region.label} (${region.id})`}</Typography>
+              </Grid>
+            </Grid>
+          ))}
+        </Grid>
+      </Stack>
     </Paper>
   );
 };

From 3d2dc7388577292361d72cae6d6a85e64313565b Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Mon, 23 Oct 2023 15:33:41 -0500
Subject: [PATCH 05/24] Added changeset: AGLB create page with Actions buttons.

---
 .../.changeset/pr-9825-upcoming-features-1698093221284.md    | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md

diff --git a/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md b/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
new file mode 100644
index 00000000000..4de07c8f5b1
--- /dev/null
+++ b/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+AGLB create page with Actions buttons. ([#9825](https://github.com/linode/manager/pull/9825))

From aa2d98112bc09a8d0580538cd9151b145181a723 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Mon, 23 Oct 2023 15:58:44 -0500
Subject: [PATCH 06/24] Unit test coverage for LoadBalancerLabel

---
 .../LoadBalancerLabel.test.tsx                | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
new file mode 100644
index 00000000000..f9aec3f5fb3
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { LoadBalancerLabel } from './LoadBalancerLable';
+
+describe('LoadBalancerLabel', () => {
+  it('should render the component with a label and no error', () => {
+    const labelFieldProps = {
+      disabled: false,
+      errorText: '',
+      label: 'Load Balancer Label',
+      onChange: jest.fn(),
+      value: 'Test Label',
+    };
+
+    const { getByTestId, queryByText } = renderWithTheme(
+      <LoadBalancerLabel error="" labelFieldProps={labelFieldProps} />
+    );
+
+    const labelInput = getByTestId('textfield-input');
+    const errorNotice = queryByText('Error Text');
+
+    expect(labelInput).toBeInTheDocument();
+    expect(labelInput).toHaveAttribute('placeholder', 'Enter a label');
+    expect(labelInput).toHaveValue('Test Label');
+    expect(errorNotice).toBeNull();
+  });
+
+  it('should render the component with an error message', () => {
+    const labelFieldProps = {
+      disabled: false,
+      errorText: 'This is an error',
+      label: 'Load Balancer Label',
+      onChange: jest.fn(),
+      value: 'Test Label',
+    };
+
+    const { getByTestId, getByText } = renderWithTheme(
+      <LoadBalancerLabel error="Error Text" labelFieldProps={labelFieldProps} />
+    );
+
+    const labelInput = getByTestId('textfield-input');
+    const errorNotice = getByText('This is an error');
+
+    expect(labelInput).toBeInTheDocument();
+    expect(errorNotice).toBeInTheDocument();
+  });
+});

From a9ceab7fbf4a3b006baa0dd990872004a035f780 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:45:49 -0500
Subject: [PATCH 07/24] Unit test for LoadBalancerConfiguration

---
 .../VerticalLinearStepper.tsx                 |  8 +--
 .../LoadBalancerConfiguration.test.tsx        | 64 +++++++++++++++++++
 .../LoadBalancerConfiguration.tsx             | 35 +++++-----
 3 files changed, 87 insertions(+), 20 deletions(-)
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx

diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
index bb16d2fcdab..3e50917c26d 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
@@ -23,7 +23,7 @@ type VerticalLinearStep = {
   label: string;
 };
 
-interface VerticalLinearStepperProps {
+export interface VerticalLinearStepperProps {
   steps: VerticalLinearStep[];
 }
 
@@ -114,9 +114,9 @@ export const VerticalLinearStepper = ({
                       primaryButtonProps={
                         index !== 2
                           ? {
-                              'data-testid': steps[
-                                index + 1
-                              ]?.label.toLocaleLowerCase(),
+                              'data-testid': steps[index + 1]?.label
+                                .toLocaleLowerCase()
+                                .replace(/\s/g, ''),
                               label: `Next: ${steps[index + 1]?.label}`,
                               onClick: () => {
                                 handleNext();
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
new file mode 100644
index 00000000000..6631957b5aa
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
@@ -0,0 +1,64 @@
+import '@testing-library/jest-dom/extend-expect';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
+
+describe('LoadBalancerConfiguration', () => {
+  test('Should render Details content', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    expect(
+      screen.getByText('TODO: Implement Details step content.')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('TODO: Implement Service Targets Configuration.')
+    ).toBeNull();
+    expect(
+      screen.queryByText('TODO: Implement Routes Confiugataion.')
+    ).toBeNull();
+    expect(screen.getByText('Next: Service Targets')).toBeInTheDocument();
+    expect(screen.queryByText('Previous: Details')).toBeNull();
+  });
+  test('Should navigate to Service Targets  conent', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    userEvent.click(screen.getByTestId('servicetargets'));
+    expect(
+      screen.getByText('TODO: Implement Service Targets Configuration.')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('TODO: Implement Details step content.')
+    ).toBeNull();
+    expect(
+      screen.queryByText('TODO: Implement Routes Confiugataion.')
+    ).toBeNull();
+    expect(screen.getByText('Next: Routes')).toBeInTheDocument();
+    expect(screen.getByText('Previous: Details')).toBeInTheDocument();
+    expect(screen.queryByText('Previous: Service Targets')).toBeNull();
+  });
+  test('Should navigate to Routes conent', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    userEvent.click(screen.getByTestId('servicetargets'));
+    userEvent.click(screen.getByTestId('routes'));
+    expect(
+      screen.queryByText('TODO: Implement Details step content.')
+    ).toBeNull();
+    expect(
+      screen.queryByText('TODO: Implement Service Targets Configuration.')
+    ).toBeNull();
+    expect(
+      screen.getByText('TODO: Implement Routes Confiugataion.')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Previous: Service Targets')).toBeInTheDocument();
+  });
+  test('Should be able to go previous step', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    userEvent.click(screen.getByTestId('servicetargets'));
+    userEvent.click(screen.getByText('Previous: Details'));
+    expect(
+      screen.getByText('TODO: Implement Details step content.')
+    ).toBeInTheDocument();
+  });
+});
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
index 33e9d2779f2..81b122fb61f 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
@@ -6,24 +6,27 @@ import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
 import { VerticalLinearStepper } from 'src/components/VerticalLinearStepper/VerticalLinearStepper';
 
+export const configurationSteps = [
+  {
+    content: <div>TODO: Implement Details step content.</div>,
+    handler: () => null,
+    label: 'Details',
+  },
+  {
+    content: <div>TODO: Implement Service Targets Configuration.</div>,
+    handler: () => null,
+    label: 'Service Targets',
+  },
+  {
+    content: <div>TODO: Implement Routes Confiugataion.</div>,
+    handler: () => null,
+    label: 'Routes',
+  },
+];
+
 export const LoadBalancerConfiguration = () => {
   const theme = useTheme();
 
-  const steps = [
-    {
-      content: <>TODO: Implement Details step content.</>,
-      label: 'Details',
-    },
-    {
-      content: <>TODO: Implement Service Targets Configuration.</>,
-      label: 'Service Targets',
-    },
-    {
-      content: <>TODO: Implement Routes Confiugataion.</>,
-      label: 'Routes',
-    },
-  ];
-
   return (
     <Paper
       sx={{
@@ -45,7 +48,7 @@ export const LoadBalancerConfiguration = () => {
           A Configuration listens on a port and uses Route Rules to forward
           request to Service Target Endpoints
         </Typography>
-        <VerticalLinearStepper steps={steps} />
+        <VerticalLinearStepper steps={configurationSteps} />
       </Stack>
     </Paper>
   );

From 078df0466978ff61d7999016e7057d213ee00871 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 12:05:30 -0500
Subject: [PATCH 08/24] Update
 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
---
 .../LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
index 2819f112e84..8c10d5ebb55 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -44,7 +44,7 @@ export const LoadBalancerRegions = () => {
           <BetaChip sx={{ marginLeft: '0 !important' }} />
           <Typography sx={(theme) => ({ marginBottom: theme.spacing(1) })}>
             Load Balancers will be automatically provisioned in these 5 Regions.
-            No charges with be incured.
+            No charges with be incurred.
           </Typography>
         </Grid>
         <Grid marginTop={theme.spacing(2)}>

From f8b765e90b683ced5e12dbd96c36c734431e4969 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 12:14:51 -0500
Subject: [PATCH 09/24] Update
 packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
---
 .../.changeset/pr-9825-upcoming-features-1698093221284.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md b/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
index 4de07c8f5b1..b11a0b1b6bf 100644
--- a/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
+++ b/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
@@ -2,4 +2,4 @@
 "@linode/manager": Upcoming Features
 ---
 
-AGLB create page with Actions buttons. ([#9825](https://github.com/linode/manager/pull/9825))
+Add AGLB create page with Actions buttons ([#9825](https://github.com/linode/manager/pull/9825))

From af618d6c2722dcc346904df5665c2899fdee2607 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 12:27:50 -0500
Subject: [PATCH 10/24] PR - Feedback

---
 .../VerticalLinearStepper.tsx                 |  4 +++
 .../LoadBalancerConfiguration.test.tsx        | 28 +++++++++++--------
 .../LoadBalancerConfiguration.tsx             |  6 ++--
 .../LoadBalancerCreate/LoadBalancerCreate.tsx |  2 +-
 .../LoadBalancerRegions.tsx                   |  2 +-
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
index 3e50917c26d..3c5aba047eb 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
@@ -114,6 +114,10 @@ export const VerticalLinearStepper = ({
                       primaryButtonProps={
                         index !== 2
                           ? {
+                              /** Generate a 'data-testid' attribute value based on the label of the next step.
+                               * 1. toLocaleLowerCase(): Converts the label to lowercase for consistency.
+                               * 2. replace(/\s/g, ''): Removes spaces from the label to create a valid test ID.
+                               */
                               'data-testid': steps[index + 1]?.label
                                 .toLocaleLowerCase()
                                 .replace(/\s/g, ''),
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
index 6631957b5aa..4e699eededd 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
@@ -11,45 +11,49 @@ describe('LoadBalancerConfiguration', () => {
   test('Should render Details content', () => {
     renderWithTheme(<LoadBalancerConfiguration />);
     expect(
-      screen.getByText('TODO: Implement Details step content.')
+      screen.getByText('TODO: AGLB -  Implement Details step content.')
     ).toBeInTheDocument();
     expect(
-      screen.queryByText('TODO: Implement Service Targets Configuration.')
+      screen.queryByText(
+        'TODO: AGLB -  Implement Service Targets Configuration.'
+      )
     ).toBeNull();
     expect(
-      screen.queryByText('TODO: Implement Routes Confiugataion.')
+      screen.queryByText('TODO: AGLB -  Implement Routes Configuration.')
     ).toBeNull();
     expect(screen.getByText('Next: Service Targets')).toBeInTheDocument();
     expect(screen.queryByText('Previous: Details')).toBeNull();
   });
-  test('Should navigate to Service Targets  conent', () => {
+  test('Should navigate to Service Targets content', () => {
     renderWithTheme(<LoadBalancerConfiguration />);
     userEvent.click(screen.getByTestId('servicetargets'));
     expect(
-      screen.getByText('TODO: Implement Service Targets Configuration.')
+      screen.getByText('TODO: AGLB -  Implement Service Targets Configuration.')
     ).toBeInTheDocument();
     expect(
-      screen.queryByText('TODO: Implement Details step content.')
+      screen.queryByText('TODO: AGLB -  Implement Details step content.')
     ).toBeNull();
     expect(
-      screen.queryByText('TODO: Implement Routes Confiugataion.')
+      screen.queryByText('TODO: AGLB -  Implement Routes Configuration.')
     ).toBeNull();
     expect(screen.getByText('Next: Routes')).toBeInTheDocument();
     expect(screen.getByText('Previous: Details')).toBeInTheDocument();
     expect(screen.queryByText('Previous: Service Targets')).toBeNull();
   });
-  test('Should navigate to Routes conent', () => {
+  test('Should navigate to Routes content', () => {
     renderWithTheme(<LoadBalancerConfiguration />);
     userEvent.click(screen.getByTestId('servicetargets'));
     userEvent.click(screen.getByTestId('routes'));
     expect(
-      screen.queryByText('TODO: Implement Details step content.')
+      screen.queryByText('TODO: AGLB -  Implement Details step content.')
     ).toBeNull();
     expect(
-      screen.queryByText('TODO: Implement Service Targets Configuration.')
+      screen.queryByText(
+        'TODO: AGLB -  Implement Service Targets Configuration.'
+      )
     ).toBeNull();
     expect(
-      screen.getByText('TODO: Implement Routes Confiugataion.')
+      screen.getByText('TODO: AGLB -  Implement Routes Configuration.')
     ).toBeInTheDocument();
     expect(screen.getByText('Previous: Service Targets')).toBeInTheDocument();
   });
@@ -58,7 +62,7 @@ describe('LoadBalancerConfiguration', () => {
     userEvent.click(screen.getByTestId('servicetargets'));
     userEvent.click(screen.getByText('Previous: Details'));
     expect(
-      screen.getByText('TODO: Implement Details step content.')
+      screen.getByText('TODO: AGLB -  Implement Details step content.')
     ).toBeInTheDocument();
   });
 });
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
index 81b122fb61f..b803b88479e 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
@@ -8,17 +8,17 @@ import { VerticalLinearStepper } from 'src/components/VerticalLinearStepper/Vert
 
 export const configurationSteps = [
   {
-    content: <div>TODO: Implement Details step content.</div>,
+    content: <div>TODO: AGLB - Implement Details step content.</div>,
     handler: () => null,
     label: 'Details',
   },
   {
-    content: <div>TODO: Implement Service Targets Configuration.</div>,
+    content: <div>TODO: AGLB - Implement Service Targets Configuration.</div>,
     handler: () => null,
     label: 'Service Targets',
   },
   {
-    content: <div>TODO: Implement Routes Confiugataion.</div>,
+    content: <div>TODO: AGLB - Implement Routes Confiugataion.</div>,
     handler: () => null,
     label: 'Routes',
   },
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index 56359e19693..97075b7fb56 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -35,7 +35,7 @@ const LoadBalancerCreate = () => {
       />
       <LoadBalancerRegions />
       <LoadBalancerConfiguration />
-      {/* TODO:
+      {/* TODO: AGLB -
        * Implement Review Load Balancer Action Behavior
        * Implement Cancel Behavior
        * Implement Add Another Configuration Behavior
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
index 8c10d5ebb55..d823d267368 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -58,7 +58,7 @@ export const LoadBalancerRegions = () => {
               marginBottom={theme.spacing(1)}
               spacing={2}
             >
-              <Grid className="py0">
+              <Grid sx={{ paddingBottom: 0, paddingTop: 0 }}>
                 <Flag country={region.country as Lowercase<Country>} />
               </Grid>
               <Grid>

From 47fea16a262d4c5d90f9c7e1a790b80c116ea54b Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 12:39:12 -0500
Subject: [PATCH 11/24] PR - feedback

---
 .../VerticalLinearStepper/VerticalLinearStepper.styles.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts
index 771f1d13407..4d8bc9d619c 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts
@@ -44,10 +44,10 @@ export const CustomStepIcon = styled(StepIcon, { label: 'StyledCircleIcon' })(
 
 export const StyledColorlibConnector = styled(StepConnector, {
   label: 'StyledColorlibConnector',
-})(() => ({
+})(({ theme }) => ({
   '& .MuiStepConnector-line': {
     borderColor: '#eaeaf0',
     borderLeftWidth: '3px',
-    minHeight: '16px',
+    minHeight: theme.spacing(2),
   },
 }));

From 19ccdafe11bce6bc47f58617dd3bcfa74c83d2d2 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 12:43:07 -0500
Subject: [PATCH 12/24] Update
 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx

Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
---
 .../LoadBalancerCreate/LoadBalancerConfiguration.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
index b803b88479e..b01b2044d3d 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
@@ -29,11 +29,11 @@ export const LoadBalancerConfiguration = () => {
 
   return (
     <Paper
-      sx={{
+      sx={(theme) => ({
         flexGrow: 1,
         marginTop: theme.spacing(3),
         width: '100%',
-      }}
+      })}
       data-qa-label-header
     >
       <Typography

From f52924245fd72a033ee1ccb7f905842b8747d069 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 12:44:02 -0500
Subject: [PATCH 13/24] Update
 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
---
 .../LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
index d823d267368..762e6eb9475 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -22,11 +22,11 @@ export const LoadBalancerRegions = () => {
   const theme = useTheme();
   return (
     <Paper
-      sx={{
+      sx={(theme) => ({
         flexGrow: 1,
         marginTop: theme.spacing(3),
         width: '100%',
-      }}
+      })}
       data-qa-label-header
     >
       <Typography

From f5dd31f0f9b97f117725245b5798a47bb05cfef1 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 13:32:46 -0500
Subject: [PATCH 14/24] PR - Feedback

---
 .../LoadBalancerCreate/LoadBalancerConfiguration.tsx      | 3 ---
 .../LoadBalancerCreate/LoadBalancerRegions.tsx            | 8 +++-----
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
index b01b2044d3d..fe4a5be09d8 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
@@ -1,5 +1,4 @@
 import Stack from '@mui/material/Stack';
-import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Paper } from 'src/components/Paper';
@@ -25,8 +24,6 @@ export const configurationSteps = [
 ];
 
 export const LoadBalancerConfiguration = () => {
-  const theme = useTheme();
-
   return (
     <Paper
       sx={(theme) => ({
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
index 762e6eb9475..38ff5d60445 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -1,6 +1,5 @@
 import Stack from '@mui/material/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
-import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
@@ -9,7 +8,7 @@ import { Flag } from 'src/components/Flag';
 import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
 
-// TODO: Regious should be updated with the real values
+// TODO: AGLB -  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' },
@@ -19,7 +18,6 @@ const regions = [
 ];
 
 export const LoadBalancerRegions = () => {
-  const theme = useTheme();
   return (
     <Paper
       sx={(theme) => ({
@@ -47,7 +45,7 @@ export const LoadBalancerRegions = () => {
             No charges with be incurred.
           </Typography>
         </Grid>
-        <Grid marginTop={theme.spacing(2)}>
+        <Grid sx={(theme) => ({ marginTop: theme.spacing(2) })}>
           {regions.map((region) => (
             <Grid
               alignItems={'center'}
@@ -55,8 +53,8 @@ export const LoadBalancerRegions = () => {
               direction="row"
               justifyContent="flex-start"
               key={region.id}
-              marginBottom={theme.spacing(1)}
               spacing={2}
+              sx={(theme) => ({ marginBottom: theme.spacing(1) })}
             >
               <Grid sx={{ paddingBottom: 0, paddingTop: 0 }}>
                 <Flag country={region.country as Lowercase<Country>} />

From e42026a5f3fb76744857135aae2cb232ca2c1afe Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 14:21:05 -0500
Subject: [PATCH 15/24] Fix alignment for small screen

---
 .../LoadBalancerCreate/LoadBalancerCreate.tsx | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index 97075b7fb56..0b1891100e8 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -1,5 +1,8 @@
 import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import { Theme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/styles';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
@@ -20,6 +23,16 @@ export const StyledAddConfigurationButton = styled(Button, {
 }));
 
 const LoadBalancerCreate = () => {
+  const theme = useTheme<Theme>();
+  const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));
+
+  const smallScreenActionsPanelStyles = {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between',
+    marginTop: theme.spacing(2),
+    width: '100%',
+  };
   return (
     <Grid className="m0" container spacing={0}>
       <DocumentTitleSegment segment="Create a Load Balancer" />
@@ -40,15 +53,15 @@ const LoadBalancerCreate = () => {
        * Implement Cancel Behavior
        * Implement Add Another Configuration Behavior
        */}
-      <div
-        style={{
-          display: 'flex',
+      <Grid
+        sx={(theme) => ({
           justifyContent: 'space-between',
-          marginTop: '16px',
+          marginTop: theme.spacing(2),
           width: '100%',
-        }}
+        })}
+        container
       >
-        <div>
+        <Grid>
           <StyledAddConfigurationButton
             buttonType="outlined"
             data-qa-api-cli-linode
@@ -56,17 +69,21 @@ const LoadBalancerCreate = () => {
           >
             Add Another Configuration
           </StyledAddConfigurationButton>
-        </div>
+        </Grid>
 
         <ActionsPanel
           primaryButtonProps={{
             label: 'Review Load Balancer',
             onClick: () => null,
           }}
+          sx={{
+            margin: 0,
+            padding: 0,
+            ...(matchesSmDown ? smallScreenActionsPanelStyles : {}),
+          }}
           secondaryButtonProps={{ label: 'Cancel', onClick: () => null }}
-          sx={{ margin: 0, padding: 0 }}
         />
-      </div>
+      </Grid>
     </Grid>
   );
 };

From fb9122c2a5026ee6b9fc018bd146dd2858046685 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 14:55:06 -0500
Subject: [PATCH 16/24] Override breadcrumb label

---
 .../LoadBalancerCreate/LoadBalancerCreate.tsx     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index 0b1891100e8..2f7132f3419 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -1,6 +1,6 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { styled } from '@mui/material/styles';
 import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/styles';
 import * as React from 'react';
@@ -36,7 +36,18 @@ const LoadBalancerCreate = () => {
   return (
     <Grid className="m0" container spacing={0}>
       <DocumentTitleSegment segment="Create a Load Balancer" />
-      <LandingHeader title="Create" />
+      <LandingHeader
+        breadcrumbProps={{
+          crumbOverrides: [
+            {
+              label: 'Global Load Balancers',
+              position: 1,
+            },
+          ],
+          pathname: location.pathname,
+        }}
+        title="Create"
+      />
       <LoadBalancerLabel
         labelFieldProps={{
           disabled: false,

From ea2f25b41c6e71001555f2a5cdb3ed4b97a6b8f6 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Oct 2023 15:00:54 -0500
Subject: [PATCH 17/24] Fix tests

---
 .../LoadBalancerConfiguration.test.tsx        | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
index 4e699eededd..6fdfc8c573a 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
@@ -11,15 +11,15 @@ describe('LoadBalancerConfiguration', () => {
   test('Should render Details content', () => {
     renderWithTheme(<LoadBalancerConfiguration />);
     expect(
-      screen.getByText('TODO: AGLB -  Implement Details step content.')
+      screen.getByText('TODO: AGLB - Implement Details step content.')
     ).toBeInTheDocument();
     expect(
       screen.queryByText(
-        'TODO: AGLB -  Implement Service Targets Configuration.'
+        'TODO: AGLB - Implement Service Targets Configuration.'
       )
     ).toBeNull();
     expect(
-      screen.queryByText('TODO: AGLB -  Implement Routes Configuration.')
+      screen.queryByText('TODO: AGLB - Implement Routes Confiugataion.')
     ).toBeNull();
     expect(screen.getByText('Next: Service Targets')).toBeInTheDocument();
     expect(screen.queryByText('Previous: Details')).toBeNull();
@@ -28,13 +28,13 @@ describe('LoadBalancerConfiguration', () => {
     renderWithTheme(<LoadBalancerConfiguration />);
     userEvent.click(screen.getByTestId('servicetargets'));
     expect(
-      screen.getByText('TODO: AGLB -  Implement Service Targets Configuration.')
+      screen.getByText('TODO: AGLB - Implement Service Targets Configuration.')
     ).toBeInTheDocument();
     expect(
-      screen.queryByText('TODO: AGLB -  Implement Details step content.')
+      screen.queryByText('TODO: AGLB - Implement Details step content.')
     ).toBeNull();
     expect(
-      screen.queryByText('TODO: AGLB -  Implement Routes Configuration.')
+      screen.queryByText('TODO: AGLB - Implement Routes Confiugataion.')
     ).toBeNull();
     expect(screen.getByText('Next: Routes')).toBeInTheDocument();
     expect(screen.getByText('Previous: Details')).toBeInTheDocument();
@@ -45,15 +45,15 @@ describe('LoadBalancerConfiguration', () => {
     userEvent.click(screen.getByTestId('servicetargets'));
     userEvent.click(screen.getByTestId('routes'));
     expect(
-      screen.queryByText('TODO: AGLB -  Implement Details step content.')
+      screen.queryByText('TODO: AGLB - Implement Details step content.')
     ).toBeNull();
     expect(
       screen.queryByText(
-        'TODO: AGLB -  Implement Service Targets Configuration.'
+        'TODO: AGLB - Implement Service Targets Configuration.'
       )
     ).toBeNull();
     expect(
-      screen.getByText('TODO: AGLB -  Implement Routes Configuration.')
+      screen.getByText('TODO: AGLB - Implement Routes Confiugataion.')
     ).toBeInTheDocument();
     expect(screen.getByText('Previous: Service Targets')).toBeInTheDocument();
   });
@@ -62,7 +62,7 @@ describe('LoadBalancerConfiguration', () => {
     userEvent.click(screen.getByTestId('servicetargets'));
     userEvent.click(screen.getByText('Previous: Details'));
     expect(
-      screen.getByText('TODO: AGLB -  Implement Details step content.')
+      screen.getByText('TODO: AGLB - Implement Details step content.')
     ).toBeInTheDocument();
   });
 });

From 949349c3c488e1da9018636fc04f1d9c3922770f Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Wed, 25 Oct 2023 10:45:56 -0500
Subject: [PATCH 18/24] Adjust actions buttons order for small screens.

---
 .../LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index 2f7132f3419..e922fdeb427 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -28,7 +28,6 @@ const LoadBalancerCreate = () => {
 
   const smallScreenActionsPanelStyles = {
     display: 'flex',
-    flexDirection: 'row-reverse',
     justifyContent: 'space-between',
     marginTop: theme.spacing(2),
     width: '100%',

From 6fd638666b62a1cbd55413c214c7be0dd866e33c Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Wed, 25 Oct 2023 15:25:01 -0500
Subject: [PATCH 19/24] Update
 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx

Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
---
 .../LoadBalancerCreate/LoadBalancerConfiguration.test.tsx        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
index 6fdfc8c573a..cceb683d29f 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom/extend-expect';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';

From 413b325acd44f8c74cc204907abd874a30e6e167 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Wed, 25 Oct 2023 16:19:30 -0500
Subject: [PATCH 20/24] Rename file name - LoadBalancerLabel

---
 .../LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx     | 2 +-
 .../LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx | 2 +-
 .../{LoadBalancerLable.tsx => LoadBalancerLabel.tsx}            | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/manager/src/features/LoadBalancers/LoadBalancerCreate/{LoadBalancerLable.tsx => LoadBalancerLabel.tsx} (100%)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index e922fdeb427..3fe439aa199 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -11,7 +11,7 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle/DocumentTitle
 import { LandingHeader } from 'src/components/LandingHeader';
 
 import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
-import { LoadBalancerLabel } from './LoadBalancerLable';
+import { LoadBalancerLabel } from './LoadBalancerLabel';
 import { LoadBalancerRegions } from './LoadBalancerRegions';
 
 export const StyledAddConfigurationButton = styled(Button, {
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
index f9aec3f5fb3..c99ba36bfe2 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { LoadBalancerLabel } from './LoadBalancerLable';
+import { LoadBalancerLabel } from './LoadBalancerLabel';
 
 describe('LoadBalancerLabel', () => {
   it('should render the component with a label and no error', () => {
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLable.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx
similarity index 100%
rename from packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLable.tsx
rename to packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx

From f5930a6a42eb0533abfb9ffbea205e949a5d02b6 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 25 Oct 2023 19:49:21 -0400
Subject: [PATCH 21/24] simplify styles and use less grid

---
 .../LoadBalancerConfiguration.tsx             |  14 +--
 .../LoadBalancerCreate/LoadBalancerCreate.tsx | 101 ++++++------------
 .../LoadBalancerRegions.tsx                   |  59 ++++------
 3 files changed, 53 insertions(+), 121 deletions(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
index fe4a5be09d8..a9eadc0b2b2 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
@@ -25,23 +25,15 @@ export const configurationSteps = [
 
 export const LoadBalancerConfiguration = () => {
   return (
-    <Paper
-      sx={(theme) => ({
-        flexGrow: 1,
-        marginTop: theme.spacing(3),
-        width: '100%',
-      })}
-      data-qa-label-header
-    >
+    <Paper>
       <Typography
-        data-qa-tp-title
         sx={(theme) => ({ marginBottom: theme.spacing(2) })}
         variant="h2"
       >
         Configuration -{' '}
       </Typography>
-      <Stack>
-        <Typography sx={(theme) => ({ marginBottom: theme.spacing(1) })}>
+      <Stack spacing={1}>
+        <Typography>
           A Configuration listens on a port and uses Route Rules to forward
           request to Service Target Endpoints
         </Typography>
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index 3fe439aa199..c7b90a87917 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -1,11 +1,7 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { styled } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import Stack from '@mui/material/Stack';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
@@ -14,26 +10,9 @@ import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
 import { LoadBalancerLabel } from './LoadBalancerLabel';
 import { LoadBalancerRegions } from './LoadBalancerRegions';
 
-export const StyledAddConfigurationButton = styled(Button, {
-  label: 'StyledAddConfigurationButton',
-})(({ theme }) => ({
-  [theme.breakpoints.down('md')]: {
-    marginRight: theme.spacing(1),
-  },
-}));
-
 const LoadBalancerCreate = () => {
-  const theme = useTheme<Theme>();
-  const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));
-
-  const smallScreenActionsPanelStyles = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    marginTop: theme.spacing(2),
-    width: '100%',
-  };
   return (
-    <Grid className="m0" container spacing={0}>
+    <>
       <DocumentTitleSegment segment="Create a Load Balancer" />
       <LandingHeader
         breadcrumbProps={{
@@ -47,54 +26,36 @@ const LoadBalancerCreate = () => {
         }}
         title="Create"
       />
-      <LoadBalancerLabel
-        labelFieldProps={{
-          disabled: false,
-          errorText: '',
-          label: 'Linode Label',
-          onChange: () => null,
-          value: '',
-        }}
-      />
-      <LoadBalancerRegions />
-      <LoadBalancerConfiguration />
-      {/* TODO: AGLB -
-       * Implement Review Load Balancer Action Behavior
-       * Implement Cancel Behavior
-       * Implement Add Another Configuration Behavior
-       */}
-      <Grid
-        sx={(theme) => ({
-          justifyContent: 'space-between',
-          marginTop: theme.spacing(2),
-          width: '100%',
-        })}
-        container
-      >
-        <Grid>
-          <StyledAddConfigurationButton
-            buttonType="outlined"
-            data-qa-api-cli-linode
-            onClick={() => null}
-          >
-            Add Another Configuration
-          </StyledAddConfigurationButton>
-        </Grid>
-
-        <ActionsPanel
-          primaryButtonProps={{
-            label: 'Review Load Balancer',
-            onClick: () => null,
-          }}
-          sx={{
-            margin: 0,
-            padding: 0,
-            ...(matchesSmDown ? smallScreenActionsPanelStyles : {}),
+      <Stack spacing={3}>
+        <LoadBalancerLabel
+          labelFieldProps={{
+            disabled: false,
+            errorText: '',
+            label: 'Linode Label',
+            onChange: () => null,
+            value: '',
           }}
-          secondaryButtonProps={{ label: 'Cancel', onClick: () => null }}
         />
-      </Grid>
-    </Grid>
+        <LoadBalancerRegions />
+        <LoadBalancerConfiguration />
+        {/* TODO: AGLB -
+         * Implement Review Load Balancer Action Behavior
+         * Implement Add Another Configuration Behavior
+         */}
+        <Box
+          columnGap={1}
+          display="flex"
+          flexWrap="wrap"
+          justifyContent="space-between"
+          rowGap={3}
+        >
+          <Button buttonType="outlined">Add Another Configuration</Button>
+          <Button buttonType="primary" sx={{ marginLeft: 'auto' }}>
+            Review Load Balancer
+          </Button>
+        </Box>
+      </Stack>
+    </>
   );
 };
 
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
index 38ff5d60445..7ed6bee0ea0 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -1,5 +1,4 @@
 import Stack from '@mui/material/Stack';
-import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
@@ -19,52 +18,32 @@ const regions = [
 
 export const LoadBalancerRegions = () => {
   return (
-    <Paper
-      sx={(theme) => ({
-        flexGrow: 1,
-        marginTop: theme.spacing(3),
-        width: '100%',
-      })}
-      data-qa-label-header
-    >
-      <Typography
-        data-qa-tp-title
-        sx={(theme) => ({ marginBottom: theme.spacing(2) })}
-        variant="h2"
-      >
-        Regions
-      </Typography>
-      <Stack>
-        <Typography sx={(theme) => ({ marginBottom: theme.spacing(1) })}>
-          Where this Load Balancer instance will be deployed.
-        </Typography>
-        <Grid container>
-          <BetaChip sx={{ marginLeft: '0 !important' }} />
-          <Typography sx={(theme) => ({ marginBottom: theme.spacing(1) })}>
-            Load Balancers will be automatically provisioned in these 5 Regions.
-            No charges with be incurred.
+    <Paper>
+      <Stack spacing={2}>
+        <Typography variant="h2">Regions</Typography>
+        <Stack spacing={1}>
+          <Typography>
+            Where this Load Balancer instance will be deployed.
           </Typography>
-        </Grid>
-        <Grid sx={(theme) => ({ marginTop: theme.spacing(2) })}>
+          <Typography>
+            <BetaChip sx={{ marginLeft: '0 !important' }} /> Load Balancers will
+            be automatically provisioned in these 5 Regions. No charges with be
+            incurred.
+          </Typography>
+        </Stack>
+        <Stack py={0.5} spacing={1.25}>
           {regions.map((region) => (
-            <Grid
-              alignItems={'center'}
-              container
+            <Stack
+              alignItems="center"
               direction="row"
-              justifyContent="flex-start"
               key={region.id}
               spacing={2}
-              sx={(theme) => ({ marginBottom: theme.spacing(1) })}
             >
-              <Grid sx={{ paddingBottom: 0, paddingTop: 0 }}>
-                <Flag country={region.country as Lowercase<Country>} />
-              </Grid>
-              <Grid>
-                <Typography>{`${region.label} (${region.id})`}</Typography>
-              </Grid>
-            </Grid>
+              <Flag country={region.country as Lowercase<Country>} />
+              <Typography>{`${region.label} (${region.id})`}</Typography>
+            </Stack>
           ))}
-        </Grid>
+        </Stack>
       </Stack>
     </Paper>
   );

From d1f4b083c2833eb4528e6e1962a5ac79b8915217 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Thu, 26 Oct 2023 00:41:15 -0500
Subject: [PATCH 22/24] Wrap stepper component for mobile view

---
 .../VerticalLinearStepper.tsx                 | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
index 3c5aba047eb..08a210e0344 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
@@ -7,6 +7,8 @@ import {
 } from '@mui/material';
 import Box from '@mui/material/Box';
 import { Theme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/styles';
 import React, { useState } from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
@@ -31,6 +33,9 @@ export const VerticalLinearStepper = ({
   steps,
 }: VerticalLinearStepperProps) => {
   const [activeStep, setActiveStep] = useState(0);
+  const theme = useTheme<Theme>();
+
+  const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));
 
   const handleNext = () => {
     setActiveStep((prevActiveStep) => prevActiveStep + 1);
@@ -45,7 +50,8 @@ export const VerticalLinearStepper = ({
       sx={(theme: Theme) => ({
         backgroundColor: theme.bg.bgPaper,
         display: 'flex',
-        p: `${theme.spacing(2)}`,
+        flexDirection: matchesSmDown ? 'column' : 'row',
+        p: matchesSmDown ? `${theme.spacing(2)}px 0px` : `${theme.spacing(2)}`,
       })}
     >
       {/* Left Column - Vertical Steps */}
@@ -99,7 +105,16 @@ export const VerticalLinearStepper = ({
           {steps.map(({ content, handler, label }, index) => (
             <Step key={label}>
               {index === activeStep ? (
-                <StepContent sx={{ border: 'none' }}>
+                <StepContent
+                  sx={{
+                    border: 'none',
+                    marginLeft: matchesSmDown ? '0px' : undefined,
+                    paddingLeft: matchesSmDown ? '0px' : undefined,
+                    paddingTop: matchesSmDown
+                      ? `${theme.spacing(2)}`
+                      : undefined,
+                  }}
+                >
                   <Box
                     sx={(theme) => ({
                       bgcolor: theme.bg.app,

From a7344f2a7b8ecafa6d2b446c20e90fc1903fc42b Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Thu, 26 Oct 2023 09:44:15 -0400
Subject: [PATCH 23/24] add real regions

---
 .../LoadBalancerCreate/LoadBalancerRegions.tsx           | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
index 7ed6bee0ea0..e1242d97fda 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -7,13 +7,12 @@ import { Flag } from 'src/components/Flag';
 import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
 
-// TODO: AGLB -  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: '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' },
 ];
 
 export const LoadBalancerRegions = () => {

From 71e8ff1927ef704e2053c875d249f4124d62ea83 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Thu, 26 Oct 2023 08:45:46 -0500
Subject: [PATCH 24/24] Use util - convertToKebabCase

---
 .../VerticalLinearStepper/VerticalLinearStepper.tsx        | 7 ++++---
 .../LoadBalancerCreate/LoadBalancerConfiguration.test.tsx  | 6 +++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
index 08a210e0344..e76f6732885 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
@@ -12,6 +12,7 @@ import { useTheme } from '@mui/styles';
 import React, { useState } from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
 
 import {
   CustomStepIcon,
@@ -133,9 +134,9 @@ export const VerticalLinearStepper = ({
                                * 1. toLocaleLowerCase(): Converts the label to lowercase for consistency.
                                * 2. replace(/\s/g, ''): Removes spaces from the label to create a valid test ID.
                                */
-                              'data-testid': steps[index + 1]?.label
-                                .toLocaleLowerCase()
-                                .replace(/\s/g, ''),
+                              'data-testid': convertToKebabCase(
+                                steps[index + 1]?.label
+                              ),
                               label: `Next: ${steps[index + 1]?.label}`,
                               onClick: () => {
                                 handleNext();
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
index cceb683d29f..014364fbcca 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
@@ -25,7 +25,7 @@ describe('LoadBalancerConfiguration', () => {
   });
   test('Should navigate to Service Targets content', () => {
     renderWithTheme(<LoadBalancerConfiguration />);
-    userEvent.click(screen.getByTestId('servicetargets'));
+    userEvent.click(screen.getByTestId('service-targets'));
     expect(
       screen.getByText('TODO: AGLB - Implement Service Targets Configuration.')
     ).toBeInTheDocument();
@@ -41,7 +41,7 @@ describe('LoadBalancerConfiguration', () => {
   });
   test('Should navigate to Routes content', () => {
     renderWithTheme(<LoadBalancerConfiguration />);
-    userEvent.click(screen.getByTestId('servicetargets'));
+    userEvent.click(screen.getByTestId('service-targets'));
     userEvent.click(screen.getByTestId('routes'));
     expect(
       screen.queryByText('TODO: AGLB - Implement Details step content.')
@@ -58,7 +58,7 @@ describe('LoadBalancerConfiguration', () => {
   });
   test('Should be able to go previous step', () => {
     renderWithTheme(<LoadBalancerConfiguration />);
-    userEvent.click(screen.getByTestId('servicetargets'));
+    userEvent.click(screen.getByTestId('service-targets'));
     userEvent.click(screen.getByText('Previous: Details'));
     expect(
       screen.getByText('TODO: AGLB - Implement Details step content.')