refactor: Remove deprecated $data (#6576)

Co-authored-by: Alex Grozav <alex@grozav.com>

packages/editor-ui/src/components/BreakpointsObserver.vue

@@ -42,7 +42,7 @@ export default defineComponent({
 			void this.callDebounced('onResizeEnd', { debounceTime: 50 });
 		},
 		onResizeEnd() {
-			this.$data.width = window.innerWidth;
+			this.width = window.innerWidth;
 			this.$nextTick(async () => {
 				const bannerHeight = await getBannerRowHeight();
 				useUIStore().updateBannersHeight(bannerHeight);
@@ -51,19 +51,19 @@ export default defineComponent({
 	},
 	computed: {
 		bp(): string {
-			if (this.$data.width < BREAKPOINT_SM) {
+			if (this.width < BREAKPOINT_SM) {
 				return 'XS';
 			}
 
-			if (this.$data.width >= BREAKPOINT_XL) {
+			if (this.width >= BREAKPOINT_XL) {
 				return 'XL';
 			}
 
-			if (this.$data.width >= BREAKPOINT_LG) {
+			if (this.width >= BREAKPOINT_LG) {
 				return 'LG';
 			}
 
-			if (this.$data.width >= BREAKPOINT_MD) {
+			if (this.width >= BREAKPOINT_MD) {
 				return 'MD';
 			}
 
@@ -71,19 +71,19 @@ export default defineComponent({
 		},
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		value(): any | undefined {
-			if (this.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) {
+			if (this.valueXS !== undefined && this.width < BREAKPOINT_SM) {
 				return this.valueXS;
 			}
 
-			if (this.valueXL !== undefined && this.$data.width >= BREAKPOINT_XL) {
+			if (this.valueXL !== undefined && this.width >= BREAKPOINT_XL) {
 				return this.valueXL;
 			}
 
-			if (this.valueLG !== undefined && this.$data.width >= BREAKPOINT_LG) {
+			if (this.valueLG !== undefined && this.width >= BREAKPOINT_LG) {
 				return this.valueLG;
 			}
 
-			if (this.valueMD !== undefined && this.$data.width >= BREAKPOINT_MD) {
+			if (this.valueMD !== undefined && this.width >= BREAKPOINT_MD) {
 				return this.valueMD;
 			}
 

packages/editor-ui/src/components/InlineTextEdit.vue

@@ -75,7 +75,7 @@ export default defineComponent({
 				return;
 			}
 
-			this.$data.newValue = this.modelValue;
+			this.newValue = this.modelValue;
 			this.$emit('toggle');
 		},
 		onBlur() {
@@ -83,10 +83,10 @@ export default defineComponent({
 				return;
 			}
 
-			if (!this.$data.escPressed) {
+			if (!this.escPressed) {
 				this.submit();
 			}
-			this.$data.escPressed = false;
+			this.escPressed = false;
 		},
 		submit() {
 			if (this.disabled) {
@@ -94,14 +94,14 @@ export default defineComponent({
 			}
 
 			const onSubmit = (updated: boolean) => {
-				this.$data.disabled = false;
+				this.disabled = false;
 
 				if (!updated) {
-					this.$data.inputBus.emit('focus');
+					this.inputBus.emit('focus');
 				}
 			};
 
-			this.$data.disabled = true;
+			this.disabled = true;
 			this.$emit('submit', this.newValue, onSubmit);
 		},
 		onEscape() {
@@ -109,7 +109,7 @@ export default defineComponent({
 				return;
 			}
 
-			this.$data.escPressed = true;
+			this.escPressed = true;
 			this.$emit('toggle');
 		},
 	},

packages/editor-ui/src/components/IntersectionObserver.vue

@@ -63,7 +63,7 @@ export default defineComponent({
 	},
 	beforeUnmount() {
 		if (this.enabled) {
-			this.$data.observer.disconnect();
+			this.observer.disconnect();
 		}
 	},
 });

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -364,31 +364,31 @@ export default defineComponent({
 			});
 		},
 		onTagsEditEnable() {
-			this.$data.appliedTagIds = this.currentWorkflowTagIds;
-			this.$data.isTagsEditEnabled = true;
+			this.appliedTagIds = this.currentWorkflowTagIds;
+			this.isTagsEditEnabled = true;
 
 			setTimeout(() => {
 				// allow name update to occur before disabling name edit
-				this.$data.isNameEditEnabled = false;
-				this.$data.tagsEditBus.emit('focus');
+				this.isNameEditEnabled = false;
+				this.tagsEditBus.emit('focus');
 			}, 0);
 		},
 		async onTagsUpdate(tags: string[]) {
-			this.$data.appliedTagIds = tags;
+			this.appliedTagIds = tags;
 		},
 
 		async onTagsBlur() {
 			const current = this.currentWorkflowTagIds;
-			const tags = this.$data.appliedTagIds;
+			const tags = this.appliedTagIds;
 			if (!hasChanged(current, tags)) {
-				this.$data.isTagsEditEnabled = false;
+				this.isTagsEditEnabled = false;
 
 				return;
 			}
-			if (this.$data.tagsSaving) {
+			if (this.tagsSaving) {
 				return;
 			}
-			this.$data.tagsSaving = true;
+			this.tagsSaving = true;
 
 			const saved = await this.saveCurrentWorkflow({ tags });
 			this.$telemetry.track('User edited workflow tags', {
@@ -396,23 +396,23 @@ export default defineComponent({
 				new_tag_count: tags.length,
 			});
 
-			this.$data.tagsSaving = false;
+			this.tagsSaving = false;
 			if (saved) {
-				this.$data.isTagsEditEnabled = false;
+				this.isTagsEditEnabled = false;
 			}
 		},
 		onTagsEditEsc() {
-			this.$data.isTagsEditEnabled = false;
+			this.isTagsEditEnabled = false;
 		},
 		onNameToggle() {
-			this.$data.isNameEditEnabled = !this.$data.isNameEditEnabled;
-			if (this.$data.isNameEditEnabled) {
-				if (this.$data.isTagsEditEnabled) {
+			this.isNameEditEnabled = !this.isNameEditEnabled;
+			if (this.isNameEditEnabled) {
+				if (this.isTagsEditEnabled) {
 					// @ts-ignore
 					void this.onTagsBlur();
 				}
 
-				this.$data.isTagsEditEnabled = false;
+				this.isTagsEditEnabled = false;
 			}
 		},
 		async onNameSubmit(name: string, cb: (saved: boolean) => void) {
@@ -429,7 +429,7 @@ export default defineComponent({
 			}
 
 			if (newName === this.workflowName) {
-				this.$data.isNameEditEnabled = false;
+				this.isNameEditEnabled = false;
 
 				cb(true);
 				return;
@@ -437,7 +437,7 @@ export default defineComponent({
 
 			const saved = await this.saveCurrentWorkflow({ name });
 			if (saved) {
-				this.$data.isNameEditEnabled = false;
+				this.isNameEditEnabled = false;
 			}
 			cb(saved);
 		},
@@ -602,8 +602,8 @@ export default defineComponent({
 	},
 	watch: {
 		currentWorkflowId() {
-			this.$data.isTagsEditEnabled = false;
-			this.$data.isNameEditEnabled = false;
+			this.isTagsEditEnabled = false;
+			this.isNameEditEnabled = false;
 		},
 	},
 });

packages/editor-ui/src/components/PersonalizationModal.vue

@@ -630,7 +630,7 @@ export default defineComponent({
 			this.formBus.emit('submit');
 		},
 		async onSubmit(values: IPersonalizationLatestVersion): Promise<void> {
-			this.$data.isSaving = true;
+			this.isSaving = true;
 
 			try {
 				const survey: Record<string, GenericValue> = {
@@ -653,7 +653,7 @@ export default defineComponent({
 				this.showError(e, 'Error while submitting results');
 			}
 
-			this.$data.isSaving = false;
+			this.isSaving = false;
 			this.closeDialog();
 		},
 		async fetchOnboardingPrompt() {

packages/editor-ui/src/components/TagsContainer.vue

@@ -79,7 +79,7 @@ export default defineComponent({
 			let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags;
 			toDisplay = toDisplay.map((tag: ITag) => ({
 				...tag,
-				hidden: this.responsive && !this.$data.visibility[tag.id],
+				hidden: this.responsive && !this.visibility[tag.id],
 			}));
 
 			let visibleCount = toDisplay.length;
@@ -111,7 +111,7 @@ export default defineComponent({
 	methods: {
 		onObserved({ el, isIntersecting }: { el: HTMLElement; isIntersecting: boolean }) {
 			if (el.dataset.id) {
-				this.$data.visibility = { ...this.$data.visibility, [el.dataset.id]: isIntersecting };
+				this.visibility = { ...this.visibility, [el.dataset.id]: isIntersecting };
 			}
 		},
 		onClick(e: MouseEvent, tag: TagEl) {

packages/editor-ui/src/components/TagsDropdown.vue

@@ -118,7 +118,7 @@ export default defineComponent({
 					if (keyboardEvent.key === 'Escape') {
 						this.$emit('esc');
 					} else if (keyboardEvent.key === 'Enter' && this.filter.length === 0) {
-						this.$data.preventUpdate = true;
+						this.preventUpdate = true;
 						this.$emit('blur');
 
 						if (typeof selectRef?.blur === 'function') {
@@ -146,7 +146,7 @@ export default defineComponent({
 		},
 		options(): ITag[] {
 			return this.allTags.filter(
-				(tag: ITag) => tag && tag.name.toLowerCase().includes(this.$data.filter.toLowerCase()),
+				(tag: ITag) => tag && tag.name.toLowerCase().includes(this.filter.toLowerCase()),
 			);
 		},
 		appliedTags(): string[] {
@@ -159,17 +159,17 @@ export default defineComponent({
 			this.focusOnTopOption();
 		},
 		filterOptions(filter = '') {
-			this.$data.filter = filter.trim();
+			this.filter = filter.trim();
 			this.$nextTick(() => this.focusOnTopOption());
 		},
 		async onCreate() {
-			const name = this.$data.filter;
+			const name = this.filter;
 			try {
 				const newTag = await this.tagsStore.create(name);
 				this.$emit('update', [...this.currentTagIds, newTag.id]);
 				this.$nextTick(() => this.focusOnTag(newTag.id));
 
-				this.$data.filter = '';
+				this.filter = '';
 			} catch (error) {
 				this.showError(
 					error,
@@ -181,16 +181,16 @@ export default defineComponent({
 		onTagsUpdated(selected: string[]) {
 			const ops = selected.find((value) => value === MANAGE_KEY || value === CREATE_KEY);
 			if (ops === MANAGE_KEY) {
-				this.$data.filter = '';
+				this.filter = '';
 				this.uiStore.openModal(TAGS_MANAGER_MODAL_KEY);
 			} else if (ops === CREATE_KEY) {
 				void this.onCreate();
 			} else {
 				setTimeout(() => {
-					if (!this.$data.preventUpdate) {
+					if (!this.preventUpdate) {
 						this.$emit('update', selected);
 					}
-					this.$data.preventUpdate = false;
+					this.preventUpdate = false;
 				}, 0);
 			}
 		},
@@ -221,7 +221,7 @@ export default defineComponent({
 		},
 		onVisibleChange(visible: boolean) {
 			if (!visible) {
-				this.$data.filter = '';
+				this.filter = '';
 				this.focused = false;
 			} else {
 				this.focused = true;

packages/editor-ui/src/components/TagsManager/TagsManager.vue

@@ -71,9 +71,7 @@ export default defineComponent({
 			return this.tagsStore.isLoading;
 		},
 		tags(): ITag[] {
-			return this.$data.tagIds
-				.map((tagId: string) => this.tagsStore.getTagById(tagId))
-				.filter(Boolean); // if tag is deleted from store
+			return this.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId)).filter(Boolean); // if tag is deleted from store
 		},
 		hasTags(): boolean {
 			return this.tags.length > 0;
@@ -81,11 +79,11 @@ export default defineComponent({
 	},
 	methods: {
 		onEnableCreate() {
-			this.$data.isCreating = true;
+			this.isCreating = true;
 		},
 
 		onDisableCreate() {
-			this.$data.isCreating = false;
+			this.isCreating = false;
 		},
 
 		async onCreate(name: string, cb: (tag: ITag | null, error?: Error) => void) {
@@ -95,7 +93,7 @@ export default defineComponent({
 				}
 
 				const newTag = await this.tagsStore.create(name);
-				this.$data.tagIds = [newTag.id].concat(this.$data.tagIds);
+				this.tagIds = [newTag.id].concat(this.tagIds);
 				cb(newTag);
 			} catch (error) {
 				const escapedName = escape(name);
@@ -154,7 +152,7 @@ export default defineComponent({
 					throw new Error(this.$locale.baseText('tagsManager.couldNotDeleteTag'));
 				}
 
-				this.$data.tagIds = this.$data.tagIds.filter((tagId: string) => tagId !== id);
+				this.tagIds = this.tagIds.filter((tagId: string) => tagId !== id);
 
 				cb(deleted);
 

packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue

@@ -52,7 +52,7 @@ export default defineComponent({
 	computed: {
 		...mapStores(useUsersStore),
 		isCreateEnabled(): boolean {
-			return (this.tags || []).length === 0 || this.$data.createEnabled;
+			return (this.tags || []).length === 0 || this.createEnabled;
 		},
 		rows(): ITagRow[] {
 			const getUsage = (count: number | undefined) =>
@@ -60,16 +60,16 @@ export default defineComponent({
 					? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count })
 					: this.$locale.baseText('tagsView.notBeingUsed');
 
-			const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId;
+			const disabled = this.isCreateEnabled || this.updateId || this.deleteId;
 			const tagRows = (this.tags || [])
-				.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.$data.search))
+				.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
 				.map(
 					(tag: ITag): ITagRow => ({
 						tag,
 						usage: getUsage(tag.usageCount),
-						disable: disabled && tag.id !== this.deleteId && tag.id !== this.$data.updateId,
-						update: disabled && tag.id === this.$data.updateId,
-						delete: disabled && tag.id === this.$data.deleteId,
+						disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId,
+						update: disabled && tag.id === this.updateId,
+						delete: disabled && tag.id === this.deleteId,
 						canDelete: this.usersStore.canUserDeleteTags,
 					}),
 				);
@@ -82,13 +82,11 @@ export default defineComponent({
 			this.newName = name;
 		},
 		onSearchChange(search: string): void {
-			this.$data.stickyIds.clear();
-			this.$data.search = search;
+			this.stickyIds.clear();
+			this.search = search;
 		},
 		isHeaderDisabled(): boolean {
-			return (
-				this.isLoading || !!(this.isCreateEnabled || this.$data.updateId || this.$data.deleteId)
-			);
+			return this.isLoading || !!(this.isCreateEnabled || this.updateId || this.deleteId);
 		},
 
 		onUpdateEnable(updateId: string): void {
@@ -99,10 +97,10 @@ export default defineComponent({
 			this.newName = '';
 		},
 		updateTag(): void {
-			this.$data.isSaving = true;
+			this.isSaving = true;
 			const name = this.newName.trim();
 			const onUpdate = (updated: boolean) => {
-				this.$data.isSaving = false;
+				this.isSaving = false;
 				if (updated) {
 					this.stickyIds.add(this.updateId);
 					this.disableUpdate();
@@ -119,58 +117,58 @@ export default defineComponent({
 			this.deleteId = '';
 		},
 		deleteTag(): void {
-			this.$data.isSaving = true;
+			this.isSaving = true;
 			const onDelete = (deleted: boolean) => {
 				if (deleted) {
 					this.disableDelete();
 				}
-				this.$data.isSaving = false;
+				this.isSaving = false;
 			};
 
 			this.$emit('delete', this.deleteId, onDelete);
 		},
 
 		onCreateEnable(): void {
-			this.$data.createEnabled = true;
-			this.$data.newName = '';
+			this.createEnabled = true;
+			this.newName = '';
 		},
 		disableCreate(): void {
-			this.$data.createEnabled = false;
+			this.createEnabled = false;
 			this.$emit('disableCreate');
 		},
 		createTag(): void {
-			this.$data.isSaving = true;
-			const name = this.$data.newName.trim();
+			this.isSaving = true;
+			const name = this.newName.trim();
 			const onCreate = (created: ITag | null, error?: Error) => {
 				if (created) {
 					this.stickyIds.add(created.id);
 					this.disableCreate();
 				}
-				this.$data.isSaving = false;
+				this.isSaving = false;
 			};
 
 			this.$emit('create', name, onCreate);
 		},
 
 		applyOperation(): void {
-			if (this.$data.isSaving) {
+			if (this.isSaving) {
 				return;
 			} else if (this.isCreateEnabled) {
 				this.createTag();
-			} else if (this.$data.updateId) {
+			} else if (this.updateId) {
 				this.updateTag();
-			} else if (this.$data.deleteId) {
+			} else if (this.deleteId) {
 				this.deleteTag();
 			}
 		},
 		cancelOperation(): void {
-			if (this.$data.isSaving) {
+			if (this.isSaving) {
 				return;
 			} else if (this.isCreateEnabled) {
 				this.disableCreate();
-			} else if (this.$data.updateId) {
+			} else if (this.updateId) {
 				this.disableUpdate();
-			} else if (this.$data.deleteId) {
+			} else if (this.deleteId) {
 				this.disableDelete();
 			}
 		},

packages/editor-ui/src/views/SettingsCommunityNodesView.vue

@@ -92,7 +92,7 @@ export default defineComponent({
 		this.pushConnect();
 
 		try {
-			this.$data.loading = true;
+			this.loading = true;
 			await this.communityNodesStore.fetchInstalledPackages();
 
 			const installedPackages: PublicInstalledPackage[] =
@@ -126,12 +126,12 @@ export default defineComponent({
 				this.$locale.baseText('settings.communityNodes.fetchError.message'),
 			);
 		} finally {
-			this.$data.loading = false;
+			this.loading = false;
 		}
 		try {
 			await this.communityNodesStore.fetchAvailableCommunityPackageCount();
 		} finally {
-			this.$data.loading = false;
+			this.loading = false;
 		}
 	},
 	beforeUnmount() {