From f159973d8b0278d08ae11fffaf5c7f65dce1fd80 Mon Sep 17 00:00:00 2001
From: Ken Sternberg
 <133134217+kensternberg-authentik@users.noreply.github.com>
Date: Wed, 13 Mar 2024 15:36:41 -0700
Subject: [PATCH] web: provide InstallID on EnterpriseListPage (#8898)

* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* web: provide InstallID on EnterpriseListPage

Changes the appearance of the "Get a License" card on the EnterpriseLicenseListPage to include
a view of the InstallID.

* web: restore line accidentally deleted by fatfinger error
---
 .../enterprise/EnterpriseLicenseListPage.ts   | 50 +++++++++++++------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/web/src/admin/enterprise/EnterpriseLicenseListPage.ts b/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
index b8df8ca70f..4949e193bc 100644
--- a/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
+++ b/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
@@ -158,22 +158,7 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
                 <div
                     class="pf-l-grid pf-m-gutter pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-3-col-on-lg pf-m-all-3-col-on-xl"
                 >
-                    <div class="pf-l-grid__item pf-c-card">
-                        <div class="pf-c-card__title">${msg("Get a license")}</div>
-                        <div class="pf-c-card__body">
-                            ${this.installID
-                                ? html` <a
-                                      target="_blank"
-                                      href=${`https://customers.goauthentik.io/from_authentik/purchase/?install_id=${encodeURIComponent(
-                                          this.installID,
-                                      )}&authentik_url=${encodeURI(window.location.origin)}`}
-                                      class="pf-c-button pf-m-primary pf-m-block"
-                                      >${msg("Go to Customer Portal")}</a
-                                  >`
-                                : html`<ak-spinner></ak-spinner>`}
-                        </div>
-                    </div>
-
+                    ${this.renderGetLicenseCard()}
                     <ak-aggregate-card
                         class="pf-l-grid__item"
                         icon="pf-icon pf-icon-user"
@@ -249,6 +234,39 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
         ];
     }
 
+    renderGetLicenseCard() {
+        const renderSpinner = () =>
+            html` <div class="pf-c-card__body">
+                <ak-spinner></ak-spinner>
+            </div>`;
+
+        const installURL = (installID: string) =>
+            [
+                "https://customers.goauthentik.io/from_authentik/purchase/?install_id=",
+                encodeURIComponent(installID),
+                "&authentik_url=",
+                encodeURI(window.location.origin),
+            ].join("");
+
+        const renderCard = (installID: string) => html`
+            <div class="pf-c-card__title">${msg("Get a license")}</div>
+            <div class="pf-c-card__body">
+                <a
+                    target="_blank"
+                    href="${installURL(installID)}"
+                    class="pf-c-button pf-m-primary pf-m-block"
+                    >${msg("Go to Customer Portal")}</a
+                >
+            </div>
+            <div class="pf-c-card__title">${msg("Your Install ID")}</div>
+            <div class="pf-c-card__body">${installID}</div>
+        `;
+
+        return html`<div class="pf-l-grid__item pf-c-card">
+            ${this.installID ? renderCard(this.installID) : renderSpinner()}
+        </div> `;
+    }
+
     renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>