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

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

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