web: use single delete button with checkbox and icon-based action buttons

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/oauth/UserCodeList.ts

@@ -22,6 +22,7 @@ export class UserOAuthCodeList extends Table<ExpiringBaseGrantModel> {
         });
     }
 
+    checkbox = true;
     order = "-expires";
 
     columns(): TableColumn[] {
@@ -29,33 +30,37 @@ export class UserOAuthCodeList extends Table<ExpiringBaseGrantModel> {
             new TableColumn(t`Provider`, "provider"),
             new TableColumn(t`Expires`, "expires"),
             new TableColumn(t`Scopes`, "scope"),
-            new TableColumn("Actions"),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Authorization Code`}
+            .usedBy=${() => {
+                return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesUsedByList({
+                    id: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesDestroy({
+                    id: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: ExpiringBaseGrantModel): TemplateResult[] {
         return [
             html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
             html`${item.expires?.toLocaleString()}`,
             html`${item.scope.join(", ")}`,
-            html` <ak-forms-delete
-                .obj=${item}
-                objectLabel=${t`Authorization Code`}
-                .usedBy=${() => {
-                    return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesUsedByList({
-                        id: item.pk,
-                    });
-                }}
-                .delete=${() => {
-                    return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesDestroy({
-                        id: item.pk,
-                    });
-                }}
-            >
-                <button slot="trigger" class="pf-c-button pf-m-danger">
-                    ${t`Delete Authorization Code`}
-                </button>
-            </ak-forms-delete>`,
         ];
     }
 }

web/src/elements/oauth/UserRefreshList.ts

@@ -29,6 +29,7 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
         });
     }
 
+    checkbox = true;
     order = "-expires";
 
     columns(): TableColumn[] {
@@ -37,7 +38,6 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
             new TableColumn(t`Revoked?`, "revoked"),
             new TableColumn(t`Expires`, "expires"),
             new TableColumn(t`Scopes`, "scope"),
-            new TableColumn("Actions"),
         ];
     }
 
@@ -53,34 +53,38 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
                 </div>
             </td>
             <td></td>
-            <td></td>
             <td></td>`;
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Refresh Code`}
+            .usedBy=${() => {
+                return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensUsedByList({
+                    id: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensDestroy({
+                    id: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: RefreshTokenModel): TemplateResult[] {
         return [
             html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
             html`${item.revoked ? t`Yes` : t`No`}`,
             html`${item.expires?.toLocaleString()}`,
             html`${item.scope.join(", ")}`,
-            html` <ak-forms-delete
-                .obj=${item}
-                objectLabel=${t`Refresh Code`}
-                .usedBy=${() => {
-                    return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensUsedByList({
-                        id: item.pk,
-                    });
-                }}
-                .delete=${() => {
-                    return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensDestroy({
-                        id: item.pk,
-                    });
-                }}
-            >
-                <button slot="trigger" class="pf-c-button pf-m-danger">
-                    ${t`Delete Refresh Code`}
-                </button>
-            </ak-forms-delete>`,
         ];
     }
 }

web/src/elements/table/Table.ts

@@ -273,7 +273,7 @@ export abstract class Table<T> extends LitElement {
                     }),
                 );
             }}
-            class="pf-c-button pf-m-primary"
+            class="pf-c-button pf-m-secondary"
         >
             ${t`Refresh`}
         </button>`;
@@ -292,19 +292,18 @@ export abstract class Table<T> extends LitElement {
             return html``;
         }
         return html`<ak-table-search
-                value=${ifDefined(this.search)}
-                .onSearch=${(value: string) => {
-                    this.search = value;
-                    this.dispatchEvent(
-                        new CustomEvent(EVENT_REFRESH, {
-                            bubbles: true,
-                            composed: true,
-                        }),
-                    );
-                }}
-            >
-            </ak-table-search
-            >&nbsp;`;
+            value=${ifDefined(this.search)}
+            .onSearch=${(value: string) => {
+                this.search = value;
+                this.dispatchEvent(
+                    new CustomEvent(EVENT_REFRESH, {
+                        bubbles: true,
+                        composed: true,
+                    }),
+                );
+            }}
+        >
+        </ak-table-search>`;
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -326,9 +325,10 @@ export abstract class Table<T> extends LitElement {
                 : html``}
             <div class="pf-c-toolbar">
                 <div class="pf-c-toolbar__content">
-                    ${this.renderToolbarSelected()} &nbsp; ${this.renderSearch()}
+                    <div class="pf-m-search-filter">${this.renderSearch()}</div>
                     <div class="pf-c-toolbar__bulk-select">${this.renderToolbar()}</div>
-                    ${this.renderToolbarAfter()}
+                    <div class="pf-c-toolbar__group">${this.renderToolbarAfter()}</div>
+                    <div class="pf-c-toolbar__group">${this.renderToolbarSelected()}</div>
                     <ak-table-pagination
                         class="pf-c-toolbar__item pf-m-pagination"
                         .pages=${this.data?.pagination}

web/src/elements/user/SessionList.ts

@@ -22,6 +22,7 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
         });
     }
 
+    checkbox = true;
     order = "-expires";
 
     columns(): TableColumn[] {
@@ -30,32 +31,38 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
             new TableColumn(t`Browser`, "user_agent"),
             new TableColumn(t`Device`, "user_agent"),
             new TableColumn(t`Expires`, "expires"),
-            new TableColumn("Actions"),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Session`}
+            .usedBy=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsUsedByList({
+                    uuid: item.uuid || "",
+                });
+            }}
+            .delete=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsDestroy({
+                    uuid: item.uuid || "",
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete Session`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: AuthenticatedSession): TemplateResult[] {
         return [
             html`${item.lastIp}`,
             html`${item.userAgent.userAgent?.family}`,
             html`${item.userAgent.os?.family}`,
             html`${item.expires?.toLocaleString()}`,
-            html` <ak-forms-delete
-                .obj=${item}
-                objectLabel=${t`Session`}
-                .usedBy=${() => {
-                    return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsUsedByList({
-                        uuid: item.uuid || "",
-                    });
-                }}
-                .delete=${() => {
-                    return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsDestroy({
-                        uuid: item.uuid || "",
-                    });
-                }}
-            >
-                <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete Session`}</button>
-            </ak-forms-delete>`,
         ];
     }
 }

web/src/elements/user/UserConsentList.ts

@@ -22,36 +22,40 @@ export class UserConsentList extends Table<UserConsent> {
         });
     }
 
+    checkbox = true;
     order = "-expires";
 
     columns(): TableColumn[] {
         return [
             new TableColumn(t`Application`, "application"),
             new TableColumn(t`Expires`, "expires"),
-            new TableColumn("Actions"),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Consent`}
+            .usedBy=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreUserConsentUsedByList({
+                    id: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreUserConsentDestroy({
+                    id: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete Consent`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: UserConsent): TemplateResult[] {
-        return [
-            html`${item.application.name}`,
-            html`${item.expires?.toLocaleString()}`,
-            html` <ak-forms-delete
-                .obj=${item}
-                objectLabel=${t`Consent`}
-                .usedBy=${() => {
-                    return new CoreApi(DEFAULT_CONFIG).coreUserConsentUsedByList({
-                        id: item.pk,
-                    });
-                }}
-                .delete=${() => {
-                    return new CoreApi(DEFAULT_CONFIG).coreUserConsentDestroy({
-                        id: item.pk,
-                    });
-                }}
-            >
-                <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete Consent`}</button>
-            </ak-forms-delete>`,
-        ];
+        return [html`${item.application.name}`, html`${item.expires?.toLocaleString()}`];
     }
 }