web/user: make search configurable

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/user/LibraryPage.ts

@@ -20,6 +20,8 @@ import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-sta
 import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import "./LibraryApplication";
+import { until } from "lit-html/directives/until";
+import { uiConfig } from "./config";
 
 @customElement("ak-library")
 export class LibraryPage extends LitElement {
@@ -102,26 +104,33 @@ export class LibraryPage extends LitElement {
         return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
             <div class="pf-c-content header">
                 <h1>${t`My applications`}</h1>
-                <input
+                ${until(
-                    @input=${(ev: InputEvent) => {
+                    uiConfig().then((config) => {
-                        const query = (ev.target as HTMLInputElement).value;
+                        if (!config.enabledFeatures.search) {
-                        if (!this.fuse) return;
+                            return html``;
-                        const apps = this.fuse.search(query);
-                        if (apps.length < 1) return;
-                        this.selectedApp = apps[0].item;
-                    }}
-                    @keydown=${(ev: KeyboardEvent) => {
-                        if (ev.key === "Enter" && this.selectedApp?.launchUrl) {
-                            window.location.assign(this.selectedApp.launchUrl);
-                        } else if (ev.key === "Escape") {
-                            (ev.target as HTMLInputElement).value = "";
-                            this.selectedApp = undefined;
                         }
-                    }}
+                        return html` <input
-                    type="text"
+                            @input=${(ev: InputEvent) => {
-                    autofocus
+                                const query = (ev.target as HTMLInputElement).value;
-                    placeholder=${t`Search...`}
+                                if (!this.fuse) return;
-                />
+                                const apps = this.fuse.search(query);
+                                if (apps.length < 1) return;
+                                this.selectedApp = apps[0].item;
+                            }}
+                            @keydown=${(ev: KeyboardEvent) => {
+                                if (ev.key === "Enter" && this.selectedApp?.launchUrl) {
+                                    window.location.assign(this.selectedApp.launchUrl);
+                                } else if (ev.key === "Escape") {
+                                    (ev.target as HTMLInputElement).value = "";
+                                    this.selectedApp = undefined;
+                                }
+                            }}
+                            type="text"
+                            autofocus
+                            placeholder=${t`Search...`}
+                        />`;
+                    }),
+                )}
             </div>
             <section class="pf-c-page__main-section">
                 ${loading(

web/src/user/config.ts

@@ -8,6 +8,8 @@ export interface UIConfig {
         settings: boolean;
         // Application edit in library (only shown when user is superuser)
         applicationEdit: boolean;
+        // Search bar
+        search: boolean;
     };
     navbar: {
         userDisplay: "username" | "name" | "email";
@@ -20,6 +22,7 @@ export const DefaultUIConfig: UIConfig = {
         notificationDrawer: true,
         settings: true,
         applicationEdit: true,
+        search: true,
     },
     navbar: {
         userDisplay: "name",