fix(console): give selectable tables a visible-rows select-all

Replaces the mds vendor "Select" header text (untranslatable and shown
whenever onSelectAll is absent) with a working select-all checkbox on
all seven selectable tables. The toggle operates on the currently
visible rows only and preserves selections hidden by an active filter,
so the header state can no longer imply a different set than what a
bulk action would target.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Vonng

web-app/src/screens/Console/Account/Account.tsx

@@ -287,13 +287,19 @@ const Account = () => {
               customEmptyMessage={t("There are no Access Keys yet.")}
               columns={accountTableColumns(t)}
               onSelect={(e) => selectSAs(e, setSelectedSAs, selectedSAs)}
-              onSelectAll={() =>
+              onSelectAll={() => {
+                // Toggle the visible rows only; selections hidden by the
+                // current filter are preserved.
+                const visible = filteredRecords.map((r) => `${r.accessKey}`);
+                const allVisible =
+                  visible.length > 0 &&
+                  visible.every((v) => selectedSAs.includes(v));
                 setSelectedSAs(
-                  selectedSAs.length === filteredRecords.length
-                    ? []
-                    : filteredRecords.map((r) => `${r.accessKey}`),
-                )
-              }
+                  allVisible
+                    ? selectedSAs.filter((v) => !visible.includes(v))
+                    : Array.from(new Set([...selectedSAs, ...visible])),
+                );
+              }}
               selectedItems={selectedSAs}
               isLoading={loading}
               records={filteredRecords}

web-app/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx

@@ -222,13 +222,14 @@ const AddEvent = ({
                 idField={"value"}
                 records={events}
                 onSelect={handleClick}
-                onSelectAll={() =>
+                onSelectAll={() => {
+                  const allSelected =
+                    events.length > 0 &&
+                    events.every((ev) => selectedEvents.includes(ev.value));
                   setSelectedEvents(
-                    selectedEvents.length === events.length
-                      ? []
-                      : events.map((ev) => ev.value),
-                  )
-                }
+                    allSelected ? [] : events.map((ev) => ev.value),
+                  );
+                }}
                 selectedItems={selectedEvents}
                 noBackground
                 customPaperHeight={"260px"}

web-app/src/screens/Console/Groups/Groups.tsx

@@ -325,13 +325,25 @@ const Groups = () => {
                         }
                         onSelectAll={
                           deleteGroup || getGroup
-                            ? () =>
+                            ? () => {
+                                const allVisible =
+                                  filteredRecords.length > 0 &&
+                                  filteredRecords.every((g) =>
+                                    checkedGroups.includes(g),
+                                  );
                                 setCheckedGroups(
-                                  checkedGroups.length ===
-                                    filteredRecords.length
-                                    ? []
-                                    : [...filteredRecords],
-                                )
+                                  allVisible
+                                    ? checkedGroups.filter(
+                                        (g) => !filteredRecords.includes(g),
+                                      )
+                                    : Array.from(
+                                        new Set([
+                                          ...checkedGroups,
+                                          ...filteredRecords,
+                                        ]),
+                                      ),
+                                );
+                              }
                             : undefined
                         }
                         records={filteredRecords}

web-app/src/screens/Console/Groups/UsersSelectors.tsx

@@ -117,13 +117,17 @@ const UsersSelectors = ({
             <DataTable
               columns={[{ label: t("Access Key"), elementKey: "accessKey" }]}
               onSelect={selectionChanged}
-              onSelectAll={() =>
+              onSelectAll={() => {
+                const visible = filteredRecords.map((r) => `${r.accessKey}`);
+                const allVisible =
+                  visible.length > 0 &&
+                  visible.every((v) => selUsers.includes(v));
                 setSelectedUsers(
-                  selUsers.length === filteredRecords.length
-                    ? []
-                    : filteredRecords.map((r) => `${r.accessKey}`),
-                )
-              }
+                  allVisible
+                    ? selUsers.filter((v) => !visible.includes(v))
+                    : Array.from(new Set([...selUsers, ...visible])),
+                );
+              }}
               selectedItems={selUsers}
               isLoading={loading}
               records={filteredRecords}

web-app/src/screens/Console/Policies/PolicySelectors.tsx

@@ -114,15 +114,19 @@ const PolicySelectors = ({ noTitle = false }: ISelectPolicyProps) => {
           <DataTable
             columns={[{ label: t("Policy"), elementKey: "name" }]}
             onSelect={selectionChanged}
-            onSelectAll={() =>
+            onSelectAll={() => {
+              const visible = filteredRecords.map((r) => `${r.name}`);
+              const allVisible =
+                visible.length > 0 &&
+                visible.every((v) => currentPolicies.includes(v));
               dispatch(
                 setSelectedPolicies(
-                  currentPolicies.length === filteredRecords.length
-                    ? []
-                    : filteredRecords.map((r) => `${r.name}`),
+                  allVisible
+                    ? currentPolicies.filter((v) => !visible.includes(v))
+                    : Array.from(new Set([...currentPolicies, ...visible])),
                 ),
-              )
-            }
+              );
+            }}
             selectedItems={currentPolicies}
             isLoading={loading}
             records={filteredRecords}

web-app/src/screens/Console/Users/ListUsers.tsx

@@ -350,14 +350,25 @@ const ListUsers = () => {
                         }
                         onSelectAll={
                           addUserToGroup || deleteUser
-                            ? () =>
+                            ? () => {
+                                const visible = filteredRecords.map(
+                                  (r) => `${r.accessKey}`,
+                                );
+                                const allVisible =
+                                  visible.length > 0 &&
+                                  visible.every((v) =>
+                                    checkedUsers.includes(v),
+                                  );
                                 setCheckedUsers(
-                                  checkedUsers.length === filteredRecords.length
-                                    ? []
-                                    : filteredRecords.map(
-                                        (r) => `${r.accessKey}`,
+                                  allVisible
+                                    ? checkedUsers.filter(
+                                        (v) => !visible.includes(v),
+                                      )
+                                    : Array.from(
+                                        new Set([...checkedUsers, ...visible]),
                                       ),
-                                )
+                                );
+                              }
                             : undefined
                         }
                         selectedItems={checkedUsers}

web-app/src/screens/Console/Users/UserServiceAccountsPanel.tsx

@@ -256,13 +256,16 @@ const UserServiceAccountsPanel = ({
         customEmptyMessage={t("There are no Access Keys yet.")}
         columns={accountTableColumns(t)}
         onSelect={(e) => selectSAs(e, setSelectedSAs, selectedSAs)}
-        onSelectAll={() =>
+        onSelectAll={() => {
+          const visible = records.map((r) => `${r.accessKey}`);
+          const allVisible =
+            visible.length > 0 && visible.every((v) => selectedSAs.includes(v));
           setSelectedSAs(
-            selectedSAs.length === records.length
-              ? []
-              : records.map((r) => `${r.accessKey}`),
-          )
-        }
+            allVisible
+              ? selectedSAs.filter((v) => !visible.includes(v))
+              : Array.from(new Set([...selectedSAs, ...visible])),
+          );
+        }}
         selectedItems={selectedSAs}
         isLoading={loading}
         records={records}