trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/admin: add preview banner to RBAC pages (#7295)

Browse source 
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L 2023-10-25 20:15:28 +02:00 committed by GitHub
parent 488420eeb6
commit f6118ec876
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 169 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
web/src/admin/roles/RoleListPage.ts
View file

@ -10,8 +10,11 @@ import { TablePage } from "@goauthentik/elements/table/TablePage";
import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
import { msg } from "@lit/localize"; import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit"; import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import { RbacApi, Role } from "@goauthentik/api"; import { RbacApi, Role } from "@goauthentik/api";
@ -34,6 +37,10 @@ export class RoleListPage extends TablePage<Role> {
@property() @property()
order = "name"; order = "name";
static get styles(): CSSResult[] {
return [...super.styles, PFBanner];
}
async apiEndpoint(page: number): Promise<PaginatedResponse<Role>> { async apiEndpoint(page: number): Promise<PaginatedResponse<Role>> {
return new RbacApi(DEFAULT_CONFIG).rbacRolesList({ return new RbacApi(DEFAULT_CONFIG).rbacRolesList({
ordering: this.order, ordering: this.order,
@ -69,6 +76,22 @@ export class RoleListPage extends TablePage<Role> {
</ak-forms-delete-bulk>`; </ak-forms-delete-bulk>`;
} }
render(): TemplateResult {
return html`<ak-page-header
icon=${this.pageIcon()}
header=${this.pageTitle()}
description=${ifDefined(this.pageDescription())}
>
</ak-page-header>
<div class="pf-c-banner pf-m-info">
${msg("RBAC is in preview.")}
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
</div>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card">${this.renderTable()}</div>
</section>`;
}
row(item: Role): TemplateResult[] { row(item: Role): TemplateResult[] {
return [ return [
html`<a href="#/identity/roles/${item.pk}">${item.name}</a>`, html`<a href="#/identity/roles/${item.pk}">${item.name}</a>`,

17
web/src/admin/roles/RoleViewPage.ts
View file

@ -15,6 +15,7 @@ import { msg, str } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit"; import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property, state } from "lit/decorators.js"; import { customElement, property, state } from "lit/decorators.js";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css";
@ -52,6 +53,7 @@ export class RoleViewPage extends AKElement {
PFContent, PFContent,
PFCard, PFCard,
PFDescriptionList, PFDescriptionList,
PFBanner,
css` css`
.pf-c-description-list__description ak-action-button { .pf-c-description-list__description ak-action-button {
margin-right: 6px; margin-right: 6px;
@ -85,7 +87,11 @@ export class RoleViewPage extends AKElement {
if (!this._role) { if (!this._role) {
return html``; return html``;
} }
return html`<ak-tabs> return html`<div class="pf-c-banner pf-m-info">
${msg("RBAC is in preview.")}
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
</div>
<ak-tabs>
<section <section
slot="page-overview" slot="page-overview"
data-tab-title="${msg("Overview")}" data-tab-title="${msg("Overview")}"
@ -116,7 +122,9 @@ export class RoleViewPage extends AKElement {
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-9-col-on-xl pf-m-9-col-on-2xl" class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-9-col-on-xl pf-m-9-col-on-2xl"
> >
<div class="pf-c-card__title">${msg("Assigned global permissions")}</div> <div class="pf-c-card__title">
${msg("Assigned global permissions")}
</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<ak-role-permissions-global-table <ak-role-permissions-global-table
roleUuid=${this._role.pk} roleUuid=${this._role.pk}
@ -124,7 +132,9 @@ export class RoleViewPage extends AKElement {
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("Assigned object permissions")}</div> <div class="pf-c-card__title">
${msg("Assigned object permissions")}
</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<ak-role-permissions-object-table <ak-role-permissions-object-table
roleUuid=${this._role.pk} roleUuid=${this._role.pk}
@ -138,6 +148,7 @@ export class RoleViewPage extends AKElement {
data-tab-title="${msg("Permissions")}" data-tab-title="${msg("Permissions")}"
model=${RbacPermissionsAssignedByUsersListModelEnum.RbacRole} model=${RbacPermissionsAssignedByUsersListModelEnum.RbacRole}
objectPk=${this._role.pk} objectPk=${this._role.pk}
.showBanner=${false}
></ak-rbac-object-permission-page> ></ak-rbac-object-permission-page>
</ak-tabs>`; </ak-tabs>`;
} }

20
web/src/admin/users/UserViewPage.ts
View file

@ -33,6 +33,7 @@ import { msg, str } from "@lit/localize";
import { css, html, nothing } from "lit"; import { css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators.js"; import { customElement, property, state } from "lit/decorators.js";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css";
@ -86,6 +87,7 @@ export class UserViewPage extends AKElement {
PFCard, PFCard,
PFDescriptionList, PFDescriptionList,
PFSizing, PFSizing,
PFBanner,
css` css`
.ak-button-collection { .ak-button-collection {
display: flex; display: flex;
@ -465,21 +467,30 @@ export class UserViewPage extends AKElement {
model=${RbacPermissionsAssignedByUsersListModelEnum.CoreUser} model=${RbacPermissionsAssignedByUsersListModelEnum.CoreUser}
objectPk=${this.user.pk} objectPk=${this.user.pk}
></ak-rbac-object-permission-page> ></ak-rbac-object-permission-page>
<section <div
slot="page-mfa-assigned-permissions" slot="page-mfa-assigned-permissions"
data-tab-title="${msg("Assigned permissions")}" data-tab-title="${msg("Assigned permissions")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class=""
> >
<div class="pf-c-banner pf-m-info">
${msg("RBAC is in preview.")}
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
</div>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-l-grid pf-m-gutter"> <div class="pf-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("Assigned global permissions")}</div> <div class="pf-c-card__title">
${msg("Assigned global permissions")}
</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<ak-user-assigned-global-permissions-table userId=${this.user.pk}> <ak-user-assigned-global-permissions-table userId=${this.user.pk}>
</ak-user-assigned-global-permissions-table> </ak-user-assigned-global-permissions-table>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("Assigned object permissions")}</div> <div class="pf-c-card__title">
${msg("Assigned object permissions")}
</div>
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<ak-user-assigned-object-permissions-table userId=${this.user.pk}> <ak-user-assigned-object-permissions-table userId=${this.user.pk}>
</ak-user-assigned-object-permissions-table> </ak-user-assigned-object-permissions-table>
@ -487,6 +498,7 @@ export class UserViewPage extends AKElement {
</div> </div>
</div> </div>
</section> </section>
</div>
</ak-tabs>`; </ak-tabs>`;
} }
} }

7
web/src/elements/rbac/ObjectPermissionModal.ts
View file

@ -7,6 +7,7 @@ import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit"; import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
@ -51,13 +52,17 @@ export class ObjectPermissionModal extends AKElement {
objectPk?: string | number; objectPk?: string | number;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFButton]; return [PFBase, PFButton, PFBanner];
} }
render(): TemplateResult { render(): TemplateResult {
return html` return html`
<ak-forms-modal .showSubmitButton=${false} cancelText=${msg("Close")}> <ak-forms-modal .showSubmitButton=${false} cancelText=${msg("Close")}>
<span slot="header"> ${msg("Update Permissions")} </span> <span slot="header"> ${msg("Update Permissions")} </span>
<div class="pf-c-banner pf-m-info" slot="above-form">
${msg("RBAC is in preview.")}
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
</div>
<ak-rbac-object-permission-modal-form <ak-rbac-object-permission-modal-form
slot="form" slot="form"
.model=${this.model} .model=${this.model}

14
web/src/elements/rbac/ObjectPermissionsPage.ts
View file

@ -7,6 +7,7 @@ import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit"; import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css"; import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
@ -22,12 +23,21 @@ export class ObjectPermissionPage extends AKElement {
@property() @property()
objectPk?: string | number; objectPk?: string | number;
@property({ type: Boolean })
showBanner = true;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFGrid, PFPage, PFCard]; return [PFBase, PFGrid, PFPage, PFCard, PFBanner];
} }
render(): TemplateResult { render(): TemplateResult {
return html`<ak-tabs pageIdentifier="permissionPage"> return html`${this.showBanner
? html`<div class="pf-c-banner pf-m-info">
${msg("RBAC is in preview.")}
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
</div>`
: html``}
<ak-tabs pageIdentifier="permissionPage">
<section <section
slot="page-object-user" slot="page-object-user"
data-tab-title="${msg("User Object Permissions")}" data-tab-title="${msg("User Object Permissions")}"