web/components: improve error handling in ak-search-select (#8228)
* unrelated: remove deprecated sentry tracing package since its in the main package no of course this does not fix the circular import, sigh Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix syntax error in group view page Signed-off-by: Jens Langhammer <jens@goauthentik.io> * improve error handling in search-select Signed-off-by: Jens Langhammer <jens@goauthentik.io> * remove requiredness from flow input for invitation Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix dark theme for date and datetime input fields' picker button Signed-off-by: Jens Langhammer <jens@goauthentik.io> * update locale Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
@ -1,12 +1,13 @@
|
||||
import { APIErrorTypes, parseAPIError } from "@goauthentik/app/common/errors";
|
||||
import { PreventFormSubmit } from "@goauthentik/app/elements/forms/helpers";
|
||||
import { EVENT_REFRESH } from "@goauthentik/common/constants";
|
||||
import { ascii_letters, digits, groupBy, randomString } from "@goauthentik/common/utils";
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { msg, str } from "@lit/localize";
|
||||
import { TemplateResult, html, render } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { styleMap } from "lit/directives/style-map.js";
|
||||
|
||||
import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
|
||||
@ -15,6 +16,8 @@ import PFFormControl from "@patternfly/patternfly/components/FormControl/form-co
|
||||
import PFSelect from "@patternfly/patternfly/components/Select/select.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
import { ResponseError } from "@goauthentik/api";
|
||||
|
||||
type Group<T> = [string, T[]];
|
||||
|
||||
@customElement("ak-search-select")
|
||||
@ -99,6 +102,9 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
|
||||
|
||||
isFetchingData = false;
|
||||
|
||||
@state()
|
||||
error?: APIErrorTypes;
|
||||
|
||||
static styles = [PFBase, PFForm, PFFormControl, PFSelect];
|
||||
|
||||
constructor() {
|
||||
@ -139,15 +145,23 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
|
||||
return;
|
||||
}
|
||||
this.isFetchingData = true;
|
||||
this.fetchObjects(this.query).then((objects) => {
|
||||
objects.forEach((obj) => {
|
||||
if (this.selected && this.selected(obj, objects || [])) {
|
||||
this.selectedObject = obj;
|
||||
}
|
||||
this.fetchObjects(this.query)
|
||||
.then((objects) => {
|
||||
objects.forEach((obj) => {
|
||||
if (this.selected && this.selected(obj, objects || [])) {
|
||||
this.selectedObject = obj;
|
||||
}
|
||||
});
|
||||
this.objects = objects;
|
||||
this.isFetchingData = false;
|
||||
})
|
||||
.catch((exc: ResponseError) => {
|
||||
this.isFetchingData = false;
|
||||
this.objects = undefined;
|
||||
parseAPIError(exc).then((err) => {
|
||||
this.error = err;
|
||||
});
|
||||
});
|
||||
this.objects = objects;
|
||||
this.isFetchingData = false;
|
||||
});
|
||||
}
|
||||
|
||||
connectedCallback(): void {
|
||||
@ -307,11 +321,19 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
|
||||
}
|
||||
|
||||
get renderedValue() {
|
||||
// prettier-ignore
|
||||
return (!this.objects) ? msg("Loading...")
|
||||
: (this.selectedObject) ? this.renderElement(this.selectedObject)
|
||||
: (this.blankable) ? this.emptyOption
|
||||
: "";
|
||||
if (this.error) {
|
||||
return msg(str`Failed to fetch objects: ${this.error.detail}`);
|
||||
}
|
||||
if (!this.objects) {
|
||||
return msg("Loading...");
|
||||
}
|
||||
if (this.selectedObject) {
|
||||
return this.renderElement(this.selectedObject);
|
||||
}
|
||||
if (this.blankable) {
|
||||
return this.emptyOption;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
|
||||
Reference in New Issue
Block a user