web: provide better feedback on Application Library page about search results

web/src/user/LibraryPage/ApplicationEmptyState.stories.ts

@@ -1,9 +1,9 @@
 import { html } from "lit";
 
-import "./ApplicationEmptyState";
+import "./ak-library-application-empty-list";
 
 export default {
-    title: "ApplicationEmptyState",
+    title: "Elements / Application Empty State",
 };
 
 export const OrdinaryUser = () =>

web/src/user/LibraryPage/ApplicationList.ts → web/src/user/LibraryPage/ak-library-application-list.ts

@@ -12,7 +12,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import type { Application } from "@goauthentik/api";
 
-import type { AppGroupEntry, AppGroupList } from "./types";
+import type { AppGroupEntry, AppGroupList } from "./types.js";
 
 type Pair = [string, string];
 
@@ -31,6 +31,13 @@ const LAYOUTS = new Map<string, [string, string]>([
     ],
 ]);
 
+/**
+ * @element ak-library-application-list
+ * @class LibraryPageApplicationList
+ *
+ * Renders the current library list of a User's Applications.
+ *
+ */
 @customElement("ak-library-application-list")
 export class LibraryPageApplicationList extends AKElement {
     static get styles() {

web/src/user/LibraryPage/ak-library-application-search-empty.ts

@@ -0,0 +1,33 @@
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { msg } from "@lit/localize";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";
+
+/**
+ * Library Page Application List Empty
+ *
+ * Display a message if there are no applications defined in the current instance. If the user is an
+ * administrator, provide a link to the "Create a new application" page.
+ */
+
+@customElement("ak-library-application-search-empty")
+export class LibraryPageApplicationSearchEmpty extends AKElement {
+    static get styles() {
+        return [PFBase, PFEmptyState, PFContent, PFSpacing];
+    }
+
+    render() {
+        return html` <div class="pf-c-empty-state pf-m-full-height">
+            <div class="pf-c-empty-state__content">
+                <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
+                <h1 class="pf-c-title pf-m-lg">${msg("Search returned no results.")}</h1>
+            </div>
+        </div>`;
+    }
+}

web/src/user/LibraryPage/ApplicationSearch.ts → web/src/user/LibraryPage/ak-library-application-search.ts

@@ -13,11 +13,30 @@ import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
 
 import type { Application } from "@goauthentik/api";
 
-import { SEARCH_ITEM_SELECTED, SEARCH_UPDATED } from "./constants";
-import { customEvent } from "./helpers";
-
-@customElement("ak-library-list-search")
-export class LibraryPageApplicationList extends AKElement {
+import {
+    LibraryPageSearchEmpty,
+    LibraryPageSearchReset,
+    LibraryPageSearchSelected,
+    LibraryPageSearchUpdated,
+} from "./events.js";
+
+/**
+ * @element ak-library-list-search
+ *
+ * @class LibraryPageApplicationSearch
+ *
+ * @classdesc
+ *
+ * The interface between our list of applications shown to the user, an input box, and the Fuse
+ * fuzzy search library.
+ *
+ * @fires LibraryPageSearchUpdated
+ * @fires LibraryPageSearchEmpty
+ * @fires LibraryPageSearchReset
+ *
+ */
+@customElement("ak-library-application-search")
+export class LibraryPageApplicationSearch extends AKElement {
     static get styles() {
         return [
             PFBase,
@@ -75,11 +94,7 @@ export class LibraryPageApplicationList extends AKElement {
     }
 
     onSelected(apps: FuseResult<Application>[]) {
-        this.dispatchEvent(
-            customEvent(SEARCH_UPDATED, {
-                apps: apps.map((app) => app.item),
-            }),
-        );
+        this.dispatchEvent(new LibraryPageSearchUpdated(apps.map((app) => app.item)));
     }
 
     connectedCallback() {
@@ -102,7 +117,7 @@ export class LibraryPageApplicationList extends AKElement {
         updateURLParams({
             search: this.query,
         });
-        this.onSelected([]);
+        this.dispatchEvent(new LibraryPageSearchReset());
     }
 
     onInput(ev: InputEvent) {
@@ -113,8 +128,13 @@ export class LibraryPageApplicationList extends AKElement {
         updateURLParams({
             search: this.query,
         });
+
         const apps = this.fuse.search(this.query);
-        if (apps.length < 1) return;
+        if (apps.length < 1) {
+            this.dispatchEvent(new LibraryPageSearchEmpty());
+            return;
+        }
+
         this.onSelected(apps);
     }
 
@@ -125,7 +145,7 @@ export class LibraryPageApplicationList extends AKElement {
                 return;
             }
             case "Enter": {
-                this.dispatchEvent(customEvent(SEARCH_ITEM_SELECTED));
+                this.dispatchEvent(new LibraryPageSearchSelected());
                 return;
             }
         }