Merge remote-tracking branch 'origin/main' into feature/property-editor-content-picker

# Conflicts: # src/core/controller/controller-host.mixin.ts
2023-01-12 10:42:57 +01:00
parent 6587346c89 ab426ff6f7
commit 22c1efbdba
6 changed files with 163 additions and 47 deletions
--- a/src/Umbraco.Web.UI.Client/.eslintrc.json
+++ b/src/Umbraco.Web.UI.Client/.eslintrc.json
@@ -1,18 +1,18 @@
 {
 	"ignorePatterns": ["vite.*.ts"],
 	"root": true,
+	"plugins": ["eslint-plugin-local-rules"],
 	"extends": ["eslint:recommended", "plugin:import/recommended", "prettier"],
-	"plugins": ["import", "eslint-plugin-local-rules"],
 	"overrides": [
 		{
 			"files": ["**/*.ts"],
-			"plugins": ["import", "@typescript-eslint", "lit", "lit-a11y"],
 			"extends": [
 				"eslint:recommended",
 				"plugin:import/recommended",
 				"plugin:import/typescript",
 				"plugin:@typescript-eslint/eslint-recommended",
 				"plugin:@typescript-eslint/recommended",
+				"plugin:wc/recommended",
 				"plugin:lit/recommended",
 				"plugin:lit-a11y/recommended",
 				"plugin:storybook/recommended",
@@ -34,7 +34,8 @@
 				"import/no-unresolved": "error",
 				"import/order": "warn",
 				"local-rules/bad-type-import": "error",
-				"local-rules/no-direct-api-import": "warn"
+				"local-rules/no-direct-api-import": "warn",
+				"@typescript-eslint/no-non-null-assertion": "off"
 			},
 			"settings": {
 				"import/parsers": {
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -20,7 +20,6 @@
 				"element-internals-polyfill": "^1.1.18",
 				"lit": "^2.6.0",
 				"lodash": "^4.17.21",
-				"openapi-typescript-fetch": "^1.1.3",
 				"router-slot": "^1.5.5",
 				"rxjs": "^7.8.0",
 				"uuid": "^9.0.0"
@@ -55,7 +54,8 @@
 				"eslint-plugin-lit": "^1.8.0",
 				"eslint-plugin-lit-a11y": "^2.3.0",
 				"eslint-plugin-local-rules": "^1.3.2",
-				"eslint-plugin-storybook": "^0.6.8",
+				"eslint-plugin-storybook": "^0.6.10",
+				"eslint-plugin-wc": "^1.4.0",
 				"lit-html": "^2.6.0",
 				"msw": "^0.49.2",
 				"msw-storybook-addon": "^1.6.3",
@@ -13789,9 +13789,9 @@
 			"dev": true
 		},
 		"node_modules/eslint-plugin-storybook": {
-			"version": "0.6.8",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.8.tgz",
-			"integrity": "sha512-57vyICs19ODx0ql+shM0hKFn4Nvwcrdw29KJbj6QKGZ+Y47aDws/lvBx65++F0vpEsr0lkZljSdUbxWjIP2+Rw==",
+			"version": "0.6.10",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.10.tgz",
+			"integrity": "sha512-3DKXRey06EhwnTKaG6fgMqGTy4C3z6Ikyv6VVixO5BvaExWQe3yGWIAufrC2Et0OaAMIaMwx9KWjqb/Wq+JxPg==",
 			"dev": true,
 			"dependencies": {
 				"@storybook/csf": "^0.0.1",
@@ -13815,6 +13815,19 @@
 				"lodash": "^4.17.15"
 			}
 		},
+		"node_modules/eslint-plugin-wc": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-1.4.0.tgz",
+			"integrity": "sha512-AmoKhJyBNcS3I+dbS/JTmRSq4REUvQ/JJCeWJezlK8gqTsdr5JD+EAvHldH/tVvU+l6qR2Tykga5hTINP9zS8A==",
+			"dev": true,
+			"dependencies": {
+				"is-valid-element-name": "^1.0.0",
+				"js-levenshtein-esm": "^1.2.0"
+			},
+			"peerDependencies": {
+				"eslint": ">=5"
+			}
+		},
 		"node_modules/eslint-rule-extender": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/eslint-rule-extender/-/eslint-rule-extender-0.0.1.tgz",
@@ -17314,6 +17327,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/is-potential-custom-element-name": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+			"dev": true
+		},
 		"node_modules/is-reference": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz",
@@ -17470,6 +17489,15 @@
 			"dev": true,
 			"optional": true
 		},
+		"node_modules/is-valid-element-name": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-valid-element-name/-/is-valid-element-name-1.0.0.tgz",
+			"integrity": "sha512-GZITEJY2LkSjQfaIPBha7eyZv+ge0PhBR7KITeCCWvy7VBQrCUdFkvpI+HrAPQjVtVjy1LvlEkqQTHckoszruw==",
+			"dev": true,
+			"dependencies": {
+				"is-potential-custom-element-name": "^1.0.0"
+			}
+		},
 		"node_modules/is-weakmap": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -17884,6 +17912,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/js-levenshtein-esm": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/js-levenshtein-esm/-/js-levenshtein-esm-1.2.0.tgz",
