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

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

web/src/pages/applications/ApplicationListPage.ts

@@ -28,6 +28,8 @@ export class ApplicationListPage extends TablePage<Application> {
         return "pf-icon pf-icon-applications";
     }
 
+    checkbox = true;
+
     @property()
     order = "name";
 
@@ -62,10 +64,33 @@ export class ApplicationListPage extends TablePage<Application> {
             new TableColumn(t`Slug`, "slug"),
             new TableColumn(t`Provider`),
             new TableColumn(t`Provider Type`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Application`}
+            .usedBy=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreApplicationsUsedByList({
+                    slug: item.slug,
+                });
+            }}
+            .delete=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreApplicationsDestroy({
+                    slug: item.slug,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Application): TemplateResult[] {
         return [
             item.metaIcon
@@ -91,7 +116,9 @@ export class ApplicationListPage extends TablePage<Application> {
                     <span slot="header"> ${t`Update Application`} </span>
                     <ak-application-form slot="form" .instancePk=${item.slug}>
                     </ak-application-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <i class="fas fa-edit"></i>
+                    </button>
                 </ak-forms-modal>
                 ${item.launchUrl
                     ? html`<a
@@ -99,25 +126,9 @@ export class ApplicationListPage extends TablePage<Application> {
                           target="_blank"
                           class="pf-c-button pf-m-secondary"
                       >
-                          ${t`Open application`}
+                          <i class="fas fas fa-share-square"></i>
                       </a>`
-                    : html``}
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Application`}
-                    .usedBy=${() => {
-                        return new CoreApi(DEFAULT_CONFIG).coreApplicationsUsedByList({
-                            slug: item.slug,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new CoreApi(DEFAULT_CONFIG).coreApplicationsDestroy({
-                            slug: item.slug,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                    : html``}`,
         ];
     }
 

web/src/pages/crypto/CertificateKeyPairListPage.ts

@@ -18,6 +18,7 @@ import { DEFAULT_CONFIG } from "../../api/Config";
 @customElement("ak-crypto-certificate-list")
 export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
     expandable = true;
+    checkbox = true;
 
     searchEnabled(): boolean {
         return true;
@@ -53,38 +54,47 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
             new TableColumn(t`Name`, "name"),
             new TableColumn(t`Private key available?`),
             new TableColumn(t`Expiry date`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Certificate-Key Pair`}
+            .usedBy=${() => {
+                return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsUsedByList({
+                    kpUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsDestroy({
+                    kpUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: CertificateKeyPair): TemplateResult[] {
         return [
             html`${item.name}`,
             html`${item.privateKeyAvailable ? t`Yes` : t`No`}`,
             html`${item.certExpiry?.toLocaleString()}`,
             html` <ak-forms-modal>
-                    <span slot="submit"> ${t`Update`} </span>
-                    <span slot="header"> ${t`Update Certificate-Key Pair`} </span>
-                    <ak-crypto-certificate-form slot="form" .instancePk=${item.pk}>
-                    </ak-crypto-certificate-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Certificate-Key Pair`}
-                    .usedBy=${() => {
-                        return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsUsedByList({
-                            kpUuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsDestroy({
-                            kpUuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update Certificate-Key Pair`} </span>
+                <ak-crypto-certificate-form slot="form" .instancePk=${item.pk}>
+                </ak-crypto-certificate-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
         ];
     }
 

web/src/pages/events/EventListPage.ts

@@ -46,7 +46,7 @@ export class EventListPage extends TablePage<Event> {
             new TableColumn(t`Creation Date`, "created"),
             new TableColumn(t`Client IP`, "client_ip"),
             new TableColumn(t`Tenant`, "tenant_name"),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 

web/src/pages/events/RuleListPage.ts

@@ -16,6 +16,7 @@ import "./RuleForm";
 @customElement("ak-event-rule-list")
 export class RuleListPage extends TablePage<NotificationRule> {
     expandable = true;
+    checkbox = true;
 
     searchEnabled(): boolean {
         return true;
@@ -47,37 +48,46 @@ export class RuleListPage extends TablePage<NotificationRule> {
             new TableColumn(t`Name`, "name"),
             new TableColumn(t`Severity`, "severity"),
             new TableColumn(t`Sent to group`, "group"),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Notification rule`}
+            .usedBy=${() => {
+                return new EventsApi(DEFAULT_CONFIG).eventsRulesUsedByList({
+                    pbmUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new EventsApi(DEFAULT_CONFIG).eventsRulesDestroy({
+                    pbmUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: NotificationRule): TemplateResult[] {
         return [
             html`${item.name}`,
             html`${item.severity}`,
             html`${item.groupObj?.name || t`None (rule disabled)`}`,
             html` <ak-forms-modal>
-                    <span slot="submit"> ${t`Update`} </span>
-                    <span slot="header"> ${t`Update Notification Rule`} </span>
-                    <ak-event-rule-form slot="form" .instancePk=${item.pk}> </ak-event-rule-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Notification rule`}
-                    .usedBy=${() => {
-                        return new EventsApi(DEFAULT_CONFIG).eventsRulesUsedByList({
-                            pbmUuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new EventsApi(DEFAULT_CONFIG).eventsRulesDestroy({
-                            pbmUuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update Notification Rule`} </span>
+                <ak-event-rule-form slot="form" .instancePk=${item.pk}> </ak-event-rule-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
         ];
     }
 

web/src/pages/events/TransportListPage.ts

@@ -28,6 +28,8 @@ export class TransportListPage extends TablePage<NotificationTransport> {
         return "pf-icon pf-icon-export";
     }
 
+    checkbox = true;
+
     @property()
     order = "name";
 
@@ -44,10 +46,33 @@ export class TransportListPage extends TablePage<NotificationTransport> {
         return [
             new TableColumn(t`Name`, "name"),
             new TableColumn(t`Mode`, "mode"),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Notifications Transport`}
+            .usedBy=${() => {
+                return new EventsApi(DEFAULT_CONFIG).eventsTransportsUsedByList({
+                    uuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new EventsApi(DEFAULT_CONFIG).eventsTransportsDestroy({
+                    uuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: NotificationTransport): TemplateResult[] {
         return [
             html`${item.name}`,
@@ -66,24 +91,10 @@ export class TransportListPage extends TablePage<NotificationTransport> {
                     <span slot="header"> ${t`Update Notification Transport`} </span>
                     <ak-event-transport-form slot="form" .instancePk=${item.pk}>
                     </ak-event-transport-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Notifications Transport`}
-                    .usedBy=${() => {
-                        return new EventsApi(DEFAULT_CONFIG).eventsTransportsUsedByList({
-                            uuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new EventsApi(DEFAULT_CONFIG).eventsTransportsDestroy({
-                            uuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <i class="fas fa-edit"></i>
+                    </button>
+                </ak-forms-modal>`,
         ];
     }
 

web/src/pages/flows/BoundStagesList.ts

@@ -20,6 +20,7 @@ import { ifDefined } from "lit-html/directives/if-defined";
 @customElement("ak-bound-stages-list")
 export class BoundStagesList extends Table<FlowStageBinding> {
     expandable = true;
+    checkbox = true;
 
     @property()
     target?: string;
@@ -38,10 +39,33 @@ export class BoundStagesList extends Table<FlowStageBinding> {
             new TableColumn(t`Order`),
             new TableColumn(t`Name`),
             new TableColumn(t`Type`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Stage binding`}
+            .usedBy=${() => {
+                return new FlowsApi(DEFAULT_CONFIG).flowsBindingsUsedByList({
+                    fsbUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new FlowsApi(DEFAULT_CONFIG).flowsBindingsDestroy({
+                    fsbUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete Binding`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: FlowStageBinding): TemplateResult[] {
         return [
             html`${item.order}`,
@@ -70,25 +94,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                     <button slot="trigger" class="pf-c-button pf-m-secondary">
                         ${t`Edit Binding`}
                     </button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Stage binding`}
-                    .usedBy=${() => {
-                        return new FlowsApi(DEFAULT_CONFIG).flowsBindingsUsedByList({
-                            fsbUuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new FlowsApi(DEFAULT_CONFIG).flowsBindingsDestroy({
-                            fsbUuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">
-                        ${t`Delete Binding`}
-                    </button>
-                </ak-forms-delete>`,
+                </ak-forms-modal>`,
         ];
     }
 

web/src/pages/flows/FlowListPage.ts

@@ -29,6 +29,8 @@ export class FlowListPage extends TablePage<Flow> {
         return "pf-icon pf-icon-process-automation";
     }
 
+    checkbox = true;
+
     @property()
     order = "slug";
 
@@ -48,10 +50,33 @@ export class FlowListPage extends TablePage<Flow> {
             new TableColumn(t`Designation`, "designation"),
             new TableColumn(t`Stages`),
             new TableColumn(t`Policies`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Flow`}
+            .usedBy=${() => {
+                return new FlowsApi(DEFAULT_CONFIG).flowsInstancesUsedByList({
+                    slug: item.slug,
+                });
+            }}
+            .delete=${() => {
+                return new FlowsApi(DEFAULT_CONFIG).flowsInstancesDestroy({
+                    slug: item.slug,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Flow): TemplateResult[] {
         return [
             html`<a href="#/flow/flows/${item.slug}">
@@ -65,26 +90,12 @@ export class FlowListPage extends TablePage<Flow> {
                     <span slot="submit"> ${t`Update`} </span>
                     <span slot="header"> ${t`Update Flow`} </span>
                     <ak-flow-form slot="form" .instancePk=${item.slug}> </ak-flow-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <i class="fas fa-edit"></i>
+                    </button>
                 </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Flow`}
-                    .usedBy=${() => {
-                        return new FlowsApi(DEFAULT_CONFIG).flowsInstancesUsedByList({
-                            slug: item.slug,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new FlowsApi(DEFAULT_CONFIG).flowsInstancesDestroy({
-                            slug: item.slug,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>
                 <button
-                    class="pf-c-button pf-m-secondary"
+                    class="pf-c-button pf-m-plain"
                     @click=${() => {
                         new FlowsApi(DEFAULT_CONFIG)
                             .flowsInstancesExecuteRetrieve({
@@ -97,9 +108,11 @@ export class FlowListPage extends TablePage<Flow> {
                             });
                     }}
                 >
-                    ${t`Execute`}
+                    <i class="fas fa-play"></i>
                 </button>
-                <a class="pf-c-button pf-m-secondary" href=${item.exportUrl}> ${t`Export`} </a>`,
+                <a class="pf-c-button pf-m-plain" href=${item.exportUrl}>
+                    <i class="fas fa-download"></i>
+                </a>`,
         ];
     }
 

web/src/pages/groups/GroupListPage.ts

@@ -14,6 +14,7 @@ import "./GroupForm";
 
 @customElement("ak-group-list")
 export class GroupListPage extends TablePage<Group> {
+    checkbox = true;
     searchEnabled(): boolean {
         return true;
     }
@@ -45,10 +46,33 @@ export class GroupListPage extends TablePage<Group> {
             new TableColumn(t`Parent`, "parent"),
             new TableColumn(t`Members`),
             new TableColumn(t`Superuser privileges?`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Group`}
+            .usedBy=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreGroupsUsedByList({
+                    groupUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreGroupsDestroy({
+                    groupUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Group): TemplateResult[] {
         return [
             html`${item.name}`,
@@ -56,27 +80,13 @@ export class GroupListPage extends TablePage<Group> {
             html`${Array.from(item.users || []).length}`,
             html`${item.isSuperuser ? t`Yes` : t`No`}`,
             html` <ak-forms-modal>
-                    <span slot="submit"> ${t`Update`} </span>
-                    <span slot="header"> ${t`Update Group`} </span>
-                    <ak-group-form slot="form" .instancePk=${item.pk}> </ak-group-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Group`}
-                    .usedBy=${() => {
-                        return new CoreApi(DEFAULT_CONFIG).coreGroupsUsedByList({
-                            groupUuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new CoreApi(DEFAULT_CONFIG).coreGroupsDestroy({
-                            groupUuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update Group`} </span>
+                <ak-group-form slot="form" .instancePk=${item.pk}> </ak-group-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
         ];
     }
 

web/src/pages/outposts/OutpostListPage.ts

@@ -45,10 +45,12 @@ export class OutpostListPage extends TablePage<Outpost> {
             new TableColumn(t`Providers`),
             new TableColumn(t`Integration`, "service_connection__name"),
             new TableColumn(t`Health and Version`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    checkbox = true;
+
     @property()
     order = "name";
 
@@ -71,24 +73,10 @@ export class OutpostListPage extends TablePage<Outpost> {
                     <span slot="submit"> ${t`Update`} </span>
                     <span slot="header"> ${t`Update Outpost`} </span>
                     <ak-outpost-form slot="form" .instancePk=${item.pk}> </ak-outpost-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <i class="fas fa-edit"></i>
+                    </button>
                 </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Outpost`}
-                    .usedBy=${() => {
-                        return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesUsedByList({
-                            uuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesDestroy({
-                            uuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>
                 <ak-outpost-deployment-modal .outpost=${item} size=${PFSize.Medium}>
                     <button slot="trigger" class="pf-c-button pf-m-tertiary">
                         ${t`View Deployment Info`}
@@ -97,6 +85,29 @@ export class OutpostListPage extends TablePage<Outpost> {
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Outpost`}
+            .usedBy=${() => {
+                return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesUsedByList({
+                    uuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesDestroy({
+                    uuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     rowInbuilt(item: Outpost): TemplateResult[] {
         return [
             html`${item.name}`,
@@ -116,7 +127,9 @@ export class OutpostListPage extends TablePage<Outpost> {
                 <span slot="submit"> ${t`Update`} </span>
                 <span slot="header"> ${t`Update Outpost`} </span>
                 <ak-outpost-form slot="form" .instancePk=${item.pk}> </ak-outpost-form>
-                <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
             </ak-forms-modal>`,
         ];
     }

web/src/pages/outposts/ServiceConnectionListPage.ts

@@ -35,6 +35,8 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
         return true;
     }
 
+    checkbox = true;
+
     apiEndpoint(page: number): Promise<AKResponse<ServiceConnection>> {
         return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllList({
             ordering: this.order,
@@ -50,7 +52,7 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
             new TableColumn(t`Type`),
             new TableColumn(t`Local`, "local"),
             new TableColumn(t`State`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
@@ -82,41 +84,46 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
                 html`<ak-spinner></ak-spinner>`,
             )}`,
             html` <ak-forms-modal>
-                    <span slot="submit"> ${t`Update`} </span>
-                    <span slot="header"> ${t`Update ${item.verboseName}`} </span>
-                    <ak-proxy-form
-                        slot="form"
-                        .args=${{
-                            instancePk: item.pk,
-                        }}
-                        type=${ifDefined(item.component)}
-                    >
-                    </ak-proxy-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Outpost integration`}
-                    .usedBy=${() => {
-                        return new OutpostsApi(
-                            DEFAULT_CONFIG,
-                        ).outpostsServiceConnectionsAllUsedByList({
-                            uuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllDestroy(
-                            {
-                                uuid: item.pk,
-                            },
-                        );
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update ${item.verboseName}`} </span>
+                <ak-proxy-form
+                    slot="form"
+                    .args=${{
+                        instancePk: item.pk,
                     }}
+                    type=${ifDefined(item.component)}
                 >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                </ak-proxy-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Outpost integration`}
+            .usedBy=${() => {
+                return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllUsedByList({
+                    uuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllDestroy({
+                    uuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     renderToolbar(): TemplateResult {
         return html` <ak-dropdown class="pf-c-dropdown">
                 <button class="pf-m-primary pf-c-dropdown__toggle" type="button">

web/src/pages/policies/BoundPoliciesList.ts

@@ -28,6 +28,8 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
     @property({ type: Boolean })
     policyOnly = false;
 
+    checkbox = true;
+
     apiEndpoint(page: number): Promise<AKResponse<PolicyBinding>> {
         return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsList({
             target: this.target || "",
@@ -43,7 +45,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
             new TableColumn(t`Enabled`, "enabled"),
             new TableColumn(t`Order`, "order"),
             new TableColumn(t`Timeout`, "timeout"),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
@@ -93,6 +95,29 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
         }
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Policy binding`}
+            .usedBy=${() => {
+                return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsUsedByList({
+                    policyBindingUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsDestroy({
+                    policyBindingUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete Binding`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: PolicyBinding): TemplateResult[] {
         return [
             html`${this.getPolicyUserGroupRow(item)}`,
@@ -113,25 +138,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                     <button slot="trigger" class="pf-c-button pf-m-secondary">
                         ${t`Edit Binding`}
                     </button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Policy binding`}
-                    .usedBy=${() => {
-                        return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsUsedByList({
-                            policyBindingUuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsDestroy({
-                            policyBindingUuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">
-                        ${t`Delete Binding`}
-                    </button>
-                </ak-forms-delete>`,
+                </ak-forms-modal>`,
         ];
     }
 

web/src/pages/policies/PolicyListPage.ts

@@ -39,6 +39,8 @@ export class PolicyListPage extends TablePage<Policy> {
         return "pf-icon pf-icon-infrastructure";
     }
 
+    checkbox = true;
+
     @property()
     order = "name";
 
@@ -97,7 +99,6 @@ export class PolicyListPage extends TablePage<Policy> {
     }
 
     renderToolbarSelected(): TemplateResult {
-        // TODO: bulk delete
         const disabled = this.selectedElements.length !== 1;
         const item = this.selectedElements[0];
         return html`<ak-forms-delete

web/src/pages/policies/reputation/IPReputationListPage.ts

@@ -30,6 +30,8 @@ export class IPReputationListPage extends TablePage<IPReputation> {
     @property()
     order = "ip";
 
+    checkbox = true;
+
     apiEndpoint(page: number): Promise<AKResponse<IPReputation>> {
         return new PoliciesApi(DEFAULT_CONFIG).policiesReputationIpsList({
             ordering: this.order,
@@ -43,30 +45,34 @@ export class IPReputationListPage extends TablePage<IPReputation> {
         return [
             new TableColumn(t`IP`, "ip"),
             new TableColumn(t`Score`, "score"),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`IP Reputation`}
+            .usedBy=${() => {
+                return new PoliciesApi(DEFAULT_CONFIG).policiesReputationIpsUsedByList({
+                    id: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new PoliciesApi(DEFAULT_CONFIG).policiesReputationIpsDestroy({
+                    id: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: IPReputation): TemplateResult[] {
-        return [
-            html`${item.ip}`,
-            html`${item.score}`,
-            html` <ak-forms-delete
-                .obj=${item}
-                objectLabel=${t`IP Reputation`}
-                .usedBy=${() => {
-                    return new PoliciesApi(DEFAULT_CONFIG).policiesReputationIpsUsedByList({
-                        id: item.pk,
-                    });
-                }}
-                .delete=${() => {
-                    return new PoliciesApi(DEFAULT_CONFIG).policiesReputationIpsDestroy({
-                        id: item.pk,
-                    });
-                }}
-            >
-                <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-            </ak-forms-delete>`,
-        ];
+        return [html`${item.ip}`, html`${item.score}`];
     }
 }

web/src/pages/policies/reputation/UserReputationListPage.ts

@@ -27,6 +27,8 @@ export class UserReputationListPage extends TablePage<UserReputation> {
         return "fa fa-ban";
     }
 
+    checkbox = true;
+
     @property()
     order = "username";
 
@@ -40,33 +42,33 @@ export class UserReputationListPage extends TablePage<UserReputation> {
     }
 
     columns(): TableColumn[] {
-        return [
-            new TableColumn(t`Username`, "username"),
-            new TableColumn(t`Score`, "score"),
-            new TableColumn("Actions"),
-        ];
+        return [new TableColumn(t`Username`, "username"), new TableColumn(t`Score`, "score")];
+    }
+
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`User Reputation`}
+            .usedBy=${() => {
+                return new PoliciesApi(DEFAULT_CONFIG).policiesReputationUsersUsedByList({
+                    id: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new PoliciesApi(DEFAULT_CONFIG).policiesReputationUsersDestroy({
+                    id: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
     }
 
     row(item: UserReputation): TemplateResult[] {
-        return [
-            html`${item.username}`,
-            html`${item.score}`,
-            html` <ak-forms-delete
-                .obj=${item}
-                objectLabel=${t`User Reputation`}
-                .usedBy=${() => {
-                    return new PoliciesApi(DEFAULT_CONFIG).policiesReputationUsersUsedByList({
-                        id: item.pk,
-                    });
-                }}
-                .delete=${() => {
-                    return new PoliciesApi(DEFAULT_CONFIG).policiesReputationUsersDestroy({
-                        id: item.pk,
-                    });
-                }}
-            >
-                <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-            </ak-forms-delete>`,
-        ];
+        return [html`${item.username}`, html`${item.score}`];
     }
 }

web/src/pages/property-mappings/PropertyMappingListPage.ts

@@ -34,6 +34,8 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
         return "pf-icon pf-icon-blueprint";
     }
 
+    checkbox = true;
+
     @property()
     order = "name";
 
@@ -54,10 +56,33 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
         return [
             new TableColumn(t`Name`, "name"),
             new TableColumn(t`Type`, "type"),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html` <ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Property Mapping`}
+            .usedBy=${() => {
+                return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllUsedByList({
+                    pmUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllDestroy({
+                    pmUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: PropertyMapping): TemplateResult[] {
         return [
             html`${item.name}`,
@@ -73,7 +98,9 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
                         type=${ifDefined(item.component)}
                     >
                     </ak-proxy-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <i class="fas fa-edit"></i>
+                    </button>
                 </ak-forms-modal>
                 <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
                     <span slot="submit"> ${t`Test`} </span>
@@ -81,25 +108,7 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
                     <ak-property-mapping-test-form slot="form" .mapping=${item}>
                     </ak-property-mapping-test-form>
                     <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Test`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Property Mapping`}
-                    .usedBy=${() => {
-                        return new PropertymappingsApi(
-                            DEFAULT_CONFIG,
-                        ).propertymappingsAllUsedByList({
-                            pmUuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllDestroy({
-                            pmUuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                </ak-forms-modal>`,
         ];
     }
 

web/src/pages/providers/ProviderListPage.ts

@@ -35,6 +35,8 @@ export class ProviderListPage extends TablePage<Provider> {
         return "pf-icon pf-icon-integration";
     }
 
+    checkbox = true;
+
     @property()
     order = "name";
 
@@ -52,10 +54,33 @@ export class ProviderListPage extends TablePage<Provider> {
             new TableColumn(t`Name`, "name"),
             new TableColumn(t`Application`),
             new TableColumn(t`Type`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Provider`}
+            .usedBy=${() => {
+                return new ProvidersApi(DEFAULT_CONFIG).providersAllUsedByList({
+                    id: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new ProvidersApi(DEFAULT_CONFIG).providersAllDestroy({
+                    id: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Provider): TemplateResult[] {
         return [
             html`<a href="#/core/providers/${item.pk}"> ${item.name} </a>`,
@@ -69,34 +94,20 @@ export class ProviderListPage extends TablePage<Provider> {
                       ${t`Warning: Provider not assigned to any application.`}`,
             html`${item.verboseName}`,
             html` <ak-forms-modal>
-                    <span slot="submit"> ${t`Update`} </span>
-                    <span slot="header"> ${t`Update ${item.verboseName}`} </span>
-                    <ak-proxy-form
-                        slot="form"
-                        .args=${{
-                            instancePk: item.pk,
-                        }}
-                        type=${ifDefined(item.component)}
-                    >
-                    </ak-proxy-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Provider`}
-                    .usedBy=${() => {
-                        return new ProvidersApi(DEFAULT_CONFIG).providersAllUsedByList({
-                            id: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new ProvidersApi(DEFAULT_CONFIG).providersAllDestroy({
-                            id: item.pk,
-                        });
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update ${item.verboseName}`} </span>
+                <ak-proxy-form
+                    slot="form"
+                    .args=${{
+                        instancePk: item.pk,
                     }}
+                    type=${ifDefined(item.component)}
                 >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                </ak-proxy-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
         ];
     }
 

web/src/pages/sources/SourcesListPage.ts

@@ -34,6 +34,8 @@ export class SourceListPage extends TablePage<Source> {
         return true;
     }
 
+    checkbox = true;
+
     @property()
     order = "name";
 
@@ -50,6 +52,29 @@ export class SourceListPage extends TablePage<Source> {
         return [new TableColumn(t`Name`, "name"), new TableColumn(t`Type`), new TableColumn("")];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Source`}
+            .usedBy=${() => {
+                return new SourcesApi(DEFAULT_CONFIG).sourcesAllUsedByList({
+                    slug: item.slug,
+                });
+            }}
+            .delete=${() => {
+                return new SourcesApi(DEFAULT_CONFIG).sourcesAllDestroy({
+                    slug: item.slug,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Source): TemplateResult[] {
         if (item.component === "") {
             return this.rowInbuilt(item);
@@ -61,34 +86,20 @@ export class SourceListPage extends TablePage<Source> {
             </a>`,
             html`${item.verboseName}`,
             html` <ak-forms-modal>
-                    <span slot="submit"> ${t`Update`} </span>
-                    <span slot="header"> ${t`Update ${item.verboseName}`} </span>
-                    <ak-proxy-form
-                        slot="form"
-                        .args=${{
-                            instancePk: item.slug,
-                        }}
-                        type=${ifDefined(item.component)}
-                    >
-                    </ak-proxy-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Source`}
-                    .usedBy=${() => {
-                        return new SourcesApi(DEFAULT_CONFIG).sourcesAllUsedByList({
-                            slug: item.slug,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new SourcesApi(DEFAULT_CONFIG).sourcesAllDestroy({
-                            slug: item.slug,
-                        });
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update ${item.verboseName}`} </span>
+                <ak-proxy-form
+                    slot="form"
+                    .args=${{
+                        instancePk: item.slug,
                     }}
+                    type=${ifDefined(item.component)}
                 >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                </ak-proxy-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
         ];
     }
 

web/src/pages/stages/StageListPage.ts

@@ -49,6 +49,8 @@ export class StageListPage extends TablePage<Stage> {
         return true;
     }
 
+    checkbox = true;
+
     @property()
     order = "name";
 
@@ -62,7 +64,34 @@ export class StageListPage extends TablePage<Stage> {
     }
 
     columns(): TableColumn[] {
-        return [new TableColumn(t`Name`, "name"), new TableColumn(t`Flows`), new TableColumn("")];
+        return [
+            new TableColumn(t`Name`, "name"),
+            new TableColumn(t`Flows`),
+            new TableColumn(t`Actions`),
+        ];
+    }
+
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${item?.verboseName}
+            .usedBy=${() => {
+                return new StagesApi(DEFAULT_CONFIG).stagesAllUsedByList({
+                    stageUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new StagesApi(DEFAULT_CONFIG).stagesAllDestroy({
+                    stageUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
     }
 
     row(item: Stage): TemplateResult[] {
@@ -77,34 +106,20 @@ export class StageListPage extends TablePage<Stage> {
                 </a>`;
             })}`,
             html` <ak-forms-modal>
-                    <span slot="submit"> ${t`Update`} </span>
-                    <span slot="header"> ${t`Update ${item.verboseName}`} </span>
-                    <ak-proxy-form
-                        slot="form"
-                        .args=${{
-                            instancePk: item.pk,
-                        }}
-                        type=${ifDefined(item.component)}
-                    >
-                    </ak-proxy-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${item.verboseName || ""}
-                    .usedBy=${() => {
-                        return new StagesApi(DEFAULT_CONFIG).stagesAllUsedByList({
-                            stageUuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new StagesApi(DEFAULT_CONFIG).stagesAllDestroy({
-                            stageUuid: item.pk,
-                        });
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update ${item.verboseName}`} </span>
+                <ak-proxy-form
+                    slot="form"
+                    .args=${{
+                        instancePk: item.pk,
                     }}
+                    type=${ifDefined(item.component)}
                 >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                </ak-proxy-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
         ];
     }
 

web/src/pages/stages/invitation/InvitationListPage.ts

@@ -31,6 +31,8 @@ export class InvitationListPage extends TablePage<Invitation> {
         return "pf-icon pf-icon-migration";
     }
 
+    checkbox = true;
+
     @property()
     order = "expires";
 
@@ -48,31 +50,37 @@ export class InvitationListPage extends TablePage<Invitation> {
             new TableColumn(t`ID`, "pk"),
             new TableColumn(t`Created by`, "created_by"),
             new TableColumn(t`Expiry`),
-            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`Invitation`}
+            .usedBy=${() => {
+                return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsUsedByList({
+                    inviteUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsDestroy({
+                    inviteUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Invitation): TemplateResult[] {
         return [
             html`${item.pk}`,
             html`${item.createdBy?.username}`,
             html`${item.expires?.toLocaleString() || "-"}`,
-            html` <ak-forms-delete
-                .obj=${item}
-                objectLabel=${t`Invitation`}
-                .usedBy=${() => {
-                    return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsUsedByList({
-                        inviteUuid: item.pk,
-                    });
-                }}
-                .delete=${() => {
-                    return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsDestroy({
-                        inviteUuid: item.pk,
-                    });
-                }}
-            >
-                <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-            </ak-forms-delete>`,
         ];
     }
 

web/src/pages/stages/prompt/PromptListPage.ts

@@ -28,6 +28,8 @@ export class PromptListPage extends TablePage<Prompt> {
         return "pf-icon pf-icon-plugged";
     }
 
+    checkbox = true;
+
     @property()
     order = "order";
 
@@ -47,10 +49,33 @@ export class PromptListPage extends TablePage<Prompt> {
             new TableColumn(t`Type`, "type"),
             new TableColumn(t`Order`, "order"),
             new TableColumn(t`Stages`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Prompt`}
+            .usedBy=${() => {
+                return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsUsedByList({
+                    promptUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsDestroy({
+                    promptUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Prompt): TemplateResult[] {
         return [
             html`${item.fieldKey}`,
@@ -61,27 +86,13 @@ export class PromptListPage extends TablePage<Prompt> {
                 return html`<li>${stage.name}</li>`;
             })}`,
             html` <ak-forms-modal>
-                    <span slot="submit"> ${t`Update`} </span>
-                    <span slot="header"> ${t`Update Prompt`} </span>
-                    <ak-prompt-form slot="form" .instancePk=${item.pk}> </ak-prompt-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Prompt`}
-                    .usedBy=${() => {
-                        return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsUsedByList({
-                            promptUuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsDestroy({
-                            promptUuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update Prompt`} </span>
+                <ak-prompt-form slot="form" .instancePk=${item.pk}> </ak-prompt-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
         ];
     }
 

web/src/pages/system-tasks/SystemTaskListPage.ts

@@ -56,7 +56,7 @@ export class SystemTaskListPage extends TablePage<Task> {
             new TableColumn(t`Description`),
             new TableColumn(t`Last run`),
             new TableColumn(t`Status`),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 

web/src/pages/tenants/TenantListPage.ts

@@ -27,6 +27,8 @@ export class TenantListPage extends TablePage<Tenant> {
         return "pf-icon pf-icon-tenant";
     }
 
+    checkbox = true;
+
     @property()
     order = "domain";
 
@@ -43,36 +45,45 @@ export class TenantListPage extends TablePage<Tenant> {
         return [
             new TableColumn(t`Domain`, "domain"),
             new TableColumn(t`Default?`, "default"),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Tenant`}
+            .usedBy=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreTenantsUsedByList({
+                    tenantUuid: item.tenantUuid,
+                });
+            }}
+            .delete=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreTenantsDestroy({
+                    tenantUuid: item.tenantUuid,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Tenant): TemplateResult[] {
         return [
             html`${item.domain}`,
             html`${item._default ? t`Yes` : t`No`}`,
             html` <ak-forms-modal>
-                    <span slot="submit"> ${t`Update`} </span>
-                    <span slot="header"> ${t`Update Tenant`} </span>
-                    <ak-tenant-form slot="form" .instancePk=${item.tenantUuid}> </ak-tenant-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
-                </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Tenant`}
-                    .usedBy=${() => {
-                        return new CoreApi(DEFAULT_CONFIG).coreTenantsUsedByList({
-                            tenantUuid: item.tenantUuid,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new CoreApi(DEFAULT_CONFIG).coreTenantsDestroy({
-                            tenantUuid: item.tenantUuid,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update Tenant`} </span>
+                <ak-tenant-form slot="form" .instancePk=${item.tenantUuid}> </ak-tenant-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
         ];
     }
 

web/src/pages/tokens/TokenListPage.ts

@@ -26,6 +26,8 @@ export class TokenListPage extends TablePage<Token> {
         return "pf-icon pf-icon-security";
     }
 
+    checkbox = true;
+
     @property()
     order = "expires";
 
@@ -44,10 +46,33 @@ export class TokenListPage extends TablePage<Token> {
             new TableColumn(t`User`, "user"),
             new TableColumn(t`Expires?`, "expiring"),
             new TableColumn(t`Expiry date`, "expires"),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Token`}
+            .usedBy=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreTokensUsedByList({
+                    identifier: item.identifier,
+                });
+            }}
+            .delete=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreTokensDestroy({
+                    identifier: item.identifier,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Token): TemplateResult[] {
         return [
             html`${item.identifier}`,
@@ -55,22 +80,6 @@ export class TokenListPage extends TablePage<Token> {
             html`${item.expiring ? t`Yes` : t`No`}`,
             html`${item.expiring ? item.expires?.toLocaleString() : "-"}`,
             html`
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Token`}
-                    .usedBy=${() => {
-                        return new CoreApi(DEFAULT_CONFIG).coreTokensUsedByList({
-                            identifier: item.identifier,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new CoreApi(DEFAULT_CONFIG).coreTokensDestroy({
-                            identifier: item.identifier,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>
                 <ak-token-copy-button identifier="${item.identifier}">
                     ${t`Copy Key`}
                 </ak-token-copy-button>

web/src/pages/user-settings/tokens/UserTokenList.ts

@@ -21,6 +21,7 @@ export class UserTokenList extends Table<Token> {
     }
 
     expandable = true;
+    checkbox = true;
 
     @property()
     order = "expires";
@@ -94,6 +95,24 @@ export class UserTokenList extends Table<Token> {
             <td></td>`;
     }
 
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Token`}
+            .delete=${() => {
+                return new CoreApi(DEFAULT_CONFIG).coreTokensDestroy({
+                    identifier: item.identifier,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete>`;
+    }
+
     row(item: Token): TemplateResult[] {
         return [
             html`${item.identifier}`,
@@ -103,19 +122,10 @@ export class UserTokenList extends Table<Token> {
                     <span slot="header"> ${t`Update Token`} </span>
                     <ak-user-token-form slot="form" .instancePk=${item.identifier}>
                     </ak-user-token-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <i class="fas fa-edit"></i>
+                    </button>
                 </ak-forms-modal>
-                <ak-forms-delete
-                    .obj=${item}
-                    objectLabel=${t`Token`}
-                    .delete=${() => {
-                        return new CoreApi(DEFAULT_CONFIG).coreTokensDestroy({
-                            identifier: item.identifier,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>
                 <ak-token-copy-button identifier="${item.identifier}">
                     ${t`Copy Key`}
                 </ak-token-copy-button>

web/src/pages/users/UserListPage.ts

@@ -58,7 +58,7 @@ export class UserListPage extends TablePage<User> {
             new TableColumn(t`Name`, "username"),
             new TableColumn(t`Active`, "active"),
             new TableColumn(t`Last login`, "last_login"),
-            new TableColumn("Actions"),
+            new TableColumn(t`Actions`),
         ];
     }