From 569287035d2558521bd7b696c61d561e9e1f6c1b Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 21 Sep 2022 13:49:29 +0200
Subject: [PATCH 1/7] init

---
 src/Umbraco.Web.UI.Client/schemas/api/api.yml |  59 ++++++++++
 .../schemas/generated-schema.ts               |  60 +++++++++++
 .../telemetry/dashboard-telemetry.element.ts  | 102 +++++++++++++++++-
 .../src/core/api/fetcher.ts                   |   3 +
 .../src/core/models/index.ts                  |   1 +
 .../src/mocks/browser-handlers.ts             |   2 +
 .../src/mocks/domains/telemetry.handlers.ts   |  33 ++++++
 .../src/mocks/e2e-handlers.ts                 |   2 +
 .../src/temp-internal-manifests.ts            |  13 +++
 .../temp-schema-generator/api.ts              |   1 +
 .../temp-schema-generator/telemetry.ts        |  46 ++++++++
 11 files changed, 319 insertions(+), 3 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts
 create mode 100644 src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts

diff --git a/src/Umbraco.Web.UI.Client/schemas/api/api.yml b/src/Umbraco.Web.UI.Client/schemas/api/api.yml
index 3c4e98e020..bd68978972 100644
--- a/src/Umbraco.Web.UI.Client/schemas/api/api.yml
+++ b/src/Umbraco.Web.UI.Client/schemas/api/api.yml
@@ -229,6 +229,58 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/ProblemDetails'
+  /telemetry/ConsentLevel:
+    get:
+      operationId: GetConsentLevel
+      responses:
+        '200':
+          description: 200 response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ConsentLevelSettings'
+        default:
+          description: default response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProblemDetails'
+    post:
+      operationId: PostConsentLevel
+      parameters: []
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ConsentLevelSettings'
+        required: true
+      responses:
+        '201':
+          description: 201 response
+        '400':
+          description: 400 response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProblemDetails'
+  /telemetry/ConsentLevels:
+    get:
+      operationId: ConsentLevels
+      responses:
+        '200':
+          description: 200 response
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: string
+        default:
+          description: default response
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProblemDetails'
 components:
   schemas:
     ConsentLevel:
@@ -903,3 +955,10 @@ components:
             type: string
       required:
         - sections
+    ConsentLevelSettings:
+      type: object
+      properties:
+        telemetryLevel:
+          type: string
+      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 fdc1e66117..685d8676ec 100644
--- a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
+++ b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
@@ -46,6 +46,13 @@ export interface paths {
   "/user/sections": {
     get: operations["GetAllowedSections"];
   };
+  "/telemetry/ConsentLevel": {
+    get: operations["GetConsentLevel"];
+    post: operations["PostConsentLevel"];
+  };
+  "/telemetry/ConsentLevels": {
+    get: operations["ConsentLevels"];
+  };
 }
 
 export interface components {
@@ -314,6 +321,9 @@ export interface components {
     AllowedSectionsResponse: {
       sections: string[];
     };
+    ConsentLevelSettings: {
+      telemetryLevel: string;
+    };
   };
 }
 
@@ -541,6 +551,56 @@ export interface operations {
       };
     };
   };