+			"integrity": "sha512-fzreKVq1eD7eGcQr7MtRpQH94f8gIfhdrc7yeih38xh684TNMK9v5aAu2wxfIRMk/GpAJRrzcirMAPIaSDaByQ==",
+			"dev": true
+		},
 		"node_modules/js-sdsl": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
@@ -21296,15 +21330,6 @@
 				"node": ">=12"
 			}
 		},
-		"node_modules/openapi-typescript-fetch": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/openapi-typescript-fetch/-/openapi-typescript-fetch-1.1.3.tgz",
-			"integrity": "sha512-smLZPck4OkKMNExcw8jMgrMOGgVGx2N/s6DbKL2ftNl77g5HfoGpZGFy79RBzU/EkaO0OZpwBnslfdBfh7ZcWg==",
-			"engines": {
-				"node": ">= 12.0.0",
-				"npm": ">= 7.0.0"
-			}
-		},
 		"node_modules/optionator": {
 			"version": "0.9.1",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -40001,9 +40026,9 @@
 			"dev": true
 		},
 		"eslint-plugin-storybook": {
-			"version": "0.6.8",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.8.tgz",
-			"integrity": "sha512-57vyICs19ODx0ql+shM0hKFn4Nvwcrdw29KJbj6QKGZ+Y47aDws/lvBx65++F0vpEsr0lkZljSdUbxWjIP2+Rw==",
+			"version": "0.6.10",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.10.tgz",
+			"integrity": "sha512-3DKXRey06EhwnTKaG6fgMqGTy4C3z6Ikyv6VVixO5BvaExWQe3yGWIAufrC2Et0OaAMIaMwx9KWjqb/Wq+JxPg==",
 			"dev": true,
 			"requires": {
 				"@storybook/csf": "^0.0.1",
@@ -40023,6 +40048,16 @@
 				}
 			}
 		},
+		"eslint-plugin-wc": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-1.4.0.tgz",
+			"integrity": "sha512-AmoKhJyBNcS3I+dbS/JTmRSq4REUvQ/JJCeWJezlK8gqTsdr5JD+EAvHldH/tVvU+l6qR2Tykga5hTINP9zS8A==",
+			"dev": true,
+			"requires": {
+				"is-valid-element-name": "^1.0.0",
+				"js-levenshtein-esm": "^1.2.0"
+			}
+		},
 		"eslint-rule-extender": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/eslint-rule-extender/-/eslint-rule-extender-0.0.1.tgz",
@@ -42571,6 +42606,12 @@
 				"isobject": "^3.0.1"
 			}
 		},
+		"is-potential-custom-element-name": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+			"dev": true
+		},
 		"is-reference": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz",
@@ -42679,6 +42720,15 @@
 			"dev": true,
 			"optional": true
 		},
+		"is-valid-element-name": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-valid-element-name/-/is-valid-element-name-1.0.0.tgz",
+			"integrity": "sha512-GZITEJY2LkSjQfaIPBha7eyZv+ge0PhBR7KITeCCWvy7VBQrCUdFkvpI+HrAPQjVtVjy1LvlEkqQTHckoszruw==",
+			"dev": true,
+			"requires": {
+				"is-potential-custom-element-name": "^1.0.0"
+			}
+		},
 		"is-weakmap": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -42990,6 +43040,12 @@
 			"integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==",
 			"dev": true
 		},
