web/admin: add button to empty state to clear search (#2911)

web/src/elements/table/TablePage.ts

@@ -9,6 +9,7 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css";
 
 import "../../elements/PageHeader";
+import { updateURLParams } from "../router/RouteMatch";
 import { Table } from "./Table";
 
 export abstract class TablePage<T> extends Table<T> {
@@ -33,11 +34,33 @@ export abstract class TablePage<T> extends Table<T> {
             ${inner
                 ? inner
                 : html`<ak-empty-state icon=${this.pageIcon()} header="${t`No objects found.`}">
-                      <div slot="body">${this.renderObjectCreate()}</div>
+                      <div slot="body">
+                          ${this.searchEnabled() ? this.renderEmptyClearSearch() : html``}
+                      </div>
+                      <div slot="primary">${this.renderObjectCreate()}</div>
                   </ak-empty-state>`}
         `);
     }
 
+    renderEmptyClearSearch(): TemplateResult {
+        if (this.search === "") {
+            return html``;
+        }
+        return html`<button
+            @click=${() => {
+                this.search = "";
+                this.requestUpdate();
+                this.fetch();
+                updateURLParams({
+                    search: "",
+                });
+            }}
+            class="pf-c-button pf-m-link"
+        >
+            ${t`Clear search`}
+        </button>`;
+    }
+
     renderObjectCreate(): TemplateResult {
         return html``;
     }

web/src/locales/de.po

@@ -944,6 +944,10 @@ msgstr "Cache löschen"
 msgid "Clear icon"
 msgstr "Symbol zurücksetzen"
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr ""
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr "Klicken Sie, um den Wert zu ändern"

web/src/locales/en.po

@@ -946,6 +946,10 @@ msgstr "Clear cache"
 msgid "Clear icon"
 msgstr "Clear icon"
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr "Clear search"
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr "Click to change value"

web/src/locales/es.po

@@ -934,6 +934,10 @@ msgstr "Limpiar caché"
 msgid "Clear icon"
 msgstr "Ícono Borrar"
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr ""
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr "Haga clic para cambiar el valor"

web/src/locales/fr_FR.po

@@ -942,6 +942,10 @@ msgstr "Vider le cach"
 msgid "Clear icon"
 msgstr "Supprimer l'icôn"
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr ""
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr "Cliquer pour changer la valeur"

web/src/locales/pl.po

@@ -931,6 +931,10 @@ msgstr "Wyczyść pamięć podręczną"
 msgid "Clear icon"
 msgstr "Wyczyść ikonę"
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr ""
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr "Kliknij, aby zmienić wartość"

web/src/locales/pseudo-LOCALE.po

@@ -934,6 +934,10 @@ msgstr ""
 msgid "Clear icon"
 msgstr ""
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr ""
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr ""

web/src/locales/tr.po

@@ -934,6 +934,10 @@ msgstr "Önbelleği temizle"
 msgid "Clear icon"
 msgstr "Simgeyi temizle"
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr ""
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr "Değeri değiştirmek için tıklayın"

web/src/locales/zh-Hans.po

@@ -930,6 +930,10 @@ msgstr "清除缓存"
 msgid "Clear icon"
 msgstr "清除图标"
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr ""
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr "点击以更改值"

web/src/locales/zh-Hant.po

@@ -932,6 +932,10 @@ msgstr "清除缓存"
 msgid "Clear icon"
 msgstr "清除图标"
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr ""
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr "单击以更改值"

web/src/locales/zh_TW.po

@@ -932,6 +932,10 @@ msgstr "清除缓存"
 msgid "Clear icon"
 msgstr "清除图标"
 
+#: src/elements/table/TablePage.ts
+msgid "Clear search"
+msgstr ""
+
 #: src/elements/forms/HorizontalFormElement.ts
 msgid "Click to change value"
 msgstr "单击以更改值"