From 5a2ed5bf30725bdc53cc89da0aebc4c0220c45a2 Mon Sep 17 00:00:00 2001
From: Ken Sternberg
 <133134217+kensternberg-authentik@users.noreply.github.com>
Date: Tue, 13 Aug 2024 13:39:13 -0700
Subject: [PATCH] web: bug  - licenseStatus is not defined on initial render
 (#10894)

* web: bug / licenseStatus is not defined on initial render

- Test if the licenseStatus is available before rendering the banner
- The banner is rendered correctly when the status becomes available.

The loading sequence is such that if the user reloads the page, the
first attempt to render the license banner fails because the
licenseStatus field is not yet populated; the result is an ugly
`licenseStatus is undefined` on the console.

Because the licenseStatus is a live context, when it is updated
any objects that subscribe to it are scheduled for a re-render.
This is why the system appears to behave correctly now.

While this is invisible to the user, it's still undesirable behavior.

Returning `nothing` requires that we remove the type declarations
as return values from the renderers. Typescript's inferers do
just fine.

* fix some other small things

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

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
---
 authentik/outposts/tasks.py                         |  2 +-
 web/src/admin/admin-overview/AdminOverviewPage.ts   |  2 +-
 .../elements/enterprise/EnterpriseStatusBanner.ts   | 13 ++++++++-----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/authentik/outposts/tasks.py b/authentik/outposts/tasks.py
index cb4dac236a..7a80ce9be4 100644
--- a/authentik/outposts/tasks.py
+++ b/authentik/outposts/tasks.py
@@ -214,7 +214,7 @@ def outpost_post_save(model_class: str, model_pk: Any):
         if not hasattr(instance, field_name):
             continue
 
-        LOGGER.debug("triggering outpost update from from field", field=field.name)
+        LOGGER.debug("triggering outpost update from field", field=field.name)
         # Because the Outpost Model has an M2M to Provider,
         # we have to iterate over the entire QS
         for reverse in getattr(instance, field_name).all():
diff --git a/web/src/admin/admin-overview/AdminOverviewPage.ts b/web/src/admin/admin-overview/AdminOverviewPage.ts
index 3a1ebce5a8..005382bd1a 100644
--- a/web/src/admin/admin-overview/AdminOverviewPage.ts
+++ b/web/src/admin/admin-overview/AdminOverviewPage.ts
@@ -97,7 +97,7 @@ export class AdminOverviewPage extends AdminOverviewBase {
         const name = this.user?.user.name ?? this.user?.user.username;
 
         return html`<ak-page-header icon="" header="" description=${msg("General system status")}>
-                <span slot="header"> ${msg(str`Welcome, ${name}.`)} </span>
+                <span slot="header"> ${msg(str`Welcome, ${name || ""}.`)} </span>
             </ak-page-header>
             <section class="pf-c-page__main-section">
                 <div class="pf-l-grid pf-m-gutter">
diff --git a/web/src/elements/enterprise/EnterpriseStatusBanner.ts b/web/src/elements/enterprise/EnterpriseStatusBanner.ts
index a1efb54ffb..34a779db12 100644
--- a/web/src/elements/enterprise/EnterpriseStatusBanner.ts
+++ b/web/src/elements/enterprise/EnterpriseStatusBanner.ts
@@ -2,7 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider";
 
 import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, html, nothing } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
@@ -14,7 +14,7 @@ export class EnterpriseStatusBanner extends WithLicenseSummary(AKElement) {
     @property()
     interface: "admin" | "user" | "flow" | "" = "";
 
-    static get styles(): CSSResult[] {
+    static get styles() {
         return [PFBanner];
     }
 
@@ -37,6 +37,7 @@ export class EnterpriseStatusBanner extends WithLicenseSummary(AKElement) {
                     return nothing;
                 }
                 break;
+            case LicenseSummaryStatusEnum.Unlicensed:
             case LicenseSummaryStatusEnum.Valid:
                 return nothing;
             case LicenseSummaryStatusEnum.ReadOnly:
@@ -78,7 +79,7 @@ export class EnterpriseStatusBanner extends WithLicenseSummary(AKElement) {
         </div>`;
     }
 
-    renderFlagBanner(): TemplateResult {
+    renderFlagBanner() {
         return html`
             ${this.licenseSummary.licenseFlags.includes(LicenseFlagsEnum.Trial)
                 ? html`<div class="pf-c-banner pf-m-sticky pf-m-gold">
@@ -93,8 +94,10 @@ export class EnterpriseStatusBanner extends WithLicenseSummary(AKElement) {
         `;
     }
 
-    render(): TemplateResult {
-        return html`${this.renderFlagBanner()}${this.renderStatusBanner()}`;
+    render() {
+        return this.licenseSummary
+            ? html`${this.renderFlagBanner()}${this.renderStatusBanner()}`
+            : nothing;
     }
 }