+		"js-levenshtein-esm": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/js-levenshtein-esm/-/js-levenshtein-esm-1.2.0.tgz",
+			"integrity": "sha512-fzreKVq1eD7eGcQr7MtRpQH94f8gIfhdrc7yeih38xh684TNMK9v5aAu2wxfIRMk/GpAJRrzcirMAPIaSDaByQ==",
+			"dev": true
+		},
 		"js-sdsl": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
@@ -45572,11 +45628,6 @@
 				}
 			}
 		},
-		"openapi-typescript-fetch": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/openapi-typescript-fetch/-/openapi-typescript-fetch-1.1.3.tgz",
-			"integrity": "sha512-smLZPck4OkKMNExcw8jMgrMOGgVGx2N/s6DbKL2ftNl77g5HfoGpZGFy79RBzU/EkaO0OZpwBnslfdBfh7ZcWg=="
-		},
 		"optionator": {
 			"version": "0.9.1",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -35,7 +35,7 @@
 		"test": "web-test-runner --coverage",
 		"test:watch": "web-test-runner --watch",
 		"test:e2e": "npx playwright test",
-		"lint": "eslint --cache src e2e",
+		"lint": "eslint src e2e",
 		"lint:fix": "npm run lint -- --fix",
 		"format": "prettier 'src/**/*.ts'",
 		"format:fix": "npm run format -- --write",
@@ -56,17 +56,16 @@
 	},
 	"dependencies": {
 		"@umbraco-ui/uui": "^1.1.0",
+		"@umbraco-ui/uui-color-swatch": "file:umbraco-ui-uui-color-swatch-0.0.0.tgz",
+		"@umbraco-ui/uui-color-swatches": "file:umbraco-ui-uui-color-swatches-2.0.0.tgz",
 		"@umbraco-ui/uui-css": "^1.0.0",
 		"@umbraco-ui/uui-modal": "file:umbraco-ui-uui-modal-0.0.0.tgz",
 		"@umbraco-ui/uui-modal-container": "file:umbraco-ui-uui-modal-container-0.0.0.tgz",
 		"@umbraco-ui/uui-modal-dialog": "file:umbraco-ui-uui-modal-dialog-0.0.0.tgz",
 		"@umbraco-ui/uui-modal-sidebar": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz",
-		"@umbraco-ui/uui-color-swatches": "file:umbraco-ui-uui-color-swatches-2.0.0.tgz",
-		"@umbraco-ui/uui-color-swatch": "file:umbraco-ui-uui-color-swatch-0.0.0.tgz",
 		"element-internals-polyfill": "^1.1.18",
 		"lit": "^2.6.0",
 		"lodash": "^4.17.21",
-		"openapi-typescript-fetch": "^1.1.3",
 		"router-slot": "^1.5.5",
 		"rxjs": "^7.8.0",
 		"uuid": "^9.0.0"
@@ -101,7 +100,8 @@
 		"eslint-plugin-lit": "^1.8.0",
 		"eslint-plugin-lit-a11y": "^2.3.0",
 		"eslint-plugin-local-rules": "^1.3.2",
-		"eslint-plugin-storybook": "^0.6.8",
+		"eslint-plugin-storybook": "^0.6.10",
+		"eslint-plugin-wc": "^1.4.0",
 		"lit-html": "^2.6.0",
 		"msw": "^0.49.2",
 		"msw-storybook-addon": "^1.6.3",
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-grid.element.ts
@@ -74,23 +74,36 @@ export class UmbCollectionViewsMediaGridElement extends UmbLitElement {

 	constructor() {
 		super();
-		document.addEventListener('dragenter', () => {
-			this.toggleAttribute('dragging', true);
-		});
-		document.addEventListener('dragleave', () => {
-			this.toggleAttribute('dragging', false);
-		});
-		document.addEventListener('drop', (e) => {
-			e.preventDefault();
-			this.toggleAttribute('dragging', false);
-		});
+		document.addEventListener('dragenter', this._handleDragEnter.bind(this));
+		document.addEventListener('dragleave', this._handleDragLeave.bind(this));
+		document.addEventListener('drop', this._handleDrop.bind(this));
 		this.consumeContext('umbCollectionContext', (instance) => {
-			console.log("umbCollectionContext", instance)
+			console.log('umbCollectionContext', instance);
 			this._collectionContext = instance;
 			this._observeCollectionContext();
 		});
 	}

+	disconnectedCallback(): void {
+		super.disconnectedCallback();
+		document.removeEventListener('dragenter', this._handleDragEnter.bind(this));
+		document.removeEventListener('dragleave', this._handleDragLeave.bind(this));
+		document.removeEventListener('drop', this._handleDrop.bind(this));
+	}
+
+	private _handleDragEnter() {
+		this.toggleAttribute('dragging', true);
+	}
+
+	private _handleDragLeave() {
+		this.toggleAttribute('dragging', false);
+	}
+
+	private _handleDrop(e: DragEvent) {
+		e.preventDefault();
+		this.toggleAttribute('dragging', false);
+	}
+
 	private _observeCollectionContext() {
 		if (!this._collectionContext) return;

@@ -144,11 +157,13 @@ export class UmbCollectionViewsMediaGridElement extends UmbLitElement {
 				label="Drop files here"
 				accept=""></uui-file-dropzone>
 			<div id="media-files">
-				${this._mediaItems ? repeat(
-					this._mediaItems,
-					(file, index) => file.key + index,
-					(file) => this._renderMediaItem(file)
-				) : ''}
+				${this._mediaItems
+					? repeat(
+							this._mediaItems,
+							(file, index) => file.key + index,
+							(file) => this._renderMediaItem(file)
+					  )
+					: ''}
 			</div>
 		`;
 	}
--- a/src/Umbraco.Web.UI.Client/src/core/controller/controller-host.mixin.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller/controller-host.mixin.ts
@@ -50,7 +50,6 @@ export const UmbControllerHostMixin = <T extends HTMLElementConstructor>(superCl
 			if(ctrl.unique) {
 				this.#controllers.forEach(x => {
 					if(x.unique === ctrl.unique) {
-						debugger;
 						this.removeController(x);
 					}
 				});
--- a/src/Umbraco.Web.UI.Client/src/core/controller/controller.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/controller/controller.test.ts
@@ -0,0 +1,50 @@
+import { expect } from '@open-wc/testing';
+import { customElement } from 'lit/decorators.js';
+import { UmbContextProviderController } from '../context-api/provide/context-provider.controller';
+import { UmbControllerHostInterface, UmbControllerHostMixin } from './controller-host.mixin';
+
+class MyClass {
+	prop = 'value from provider';
+}
+
+@customElement('test-my-controller-host')
+class MyHostElement extends UmbControllerHostMixin(HTMLElement) {
+
+}
+
+describe('UmbContextProvider', () => {
+	type NewType = UmbControllerHostInterface;
+
+	let hostElement: NewType;
+	const contextInstance = new MyClass();
+
+	beforeEach(() => {
+		hostElement = document.createElement('test-my-controller-host') as UmbControllerHostInterface;
+	});
+
+
+	describe('Destroyed controllers is gone from host', () => {
+		it('has a host property', () => {
+
+			const ctrl = new UmbContextProviderController(hostElement, 'my-test-context', contextInstance);
+
+			expect(hostElement.hasController(ctrl)).to.be.true;
+
+			ctrl.destroy();
+
+			expect(hostElement.hasController(ctrl)).to.be.false;
+		});
+	});
+
+	describe('Unique controllers replace each other', () => {
+		it('has a host property', () => {
+
+			const firstCtrl = new UmbContextProviderController(hostElement, 'my-test-context', contextInstance);
+			const secondCtrl = new UmbContextProviderController(hostElement, 'my-test-context', contextInstance);
+
+			expect(hostElement.hasController(firstCtrl)).to.be.false;
+			expect(hostElement.hasController(secondCtrl)).to.be.true;
+		});
+	});
+
+});