web: better label table actions

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

web/package-lock.json

@@ -67,8 +67,8 @@
         },
         "api": {
             "name": "authentik-api",
-            "version": "0.0.1",
+            "version": "1.0.0",
-            "dependencies": {
+            "devDependencies": {
                 "typescript": "^3.9.5"
             }
         },
@@ -76,6 +76,7 @@
             "version": "3.9.9",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
             "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==",
+            "dev": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -10230,7 +10231,8 @@
                 "typescript": {
                     "version": "3.9.9",
                     "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
-                    "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w=="
+                    "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==",
+                    "dev": true
                 }
             }
         },

web/src/authentik.css

@@ -76,24 +76,12 @@ html > form > input {
 .pf-m-success {
     color: var(--pf-global--success-color--100);
 }
-.pf-c-button.pf-m-success {
-    color: var(--pf-c-button--m-primary--Color);
-    background-color: var(--pf-global--success-color--100);
-}
 .pf-m-warning {
     color: var(--pf-global--warning-color--100);
 }
-.pf-c-button.pf-m-warning {
-    color: var(--pf-c-button--m-primary--Color);
-    background-color: var(--pf-global--warning-color--100);
-}
 .pf-m-danger {
     color: var(--pf-global--danger-color--100);
 }
-.pf-c-button.pf-m-danger {
-    color: var(--pf-c-button--m-primary--Color);
-    background-color: var(--pf-global--danger-color--100);
-}
 
 body {
     background-color: var(--ak-dark-background) !important;

web/src/elements/oauth/UserCodeList.ts

@@ -29,7 +29,7 @@ export class UserOAuthCodeList extends Table<ExpiringBaseGrantModel> {
             new TableColumn(t`Provider`, "provider"),
             new TableColumn(t`Expires`, "expires"),
             new TableColumn(t`Scopes`, "scope"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/elements/oauth/UserRefreshList.ts

@@ -37,7 +37,7 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
             new TableColumn(t`Revoked?`, "revoked"),
             new TableColumn(t`Expires`, "expires"),
             new TableColumn(t`Scopes`, "scope"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/elements/table/Table.ts

@@ -279,6 +279,10 @@ export abstract class Table<T> extends LitElement {
         </button>`;
     }
 
+    renderToolbarSelected(): TemplateResult {
+        return html``;
+    }
+
     renderToolbarAfter(): TemplateResult {
         return html``;
     }
@@ -322,7 +326,7 @@ export abstract class Table<T> extends LitElement {
                 : html``}
             <div class="pf-c-toolbar">
                 <div class="pf-c-toolbar__content">
-                    ${this.renderSearch()}
+                    ${this.renderToolbarSelected()} &nbsp; ${this.renderSearch()}
                     <div class="pf-c-toolbar__bulk-select">${this.renderToolbar()}</div>
                     ${this.renderToolbarAfter()}
                     <ak-table-pagination

web/src/elements/user/SessionList.ts

@@ -30,7 +30,7 @@ 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(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/elements/user/UserConsentList.ts

@@ -28,7 +28,7 @@ export class UserConsentList extends Table<UserConsent> {
         return [
             new TableColumn(t`Application`, "application"),
             new TableColumn(t`Expires`, "expires"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/applications/ApplicationListPage.ts

@@ -62,7 +62,7 @@ export class ApplicationListPage extends TablePage<Application> {
             new TableColumn(t`Slug`, "slug"),
             new TableColumn(t`Provider`),
             new TableColumn(t`Provider Type`),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/crypto/CertificateKeyPairListPage.ts

@@ -53,7 +53,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
             new TableColumn(t`Name`, "name"),
             new TableColumn(t`Private key available?`),
             new TableColumn(t`Expiry date`),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

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(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/events/RuleListPage.ts

@@ -47,7 +47,7 @@ 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(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/events/TransportListPage.ts

@@ -44,7 +44,7 @@ export class TransportListPage extends TablePage<NotificationTransport> {
         return [
             new TableColumn(t`Name`, "name"),
             new TableColumn(t`Mode`, "mode"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/flows/BoundStagesList.ts

@@ -38,7 +38,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
             new TableColumn(t`Order`),
             new TableColumn(t`Name`),
             new TableColumn(t`Type`),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/flows/FlowListPage.ts

@@ -48,7 +48,7 @@ export class FlowListPage extends TablePage<Flow> {
             new TableColumn(t`Designation`, "designation"),
             new TableColumn(t`Stages`),
             new TableColumn(t`Policies`),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/groups/GroupListPage.ts

@@ -45,7 +45,7 @@ export class GroupListPage extends TablePage<Group> {
             new TableColumn(t`Parent`, "parent"),
             new TableColumn(t`Members`),
             new TableColumn(t`Superuser privileges?`),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/outposts/OutpostListPage.ts

@@ -45,7 +45,7 @@ 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(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/outposts/ServiceConnectionListPage.ts

@@ -50,7 +50,7 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
             new TableColumn(t`Type`),
             new TableColumn(t`Local`, "local"),
             new TableColumn(t`State`),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/policies/BoundPoliciesList.ts

@@ -43,7 +43,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
             new TableColumn(t`Enabled`, "enabled"),
             new TableColumn(t`Order`, "order"),
             new TableColumn(t`Timeout`, "timeout"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/policies/PolicyListPage.ts

@@ -52,7 +52,11 @@ export class PolicyListPage extends TablePage<Policy> {
     }
 
     columns(): TableColumn[] {
-        return [new TableColumn(t`Name`, "name"), new TableColumn(t`Type`), new TableColumn("")];
+        return [
+            new TableColumn(t`Name`, "name"),
+            new TableColumn(t`Type`),
+            new TableColumn(t`Actions`),
+        ];
     }
 
     row(item: Policy): TemplateResult[] {
@@ -77,33 +81,50 @@ export class PolicyListPage extends TablePage<Policy> {
                         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-pencil-alt" aria-hidden="true"></i>
+                    </button>
                 </ak-forms-modal>
                 <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
                     <span slot="submit"> ${t`Test`} </span>
                     <span slot="header"> ${t`Test Policy`} </span>
                     <ak-policy-test-form slot="form" .policy=${item}> </ak-policy-test-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Test`}</button>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                </ak-forms-modal>
+                        <i class="fas fa-vial" aria-hidden="true"></i>
-                <ak-forms-delete
+                    </button>
-                    .obj=${item}
+                </ak-forms-modal>`,
-                    objectLabel=${t`Policy`}
-                    .usedBy=${() => {
-                        return new PoliciesApi(DEFAULT_CONFIG).policiesAllUsedByList({
-                            policyUuid: item.pk,
-                        });
-                    }}
-                    .delete=${() => {
-                        return new PoliciesApi(DEFAULT_CONFIG).policiesAllDestroy({
-                            policyUuid: item.pk,
-                        });
-                    }}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-                </ak-forms-delete>`,
         ];
     }
 
+    renderToolbarSelected(): TemplateResult {
+        // TODO: bulk delete
+        const disabled = this.selectedElements.length !== 1;
+        const item = this.selectedElements[0];
+        return html`<ak-forms-delete
+            .obj=${item}
+            objectLabel=${t`Policy`}
+            .usedBy=${() => {
+                return new PoliciesApi(DEFAULT_CONFIG).policiesAllUsedByList({
+                    policyUuid: item.pk,
+                });
+            }}
+            .delete=${() => {
+                return new PoliciesApi(DEFAULT_CONFIG).policiesAllDestroy({
+                    policyUuid: item.pk,
+                });
+            }}
+        >
+            <button
+                ?disabled=${disabled}
+                slot="trigger"
+                type="button"
+                class="pf-c-button pf-m-danger ${disabled && "pf-m-disabled"}"
+            >
+                ${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/reputation/IPReputationListPage.ts

@@ -43,7 +43,7 @@ export class IPReputationListPage extends TablePage<IPReputation> {
         return [
             new TableColumn(t`IP`, "ip"),
             new TableColumn(t`Score`, "score"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

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

@@ -43,7 +43,7 @@ export class UserReputationListPage extends TablePage<UserReputation> {
         return [
             new TableColumn(t`Username`, "username"),
             new TableColumn(t`Score`, "score"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

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

@@ -54,7 +54,7 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
         return [
             new TableColumn(t`Name`, "name"),
             new TableColumn(t`Type`, "type"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/providers/ProviderListPage.ts

@@ -52,7 +52,7 @@ export class ProviderListPage extends TablePage<Provider> {
             new TableColumn(t`Name`, "name"),
             new TableColumn(t`Application`),
             new TableColumn(t`Type`),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

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

@@ -48,7 +48,7 @@ export class InvitationListPage extends TablePage<Invitation> {
             new TableColumn(t`ID`, "pk"),
             new TableColumn(t`Created by`, "created_by"),
             new TableColumn(t`Expiry`),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

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

@@ -47,7 +47,7 @@ export class PromptListPage extends TablePage<Prompt> {
             new TableColumn(t`Type`, "type"),
             new TableColumn(t`Order`, "order"),
             new TableColumn(t`Stages`),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

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(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/tenants/TenantListPage.ts

@@ -43,7 +43,7 @@ export class TenantListPage extends TablePage<Tenant> {
         return [
             new TableColumn(t`Domain`, "domain"),
             new TableColumn(t`Default?`, "default"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

web/src/pages/tokens/TokenListPage.ts

@@ -44,7 +44,7 @@ export class TokenListPage extends TablePage<Token> {
             new TableColumn(t`User`, "user"),
             new TableColumn(t`Expires?`, "expiring"),
             new TableColumn(t`Expiry date`, "expires"),
-            new TableColumn(""),
+            new TableColumn("Actions"),
         ];
     }
 

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(""),
+            new TableColumn("Actions"),
         ];
     }