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

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/admin/roles/RoleListPage.ts

@@ -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>`,

web/src/admin/roles/RoleViewPage.ts

@@ -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,7 +87,11 @@ export class RoleViewPage extends AKElement {
         if (!this._role) {
             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
                     slot="page-overview"
                     data-tab-title="${msg("Overview")}"
@@ -116,7 +122,9 @@ export class RoleViewPage extends AKElement {
                         <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__title">
+                                ${msg("Assigned global permissions")}
+                            </div>
                             <div class="pf-c-card__body">
                                 <ak-role-permissions-global-table
                                     roleUuid=${this._role.pk}
@@ -124,7 +132,9 @@ export class RoleViewPage extends AKElement {
                             </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__title">
+                                ${msg("Assigned object permissions")}
+                            </div>
                             <div class="pf-c-card__body">
                                 <ak-role-permissions-object-table
                                     roleUuid=${this._role.pk}
@@ -138,6 +148,7 @@ export class RoleViewPage extends AKElement {
                     data-tab-title="${msg("Permissions")}"
                     model=${RbacPermissionsAssignedByUsersListModelEnum.RbacRole}
                     objectPk=${this._role.pk}
+                    .showBanner=${false}
                 ></ak-rbac-object-permission-page>
             </ak-tabs>`;
     }

web/src/admin/users/UserViewPage.ts

@@ -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,21 +467,30 @@ 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-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-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">
                                 <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__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>
@@ -487,6 +498,7 @@ export class UserViewPage extends AKElement {
                         </div>
                     </div>
                 </section>
+            </div>
         </ak-tabs>`;
     }
 }

web/src/elements/rbac/ObjectPermissionModal.ts

@@ -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}

web/src/elements/rbac/ObjectPermissionsPage.ts

@@ -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,12 +23,21 @@ 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">
+        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")}"