Add select all checkbox to user class picker

locustio · Feb 6, 2024 · 1a9f7ca · 1a9f7ca
1 parent a804b85
commit 1a9f7ca
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 63 deletions.
diff --git a/locust/webui/dist/assets/auth-618b0596.js.map b/locust/webui/dist/assets/auth-618b0596.js.map
diff --git a/locust/webui/dist/assets/auth-b54b80c4.js.map b/locust/webui/dist/assets/auth-b54b80c4.js.map
diff --git a/locust/webui/dist/assets/index-f31faefc.js → locust/webui/dist/assets/index-25eb03f3.js b/locust/webui/dist/assets/index-f31faefc.js → locust/webui/dist/assets/index-25eb03f3.js
diff --git a/...t/webui/dist/assets/index-f31faefc.js.map → ...t/webui/dist/assets/index-25eb03f3.js.map b/...t/webui/dist/assets/index-f31faefc.js.map → ...t/webui/dist/assets/index-25eb03f3.js.map
diff --git a/locust/webui/dist/auth.html b/locust/webui/dist/auth.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
 
     <title>Locust</title>
-    <script type="module" crossorigin src="/assets/index-f31faefc.js"></script>
+    <script type="module" crossorigin src="/assets/index-25eb03f3.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/locust/webui/dist/index.html b/locust/webui/dist/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
 
     <title>Locust</title>
-    <script type="module" crossorigin src="/assets/index-f31faefc.js"></script>
+    <script type="module" crossorigin src="/assets/index-25eb03f3.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/locust/webui/src/components/SwarmForm/SwarmForm.tsx b/locust/webui/src/components/SwarmForm/SwarmForm.tsx
@@ -87,6 +87,7 @@ function SwarmForm({
       {showUserclassPicker && (
         <Box marginBottom={2} marginTop={2}>
           <SwarmUserClassPicker
+            availableUserClasses={availableUserClasses}
             selectedUserClasses={selectedUserClasses}
             setSelectedUserClasses={setSelectedUserClasses}
           />

diff --git a/locust/webui/src/components/SwarmForm/SwarmUserClassPicker.tsx b/locust/webui/src/components/SwarmForm/SwarmUserClassPicker.tsx
@@ -15,6 +15,7 @@ import {
   TableBody,
   TableContainer,
   Paper,
+  TableHead,
 } from '@mui/material';
 import { connect } from 'react-redux';
 
@@ -33,7 +34,7 @@ interface IDispatchProps {
 
 interface IUserClassPicker
   extends IDispatchProps,
-    Pick<ISwarmState, 'availableUserTasks' | 'users'> {
+    Pick<ISwarmState, 'availableUserClasses' | 'availableUserTasks' | 'users'> {
   selectedUserClasses: string[];
   setSelectedUserClasses: (userClasses: string[]) => void;
 }
@@ -76,6 +77,7 @@ function SwarmUserForm({ availableTasks, userToEdit, handleEditUser }: ISwarmUse
 }
 
 function SwarmUserClassPicker({
+  availableUserClasses,
   availableUserTasks,
   selectedUserClasses,
   setSelectedUserClasses,
@@ -105,6 +107,14 @@ function SwarmUserClassPicker({
       ? setSelectedUserClasses(selectedUserClasses.filter(n => n !== name))
       : setSelectedUserClasses(selectedUserClasses.concat(name));
 
+  const checkboxesSelected = selectedUserClasses.length;
+  const checkboxesTotal = availableUserClasses.length;
+
+  const onSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) =>
+    event.target.checked
+      ? setSelectedUserClasses(availableUserClasses)
+      : setSelectedUserClasses([]);
+
   return (
     <>
       <Box
@@ -139,11 +149,24 @@ function SwarmUserClassPicker({
           <FormGroup>
             <TableContainer component={Paper}>
               <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableCell colSpan={4} padding='checkbox'>
+                      <Checkbox
+                        checked={checkboxesTotal > 0 && checkboxesSelected === checkboxesTotal}
+                        indeterminate={
+                          checkboxesSelected > 0 && checkboxesSelected < checkboxesTotal
+                        }
+                        onChange={onSelectAllClick}
+                      />
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
                 <TableBody>
                   {Object.entries(users).map(([name, userClass]) => (
                     <TableRow hover key={`user-class-${name}`}>
                       <TableCell onClick={handleToggleUserSelected(name)} padding='checkbox'>
-                        <Checkbox defaultChecked />
+                        <Checkbox checked={selectedUserClasses.includes(name)} />
                       </TableCell>
 
                       <TableCell>{name}</TableCell>

diff --git a/locust/webui/src/components/SwarmForm/tests/SwarmForm.test.tsx b/locust/webui/src/components/SwarmForm/tests/SwarmForm.test.tsx
@@ -118,7 +118,7 @@ describe('SwarmForm', () => {
     });
 
     act(() => {
-      fireEvent.click(getAllByRole('checkbox')[1]);
+      fireEvent.click(getAllByRole('checkbox')[2]);
     });
     act(() => {
       fireEvent.click(getByText('Start Swarm'));

diff --git a/locust/webui/src/components/SwarmForm/tests/SwarmUserClassPicker.test.tsx b/locust/webui/src/components/SwarmForm/tests/SwarmUserClassPicker.test.tsx
@@ -42,6 +42,7 @@ const availableUserTasks = Object.entries(mockUsers).reduce(
 );
 
 const defaultProps = {
+  availableUserClasses: ['Example', 'ExampleTwo'],
   selectedUserClasses: Object.keys(mockUsers),
   setSelectedUserClasses: updateSelectedClasses,
   setSwarm: updateSwarm,
@@ -78,7 +79,7 @@ describe('SwarmUserClassPicker', () => {
     });
 
     act(() => {
-      fireEvent.click(getAllByRole('checkbox')[0]);
+      fireEvent.click(getAllByRole('checkbox')[1]);
     });
 
     expect(updateSelectedClasses.mock.calls[0][0]).toEqual([Object.keys(mockUsers)[1]]);