web: better label table actions

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
2021-08-05 10:40:44 +02:00 · 2021-08-05 10:40:44 +02:00 · ddd5047cc3
parent 919946609d
commit ddd5047cc3
29 changed files with 76 additions and 61 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -67,8 +67,8 @@
        },
        "api": {
            "name": "authentik-api",
-            "version": "0.0.1",
-            "dependencies": {
+            "version": "1.0.0",
+            "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
                }
            }
        },
--- a/web/src/authentik.css
+++ b/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;
--- a/web/src/elements/oauth/UserCodeList.ts
+++ b/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"),
        ];
    }

--- a/web/src/elements/oauth/UserRefreshList.ts
+++ b/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"),
        ];
    }

--- a/web/src/elements/table/Table.ts
+++ b/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
--- a/web/src/elements/user/SessionList.ts
+++ b/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"),
        ];
    }

--- a/web/src/elements/user/UserConsentList.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/applications/ApplicationListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/crypto/CertificateKeyPairListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/events/EventListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/events/RuleListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/events/TransportListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/flows/BoundStagesList.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/flows/FlowListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/groups/GroupListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/outposts/OutpostListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/outposts/ServiceConnectionListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/policies/BoundPoliciesList.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/policies/PolicyListPage.ts
+++ b/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>
-                </ak-forms-modal>
-                <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 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-vial" aria-hidden="true"></i>
+                    </button>
+                </ak-forms-modal>`,
        ];
    }

+    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">
--- a/web/src/pages/policies/reputation/IPReputationListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/policies/reputation/UserReputationListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/property-mappings/PropertyMappingListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/providers/ProviderListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/stages/invitation/InvitationListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/stages/prompt/PromptListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/system-tasks/SystemTaskListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/tenants/TenantListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/tokens/TokenListPage.ts
+++ b/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"),
        ];
    }

--- a/web/src/pages/users/UserListPage.ts
+++ b/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"),
        ];
    }