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

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

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add AGLB create page with Actions buttons ([#9825](https://github.com/linode/manager/pull/9825))

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: '28px',
+    minHeight: theme.spacing(2),
   },
 }));

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

@@ -7,9 +7,12 @@ 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';
+import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
 
 import {
   CustomStepIcon,
@@ -23,14 +26,17 @@ type VerticalLinearStep = {
   label: string;
 };
 
-interface VerticalLinearStepperProps {
+export interface VerticalLinearStepperProps {
   steps: VerticalLinearStep[];
 }
 
 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,9 +51,8 @@ export const VerticalLinearStepper = ({
       sx={(theme: Theme) => ({
         backgroundColor: theme.bg.bgPaper,
         display: 'flex',
-        margin: 'auto',
-        maxWidth: 800,
-        p: `${theme.spacing(2)}`,
+        flexDirection: matchesSmDown ? 'column' : 'row',
+        p: matchesSmDown ? `${theme.spacing(2)}px 0px` : `${theme.spacing(2)}`,
       })}
     >
       {/* Left Column - Vertical Steps */}
@@ -101,7 +106,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,
@@ -116,9 +130,13 @@ export const VerticalLinearStepper = ({
                       primaryButtonProps={
                         index !== 2
                           ? {
-                              'data-testid': steps[
-                                index + 1
-                              ]?.label.toLocaleLowerCase(),
+                              /** 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': convertToKebabCase(
+                                steps[index + 1]?.label
+                              ),
                               label: `Next: ${steps[index + 1]?.label}`,
                               onClick: () => {
                                 handleNext();

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

@@ -0,0 +1,67 @@
+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: AGLB - Implement Details step content.')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        'TODO: AGLB - Implement Service Targets Configuration.'
+      )
+    ).toBeNull();
+    expect(
+      screen.queryByText('TODO: AGLB - Implement Routes Confiugataion.')
+    ).toBeNull();
+    expect(screen.getByText('Next: Service Targets')).toBeInTheDocument();
+    expect(screen.queryByText('Previous: Details')).toBeNull();
+  });
+  test('Should navigate to Service Targets content', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    userEvent.click(screen.getByTestId('service-targets'));
+    expect(
+      screen.getByText('TODO: AGLB - Implement Service Targets Configuration.')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('TODO: AGLB - Implement Details step content.')
+    ).toBeNull();
+    expect(
+      screen.queryByText('TODO: AGLB - 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 content', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    userEvent.click(screen.getByTestId('service-targets'));
+    userEvent.click(screen.getByTestId('routes'));
+    expect(
+      screen.queryByText('TODO: AGLB - Implement Details step content.')
+    ).toBeNull();
+    expect(
+      screen.queryByText(
+        'TODO: AGLB - Implement Service Targets Configuration.'
+      )
+    ).toBeNull();
+    expect(
+      screen.getByText('TODO: AGLB - 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('service-targets'));
+    userEvent.click(screen.getByText('Previous: Details'));
+    expect(
+      screen.getByText('TODO: AGLB - Implement Details step content.')
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,44 @@
+import Stack from '@mui/material/Stack';
+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 configurationSteps = [
+  {
+    content: <div>TODO: AGLB - Implement Details step content.</div>,
+    handler: () => null,
+    label: 'Details',
+  },
+  {
+    content: <div>TODO: AGLB - Implement Service Targets Configuration.</div>,
+    handler: () => null,
+    label: 'Service Targets',
+  },
+  {
+    content: <div>TODO: AGLB - Implement Routes Confiugataion.</div>,
+    handler: () => null,
+    label: 'Routes',
+  },
+];
+
+export const LoadBalancerConfiguration = () => {
+  return (
+    <Paper>
+      <Typography
+        sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+        variant="h2"
+      >
+        Configuration -{' '}
+      </Typography>
+      <Stack spacing={1}>
+        <Typography>
+          A Configuration listens on a port and uses Route Rules to forward
+          request to Service Target Endpoints
+        </Typography>
+        <VerticalLinearStepper steps={configurationSteps} />
+      </Stack>
+    </Paper>
+  );
+};

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

@@ -1,12 +1,60 @@
+import Stack from '@mui/material/Stack';
 import * as React from 'react';
 
+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';
+
+import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
+import { LoadBalancerLabel } from './LoadBalancerLabel';
+import { LoadBalancerRegions } from './LoadBalancerRegions';
 
 const LoadBalancerCreate = () => {
   return (
     <>
-      <DocumentTitleSegment segment="Load Balancers" />
-      TODO: AGLB M3-6815: Load Balancer Create
+      <DocumentTitleSegment segment="Create a Load Balancer" />
+      <LandingHeader
+        breadcrumbProps={{
+          crumbOverrides: [
+            {
+              label: 'Global Load Balancers',
+              position: 1,
+            },
+          ],
+          pathname: location.pathname,
+        }}
+        title="Create"
+      />
+      <Stack spacing={3}>
+        <LoadBalancerLabel
+          labelFieldProps={{
+            disabled: false,
+            errorText: '',
+            label: 'Linode Label',
+            onChange: () => null,
+            value: '',
+          }}
+        />
+        <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>
     </>
   );
 };

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 './LoadBalancerLabel';
+
+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();
+  });
+});

packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.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>
+  );
+};