feat($env): api integration

frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironments.test.tsx

@@ -0,0 +1,42 @@
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { OrderEnvironments } from './OrderEnvironments';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+
+const server = testServerSetup();
+
+const setupServerRoutes = (changeRequestsEnabled = true) => {
+    testServerRoute(server, '/api/admin/ui-config', {
+        environment: 'Pro',
+        flags: {
+            purchaseAdditionalEnvironments: true,
+        },
+    });
+};
+
+describe('OrderEnvironmentsDialog Component', () => {
+    test('should show error if environment name is empty', async () => {
+        setupServerRoutes();
+        render(<OrderEnvironments />);
+
+        await waitFor(async () => {
+            const openDialogButton = await screen.queryByRole('button', {
+                name: /view pricing/i,
+            });
+            expect(openDialogButton).toBeInTheDocument();
+            fireEvent.click(openDialogButton!);
+        });
+
+        const checkbox = screen.getByRole('checkbox', {
+            name: /i understand adding environments/i,
+        });
+        fireEvent.click(checkbox);
+
+        const submitButton = screen.getByRole('button', { name: /order/i });
+        fireEvent.click(submitButton);
+
+        expect(
+            screen.getByText(/environment name is required/i),
+        ).toBeInTheDocument();
+    });
+});

frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironments.tsx

@@ -4,6 +4,8 @@ import { useUiFlag } from 'hooks/useUiFlag';
 import { PurchasableFeature } from './PurchasableFeature/PurchasableFeature';
 import { OrderEnvironmentsDialog } from './OrderEnvironmentsDialog/OrderEnvironmentsDialog';
 import { OrderEnvironmentsConfirmation } from './OrderEnvironmentsConfirmation/OrderEnvironmentsConfirmation';
+import { useFormErrors } from 'hooks/useFormErrors';
+import useToast from 'hooks/useToast';
 
 type OrderEnvironmentsProps = {};
 
@@ -17,18 +19,36 @@ export const OrderEnvironments: FC<OrderEnvironmentsProps> = () => {
     const isPurchaseAdditionalEnvironmentsEnabled = useUiFlag(
         'purchaseAdditionalEnvironments',
     );
+    const errors = useFormErrors();
+    const { setToastData, setToastApiError } = useToast();
 
     if (!isPro() || !isPurchaseAdditionalEnvironmentsEnabled) {
         return null;
     }
 
     const onSubmit = (environments: string[]) => {
-        setPurchaseDialogOpen(false);
-        // TODO: API call
-        setConfirmationState({
-            isOpen: true,
-            environmentsCount: environments.length,
+        let hasErrors = false;
+        environments.forEach((environment, index) => {
+            const field = `environment-${index}`;
+            if (environment.trim() === '') {
+                errors.setFormError(field, 'Environment name is required');
+                hasErrors = true;
+            } else {
+                errors.removeFormError(field);
+            }
         });
+
+        if (hasErrors) {
+            return;
+        } else {
+            // TODO: API call
+
+            setPurchaseDialogOpen(false);
+            setConfirmationState({
+                isOpen: true,
+                environmentsCount: environments.length,
+            });
+        }
     };
 
     return (
@@ -42,6 +62,7 @@ export const OrderEnvironments: FC<OrderEnvironmentsProps> = () => {
                 open={purchaseDialogOpen}
                 onClose={() => setPurchaseDialogOpen(false)}
                 onSubmit={onSubmit}
+                errors={errors}
             />
             <OrderEnvironmentsConfirmation
                 open={confirmationState.isOpen}

frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironmentsDialog/OrderEnvironmentsDialog.tsx

@@ -11,11 +11,13 @@ import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { OrderEnvironmentsDialogPricing } from './OrderEnvironmentsDialogPricing/OrderEnvironmentsDialogPricing';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import Input from 'component/common/Input/Input';
+import type { IFormErrors } from 'hooks/useFormErrors';
 
 type OrderEnvironmentsDialogProps = {
     open: boolean;
     onClose: () => void;
     onSubmit: (environments: string[]) => void;
+    errors?: IFormErrors;
 };
 
 const StyledDialog = styled(Dialog)(({ theme }) => ({
@@ -74,10 +76,13 @@ export const OrderEnvironmentsDialog: FC<OrderEnvironmentsDialogProps> = ({
     open,
     onClose,
     onSubmit,
+    errors,
 }) => {
     const [selectedOption, setSelectedOption] = useState(OPTIONS[0]);
     const [costCheckboxChecked, setCostCheckboxChecked] = useState(false);
-    const [environmentNames, setEnvironmentNames] = useState<string[]>([]);
+    const [environmentNames, setEnvironmentNames] = useState<string[]>(['']);
+
+    console.log({ environmentNames });
 
     return (
         <StyledDialog open={open} title=''>
@@ -133,7 +138,10 @@ export const OrderEnvironmentsDialog: FC<OrderEnvironmentsDialogProps> = ({
                                 const value = Number.parseInt(option, 10);
                                 setSelectedOption(value);
                                 setEnvironmentNames((names) =>
-                                    names.slice(0, value),
+                                    [...names, ...Array(value).fill('')].slice(
+                                        0,
+                                        value,
+                                    ),
                                 );
                             }}
                         />
@@ -143,20 +151,28 @@ export const OrderEnvironmentsDialog: FC<OrderEnvironmentsDialogProps> = ({
                             How would you like the environment
                             {selectedOption > 1 ? 's' : ''} to be named?
                         </Typography>
-                        {[...Array(selectedOption)].map((_, i) => (
-                            <Input
-                                key={i}
-                                label={`Environment ${i + 1} name`}
-                                value={environmentNames[i]}
-                                onChange={(event) => {
-                                    setEnvironmentNames((names) => {
-                                        const newValues = [...names];
-                                        newValues[i] = event.target.value;
-                                        return newValues;
-                                    });
-                                }}
-                            />
-                        ))}
+                        {[...Array(selectedOption)].map((_, i) => {
+                            const error = errors?.getFormError(
+                                `environment-${i}`,
+                            );
+
+                            return (
+                                <Input
+                                    key={i}
+                                    label={`Environment ${i + 1} name`}
+                                    value={environmentNames[i]}
+                                    onChange={(event) => {
+                                        setEnvironmentNames((names) => {
+                                            const newValues = [...names];
+                                            newValues[i] = event.target.value;
+                                            return newValues;
+                                        });
+                                    }}
+                                    error={Boolean(error)}
+                                    errorText={error}
+                                />
+                            );
+                        })}
                     </StyledEnvironmentNameInputs>
                     <Box>
                         <StyledCheckbox