website/docs: update preview status of different features (cherry-pick #11817) (#11818)

gcp-cherry-pick-bot[bot] · BeryJu · web-flow · commit 6cfd2bd1aff6 · 2024-10-25T21:42:45.000+02:00
website/docs: update preview status of different features (#11817) * remove preview from RAC * add preview page instead of info box * remove preview from rbac * add preview to gdtc * add preview to kerberos source --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io> Co-authored-by: Jens L. <jens@goauthentik.io>
diff --git a/web/src/admin/providers/rac/RACProviderViewPage.ts b/web/src/admin/providers/rac/RACProviderViewPage.ts
@@ -129,11 +129,7 @@ export class RACProviderViewPage extends AKElement {
         if (!this.provider) {
             return html``;
         }
-        return html`<div slot="header" class="pf-c-banner pf-m-info">
-                ${msg("RAC is in preview.")}
-                <a href="mailto:hello+feature/rac@goauthentik.io">${msg("Send us feedback!")}</a>
-            </div>
-            ${this.provider?.assignedApplicationName
+        return html`${this.provider?.assignedApplicationName
                 ? html``
                 : html`<div slot="header" class="pf-c-banner pf-m-warning">
                       ${msg("Warning: Provider is not used by an Application.")}
diff --git a/web/src/admin/rbac/ObjectPermissionModal.ts b/web/src/admin/rbac/ObjectPermissionModal.ts
@@ -7,7 +7,6 @@ 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";
 
@@ -53,17 +52,13 @@ export class ObjectPermissionModal extends AKElement {
     objectPk?: string | number;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFBanner];
+        return [PFBase, PFButton];
     }
 
     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}
diff --git a/web/src/admin/rbac/ObjectPermissionsPage.ts b/web/src/admin/rbac/ObjectPermissionsPage.ts
@@ -11,7 +11,6 @@ import { msg } from "@lit/localize";
 import { html, nothing } 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";
@@ -31,66 +30,60 @@ export class ObjectPermissionPage extends AKElement {
     embedded = false;
 
     static get styles() {
-        return [PFBase, PFGrid, PFPage, PFCard, PFBanner];
+        return [PFBase, PFGrid, PFPage, PFCard];
     }
 
     render() {
-        return html`${!this.embedded
-                ? 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>`
+        return html` <ak-tabs pageIdentifier="permissionPage" ?vertical=${!this.embedded}>
+            ${this.model === RbacPermissionsAssignedByUsersListModelEnum.CoreUser
+                ? this.renderCoreUser()
                 : nothing}
-            <ak-tabs pageIdentifier="permissionPage" ?vertical=${!this.embedded}>
-                ${this.model === RbacPermissionsAssignedByUsersListModelEnum.CoreUser
-                    ? this.renderCoreUser()
-                    : nothing}
-                ${this.model === RbacPermissionsAssignedByUsersListModelEnum.RbacRole
-                    ? this.renderRbacRole()
-                    : nothing}
-                <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">${msg("User Object Permissions")}</div>
-                            <div class="pf-c-card__body">
-                                ${msg("Permissions set on users which affect this object.")}
-                            </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>
+            ${this.model === RbacPermissionsAssignedByUsersListModelEnum.RbacRole
+                ? this.renderRbacRole()
+                : nothing}
+            <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">${msg("User Object Permissions")}</div>
+                        <div class="pf-c-card__body">
+                            ${msg("Permissions set on users which affect this object.")}
+                        </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>
-                </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">${msg("Role Object Permissions")}</div>
-                            <div class="pf-c-card__body">
-                                ${msg("Permissions set on roles which affect this object.")}
-                            </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>
+            </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">${msg("Role Object Permissions")}</div>
+                        <div class="pf-c-card__body">
+                            ${msg("Permissions set on roles which affect this object.")}
+                        </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>
-                </section>
-            </ak-tabs>`;
+                </div>
+            </section>
+        </ak-tabs>`;
     }
 
     renderCoreUser() {
diff --git a/web/src/admin/roles/RoleListPage.ts b/web/src/admin/roles/RoleListPage.ts
@@ -9,12 +9,10 @@ import { TablePage } from "@goauthentik/elements/table/TablePage";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, html } from "lit";
+import { 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";
 
 @customElement("ak-role-list")
@@ -37,10 +35,6 @@ export class RoleListPage extends TablePage<Role> {
     @property()
     order = "name";
 
-    static get styles(): CSSResult[] {
-        return [...super.styles, PFBanner];
-    }
-
     async apiEndpoint(): Promise<PaginatedResponse<Role>> {
         return new RbacApi(DEFAULT_CONFIG).rbacRolesList(await this.defaultEndpointConfig());
     }
@@ -78,10 +72,6 @@ export class RoleListPage extends TablePage<Role> {
                 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>`;
diff --git a/web/src/admin/sources/kerberos/KerberosSourceViewPage.ts b/web/src/admin/sources/kerberos/KerberosSourceViewPage.ts
@@ -18,6 +18,7 @@ import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, 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";
@@ -54,7 +55,17 @@ export class KerberosSourceViewPage extends AKElement {
     syncState?: SyncStatus;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, PFList];
+        return [
+            PFBase,
+            PFPage,
+            PFButton,
+            PFGrid,
+            PFContent,
+            PFCard,
+            PFDescriptionList,
+            PFBanner,
+            PFList,
+        ];
     }
 
     constructor() {
@@ -121,6 +132,12 @@ export class KerberosSourceViewPage extends AKElement {
                     this.load();
                 }}
             >
+                <div slot="header" class="pf-c-banner pf-m-info">
+                    ${msg("Kerberos Source is in preview.")}
+                    <a href="mailto:hello+feature/kerberos-source@goauthentik.io"
+                        >${msg("Send us feedback!")}</a
+                    >
+                </div>
                 <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__body">
diff --git a/web/src/admin/stages/authenticator_endpoint_gdtc/AuthenticatorEndpointGDTCStageForm.ts b/web/src/admin/stages/authenticator_endpoint_gdtc/AuthenticatorEndpointGDTCStageForm.ts
@@ -10,6 +10,8 @@ import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
+import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
+
 import { AuthenticatorEndpointGDTCStage, StagesApi } from "@goauthentik/api";
 
 @customElement("ak-stage-authenticator-endpoint-gdtc-form")
@@ -33,8 +35,16 @@ export class AuthenticatorEndpointGDTCStageForm extends BaseStageForm<Authentica
         }
     }
 
+    static get styles() {
+        return super.styles.concat(PFBanner);
+    }
+
     renderForm(): TemplateResult {
-        return html` <span>
+        return html`<div class="pf-c-banner pf-m-info">
+                ${msg("Endpoint Google Chrome Device Trust is in preview.")}
+                <a href="mailto:hello+feature/gdtc@goauthentik.io">${msg("Send us feedback!")}</a>
+            </div>
+            <span>
                 ${msg(
                     "Stage used to verify users' browsers using Google Chrome Device Trust. This stage can be used in authentication/authorization flows.",
                 )}
diff --git a/website/docs/add-secure-apps/flows-stages/stages/authenticator_endpoint_gdtc/index.md b/website/docs/add-secure-apps/flows-stages/stages/authenticator_endpoint_gdtc/index.md
@@ -3,6 +3,7 @@ title: Endpoint Authenticator Google Device Trust Connector Stage
 ---
 
 <span class="badge badge--primary">Enterprise</span>
+<span class="badge badge--preview">Preview</span>
 <span class="badge badge--version">authentik 2024.10+</span>
 
 ---
diff --git a/website/docs/add-secure-apps/providers/entra/add-entra-provider.md b/website/docs/add-secure-apps/providers/entra/add-entra-provider.md
@@ -3,15 +3,12 @@ title: Add an Entra ID provider
 ---
 
 <span class="badge badge--primary">Enterprise</span>
+<span class="badge badge--preview">Preview</span>
 
 ---
 
 For more information about using an Entra ID provider, see the [Overview](./index.md) documentation.
 
-:::info
-This feature is in technical preview, so please report any bugs on [GitHub](https://github.com/goauthentik/authentik/issues).
-:::
-
 ## Prerequisites
 
 To create an Entra ID provider provider in authentik, you must have already [configured Entra ID](./setup-entra.md) to integrate with authentik. You will need to obtain from Entra three values: the Application (client) ID, the Directory (tenant) ID, and the Client secret. When adding an Entra ID provider in authentik, you must provide these values.
diff --git a/website/docs/add-secure-apps/providers/entra/index.md b/website/docs/add-secure-apps/providers/entra/index.md
@@ -3,13 +3,10 @@ title: Microsoft Entra ID provider
 ---
 
 <span class="badge badge--primary">Enterprise</span>
+<span class="badge badge--preview">Preview</span>
 
 ---
 
-:::info
-This feature is in technical preview, so please report any bugs on [GitHub](https://github.com/goauthentik/authentik/issues).
-:::
-
 With the Microsoft Entra ID provider, authentik serves as the single source of truth for all users and groups. Configuring Entra ID as a provider allows for auto-discovery of user and group accounts, on-going synchronization of user data such as email address, name, and status, and integrated data mapping of field names and values.
 
 -   For instructions to configure your Entra ID tenant to integrate with authentik, refer to [Configure Entra ID](./setup-entra.md).
diff --git a/website/docs/add-secure-apps/providers/gws/add-gws-provider.md b/website/docs/add-secure-apps/providers/gws/add-gws-provider.md
@@ -3,13 +3,10 @@ title: Create a Google Workspace provider
 ---
 
 <span class="badge badge--primary">Enterprise</span>
+<span class="badge badge--preview">Preview</span>
 
 ---
 
-:::info
-This feature is in technical preview, so please report any bugs on [GitHub](https://github.com/goauthentik/authentik/issues).
-:::
-
 For more information about using a Google Workspace provider, see the [Overview](./index.md) documentation.
 
 ## Prerequisites
diff --git a/website/docs/add-secure-apps/providers/gws/index.md b/website/docs/add-secure-apps/providers/gws/index.md
@@ -3,13 +3,10 @@ title: Google Workspace provider
 ---
 
 <span class="badge badge--primary">Enterprise</span>
+<span class="badge badge--preview">Preview</span>
 
 ---
 
-:::info
-This feature is in technical preview, so please report any bugs on [GitHub](https://github.com/goauthentik/authentik/issues).
-:::
-
 With the Google Workspace provider, authentik serves as the single source of truth for all users and groups, when using Google products like Gmail.
 
 -   For instructions to configure your Google Workspace to integrate with authentik, refer to [Configure Google Workspace](./setup-gws.md).
diff --git a/website/docs/add-secure-apps/providers/rac/how-to-rac.md b/website/docs/add-secure-apps/providers/rac/how-to-rac.md
@@ -2,17 +2,13 @@
 title: Create a Remote Access Control (RAC) provider
 ---
 
-:::info
-This feature is in technical preview, so please report any bugs on [GitHub](https://github.com/goauthentik/authentik/issues).
-:::
-
 The RAC provider is a highly flexible feature for accessing remote machines. This document provides instructions for the basic creation and configuration of a RAC provider within a defined scenario.
 
 Fow more information about using a RAC provider, see the [Overview](./index.md) documentation. You can also view our video on YouTube for setting up RAC.
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/9wahIBRV6Ts;start=22" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
-## Prereqisites
+## Prerequisites
 
 The RAC provider requires the deployment of the [RAC Outpost](../../outposts/index.mdx).
 
diff --git a/website/docs/add-secure-apps/providers/rac/index.md b/website/docs/add-secure-apps/providers/rac/index.md
@@ -6,10 +6,6 @@ title: Remote Access Control (RAC) Provider
 
 ---
 
-:::info
-This feature is in technical preview, so please report any bugs on [GitHub](https://github.com/goauthentik/authentik/issues).
-:::
-
 :::info
 This provider requires the deployment of the [RAC Outpost](../../outposts/index.mdx).
 :::
diff --git a/website/docs/users-sources/sources/protocols/kerberos/index.md b/website/docs/users-sources/sources/protocols/kerberos/index.md
@@ -2,6 +2,11 @@
 title: Kerberos
 ---
 
+<span class="badge badge--preview">Preview</span>
+<span class="badge badge--version">authentik 2024.10+</span>
+
+---
+
 This source allows users to enroll themselves with an existing Kerberos identity.
 
 ## Preparation
diff --git a/website/docs/users-sources/sources/protocols/scim/index.md b/website/docs/users-sources/sources/protocols/scim/index.md
@@ -2,9 +2,9 @@
 title: SCIM Source
 ---
 
-:::info
-This feature is in technical preview, so please report any bugs on [GitHub](https://github.com/goauthentik/authentik/issues).
-:::
+<span class="badge badge--preview">Preview</span>
+
+---
 
 The SCIM source allows other applications to directly create users and groups within authentik. SCIM provides predefined schema for users and groups, with a RESTful API, to enable automatic user provisioning and deprovisioning, SCIM is supported by applications such as Microsoft Entra ID, Google Workspace, and Okta.
 
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
