web/admin: add preview banner to RBAC pages (#7295)
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
GitHub
parent
488420eeb6
commit
f6118ec876
|
|
@ -10,8 +10,11 @@ import { TablePage } from "@goauthentik/elements/table/TablePage";
|
|||
import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
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";
|
||||
|
||||
|
|
@ -34,6 +37,10 @@ export class RoleListPage extends TablePage<Role> {
|
|||
@property()
|
||||
order = "name";
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [...super.styles, PFBanner];
|
||||
}
|
||||
|
||||
async apiEndpoint(page: number): Promise<PaginatedResponse<Role>> {
|
||||
return new RbacApi(DEFAULT_CONFIG).rbacRolesList({
|
||||
ordering: this.order,
|
||||
|
|
@ -69,6 +76,22 @@ export class RoleListPage extends TablePage<Role> {
|
|||
</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[] {
|
||||
return [
|
||||
html`<a href="#/identity/roles/${item.pk}">${item.name}</a>`,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { msg, str } from "@lit/localize";
|
|||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
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 PFCard from "@patternfly/patternfly/components/Card/card.css";
|
||||
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
||||
|
|
@ -52,6 +53,7 @@ export class RoleViewPage extends AKElement {
|
|||
PFContent,
|
||||
PFCard,
|
||||
PFDescriptionList,
|
||||
PFBanner,
|
||||
css`
|
||||
.pf-c-description-list__description ak-action-button {
|
||||
margin-right: 6px;
|
||||
|
|
@ -85,60 +87,69 @@ export class RoleViewPage extends AKElement {
|
|||
if (!this._role) {
|
||||
return html``;
|
||||
}
|
||||
return html`<ak-tabs>
|
||||
<section
|
||||
slot="page-overview"
|
||||
data-tab-title="${msg("Overview")}"
|
||||
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||
>
|
||||
<div class="pf-l-grid pf-m-gutter">
|
||||
<div
|
||||
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
|
||||
>
|
||||
<div class="pf-c-card__title">${msg("Role Info")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
>${msg("Name")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
${this._role.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
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
|
||||
slot="page-overview"
|
||||
data-tab-title="${msg("Overview")}"
|
||||
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||
>
|
||||
<div class="pf-l-grid pf-m-gutter">
|
||||
<div
|
||||
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
|
||||
>
|
||||
<div class="pf-c-card__title">${msg("Role Info")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
>${msg("Name")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
${this._role.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<div class="pf-c-card__title">
|
||||
${msg("Assigned global permissions")}
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
<ak-role-permissions-global-table
|
||||
roleUuid=${this._role.pk}
|
||||
></ak-role-permissions-global-table>
|
||||
</div>
|
||||
</div>
|
||||
<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__body">
|
||||
<ak-role-permissions-object-table
|
||||
roleUuid=${this._role.pk}
|
||||
></ak-role-permissions-object-table>
|
||||
</div>
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<div class="pf-c-card__title">${msg("Assigned global permissions")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<ak-role-permissions-global-table
|
||||
roleUuid=${this._role.pk}
|
||||
></ak-role-permissions-global-table>
|
||||
</div>
|
||||
</div>
|
||||
<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__body">
|
||||
<ak-role-permissions-object-table
|
||||
roleUuid=${this._role.pk}
|
||||
></ak-role-permissions-object-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<ak-rbac-object-permission-page
|
||||
slot="page-permissions"
|
||||
data-tab-title="${msg("Permissions")}"
|
||||
model=${RbacPermissionsAssignedByUsersListModelEnum.RbacRole}
|
||||
objectPk=${this._role.pk}
|
||||
></ak-rbac-object-permission-page>
|
||||
</ak-tabs>`;
|
||||
</section>
|
||||
<ak-rbac-object-permission-page
|
||||
slot="page-permissions"
|
||||
data-tab-title="${msg("Permissions")}"
|
||||
model=${RbacPermissionsAssignedByUsersListModelEnum.RbacRole}
|
||||
objectPk=${this._role.pk}
|
||||
.showBanner=${false}
|
||||
></ak-rbac-object-permission-page>
|
||||
</ak-tabs>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ import { msg, str } from "@lit/localize";
|
|||
import { css, html, nothing } from "lit";
|
||||
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 PFCard from "@patternfly/patternfly/components/Card/card.css";
|
||||
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
||||
|
|
@ -86,6 +87,7 @@ export class UserViewPage extends AKElement {
|
|||
PFCard,
|
||||
PFDescriptionList,
|
||||
PFSizing,
|
||||
PFBanner,
|
||||
css`
|
||||
.ak-button-collection {
|
||||
display: flex;
|
||||
|
|
@ -465,28 +467,38 @@ export class UserViewPage extends AKElement {
|
|||
model=${RbacPermissionsAssignedByUsersListModelEnum.CoreUser}
|
||||
objectPk=${this.user.pk}
|
||||
></ak-rbac-object-permission-page>
|
||||
<section
|
||||
<div
|
||||
slot="page-mfa-assigned-permissions"
|
||||
data-tab-title="${msg("Assigned permissions")}"
|
||||
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||
class=""
|
||||
>
|
||||
<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__title">${msg("Assigned global permissions")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<ak-user-assigned-global-permissions-table userId=${this.user.pk}>
|
||||
</ak-user-assigned-global-permissions-table>
|
||||
</div>
|
||||
</div>
|
||||
<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__body">
|
||||
<ak-user-assigned-object-permissions-table userId=${this.user.pk}>
|
||||
</ak-user-assigned-object-permissions-table>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
|
||||
<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__title">
|
||||
${msg("Assigned global permissions")}
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
<ak-user-assigned-global-permissions-table userId=${this.user.pk}>
|
||||
</ak-user-assigned-global-permissions-table>
|
||||
</div>
|
||||
</div>
|
||||
<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__body">
|
||||
<ak-user-assigned-object-permissions-table userId=${this.user.pk}>
|
||||
</ak-user-assigned-object-permissions-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</ak-tabs>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { msg } from "@lit/localize";
|
|||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
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 PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
|
|
@ -51,13 +52,17 @@ export class ObjectPermissionModal extends AKElement {
|
|||
objectPk?: string | number;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFButton];
|
||||
return [PFBase, PFButton, PFBanner];
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
<ak-forms-modal .showSubmitButton=${false} cancelText=${msg("Close")}>
|
||||
<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
|
||||
slot="form"
|
||||
.model=${this.model}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { msg } from "@lit/localize";
|
|||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
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 PFPage from "@patternfly/patternfly/components/Page/page.css";
|
||||
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
|
||||
|
|
@ -22,48 +23,57 @@ export class ObjectPermissionPage extends AKElement {
|
|||
@property()
|
||||
objectPk?: string | number;
|
||||
|
||||
@property({ type: Boolean })
|
||||
showBanner = true;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFGrid, PFPage, PFCard];
|
||||
return [PFBase, PFGrid, PFPage, PFCard, PFBanner];
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<ak-tabs pageIdentifier="permissionPage">
|
||||
<section
|
||||
slot="page-object-user"
|
||||
data-tab-title="${msg("User Object Permissions")}"
|
||||
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||
>
|
||||
<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__title">User Object Permissions</div>
|
||||
<div class="pf-c-card__body">
|
||||
<ak-rbac-user-object-permission-table
|
||||
.model=${this.model}
|
||||
.objectPk=${this.objectPk}
|
||||
>
|
||||
</ak-rbac-user-object-permission-table>
|
||||
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
|
||||
slot="page-object-user"
|
||||
data-tab-title="${msg("User Object Permissions")}"
|
||||
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||
>
|
||||
<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__title">User Object Permissions</div>
|
||||
<div class="pf-c-card__body">
|
||||
<ak-rbac-user-object-permission-table
|
||||
.model=${this.model}
|
||||
.objectPk=${this.objectPk}
|
||||
>
|
||||
</ak-rbac-user-object-permission-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
slot="page-object-role"
|
||||
data-tab-title="${msg("Role Object Permissions")}"
|
||||
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||
>
|
||||
<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__title">Role Object Permissions</div>
|
||||
<div class="pf-c-card__body">
|
||||
<ak-rbac-role-object-permission-table
|
||||
.model=${this.model}
|
||||
.objectPk=${this.objectPk}
|
||||
>
|
||||
</ak-rbac-role-object-permission-table>
|
||||
</section>
|
||||
<section
|
||||
slot="page-object-role"
|
||||
data-tab-title="${msg("Role Object Permissions")}"
|
||||
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||
>
|
||||
<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__title">Role Object Permissions</div>
|
||||
<div class="pf-c-card__body">
|
||||
<ak-rbac-role-object-permission-table
|
||||
.model=${this.model}
|
||||
.objectPk=${this.objectPk}
|
||||
>
|
||||
</ak-rbac-role-object-permission-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</ak-tabs>`;
|
||||
</section>
|
||||
</ak-tabs>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue