diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts index 30b01dc623..544b2b1fa2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.element.ts @@ -1,11 +1,10 @@ +import { UUIButtonState } from '@umbraco-ui/uui'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { customElement, state } from 'lit/decorators.js'; import { ApiError, ProblemDetails, Telemetry, TelemetryLevel, TelemetryResource } from '@umbraco-cms/backend-api'; -export type SettingOption = 'Minimal' | 'Basic' | 'Detailed'; - @customElement('umb-dashboard-telemetry') export class UmbDashboardTelemetryElement extends LitElement { static styles = [ @@ -26,13 +25,16 @@ export class UmbDashboardTelemetryElement extends LitElement { @state() private _errorMessage = ''; + @state() + private _buttonState: UUIButtonState | undefined = undefined; + constructor() { super(); } - connectedCallback(): void { + async connectedCallback() { super.connectedCallback(); - this._setup(); + await this._setup(); } private async _setup() { @@ -59,11 +61,14 @@ export class UmbDashboardTelemetryElement extends LitElement { private _handleSubmit = async (e: CustomEvent) => { e.stopPropagation(); + this._buttonState = 'waiting'; try { await TelemetryResource.postTelemetryLevel({ requestBody: { telemetryLevel: this._telemetryFormData }, }); + this._buttonState = 'success'; } catch (e) { + this._buttonState = 'failed'; if (e instanceof ApiError) { const error = e.body as ProblemDetails; if (e.status === 400) { @@ -75,10 +80,6 @@ export class UmbDashboardTelemetryElement extends LitElement { } }; - disconnectedCallback(): void { - super.disconnectedCallback(); - } - private _handleChange(e: InputEvent) { const target = e.target as HTMLInputElement; this._telemetryFormData = this._telemetryLevels[parseInt(target.value) - 1].telemetryLevel ?? TelemetryLevel.BASIC; @@ -145,7 +146,7 @@ export class UmbDashboardTelemetryElement extends LitElement { will be fully anonymized.

${this._renderSettingSlider()} - + Save