Merge branch 'main' into web/main/dependency-maint-2

# What

1.  Moves the notifications folder from elements to components: the API and Notifications drawers are API-aware. If we want to separate that out and do something unique, we can, but for now, let’s just get things where they should be.

2.  Adjusts all the imports correctly.

3.  (Minor): Mutating the array and then calling `requestUpdate()`, especially when the array is then sorted-and-reversed, doesn’t save anything over creating a new array with the new item shifted onto the head, sorted once, and then saved to the property, which triggers an update automatically.

web/src/admin/ak-interface-admin.ts

@@ -29,15 +29,16 @@ import { renderDialog } from "#elements/dialogs";
 import { WithCapabilitiesConfig } from "#elements/mixins/capabilities";
 import { WithNotifications } from "#elements/mixins/notifications";
 import { canAccessAdmin, WithSession } from "#elements/mixins/session";
-import { AKDrawerChangeEvent } from "#elements/notifications/events";
+import { navigate } from "#elements/router/RouterOutlet";
+import { SlottedTemplateResult } from "#elements/types";
+
+import { AKDrawerChangeEvent } from "#components/notifications/events";
 import {
     DrawerState,
     persistDrawerParams,
     readDrawerParams,
     renderNotificationDrawerPanel,
-} from "#elements/notifications/utils";
-import { navigate } from "#elements/router/RouterOutlet";
-import { SlottedTemplateResult } from "#elements/types";
+} from "#components/notifications/utils";
 
 import Styles from "#admin/ak-interface-admin.css";
 import { ROUTES } from "#admin/Routes";

web/src/components/ak-nav-buttons.ts

@@ -10,10 +10,10 @@ import { formatUserDisplayName } from "#common/users";
 import { AKElement } from "#elements/Base";
 import { WithNotifications } from "#elements/mixins/notifications";
 import { WithSession } from "#elements/mixins/session";
-import { AKDrawerChangeEvent } from "#elements/notifications/events";
 import { isDefaultAvatar } from "#elements/utils/images";
 
 import Styles from "#components/ak-nav-button.css";
+import { AKDrawerChangeEvent } from "#components/notifications/events";
 
 import { CoreApi } from "@goauthentik/api";
 

web/src/components/notifications/APIDrawer.ts

@@ -5,7 +5,8 @@ import { globalAK } from "#common/global";
 
 import { AKElement } from "#elements/Base";
 import { listen } from "#elements/decorators/listen";
-import { AKDrawerChangeEvent } from "#elements/notifications/events";
+
+import { AKDrawerChangeEvent } from "#components/notifications/events";
 
 import { msg } from "@lit/localize";
 import { css, CSSResult, html, TemplateResult } from "lit";
