web: Render Markdown in Blueprints descriptions, user and group notes

web/src/admin/blueprints/BlueprintListPage.ts

@@ -7,6 +7,7 @@ import "#elements/forms/DeleteBulkForm";
 import "#elements/forms/ModalForm";
 import "#elements/tasks/TaskList";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+import "#elements/ak-mdx/ak-mdx";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { EVENT_REFRESH } from "#common/constants";
@@ -44,6 +45,16 @@ export function BlueprintStatus(blueprint?: BlueprintInstance): string {
     return msg("Unknown");
 }
 
+const BlueprintDescriptionProperty = "blueprints.goauthentik.io/description";
+
+export function formatBlueprintDescription(item: BlueprintInstance): string | null {
+    const { labels = {} } = (item.metadata || {}) as {
+        labels?: Record<string, string | undefined>;
+    };
+
+    return labels[BlueprintDescriptionProperty] || null;
+}
+
 @customElement("ak-blueprint-list")
 export class BlueprintListPage extends TablePage<BlueprintInstance> {
     protected override searchEnabled = true;
@@ -133,18 +144,13 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
     }
 
     row(item: BlueprintInstance): SlottedTemplateResult[] {
-        let description = undefined;
-        const descKey = "blueprints.goauthentik.io/description";
-        if (
-            item.metadata &&
-            item.metadata.labels &&
-            Object.hasOwn(item.metadata?.labels, descKey)
-        ) {
-            description = item.metadata?.labels[descKey];
-        }
+        const description = formatBlueprintDescription(item);
+
         return [
             html`<div>${item.name}</div>
-                ${description ? html`<small>${description}</small>` : nothing}`,
+                ${description
+                    ? html`<small><ak-mdx .content=${description}></ak-mdx></small>`
+                    : nothing}`,
             html`${BlueprintStatus(item)}`,
             Timestamp(item.lastApplied),
             html`<ak-status-label ?good=${item.enabled}></ak-status-label>`,

web/src/admin/groups/GroupViewPage.ts

@@ -8,6 +8,7 @@ import "#elements/Tabs";
 import "#elements/buttons/ActionButton/index";
 import "#elements/buttons/SpinnerButton/index";
 import "#elements/forms/ModalForm";
+import "#elements/ak-mdx/ak-mdx";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { EVENT_REFRESH } from "#common/constants";
@@ -159,8 +160,10 @@ export class GroupViewPage extends AKElement {
                         >
                             <div class="pf-c-card__title">${msg("Notes")}</div>
                             <div class="pf-c-card__body">
-                                ${Object.hasOwn(this.group?.attributes || {}, "notes")
-                                    ? html`${this.group.attributes?.notes}`
+                                ${this.group?.attributes?.notes
+                                    ? html`<ak-mdx
+                                          .content=${this.group.attributes.notes}
+                                      ></ak-mdx>`
                                     : html`
                                           <p>
                                               ${msg(

web/src/admin/users/UserViewPage.ts

@@ -23,6 +23,7 @@ import "#elements/user/UserConsentList";
 import "#elements/user/UserReputationList";
 import "#elements/user/sources/SourceSettings";
 import "./UserDevicesTable.js";
+import "#elements/ak-mdx/ak-mdx";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { EVENT_REFRESH } from "#common/constants";
@@ -420,8 +421,8 @@ export class UserViewPage extends WithCapabilitiesConfig(AKElement) {
                         >
                             <div class="pf-c-card__title">${msg("Notes")}</div>
                             <div class="pf-c-card__body">
-                                ${Object.hasOwn(this.user?.attributes || {}, "notes")
-                                    ? html`${this.user.attributes?.notes}`
+                                ${this.user?.attributes?.notes
+                                    ? html`<ak-mdx .content=${this.user.attributes.notes}></ak-mdx>`
                                     : html`
                                           <p>
                                               ${msg(

web/src/elements/ak-mdx/ak-mdx.tsx

@@ -1,6 +1,7 @@
 import "#elements/Alert";
 
 import { globalAK } from "#common/global";
+import { BrandedHTMLPolicy } from "#common/purify";
 import OneDark from "#common/styles/one-dark.css";
 
 import { MDXAnchor } from "#elements/ak-mdx/components/MDXAnchor";
@@ -98,7 +99,7 @@ export class AKMDX extends AKElement {
             nextMDXModule = await fetchMDXModule(pathname);
         } else {
             nextMDXModule = {
-                content: this.content || "",
+                content: `${BrandedHTMLPolicy.createHTML(this.content || "")}`,
             };
         }
 
@@ -144,7 +145,6 @@ export class AKMDX extends AKElement {
         });
 
         const { frontmatter = {} } = mdxExports;
-
         this.#reactRoot.render(
             <MDXModuleContext.Provider value={mdxModule}>
                 <Content

web/src/elements/ak-mdx/components/MDXWrapper.tsx

@@ -13,8 +13,16 @@ export const MDXWrapper = ({ children, frontmatter }: MDXWrapperProps) => {
     const nextChildren = React.Children.toArray(children);
 
     if (title) {
-        nextChildren.unshift(<h1 key="header-title">{title}</h1>);
+        nextChildren.unshift(
+            <h1 key="header-title" part="title">
+                {title}
+            </h1>,
+        );
     }
 
-    return <div className="pf-c-content">{nextChildren}</div>;
+    return (
+        <div className="pf-c-content" part="content">
+            {nextChildren}
+        </div>
+    );
 };

web/src/elements/table/Table.css

@@ -10,6 +10,14 @@
     }
 }
 
+td.pf-c-table__toggle:first-child > .pf-c-button {
+    --pf-c-button--PaddingLeft: 0;
+}
+
+td ak-mdx::part(content) {
+    --pf-c-content--FontSize: 1em;
+}
+
 /**
  * TODO: Row actions need a better approach to alignment,
  * but this will at least get the buttons in a grid-like layout.