From 07c360c30daf8ce8c6f61bc322e60364ca761fdb Mon Sep 17 00:00:00 2001
From: OlegIvaniv <me@olegivaniv.com>
Date: Fri, 7 Apr 2023 12:21:17 +0200
Subject: [PATCH] refactor(editor): Replace this.$props (no-changelog) (#5928)

* refactor(editor): Replace this. (no-changelog)

* Lintfix
---
 .../ResizeObserver/ResizeObserver.vue         |  4 ++--
 .../src/components/BreakpointsObserver.vue    | 22 +++++++++----------
 .../ExpandableInput/ExpandableInputBase.vue   |  2 +-
 .../ExpandableInput/ExpandableInputEdit.vue   |  6 ++---
 .../src/components/InlineTextEdit.vue         |  2 +-
 .../src/components/IntersectionObserved.vue   |  4 ++--
 .../src/components/IntersectionObserver.vue   |  6 ++---
 packages/editor-ui/src/components/Modal.vue   | 20 ++++++++---------
 .../editor-ui/src/components/ModalDrawer.vue  | 12 +++++-----
 .../src/components/ParameterInputExpanded.vue |  6 ++---
 .../EventDestinationSettingsModal.ee.vue      | 12 +++++-----
 .../src/components/TagsContainer.vue          |  8 +++----
 .../editor-ui/src/components/TagsDropdown.vue |  8 +++----
 .../TagsManager/TagsView/TagsTable.vue        |  2 +-
 .../TagsManager/TagsView/TagsView.vue         |  7 +++---
 15 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue b/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
index e4ae72018..83e16b818 100644
--- a/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
+++ b/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		if (!this.$props.enabled) {
+		if (!this.enabled) {
 			return;
 		}
 
@@ -69,7 +69,7 @@ export default Vue.extend({
 		}
 	},
 	beforeDestroy() {
-		if (this.$props.enabled) {
+		if (this.enabled) {
 			this.$data.observer.disconnect(); // eslint-disable-line
 		}
 	},
diff --git a/packages/editor-ui/src/components/BreakpointsObserver.vue b/packages/editor-ui/src/components/BreakpointsObserver.vue
index 991266436..0e639c556 100644
--- a/packages/editor-ui/src/components/BreakpointsObserver.vue
+++ b/packages/editor-ui/src/components/BreakpointsObserver.vue
@@ -64,27 +64,27 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		},
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		value(): any | undefined {
-			if (this.$props.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) {
-				return this.$props.valueXS;
+			if (this.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) {
+				return this.valueXS;
 			}
 
-			if (this.$props.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) {
-				return this.$props.valueXL;
+			if (this.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) {
+				return this.valueXL;
 			}
 
-			if (this.$props.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) {
-				return this.$props.valueLG;
+			if (this.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) {
+				return this.valueLG;
 			}
 
-			if (this.$props.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) {
-				return this.$props.valueMD;
+			if (this.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) {
+				return this.valueMD;
 			}
 
-			if (this.$props.valueSM !== undefined) {
-				return this.$props.valueSM;
+			if (this.valueSM !== undefined) {
+				return this.valueSM;
 			}
 
-			return this.$props.valueDefault;
+			return this.valueDefault;
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
index d81b8ee00..39bf7a018 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
@@ -16,7 +16,7 @@ export default Vue.extend({
 			let value = (this.value as string).replace(/\s/g, '.'); // force input to expand on space chars
 			if (!value) {
 				// @ts-ignore
-				value = this.$props.placeholder;
+				value = this.placeholder;
 			}
 
 			return `${value}`; // adjust for padding
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
index 30acd2b4a..6aadd4de3 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
@@ -34,12 +34,12 @@ export default Vue.extend({
 	},
 	mounted() {
 		// autofocus on input element is not reliable
-		if (this.$props.autofocus && this.$refs.input) {
+		if (this.autofocus && this.$refs.input) {
 			this.focus();
 		}
 
-		if (this.$props.eventBus) {
-			this.$props.eventBus.on('focus', () => {
+		if (this.eventBus) {
+			this.eventBus.on('focus', () => {
 				this.focus();
 			});
 		}
diff --git a/packages/editor-ui/src/components/InlineTextEdit.vue b/packages/editor-ui/src/components/InlineTextEdit.vue
index 534f7f0e5..2876ab25b 100644
--- a/packages/editor-ui/src/components/InlineTextEdit.vue
+++ b/packages/editor-ui/src/components/InlineTextEdit.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
 				return;
 			}
 
-			this.$data.newValue = this.$props.value;
+			this.$data.newValue = this.value;
 			this.$emit('toggle');
 		},
 		onBlur() {
diff --git a/packages/editor-ui/src/components/IntersectionObserved.vue b/packages/editor-ui/src/components/IntersectionObserved.vue
index 7aaa055b8..88402d4ae 100644
--- a/packages/editor-ui/src/components/IntersectionObserved.vue
+++ b/packages/editor-ui/src/components/IntersectionObserved.vue
@@ -12,7 +12,7 @@ export default mixins(emitter).extend({
 	name: 'IntersectionObserved',
 	props: ['enabled'],
 	mounted() {
-		if (!this.$props.enabled) {
+		if (!this.enabled) {
 			return;
 		}
 
@@ -21,7 +21,7 @@ export default mixins(emitter).extend({
 		});
 	},
 	beforeDestroy() {
-		if (this.$props.enabled) {
+		if (this.enabled) {
 			this.$dispatch('IntersectionObserver', 'unobserve', this.$refs.observed);
 		}
 	},
diff --git a/packages/editor-ui/src/components/IntersectionObserver.vue b/packages/editor-ui/src/components/IntersectionObserver.vue
index d20a408ee..7632a95ad 100644
--- a/packages/editor-ui/src/components/IntersectionObserver.vue
+++ b/packages/editor-ui/src/components/IntersectionObserver.vue
@@ -16,14 +16,14 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		if (!this.$props.enabled) {
+		if (!this.enabled) {
 			return;
 		}
 
 		const options = {
 			root: this.$refs.root as Element,
 			rootMargin: '0px',
-			threshold: this.$props.threshold,
+			threshold: this.threshold,
 		};
 
 		const observer = new IntersectionObserver((entries) => {
@@ -46,7 +46,7 @@ export default Vue.extend({
 		});
 	},
 	beforeDestroy() {
-		if (this.$props.enabled) {
+		if (this.enabled) {
 			this.$data.observer.disconnect();
 		}
 	},
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 8ddf653bf..aa6cab651 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog
-		:visible="uiStore.isModalOpen(this.$props.name)"
+		:visible="uiStore.isModalOpen(this.name)"
 		:before-close="closeDialog"
 		:class="{ 'dialog-wrapper': true, [$style.center]: center, scrollable: scrollable }"
 		:width="width"
@@ -10,7 +10,7 @@
 		:close-on-press-escape="closeOnPressEscape"
 		:style="styles"
 		append-to-body
-		:data-test-id="`${this.$props.name}-modal`"
+		:data-test-id="`${this.name}-modal`"
 	>
 		<template #title v-if="$scopedSlots.header">
 			<slot name="header" v-if="!loading" />
@@ -121,12 +121,12 @@ export default Vue.extend({
 	mounted() {
 		window.addEventListener('keydown', this.onWindowKeydown);
 
-		if (this.$props.eventBus) {
-			this.$props.eventBus.on('close', () => {
+		if (this.eventBus) {
+			this.eventBus.on('close', () => {
 				this.closeDialog();
 			});
 
-			this.$props.eventBus.on('closeAll', () => {
+			this.eventBus.on('closeAll', () => {
 				this.uiStore.closeAllModals();
 			});
 		}
@@ -163,7 +163,7 @@ export default Vue.extend({
 	},
 	methods: {
 		onWindowKeydown(event: KeyboardEvent) {
-			if (!this.uiStore.isModalActive(this.$props.name)) {
+			if (!this.uiStore.isModalActive(this.name)) {
 				return;
 			}
 
@@ -172,7 +172,7 @@ export default Vue.extend({
 			}
 		},
 		handleEnter() {
-			if (this.uiStore.isModalActive(this.$props.name)) {
+			if (this.uiStore.isModalActive(this.name)) {
 				this.$emit('enter');
 			}
 		},
@@ -184,12 +184,12 @@ export default Vue.extend({
 					return;
 				}
 			}
-			this.uiStore.closeModal(this.$props.name);
+			this.uiStore.closeModal(this.name);
 		},
 		getCustomClass() {
-			let classes = this.$props.customClass || '';
+			let classes = this.customClass || '';
 
-			if (this.$props.classic) {
+			if (this.classic) {
 				classes = `${classes} classic`;
 			}
 
diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index bb0630e61..cc8d07751 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -1,7 +1,7 @@
 <template>
 	<el-drawer
 		:direction="direction"
-		:visible="uiStore.isModalOpen(this.$props.name)"
+		:visible="uiStore.isModalOpen(this.name)"
 		:size="width"
 		:before-close="close"
 		:modal="modal"
@@ -54,8 +54,8 @@ export default Vue.extend({
 	mounted() {
 		window.addEventListener('keydown', this.onWindowKeydown);
 
-		if (this.$props.eventBus) {
-			this.$props.eventBus.on('close', () => {
+		if (this.eventBus) {
+			this.eventBus.on('close', () => {
 				this.close();
 			});
 		}
@@ -73,7 +73,7 @@ export default Vue.extend({
 	},
 	methods: {
 		onWindowKeydown(event: KeyboardEvent) {
-			if (!this.uiStore.isModalActive(this.$props.name)) {
+			if (!this.uiStore.isModalActive(this.name)) {
 				return;
 			}
 
@@ -82,7 +82,7 @@ export default Vue.extend({
 			}
 		},
 		handleEnter() {
-			if (this.uiStore.isModalActive(this.$props.name)) {
+			if (this.uiStore.isModalActive(this.name)) {
 				this.$emit('enter');
 			}
 		},
@@ -94,7 +94,7 @@ export default Vue.extend({
 					return;
 				}
 			}
-			this.uiStore.closeModal(this.$props.name);
+			this.uiStore.closeModal(this.name);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index a1e45e79c..bba92cbbf 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -102,16 +102,16 @@ export default Vue.extend({
 	computed: {
 		...mapStores(useWorkflowsStore),
 		showRequiredErrors(): boolean {
-			if (!this.$props.parameter.required) {
+			if (!this.parameter.required) {
 				return false;
 			}
 
 			if (this.blurredEver || this.showValidationWarnings) {
-				if (this.$props.parameter.type === 'string') {
+				if (this.parameter.type === 'string') {
 					return !this.value;
 				}
 
-				if (this.$props.parameter.type === 'number') {
+				if (this.parameter.type === 'number') {
 					return typeof this.value !== 'number';
 				}
 			}
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
index 804c52b10..8a1fc3f12 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
@@ -236,9 +236,9 @@ export default mixins(showMessage).extend({
 	},
 	data() {
 		return {
-			unchanged: !this.$props.isNew,
+			unchanged: !this.isNew,
 			activeTab: 'settings',
-			hasOnceBeenSaved: !this.$props.isNew,
+			hasOnceBeenSaved: !this.isNew,
 			isSaving: false,
 			isDeleting: false,
 			loading: false,
@@ -250,7 +250,7 @@ export default mixins(showMessage).extend({
 			sentryDescription: sentryModalDescription,
 			syslogDescription: syslogModalDescription,
 			modalBus: createEventBus(),
-			headerLabel: this.$props.destination.label,
+			headerLabel: this.destination.label,
 			testMessageSent: false,
 			testMessageResult: false,
 			isInstanceOwner: false,
@@ -451,7 +451,7 @@ export default mixins(showMessage).extend({
 			if (deleteConfirmed === false) {
 				return;
 			} else {
-				this.$props.eventBus.emit('remove', this.destination.id);
+				this.eventBus.emit('remove', this.destination.id);
 				this.uiStore.closeModal(LOG_STREAM_MODAL_KEY);
 				this.uiStore.stateIsDirty = false;
 			}
@@ -462,7 +462,7 @@ export default mixins(showMessage).extend({
 				this.logStreamingStore.removeDestination(this.nodeParameters.id!);
 			}
 			this.ndvStore.activeNodeName = null;
-			this.$props.eventBus.emit('closing', this.destination.id);
+			this.eventBus.emit('closing', this.destination.id);
 			this.uiStore.stateIsDirty = false;
 		},
 		async saveDestination() {
@@ -474,7 +474,7 @@ export default mixins(showMessage).extend({
 				this.hasOnceBeenSaved = true;
 				this.testMessageSent = false;
 				this.unchanged = true;
-				this.$props.eventBus.emit('destinationWasSaved', this.destination.id);
+				this.eventBus.emit('destinationWasSaved', this.destination.id);
 				this.uiStore.stateIsDirty = false;
 			}
 		},
diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue
index 15c0a8a06..7b615dc7c 100644
--- a/packages/editor-ui/src/components/TagsContainer.vue
+++ b/packages/editor-ui/src/components/TagsContainer.vue
@@ -68,20 +68,20 @@ export default Vue.extend({
 	computed: {
 		...mapStores(useTagsStore),
 		tags() {
-			const tags = this.$props.tagIds
+			const tags = this.tagIds
 				.map((tagId: string) => this.tagsStore.getTagById(tagId))
 				.filter(Boolean); // if tag has been deleted from store
 
-			const limit = this.$props.limit || DEFAULT_MAX_TAGS_LIMIT;
+			const limit = this.limit || DEFAULT_MAX_TAGS_LIMIT;
 
 			let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags;
 			toDisplay = toDisplay.map((tag: ITag) => ({
 				...tag,
-				hidden: this.$props.responsive && !this.$data.visibility[tag.id],
+				hidden: this.responsive && !this.$data.visibility[tag.id],
 			}));
 
 			let visibleCount = toDisplay.length;
-			if (this.$props.responsive) {
+			if (this.responsive) {
 				visibleCount = Object.values(this.visibility).reduce(
 					(accu, val) => (val ? accu + 1 : accu),
 					0,
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index e9f3a444c..a27ef2ac9 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -117,8 +117,8 @@ export default mixins(showMessage).extend({
 			}
 		}
 
-		if (this.$props.eventBus) {
-			this.$props.eventBus.on('focus', () => {
+		if (this.eventBus) {
+			this.eventBus.on('focus', () => {
 				this.focusOnInput();
 				this.focusOnTopOption();
 			});
@@ -140,7 +140,7 @@ export default mixins(showMessage).extend({
 			);
 		},
 		appliedTags(): string[] {
-			return this.$props.currentTagIds.filter((id: string) => this.tagsStore.getTagById(id));
+			return this.currentTagIds.filter((id: string) => this.tagsStore.getTagById(id));
 		},
 	},
 	methods: {
@@ -152,7 +152,7 @@ export default mixins(showMessage).extend({
 			const name = this.$data.filter;
 			try {
 				const newTag = await this.tagsStore.create(name);
-				this.$emit('update', [...this.$props.currentTagIds, newTag.id]);
+				this.$emit('update', [...this.currentTagIds, newTag.id]);
 				this.$nextTick(() => this.focusOnTag(newTag.id));
 
 				this.$data.filter = '';
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index 7ecacac24..76af2dd73 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -123,7 +123,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		if (this.$props.rows.length === 1 && this.$props.rows[0].create) {
+		if (this.rows.length === 1 && this.rows[0].create) {
 			this.focusOnInput();
 		}
 	},
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index 02a33ab4e..d695ecbed 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -52,7 +52,7 @@ export default Vue.extend({
 	computed: {
 		...mapStores(useUsersStore),
 		isCreateEnabled(): boolean {
-			return (this.$props.tags || []).length === 0 || this.$data.createEnabled;
+			return (this.tags || []).length === 0 || this.$data.createEnabled;
 		},
 		rows(): ITagRow[] {
 			const getUsage = (count: number | undefined) =>
@@ -61,7 +61,7 @@ export default Vue.extend({
 					: this.$locale.baseText('tagsView.notBeingUsed');
 
 			const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId;
-			const tagRows = (this.$props.tags || [])
+			const tagRows = (this.tags || [])
 				.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.$data.search))
 				.map(
 					(tag: ITag): ITagRow => ({
@@ -87,8 +87,7 @@ export default Vue.extend({
 		},
 		isHeaderDisabled(): boolean {
 			return (
-				this.$props.isLoading ||
-				!!(this.isCreateEnabled || this.$data.updateId || this.$data.deleteId)
+				this.isLoading || !!(this.isCreateEnabled || this.$data.updateId || this.$data.deleteId)
 			);
 		},