From fe71f6316d53d087d0dee3ed0476da6b3776f8c5 Mon Sep 17 00:00:00 2001
From: Andrew Baldwin <andrew.baldwin44@gmail.com>
Date: Thu, 3 Oct 2024 16:59:48 +0200
Subject: [PATCH] Add form alert

---
 .../webui/src/components/SwarmForm/SwarmForm.tsx  | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/locust/webui/src/components/SwarmForm/SwarmForm.tsx b/locust/webui/src/components/SwarmForm/SwarmForm.tsx
index ba12d1580d..97a5b98f19 100644
--- a/locust/webui/src/components/SwarmForm/SwarmForm.tsx
+++ b/locust/webui/src/components/SwarmForm/SwarmForm.tsx
@@ -4,12 +4,14 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
+  Alert,
   Box,
   Button,
   Container,
   TextField,
   Typography,
 } from '@mui/material';
+import { AlertColor } from '@mui/material/Alert';
 import { connect } from 'react-redux';
 
 import Form from 'components/Form/Form';
@@ -46,7 +48,13 @@ interface ISwarmForm
       | 'showUserclassPicker'
       | 'spawnRate'
       | 'numUsers'
-    > {}
+    > {
+  alert?: {
+    level?: AlertColor;
+    message: string;
+  };
+  isDisabled?: boolean;
+}
 
 function SwarmForm({
   availableShapeClasses,
@@ -60,6 +68,8 @@ function SwarmForm({
   setSwarm,
   showUserclassPicker,
   spawnRate,
+  alert,
+  isDisabled = false,
 }: ISwarmForm) {
   const [startSwarm] = useStartSwarmMutation();
   const [selectedUserClasses, setSelectedUserClasses] = useState(availableUserClasses);
@@ -143,7 +153,8 @@ function SwarmForm({
             </AccordionDetails>
           </Accordion>
           {!isEmpty(extraOptions) && <CustomParameters extraOptions={extraOptions} />}
-          <Button size='large' type='submit' variant='contained'>
+          {alert && <Alert severity={alert.level || 'info'}>{alert.message}</Alert>}
+          <Button disabled={isDisabled} size='large' type='submit' variant='contained'>
             Start
           </Button>
         </Box>