trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/elements: improve table error handling, prevent infinite loading … (#6636)

Browse source 
web/elements: improve table error handling, prevent infinite loading spinner

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L 2023-08-26 17:26:40 +02:00 committed by GitHub
parent 15e872762a
commit 31904f28ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/src/elements/table/Table.ts
View file

@ -23,7 +23,7 @@ import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { Pagination } from "@goauthentik/api";
import { Pagination, ResponseError } from "@goauthentik/api";
export class TableColumn {
title: string;
@ -260,7 +260,9 @@ export abstract class Table<T> extends AKElement {
renderError(): TemplateResult {
return html`<ak-empty-state header="${msg("Failed to fetch objects.")}" icon="fa-times">
<div slot="body">${this.hasError?.toString()}</div>
${this.hasError instanceof ResponseError
? html` <div slot="body">${this.hasError.message}</div> `
: html`<div slot="body">${this.hasError?.toString()}</div>`}
</ak-empty-state>`;
}
@ -268,8 +270,8 @@ export abstract class Table<T> extends AKElement {
if (this.hasError) {
return [this.renderEmpty(this.renderError())];
}
if (!this.data) {
return;
if (!this.data || this.isLoading) {
return [this.renderLoading()];
}
if (this.data.pagination.count === 0) {
return [this.renderEmpty()];
@ -499,7 +501,7 @@ export abstract class Table<T> extends AKElement {
${this.columns().map((col) => col.render(this))}
</tr>
</thead>
${this.isLoading || !this.data ? this.renderLoading() : this.renderRows()}
${this.renderRows()}
</table>
${this.paginated
? html` <div class="pf-c-pagination pf-m-bottom">