web: clear out selecteds list after an API event to ensure a fresh copy of the policies-to-delete list (#8125)

* web: clear out selecteds list after an API event to ensure a fresh copy of the policies-to-delete list

* Prettier had opinions.

* web: A better fix

This fix creates a new property of Table, 'clearOnRefresh', which
automatically empties the `selectedElements` list when an EVENT_REFRESH
event completes.  Set this flag on any table that uses the
`selectedElements` list for bulk deletion; this ensures that stale
data in the `selectedElements` list will not persist and interfere
with future deletion events.

web/src/elements/oauth/UserRefreshList.ts

@@ -34,6 +34,7 @@ export class UserOAuthRefreshList extends Table<TokenModel> {
     }
 
     checkbox = true;
+    clearOnRefresh = true;
     order = "-expires";
 
     columns(): TableColumn[] {

web/src/elements/rbac/RoleObjectPermissionTable.ts

@@ -29,6 +29,7 @@ export class RoleAssignedObjectPermissionTable extends Table<RoleAssignedObjectP
     modelPermissions?: PaginatedPermissionList;
 
     checkbox = true;
+    clearOnRefresh = true;
 
     async apiEndpoint(page: number): Promise<PaginatedResponse<RoleAssignedObjectPermission>> {
         const perms = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByRolesList({

web/src/elements/rbac/UserObjectPermissionTable.ts

@@ -29,6 +29,7 @@ export class UserAssignedObjectPermissionTable extends Table<UserAssignedObjectP
     modelPermissions?: PaginatedPermissionList;
 
     checkbox = true;
+    clearOnRefresh = true;
 
     async apiEndpoint(page: number): Promise<PaginatedResponse<UserAssignedObjectPermission>> {
         const perms = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByUsersList({

web/src/elements/table/Table.ts

@@ -119,6 +119,14 @@ export abstract class Table<T> extends AKElement implements TableLike {
     @property({ type: Number })
     page = getURLParam("tablePage", 1);
 
+    /** @prop
+     *
+     * Set if your `selectedElements` use of the selection box is to enable bulk-delete, so that
+     * stale data is cleared out when the API returns a new list minus the deleted entries.
+     */
+    @property({ attribute: "clear-on-refresh", type: Boolean, reflect: true })
+    clearOnRefresh = false;
+
     @property({ type: String })
     order?: string;
 
@@ -178,8 +186,11 @@ export abstract class Table<T> extends AKElement implements TableLike {
 
     constructor() {
         super();
-        this.addEventListener(EVENT_REFRESH, () => {
-            this.fetch();
+        this.addEventListener(EVENT_REFRESH, async () => {
+            await this.fetch();
+            if (this.clearOnRefresh) {
+                this.selectedElements = [];
+            }
         });
     }
 

web/src/elements/user/SessionList.ts

@@ -25,6 +25,7 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
     }
 
     checkbox = true;
+    clearOnRefresh = true;
     order = "-expires";
 
     columns(): TableColumn[] {

web/src/elements/user/UserConsentList.ts

@@ -25,6 +25,7 @@ export class UserConsentList extends Table<UserConsent> {
     }
 
     checkbox = true;
+    clearOnRefresh = true;
     order = "-expires";
 
     columns(): TableColumn[] {