@@ -80,14 +81,9 @@ export class APIDrawer extends AKElement {
 
     @listen(AKRequestPostEvent, { target: window })
     protected enqueueRequest = ({ requestInfo }: AKRequestPostEvent) => {
-        this.requests.push(requestInfo);
-
-        this.requests.sort((a, b) => a.time - b.time).reverse();
-        if (this.requests.length > 50) {
-            this.requests.shift();
-        }
-
-        this.requestUpdate();
+        this.requests = [requestInfo, ...this.requests]
+            .toSorted((a, b) => b.time - a.time)
+            .slice(0, 50);
     };
 
     render(): TemplateResult {

web/src/components/notifications/NotificationDrawer.ts

@@ -10,10 +10,11 @@ import { formatElapsedTime } from "#common/temporal";
 import { AKElement } from "#elements/Base";
 import { WithNotifications } from "#elements/mixins/notifications";
 import { WithSession } from "#elements/mixins/session";
-import { AKDrawerChangeEvent } from "#elements/notifications/events";
 import { SlottedTemplateResult } from "#elements/types";
 import { ifPresent } from "#elements/utils/attributes";
 
+import { AKDrawerChangeEvent } from "#components/notifications/events";
+
 import { Notification } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";

web/src/components/notifications/events.ts

@@ -1,4 +1,4 @@
-import { DrawerState, readDrawerParams } from "#elements/notifications/utils";
+import { DrawerState, readDrawerParams } from "#components/notifications/utils";
 
 /**
  * Event dispatched when the state of the interface drawers changes.

web/src/components/notifications/utils.ts

@@ -2,8 +2,8 @@
  * @file Notification drawer utilities.
  */
 
-import "#elements/notifications/APIDrawer";
-import "#elements/notifications/NotificationDrawer";
+import "#components/notifications/APIDrawer";
+import "#components/notifications/NotificationDrawer";
 
 import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
 

web/src/elements/controllers/NotificationsContextController.ts

@@ -13,9 +13,10 @@ import {
     NotificationsMixin,
 } from "#elements/mixins/notifications";
 import { SessionMixin } from "#elements/mixins/session";
-import { createPaginatedNotificationListFrom } from "#elements/notifications/utils";
 import type { ReactiveElementHost } from "#elements/types";
 
+import { createPaginatedNotificationListFrom } from "#components/notifications/utils";
+
 import { EventsApi } from "@goauthentik/api";
 
 import { ContextProvider } from "@lit/context";

web/src/elements/controllers/SessionContextController.ts

@@ -20,9 +20,10 @@ import {
     SessionMixin,
     UIConfigContext,
 } from "#elements/mixins/session";
-import { AKDrawerChangeEvent } from "#elements/notifications/events";
 import type { ReactiveElementHost } from "#elements/types";
 
+import { AKDrawerChangeEvent } from "#components/notifications/events";
+
 import { CoreApi, SessionUser } from "@goauthentik/api";
 
 import { setUser } from "@sentry/browser";

web/src/elements/mixins/notifications.ts

@@ -4,10 +4,11 @@ import { MessageLevel } from "#common/messages";
 
 import { ContextControllerRegistry } from "#elements/controllers/ContextControllerRegistry";
 import { showMessage } from "#elements/messages/MessageContainer";
-import { AKDrawerChangeEvent } from "#elements/notifications/events";
-import { createPaginatedNotificationListFrom } from "#elements/notifications/utils";
 import { createMixin } from "#elements/types";
 
+import { AKDrawerChangeEvent } from "#components/notifications/events";
+import { createPaginatedNotificationListFrom } from "#components/notifications/utils";
+
 import { ConsoleLogger } from "#logger/browser";
 
 import {

web/src/user/ak-interface-user.ts

@@ -1,7 +1,7 @@
 import "#components/ak-nav-buttons";
 import "#elements/banner/EnterpriseStatusBanner";
-import "#elements/notifications/APIDrawer";
-import "#elements/notifications/NotificationDrawer";
+import "#components/notifications/APIDrawer";
+import "#components/notifications/NotificationDrawer";
 import "#elements/router/RouterOutlet";
 
 import { globalAK } from "#common/global";
@@ -13,15 +13,16 @@ import { AuthenticatedInterface } from "#elements/AuthenticatedInterface";
 import { listen } from "#elements/decorators/listen";
 import { WithBrandConfig } from "#elements/mixins/branding";
 import { canAccessAdmin, WithSession } from "#elements/mixins/session";
-import { AKDrawerChangeEvent } from "#elements/notifications/events";
+import { ifPresent } from "#elements/utils/attributes";
+import { ThemedImage } from "#elements/utils/images";
+
+import { AKDrawerChangeEvent } from "#components/notifications/events";
 import {
     DrawerState,
     persistDrawerParams,
     readDrawerParams,
     renderNotificationDrawerPanel,
-} from "#elements/notifications/utils";
-import { ifPresent } from "#elements/utils/attributes";
-import { ThemedImage } from "#elements/utils/images";
+} from "#components/notifications/utils";
 
 import Styles from "#user/ak-interface-user.css";
 import { ROUTES } from "#user/Routes";