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 "@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>`,
|
||||||
|
|
|
||||||
|
|
@ -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,60 +87,69 @@ 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">
|
||||||
<section
|
${msg("RBAC is in preview.")}
|
||||||
slot="page-overview"
|
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
|
||||||
data-tab-title="${msg("Overview")}"
|
</div>
|
||||||
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
<ak-tabs>
|
||||||
>
|
<section
|
||||||
<div class="pf-l-grid pf-m-gutter">
|
slot="page-overview"
|
||||||
<div
|
data-tab-title="${msg("Overview")}"
|
||||||
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
|
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||||
>
|
>
|
||||||
<div class="pf-c-card__title">${msg("Role Info")}</div>
|
<div class="pf-l-grid pf-m-gutter">
|
||||||
<div class="pf-c-card__body">
|
<div
|
||||||
<dl class="pf-c-description-list">
|
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-description-list__group">
|
>
|
||||||
<dt class="pf-c-description-list__term">
|
<div class="pf-c-card__title">${msg("Role Info")}</div>
|
||||||
<span class="pf-c-description-list__text"
|
<div class="pf-c-card__body">
|
||||||
>${msg("Name")}</span
|
<dl class="pf-c-description-list">
|
||||||
>
|
<div class="pf-c-description-list__group">
|
||||||
</dt>
|
<dt class="pf-c-description-list__term">
|
||||||
<dd class="pf-c-description-list__description">
|
<span class="pf-c-description-list__text"
|
||||||
<div class="pf-c-description-list__text">
|
>${msg("Name")}</span
|
||||||
${this._role.name}
|
>
|
||||||
</div>
|
</dt>
|
||||||
</dd>
|
<dd class="pf-c-description-list__description">
|
||||||
</div>
|
<div class="pf-c-description-list__text">
|
||||||
</dl>
|
${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>
|
</div>
|
||||||
<div
|
</section>
|
||||||
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-9-col-on-xl pf-m-9-col-on-2xl"
|
<ak-rbac-object-permission-page
|
||||||
>
|
slot="page-permissions"
|
||||||
<div class="pf-c-card__title">${msg("Assigned global permissions")}</div>
|
data-tab-title="${msg("Permissions")}"
|
||||||
<div class="pf-c-card__body">
|
model=${RbacPermissionsAssignedByUsersListModelEnum.RbacRole}
|
||||||
<ak-role-permissions-global-table
|
objectPk=${this._role.pk}
|
||||||
roleUuid=${this._role.pk}
|
.showBanner=${false}
|
||||||
></ak-role-permissions-global-table>
|
></ak-rbac-object-permission-page>
|
||||||
</div>
|
</ak-tabs>`;
|
||||||
</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>`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,28 +467,38 @@ 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-l-grid pf-m-gutter">
|
<div class="pf-c-banner pf-m-info">
|
||||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
${msg("RBAC is in preview.")}
|
||||||
<div class="pf-c-card__title">${msg("Assigned global permissions")}</div>
|
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
|
||||||
<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>
|
</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>`;
|
</ak-tabs>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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,48 +23,57 @@ 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
|
||||||
<section
|
? html`<div class="pf-c-banner pf-m-info">
|
||||||
slot="page-object-user"
|
${msg("RBAC is in preview.")}
|
||||||
data-tab-title="${msg("User Object Permissions")}"
|
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
|
||||||
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
</div>`
|
||||||
>
|
: html``}
|
||||||
<div class="pf-l-grid pf-m-gutter">
|
<ak-tabs pageIdentifier="permissionPage">
|
||||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
<section
|
||||||
<div class="pf-c-card__title">User Object Permissions</div>
|
slot="page-object-user"
|
||||||
<div class="pf-c-card__body">
|
data-tab-title="${msg("User Object Permissions")}"
|
||||||
<ak-rbac-user-object-permission-table
|
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||||
.model=${this.model}
|
>
|
||||||
.objectPk=${this.objectPk}
|
<div class="pf-l-grid pf-m-gutter">
|
||||||
>
|
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||||
</ak-rbac-user-object-permission-table>
|
<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>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
<section
|
||||||
<section
|
slot="page-object-role"
|
||||||
slot="page-object-role"
|
data-tab-title="${msg("Role Object Permissions")}"
|
||||||
data-tab-title="${msg("Role Object Permissions")}"
|
class="pf-c-page__main-section pf-m-no-padding-mobile"
|
||||||
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">Role Object Permissions</div>
|
||||||
<div class="pf-c-card__title">Role Object Permissions</div>
|
<div class="pf-c-card__body">
|
||||||
<div class="pf-c-card__body">
|
<ak-rbac-role-object-permission-table
|
||||||
<ak-rbac-role-object-permission-table
|
.model=${this.model}
|
||||||
.model=${this.model}
|
.objectPk=${this.objectPk}
|
||||||
.objectPk=${this.objectPk}
|
>
|
||||||
>
|
</ak-rbac-role-object-permission-table>
|
||||||
</ak-rbac-role-object-permission-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</ak-tabs>`;
|
||||||
</ak-tabs>`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in a new issue