diff --git a/src/Umbraco.Web.UI.Client/schemas/api/api.yml b/src/Umbraco.Web.UI.Client/schemas/api/api.yml index bd68978972..97c61b392c 100644 --- a/src/Umbraco.Web.UI.Client/schemas/api/api.yml +++ b/src/Umbraco.Web.UI.Client/schemas/api/api.yml @@ -959,6 +959,6 @@ components: type: object properties: telemetryLevel: - type: string + $ref: '#/components/schemas/ConsentLevel' required: - telemetryLevel diff --git a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts index 685d8676ec..a5dd021972 100644 --- a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts +++ b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts @@ -322,7 +322,7 @@ export interface components { sections: string[]; }; ConsentLevelSettings: { - telemetryLevel: string; + telemetryLevel: components["schemas"]["ConsentLevel"]; }; }; } 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 6903c3f625..6cf0d1a9cd 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 @@ -2,10 +2,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import { customElement, property, state } from 'lit/decorators.js'; +import { customElement, state } from 'lit/decorators.js'; import type { TelemetryModel } from '../../../core/models'; -import { getConsentLevel, getConsentLevels } from '../../../core/api/fetcher'; +import { getConsentLevel, getConsentLevels, postConsentLevel } from '../../../core/api/fetcher'; export type SettingOption = 'Minimal' | 'Basic' | 'Detailed'; @@ -21,25 +21,16 @@ export class UmbDashboardTelemetryElement extends LitElement { ]; @state() - private _telemetryLevels: TelemetryModel[] = [ - { level: 'Minimal', description: 'We will only send an anonymized site ID to let us know that the site exists.' }, - { level: 'Basic', description: 'We will send an anonymized site ID, Umbraco version, and packages installed.' }, - { - level: 'Detailed', - description: `We will send: - - We might change what we send on the Detailed level in the future. If so, it will be listed above. - By choosing "Detailed" you agree to current and future anonymized information being collected.`, - }, - ]; + private _telemetryFormData: TelemetryModel['level'] = 'Basic'; @state() - private _telemetryFormData?: TelemetryModel['level'] = 'Basic'; + private _description = 'We will send an anonymized site ID, Umbraco version, and packages installed.'; + + @state() + private _telemetryLevels: TelemetryModel['level'][] = []; + + @state() + private _errorMessage = ''; constructor() { super(); @@ -47,29 +38,83 @@ export class UmbDashboardTelemetryElement extends LitElement { connectedCallback(): void { super.connectedCallback(); - getConsentLevel({}).then((data) => { - console.log(data); - }); - getConsentLevels({}).then((data) => { - console.log(data); - }); + this._setup(); } + private async _setup() { + // All telemetry levels + try { + const consentLevels = await getConsentLevels({}); + // TODO .... + this._telemetryLevels = consentLevels.data; + } catch (e) { + this._errorMessage; + } + + // Current setting + try { + const consentSetting = await getConsentLevel({}); + this._telemetryFormData = consentSetting.data.telemetryLevel; + } catch (e) { + if (e instanceof getConsentLevel.Error) { + this._errorMessage = e.data.detail; + } + } + } + + private _handleSubmit = async (e: CustomEvent) => { + e.stopPropagation(); + + try { + await postConsentLevel({ telemetryLevel: this._telemetryFormData }); + } catch (e) { + if (e instanceof postConsentLevel.Error) { + const error = e.getActualType(); + if (error.status === 400) { + this._errorMessage = error.data.detail || 'Unknown error, please try again'; + } + } else { + this._errorMessage = 'Unknown error, please try again'; + } + } + }; + disconnectedCallback(): void { super.disconnectedCallback(); } private _handleChange(e: InputEvent) { const target = e.target as HTMLInputElement; - this._telemetryFormData = this._telemetryLevels[parseInt(target.value) - 1].level; + this._telemetryFormData = this._telemetryLevels[parseInt(target.value) - 1]; } private get _selectedTelemetryIndex() { - return this._telemetryLevels?.findIndex((x) => x.level === this._telemetryFormData) ?? 0; + return this._telemetryLevels?.findIndex((x) => x === this._telemetryFormData) ?? 0; } private get _selectedTelemetry() { - return this._telemetryLevels?.find((x) => x.level === this._telemetryFormData) ?? this._telemetryLevels[0]; + return this._telemetryLevels?.find((x) => x === this._telemetryFormData) ?? this._telemetryLevels[0]; + } + + private get _selectedTelemetryDescription() { + switch (this._selectedTelemetry) { + case 'Minimal': + return 'We will only send an anonymized site ID to let us know that the site exists.'; + case 'Basic': + return 'We will send an anonymized site ID, Umbraco version, and packages installed.'; + case 'Detailed': + return `We will send: + + We might change what we send on the Detailed level in the future. If so, it will be listed above. + By choosing "Detailed" you agree to current and future anonymized information being collected.`; + default: + return 'Something may have gone wrong'; + } } private _renderSettingSlider() { @@ -84,8 +129,8 @@ export class UmbDashboardTelemetryElement extends LitElement { min="1" max=${this._telemetryLevels.length} hide-step-values> -

${this._selectedTelemetry.level}

-

${unsafeHTML(this._selectedTelemetry.description)}

+

${this._selectedTelemetry}

+

${unsafeHTML(this._selectedTelemetryDescription)}

`; } @@ -104,7 +149,9 @@ export class UmbDashboardTelemetryElement extends LitElement { will be fully anonymized.

${this._renderSettingSlider()} - Save + + Save + `; diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts index fe8cff9052..84555c27a7 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts @@ -1,9 +1,9 @@ import { rest } from 'msw'; import umbracoPath from '../../core/helpers/umbraco-path'; -import type { ConsentLevelSettings } from '../../core/models'; +import type { ConsentLevelSettings, TelemetryModel } from '../../core/models'; -let telemetryLevel = 'Basic'; +let telemetryLevel: TelemetryModel['level'] = 'Basic'; export const handlers = [ rest.get(umbracoPath('/telemetry/ConsentLevel'), (_req, res, ctx) => { @@ -19,7 +19,7 @@ export const handlers = [ return res( // Respond with a 200 status code ctx.status(200), - ctx.json(['Minimal', 'Basic', 'Detailed']) + ctx.json(['Minimal', 'Basic', 'Detailed']) ); }), diff --git a/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts b/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts index 2e490f0ffc..3ebd5f85da 100644 --- a/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts +++ b/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts @@ -1,4 +1,5 @@ import { body, defaultResponse, endpoint, request, response } from '@airtasker/spot'; +import { TelemetryModel } from './installer'; import { ProblemDetails } from './models'; @@ -42,5 +43,5 @@ export class PostConsentLevel { } export interface ConsentLevelSettings { - telemetryLevel: string; + telemetryLevel: TelemetryModel['level']; }