+  GetConsentLevel: {
+    responses: {
+      /** 200 response */
+      200: {
+        content: {
+          "application/json": components["schemas"]["ConsentLevelSettings"];
+        };
+      };
+      /** default response */
+      default: {
+        content: {
+          "application/json": components["schemas"]["ProblemDetails"];
+        };
+      };
+    };
+  };
+  PostConsentLevel: {
+    parameters: {};
+    responses: {
+      /** 201 response */
+      201: unknown;
+      /** 400 response */
+      400: {
+        content: {
+          "application/json": components["schemas"]["ProblemDetails"];
+        };
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["ConsentLevelSettings"];
+      };
+    };
+  };
+  ConsentLevels: {
+    responses: {
+      /** 200 response */
+      200: {
+        content: {
+          "application/json": string[];
+        };
+      };
+      /** default response */
+      default: {
+        content: {
+          "application/json": components["schemas"]["ProblemDetails"];
+        };
+      };
+    };
+  };
 }
 
 export interface external {}
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 ef57dea972..6903c3f625 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,15 +1,111 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+import { customElement, property, state } from 'lit/decorators.js';
+
+import type { TelemetryModel } from '../../../core/models';
+import { getConsentLevel, getConsentLevels } from '../../../core/api/fetcher';
+
+export type SettingOption = 'Minimal' | 'Basic' | 'Detailed';
 
 @customElement('umb-dashboard-telemetry')
 export class UmbDashboardTelemetryElement extends LitElement {
-	static styles = [UUITextStyles, css``];
+	static styles = [
+		UUITextStyles,
+		css`
+			.italic {
+				font-style: italic;
+			}
+		`,
+	];
+
+	@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:<ul>
+			<li>Anonymized site ID, Umbraco version, and packages installed.</li>
+			<li>Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use.</li>
+			<li>System information: Webserver, server OS, server framework, server OS language, and database provider.</li>
+			<li>Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode.</li>
+			</ul>
+			
+			<i>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.</i>`,
+		},
+	];
+
+	@state()
+	private _telemetryFormData?: TelemetryModel['level'] = 'Basic';
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		getConsentLevel({}).then((data) => {
+			console.log(data);
+		});
+		getConsentLevels({}).then((data) => {
+			console.log(data);
+		});
+	}
+
+	disconnectedCallback(): void {
+		super.disconnectedCallback();
+	}
+
+	private _handleChange(e: InputEvent) {
+		const target = e.target as HTMLInputElement;
+		this._telemetryFormData = this._telemetryLevels[parseInt(target.value) - 1].level;
+	}
+
+	private get _selectedTelemetryIndex() {
+		return this._telemetryLevels?.findIndex((x) => x.level === this._telemetryFormData) ?? 0;
+	}
+
+	private get _selectedTelemetry() {
+		return this._telemetryLevels?.find((x) => x.level === this._telemetryFormData) ?? this._telemetryLevels[0];
+	}
+
+	private _renderSettingSlider() {
+		if (!this._telemetryLevels || this._telemetryLevels.length < 1) return;
+
+		return html`
+			<uui-slider
+				@input=${this._handleChange}
+				name="telemetryLevel"
+				label="telemetry level"
+				value=${this._selectedTelemetryIndex + 1}
+				min="1"
+				max=${this._telemetryLevels.length}
+				hide-step-values></uui-slider>
+			<h2>${this._selectedTelemetry.level}</h2>
+			<p>${unsafeHTML(this._selectedTelemetry.description)}</p>
+		`;
+	}
 
 	render() {
 		return html`
 			<uui-box>
-				<h1>Telemetry</h1>
+				<h1>Consent for telemetry data</h1>
+				<div style="max-width:580px">
+					<p>
+						In order to improve Umbraco and add new functionality based on as relevant information as possible, we would
+						like to collect system- and usage information from your installation. Aggregate data will be shared on a
+						regular basis as well as learnings from these metrics. Hopefully, you will help us collect some valuable
+						data.
+						<br /><br />
+						We <strong>WILL NOT</strong> collect any personal data such as content, code, user information, and all data
+						will be fully anonymized.
+					</p>
+					${this._renderSettingSlider()}
+					<uui-button look="primary" color="positive" label="Save telemetry settings">Save</uui-button>
+				</div>
 			</uui-box>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts b/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
index 034bd7851c..e71721e1fe 100644
--- a/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
@@ -21,3 +21,6 @@ export const getUpgradeSettings = fetcher.path('/upgrade/settings').method('get'
 export const PostUpgradeAuthorize = fetcher.path('/upgrade/authorize').method('post').create();
 export const getManifests = fetcher.path('/manifests').method('get').create();
 export const getPackagesInstalled = fetcher.path('/manifests/packages/installed').method('get').create();
+export const getConsentLevels = fetcher.path('/telemetry/ConsentLevels').method('get').create();
+export const getConsentLevel = fetcher.path('/telemetry/ConsentLevel').method('get').create();
+export const postConsentLevel = fetcher.path('/telemetry/ConsentLevel').method('post').create();
diff --git a/src/Umbraco.Web.UI.Client/src/core/models/index.ts b/src/Umbraco.Web.UI.Client/src/core/models/index.ts
index 80f628566e..c829e7747e 100644
--- a/src/Umbraco.Web.UI.Client/src/core/models/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/models/index.ts
@@ -30,6 +30,7 @@ export type ManifestEntrypoint = components['schemas']['IManifestEntrypoint'];
 export type ManifestCustom = components['schemas']['IManifestCustom'];
 export type ManifestPackageView = components['schemas']['IManifestPackageView'];
 export type PackageInstalled = components['schemas']['PackageInstalled'];
+export type ConsentLevelSettings = components['schemas']['ConsentLevelSettings'];
 
 export type ManifestElementType =
 	| ManifestSection
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
index edd2b8e1ca..9a68d0850b 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
@@ -7,6 +7,7 @@ import * as serverHandlers from './domains/server.handlers';
 import { handlers as upgradeHandlers } from './domains/upgrade.handlers';
 import { handlers as userHandlers } from './domains/user.handlers';
 import { handlers as treeHandlers } from './domains/entity.handlers';
+import { handlers as telemetryHandlers } from './domains/telemetry.handlers';
 
 const handlers = [
 	serverHandlers.serverVersionHandler,
@@ -18,6 +19,7 @@ const handlers = [
 	...documentTypeHandlers,
 	...treeHandlers,
 	...manifestsHandlers.default,
+	...telemetryHandlers,
 ];
 
 switch (import.meta.env.VITE_UMBRACO_INSTALL_STATUS) {
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
new file mode 100644
index 0000000000..fe8cff9052
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/telemetry.handlers.ts
@@ -0,0 +1,33 @@
+import { rest } from 'msw';
+
+import umbracoPath from '../../core/helpers/umbraco-path';
+import type { ConsentLevelSettings } from '../../core/models';
+
+let telemetryLevel = 'Basic';
+
+export const handlers = [
+	rest.get(umbracoPath('/telemetry/ConsentLevel'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<ConsentLevelSettings>({
+				telemetryLevel,
+			})
+		);
+	}),
+	rest.get(umbracoPath('/telemetry/ConsentLevels'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<string[]>(['Minimal', 'Basic', 'Detailed'])
+		);
+	}),
+
+	rest.post<ConsentLevelSettings>(umbracoPath('/telemetry/ConsentLevel'), async (_req, res, ctx) => {
+		telemetryLevel = (await _req.json<ConsentLevelSettings>()).telemetryLevel;
+		return res(
+			// Respond with a 200 status code
+			ctx.status(201)
+		);
+	}),
+];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
index 09e9121f40..cea5fbf27e 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
@@ -6,6 +6,7 @@ import * as manifestsHandlers from './domains/manifests.handlers';
 import * as serverHandlers from './domains/server.handlers';
 import { handlers as upgradeHandlers } from './domains/upgrade.handlers';
 import { handlers as userHandlers } from './domains/user.handlers';
+import { handlers as telemetryHandlers } from './domains/telemetry.handlers';
 
 export const handlers = [
 	serverHandlers.serverRunningHandler,
@@ -18,4 +19,5 @@ export const handlers = [
 	...dataTypeHandlers,
 	...documentTypeHandlers,
 	...manifestsHandlers.default,
+	...telemetryHandlers,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
index d24a1ab104..8ad363fc9b 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
@@ -94,6 +94,19 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 			weight: 10,
 		},
 	},
+	{
+		type: 'dashboard',
+		alias: 'Umb.Dashboard.Telemetry',
+		name: 'Telemetry',
+		elementName: 'umb-dashboard-telemetry',
+		loader: () => import('./backoffice/dashboards/telemetry/dashboard-telemetry.element'),
+		meta: {
+			label: 'Telemetry Data',
+			sections: ['Umb.Section.Settings'],
+			pathname: 'telemetry', // TODO: how do we want to support pretty urls?
+			weight: 0,
+		},
+	},
 	{
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.ExamineManagement',
diff --git a/src/Umbraco.Web.UI.Client/temp-schema-generator/api.ts b/src/Umbraco.Web.UI.Client/temp-schema-generator/api.ts
index c7eb465583..583d6e20e7 100644
--- a/src/Umbraco.Web.UI.Client/temp-schema-generator/api.ts
+++ b/src/Umbraco.Web.UI.Client/temp-schema-generator/api.ts
@@ -3,6 +3,7 @@ import './manifests';
 import './server';
 import './upgrader';
 import './user';
+import './telemetry';
 
 import { api } from '@airtasker/spot';
 
diff --git a/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts b/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts
new file mode 100644
index 0000000000..2e490f0ffc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/temp-schema-generator/telemetry.ts
@@ -0,0 +1,46 @@
+import { body, defaultResponse, endpoint, request, response } from '@airtasker/spot';
+
+import { ProblemDetails } from './models';
+
+@endpoint({
+	method: 'GET',
+	path: '/telemetry/ConsentLevel',
+})
+export class GetConsentLevel {
+	@response({ status: 200 })
+	success(@body body: ConsentLevelSettings) {}
+
+	@defaultResponse
+	default(@body body: ProblemDetails) {}
+}
+
+@endpoint({
+	method: 'GET',
+	path: '/telemetry/ConsentLevels',
+})
+export class ConsentLevels {
+	@response({ status: 200 })
+	success(@body body: string[]) {}
+
+	@defaultResponse
+	default(@body body: ProblemDetails) {}
+}
+
+@endpoint({
+	method: 'POST',
+	path: '/telemetry/ConsentLevel',
+})
+export class PostConsentLevel {
+	@request
+	request(@body body: ConsentLevelSettings) {}
+
+	@response({ status: 201 })
+	success() {}
+
+	@response({ status: 400 })
+	badRequest(@body body: ProblemDetails) {}
+}
+
+export interface ConsentLevelSettings {
+	telemetryLevel: string;
+}

From 2ff38ab7064f33eb8f49c2bb6773c7fc005c7776 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 21 Sep 2022 16:01:02 +0200
Subject: [PATCH 2/7] api call for telemetry data settings

---
 src/Umbraco.Web.UI.Client/schemas/api/api.yml |   2 +-
 .../schemas/generated-schema.ts               |   2 +-
 .../telemetry/dashboard-telemetry.element.ts  | 109 +++++++++++++-----
 .../src/mocks/domains/telemetry.handlers.ts   |   6 +-
 .../temp-schema-generator/telemetry.ts        |   3 +-
 5 files changed, 85 insertions(+), 37 deletions(-)

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:<ul>
-			<li>Anonymized site ID, Umbraco version, and packages installed.</li>
-			<li>Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use.</li>
-			<li>System information: Webserver, server OS, server framework, server OS language, and database provider.</li>
-			<li>Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode.</li>
-			</ul>
-			
-			<i>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.</i>`,
-		},
-	];
+	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<SubmitEvent>) => {
+		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:<ul>
+				<li>Anonymized site ID, Umbraco version, and packages installed.</li>
+				<li>Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use.</li>
+				<li>System information: Webserver, server OS, server framework, server OS language, and database provider.</li>
+				<li>Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode.</li>
+				</ul>
+				
+				<i>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.</i>`;
+			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></uui-slider>
-			<h2>${this._selectedTelemetry.level}</h2>
-			<p>${unsafeHTML(this._selectedTelemetry.description)}</p>
+			<h2>${this._selectedTelemetry}</h2>
+			<p>${unsafeHTML(this._selectedTelemetryDescription)}</p>
 		`;
 	}
 
@@ -104,7 +149,9 @@ export class UmbDashboardTelemetryElement extends LitElement {
 						will be fully anonymized.
 					</p>
 					${this._renderSettingSlider()}
-					<uui-button look="primary" color="positive" label="Save telemetry settings">Save</uui-button>
+					<uui-button look="primary" color="positive" label="Save telemetry settings" @click="${this._handleSubmit}">
+						Save
+					</uui-button>
 				</div>
 			</uui-box>
 		`;
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<string[]>(['Minimal', 'Basic', 'Detailed'])
+			ctx.json<TelemetryModel['level'][]>(['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'];
 }

From 7a5837a3dab1767c780f85c92dc86b036f68d073 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 21 Sep 2022 16:02:41 +0200
Subject: [PATCH 3/7] remove unused state

---
 .../dashboards/telemetry/dashboard-telemetry.element.ts        | 3 ---
 1 file changed, 3 deletions(-)

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 6cf0d1a9cd..f14545deba 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
@@ -23,9 +23,6 @@ export class UmbDashboardTelemetryElement extends LitElement {
 	@state()
 	private _telemetryFormData: TelemetryModel['level'] = 'Basic';
 
-	@state()
-	private _description = 'We will send an anonymized site ID, Umbraco version, and packages installed.';
-
 	@state()
 	private _telemetryLevels: TelemetryModel['level'][] = [];
 

From e1e7c9f4acd02f9a42d5063aa1339f2aa28f936b Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 22 Sep 2022 08:59:05 +0200
Subject: [PATCH 4/7] small fix

---
 .../dashboards/telemetry/dashboard-telemetry.element.ts  | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

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 f14545deba..a710a700bc 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
@@ -39,16 +39,12 @@ export class UmbDashboardTelemetryElement extends LitElement {
 	}
 
 	private async _setup() {
-		// All telemetry levels
 		try {
 			const consentLevels = await getConsentLevels({});
-			// TODO ....
-			this._telemetryLevels = consentLevels.data;
+			this._telemetryLevels = consentLevels.data as TelemetryModel['level'][];
 		} catch (e) {
 			this._errorMessage;
 		}
-
-		// Current setting
 		try {
 			const consentSetting = await getConsentLevel({});
 			this._telemetryFormData = consentSetting.data.telemetryLevel;
@@ -61,7 +57,6 @@ export class UmbDashboardTelemetryElement extends LitElement {
 
 	private _handleSubmit = async (e: CustomEvent<SubmitEvent>) => {
 		e.stopPropagation();
-
 		try {
 			await postConsentLevel({ telemetryLevel: this._telemetryFormData });
 		} catch (e) {
@@ -110,7 +105,7 @@ export class UmbDashboardTelemetryElement extends LitElement {
 				<i>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.</i>`;
 			default:
-				return 'Something may have gone wrong';
+				return 'Could not find description for this setting';
 		}
 	}
 

From 528734fb3522e43a75890fed701b9231b875b845 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 22 Sep 2022 09:08:52 +0200
Subject: [PATCH 5/7] calls returns as telemetrymodellvl

---
 .../dashboards/telemetry/dashboard-telemetry.element.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 a710a700bc..dc9fc75d7d 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
@@ -47,7 +47,7 @@ export class UmbDashboardTelemetryElement extends LitElement {
 		}
 		try {
 			const consentSetting = await getConsentLevel({});
-			this._telemetryFormData = consentSetting.data.telemetryLevel;
+			this._telemetryFormData = consentSetting.data.telemetryLevel as TelemetryModel['level'];
 		} catch (e) {
 			if (e instanceof getConsentLevel.Error) {
 				this._errorMessage = e.data.detail;

From 922627cba3688ac7c566dcdb76ed840dfa05f3f2 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 28 Sep 2022 13:54:09 +0200
Subject: [PATCH 6/7] added unit test

---
 .../telemetry/dashboard-telemetry.test.ts     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.test.ts
new file mode 100644
index 0000000000..01b34283e4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/telemetry/dashboard-telemetry.test.ts
@@ -0,0 +1,19 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { UmbDashboardTelemetryElement } from './dashboard-telemetry.element';
+
+describe('UmbDashboardTelemetryElement', () => {
+	let element: UmbDashboardTelemetryElement;
+
+	beforeEach(async () => {
+		element = await fixture(html`<umb-dashboard-telemetry></umb-dashboard-telemetry>`);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbDashboardTelemetryElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).to.be.accessible(defaultA11yConfig);
+	});
+});

From fdcee8b4d90604ba342b720caea2518999632e9c Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 7 Oct 2022 09:28:15 +0200
Subject: [PATCH 7/7] build fix

---
 src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
index c75c729eed..2f04f670b8 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
@@ -8,11 +8,9 @@ import { handlers as publishedStatusHandlers } from './domains/published-status.
 import * as serverHandlers from './domains/server.handlers';
 import { handlers as upgradeHandlers } from './domains/upgrade.handlers';
 import { handlers as userHandlers } from './domains/user.handlers';
-import { handlers as treeHandlers } from './domains/entity.handlers';
 import { handlers as telemetryHandlers } from './domains/telemetry.handlers';
 import { handlers as propertyEditorHandlers } from './domains/property-editor.handlers';
 
-
 const handlers = [
 	serverHandlers.serverVersionHandler,
 	...contentHandlers,