Add delete all logic

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/pages/Users/ListPage/Table/TableHead/index.js

@@ -12,17 +12,31 @@ import {
 import { SortIcon, useQueryParams } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 
-const TableHead = ({ headers, withMainAction, withBulkActions }) => {
+const TableHead = ({
+  areAllEntriesSelected,
+  entriesToDelete,
+  headers,
+  onSelectAll,
+  withMainAction,
+  withBulkActions,
+}) => {
   const [{ query }, setQuery] = useQueryParams();
   const sort = query.sort;
   const [sortBy, sortOrder] = sort.split(':');
 
+  const isIndeterminate = !areAllEntriesSelected && entriesToDelete.length;
+
   return (
     <Thead>
       <Tr>
         {withMainAction && (
           <Th>
-            <BaseCheckbox aria-label="Select all entries" />
+            <BaseCheckbox
+              aria-label="Select all entries"
+              checked={areAllEntriesSelected}
+              indeterminate={isIndeterminate}
+              onChange={onSelectAll}
+            />
           </Th>
         )}
         {headers.map(({ name, metadatas: { sortable: isSortable, label } }) => {
@@ -80,13 +94,18 @@ const TableHead = ({ headers, withMainAction, withBulkActions }) => {
 };
 
 TableHead.defaultProps = {
+  areAllEntriesSelected: false,
+  entriesToDelete: [],
   headers: [],
   withBulkActions: false,
   withMainAction: false,
 };
 
 TableHead.propTypes = {
+  areAllEntriesSelected: PropTypes.bool,
+  entriesToDelete: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
   headers: PropTypes.array,
+  onSelectAll: PropTypes.func.isRequired,
   withBulkActions: PropTypes.bool,
   withMainAction: PropTypes.bool,
 };

packages/core/admin/admin/src/pages/Users/ListPage/Table/TableRows/index.js

@@ -4,7 +4,16 @@ import { BaseCheckbox, Box, IconButton, Tbody, Td, Text, Tr, Row } from '@strapi
 import { EditIcon, DeleteIcon } from '@strapi/icons';
 import { useHistory } from 'react-router-dom';
 
-const TableRows = ({ canUpdate, canDelete, headers, withMainAction, withBulkActions, rows }) => {
+const TableRows = ({
+  canUpdate,
+  canDelete,
+  headers,
+  entriesToDelete,
+  onSelectRow,
+  withMainAction,
+  withBulkActions,
+  rows,
+}) => {
   const {
     push,
     location: { pathname },
@@ -13,11 +22,19 @@ const TableRows = ({ canUpdate, canDelete, headers, withMainAction, withBulkActi
   return (
     <Tbody>
       {rows.map(data => {
+        const isChecked = entriesToDelete.findIndex(id => id === data.id) !== -1;
+
         return (
           <Tr key={data.id}>
             {withMainAction && (
               <Td>
-                <BaseCheckbox aria-label="Select all entries" />
+                <BaseCheckbox
+                  aria-label="Select all entries"
+                  checked={isChecked}
+                  onChange={() => {
+                    onSelectRow({ name: data.id, value: !isChecked });
+                  }}
+                />
               </Td>
             )}
             {headers.map(({ key, cellFormatter, name, ...rest }) => {
@@ -74,7 +91,9 @@ TableRows.defaultProps = {
 TableRows.propTypes = {
   canDelete: PropTypes.bool,
   canUpdate: PropTypes.bool,
+  entriesToDelete: PropTypes.array.isRequired,
   headers: PropTypes.array.isRequired,
+  onSelectRow: PropTypes.func.isRequired,
   rows: PropTypes.array,
   withBulkActions: PropTypes.bool,
   withMainAction: PropTypes.bool,

packages/core/admin/admin/src/pages/Users/ListPage/Table/index.js

@@ -11,6 +11,7 @@ const Table = ({ canDelete, canUpdate, headers, rows, withBulkActions, withMainA
   const ROW_COUNT = rows.length + 1;
   const COL_COUNT = 7;
   const hasFilters = query.filters !== undefined;
+  const areAllEntriesSelected = entriesToDelete.length === rows.length && rows.length > 0;
 
   const content = hasFilters
     ? {
@@ -20,10 +21,31 @@ const Table = ({ canDelete, canUpdate, headers, rows, withBulkActions, withMainA
       }
     : undefined;
 
+  const handleSelectAll = () => {
+    if (!areAllEntriesSelected) {
+      setEntriesToDelete(rows.map(row => row.id));
+    } else {
+      setEntriesToDelete([]);
+    }
+  };
+
+  const handleSelectRow = ({ name, value }) => {
+    setEntriesToDelete(prev => {
+      if (value) {
+        return prev.concat(name);
+      }
+
+      return prev.filter(id => id !== name);
+    });
+  };
+
   return (
     <TableCompo colCount={COL_COUNT} rowCount={ROW_COUNT}>
       <TableHead
+        areAllEntriesSelected={areAllEntriesSelected}
+        entriesToDelete={entriesToDelete}
         headers={headers}
+        onSelectAll={handleSelectAll}
         withMainAction={withMainAction}
         withBulkActions={withBulkActions}
       />
@@ -33,8 +55,10 @@ const Table = ({ canDelete, canUpdate, headers, rows, withBulkActions, withMainA
         <TableRows
           canDelete={canDelete}
           canUpdate={canUpdate}
+          entriesToDelete={entriesToDelete}
           data={rows}
           headers={headers}
+          onSelectRow={handleSelectRow}
           rows={rows}
           withBulkActions={withBulkActions}
           withMainAction={withMainAction}