web: Normalize client-side error handling (#13595)

web: Clean up error handling. Prep for permission checks.

- Add clearer reporting for API and network errors.
- Tidy error checking.
- Partial type safety for events.

web/src/admin/events/utils.ts

@@ -1,27 +1,31 @@
 import { EventWithContext } from "@goauthentik/common/events";
 import { truncate } from "@goauthentik/common/utils";
-import { KeyUnknown } from "@goauthentik/elements/forms/Form";
+import { SlottedTemplateResult } from "@goauthentik/elements/types";
 
 import { msg, str } from "@lit/localize";
-import { TemplateResult, html } from "lit";
+import { html, nothing } from "lit";
 
-export function EventGeo(event: EventWithContext): TemplateResult {
-    let geo: KeyUnknown | undefined = undefined;
-    if (Object.hasOwn(event.context, "geo")) {
-        geo = event.context.geo as KeyUnknown;
-        const parts = [geo.city, geo.country, geo.continent].filter(
-            (v) => v !== "" && v !== undefined,
-        );
-        return html`${parts.join(", ")}`;
-    }
-    return html``;
+/**
+ * Given event with a geographical context, format it into a string for display.
+ */
+export function EventGeo(event: EventWithContext): SlottedTemplateResult {
+    if (!event.context.geo) return nothing;
+
+    const { city, country, continent } = event.context.geo;
+
+    const parts = [city, country, continent].filter(Boolean);
+
+    return html`${parts.join(", ")}`;
 }
 
-export function EventUser(event: EventWithContext, truncateUsername?: number): TemplateResult {
-    if (!event.user.username) {
-        return html`-`;
-    }
-    let body = html``;
+export function EventUser(
+    event: EventWithContext,
+    truncateUsername?: number,
+): SlottedTemplateResult {
+    if (!event.user.username) return html`-`;
+
+    let body: SlottedTemplateResult = nothing;
+
     if (event.user.is_anonymous) {
         body = html`<div>${msg("Anonymous user")}</div>`;
     } else {
@@ -33,12 +37,14 @@ export function EventUser(event: EventWithContext, truncateUsername?: number): T
             >
         </div>`;
     }
+
     if (event.user.on_behalf_of) {
-        body = html`${body}<small>
+        return html`${body}<small>
                 <a href="#/identity/users/${event.user.on_behalf_of.pk}"
                     >${msg(str`On behalf of ${event.user.on_behalf_of.username}`)}</a
                 >
             </small>`;
     }
+
     return body;
 }