events: fix map again and fix flaky tests (#15154)

* web/admin: fix OL Map loading external CSS

why are web developers like this dd8ccf12a1/elements/openlayers-core/ol-map.ts (L238)

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

* fix map chart display without map

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

* make test less flaky

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

* format

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

---------

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

authentik/enterprise/search/tests.py

@@ -57,7 +57,7 @@ class QLTest(APITestCase):
         )
         self.assertEqual(res.status_code, 200)
         content = loads(res.content)
-        self.assertEqual(content["pagination"]["count"], 1)
+        self.assertGreaterEqual(content["pagination"]["count"], 1)
         self.assertEqual(content["results"][0]["username"], self.user.username)
 
     def test_search_json(self):

web/src/admin/events/EventListPage.ts

@@ -99,12 +99,14 @@ export class EventListPage extends WithLicenseSummary(TablePage<Event>) {
                 ></ak-events-map>
             </div>`;
         }
-        return html`<ak-events-volume-chart
+        return html`<div class="pf-c-page__main-section pf-m-no-padding-bottom">
-            .query=${{
+            <ak-events-volume-chart
-                page: this.page,
+                .query=${{
-                search: this.search,
+                    page: this.page,
-            }}
+                    search: this.search,
-        ></ak-events-volume-chart>`;
+                }}
+            ></ak-events-volume-chart>
+        </div>`;
     }
 
     row(item: EventWithContext): SlottedTemplateResult[] {

web/src/admin/events/EventMap.ts

@@ -4,8 +4,7 @@ import { PaginatedResponse } from "#elements/table/Table";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@openlayers-elements/core/ol-layer-vector";
 import type OlLayerVector from "@openlayers-elements/core/ol-layer-vector";
-import "@openlayers-elements/core/ol-map";
+import OlMap from "@openlayers-elements/core/ol-map";
-import type OlMap from "@openlayers-elements/core/ol-map";
 import "@openlayers-elements/maps/ol-layer-openstreetmap";
 import "@openlayers-elements/maps/ol-select";
 import Feature from "ol/Feature";
@@ -19,9 +18,32 @@ import { customElement, property, query } from "lit/decorators.js";
 
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import OL from "ol/ol.css";
 
 import { Event } from "@goauthentik/api";
 
+@customElement("ak-map")
+export class Map extends OlMap {
+    public render() {
+        return html`
+            <style>
+                ${OL}
+            </style>
+            <style>
+                :host {
+                    display: block;
+                }
+
+                #map {
+                    height: 100%;
+                }
+            </style>
+            <div id="map"></div>
+            <slot></slot>
+        `;
+    }
+}
+
 /**
  *
  * @event {select-event} - Fired when an event is selected on the map. ID of the event is contained
@@ -36,8 +58,8 @@ export class EventMap extends AKElement {
     @query("ol-layer-vector")
     vectorLayer?: OlLayerVector;
 
-    @query("ol-map")
+    @query("ak-map")
-    map?: OlMap;
+    map?: Map;
 
     @property({ type: Number })
     zoomPaddingPx = 100;
@@ -116,7 +138,7 @@ export class EventMap extends AKElement {
 
     render(): TemplateResult {
         return html`<div class="pf-c-card">
-            <ol-map>
+            <ak-map>
                 <ol-select
                     @feature-selected=${(ev: CustomEvent<{ feature: Feature }>) => {
                         const eventId = ev.detail.feature.getId();
@@ -133,7 +155,7 @@ export class EventMap extends AKElement {
                 ></ol-select>
                 <ol-layer-openstreetmap></ol-layer-openstreetmap>
                 <ol-layer-vector></ol-layer-vector>
-            </ol-map>
+            </ak-map>
         </div>`;
     }
 }