web/admin: make table dispatch refresh event on refresh button instead of just fetching

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

web/package-lock.json

@@ -61,12 +61,13 @@
                 "typescript": "^4.3.5",
                 "webcomponent-qr-code": "^1.0.5",
                 "yaml": "^1.10.2"
-            }
+            },
+            "devDependencies": {}
         },
         "api": {
             "name": "authentik-api",
-            "version": "0.0.1",
+            "version": "1.0.0",
-            "dependencies": {
+            "devDependencies": {
                 "typescript": "^3.6"
             }
         },
@@ -74,6 +75,7 @@
             "version": "3.9.9",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
             "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==",
+            "dev": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -10204,7 +10206,8 @@
                 "typescript": {
                     "version": "3.9.9",
                     "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
-                    "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w=="
+                    "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==",
+                    "dev": true
                 }
             }
         },

web/src/elements/table/Table.ts

@@ -225,7 +225,14 @@ export abstract class Table<T> extends LitElement {
 
     renderToolbar(): TemplateResult {
         return html`<button
-            @click=${() => { this.fetch(); }}
+            @click=${() => {
+                this.dispatchEvent(
+                    new CustomEvent(EVENT_REFRESH, {
+                        bubbles: true,
+                        composed: true,
+                    })
+                );
+            }}
             class="pf-c-button pf-m-primary">
             ${t`Refresh`}
         </button>`;
@@ -241,7 +248,12 @@ export abstract class Table<T> extends LitElement {
         }
         return html`<ak-table-search value=${ifDefined(this.search)} .onSearch=${(value: string) => {
             this.search = value;
-            this.fetch();
+            this.dispatchEvent(
+                new CustomEvent(EVENT_REFRESH, {
+                    bubbles: true,
+                    composed: true,
+                })
+            );
         }}>
         </ak-table-search>&nbsp;`;
     }
@@ -274,7 +286,15 @@ export abstract class Table<T> extends LitElement {
                     <ak-table-pagination
                         class="pf-c-toolbar__item pf-m-pagination"
                         .pages=${this.data?.pagination}
-                        .pageChangeHandler=${(page: number) => { this.page = page; this.fetch(); }}>
+                        .pageChangeHandler=${(page: number) => {
+                            this.page = page;
+                            this.dispatchEvent(
+                                new CustomEvent(EVENT_REFRESH, {
+                                    bubbles: true,
+                                    composed: true,
+                                })
+                            );
+                        }}>
                     </ak-table-pagination>
                 </div>
             </div>
@@ -300,7 +320,15 @@ export abstract class Table<T> extends LitElement {
                 <ak-table-pagination
                     class="pf-c-toolbar__item pf-m-pagination"
                     .pages=${this.data?.pagination}
-                    .pageChangeHandler=${(page: number) => { this.page = page; this.fetch(); }}>
+                    .pageChangeHandler=${(page: number) => {
+                        this.page = page;
+                        this.dispatchEvent(
+                            new CustomEvent(EVENT_REFRESH, {
+                                bubbles: true,
+                                composed: true,
+                            })
+                        );
+                    }}>
                 </ak-table-pagination>
             </div>`;
     }

web/src/pages/outposts/OutpostHealth.ts

@@ -15,7 +15,7 @@ export class OutpostHealthElement extends LitElement {
     outpostId?: string;
 
     @property({attribute: false})
-    outpostHealth: OutpostHealth[] = [];
+    outpostHealth?: OutpostHealth[];
 
     static get styles(): CSSResult[] {
         return [PFBase, AKGlobal];
@@ -23,7 +23,8 @@ export class OutpostHealthElement extends LitElement {
 
     constructor() {
         super();
-        this.addEventListener(EVENT_REFRESH, () => {
+        window.addEventListener(EVENT_REFRESH, () => {
+            this.outpostHealth = undefined;
             this.firstUpdated();
         });
     }
@@ -38,7 +39,7 @@ export class OutpostHealthElement extends LitElement {
     }
 
     render(): TemplateResult {
-        if (!this.outpostId) {
+        if (!this.outpostId || !this.outpostHealth) {
             return html`<ak-spinner></ak-spinner>`;
         }
         if (this.outpostHealth.length === 0) {