From 03f15c49d521b7dffe2222c5f92ab5a6d97c6001 Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Mon, 3 Jun 2024 11:04:13 +0300
Subject: [PATCH] fix(editor): Fix ts and eslint errors in various components
 (no-changelog) (#9592)

---
 .../src/components/TagsContainer.vue          | 46 ++++++++++-----
 .../editor-ui/src/components/TagsDropdown.vue | 27 ++++-----
 .../TagsManager/TagsView/TagsView.vue         | 27 +++++++--
 .../editor-ui/src/components/Telemetry.vue    |  5 +-
 packages/editor-ui/src/components/TimeAgo.vue | 58 +++++++++----------
 .../editor-ui/src/components/TitledList.vue   |  5 +-
 6 files changed, 97 insertions(+), 71 deletions(-)

diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue
index fd3f8deb11..e0b12a73cf 100644
--- a/packages/editor-ui/src/components/TagsContainer.vue
+++ b/packages/editor-ui/src/components/TagsContainer.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, type ComponentInstance } from 'vue';
 
 import type { ITag } from '@/Interface';
 import IntersectionObserver from './IntersectionObserver.vue';
@@ -70,7 +70,22 @@ interface TagEl extends ITag {
 export default defineComponent({
 	name: 'TagsContainer',
 	components: { IntersectionObserver, IntersectionObserved },
-	props: ['tagIds', 'limit', 'clickable', 'responsive', 'hoverable'],
+	props: {
+		tagIds: {
+			type: Array as () => string[],
+			required: true,
+		},
+		limit: {
+			type: Number,
+			default: DEFAULT_MAX_TAGS_LIMIT,
+		},
+		clickable: Boolean,
+		responsive: Boolean,
+		hoverable: Boolean,
+	},
+	emits: {
+		click: null,
+	},
 	data() {
 		return {
 			maxWidth: 320,
@@ -79,16 +94,6 @@ export default defineComponent({
 			debouncedSetMaxWidth: () => {},
 		};
 	},
-	created() {
-		this.debouncedSetMaxWidth = debounce(this.setMaxWidth, 100);
-	},
-	mounted() {
-		this.setMaxWidth();
-		window.addEventListener('resize', this.debouncedSetMaxWidth);
-	},
-	beforeUnmount() {
-		window.removeEventListener('resize', this.debouncedSetMaxWidth);
-	},
 	computed: {
 		...mapStores(useTagsStore),
 		style() {
@@ -101,9 +106,7 @@ export default defineComponent({
 				.map((tagId: string) => this.tagsStore.getTagById(tagId))
 				.filter(Boolean); // if tag has been deleted from store
 
-			const limit = this.limit || DEFAULT_MAX_TAGS_LIMIT;
-
-			let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags;
+			let toDisplay: TagEl[] = this.limit ? tags.slice(0, this.limit) : tags;
 			toDisplay = toDisplay.map((tag: ITag) => ({
 				...tag,
 				hidden: this.responsive && !this.visibility[tag.id],
@@ -135,9 +138,20 @@ export default defineComponent({
 			return toDisplay;
 		},
 	},
+	created() {
+		this.debouncedSetMaxWidth = debounce(this.setMaxWidth, 100);
+	},
+	mounted() {
+		this.setMaxWidth();
+		window.addEventListener('resize', this.debouncedSetMaxWidth);
+	},
+	beforeUnmount() {
+		window.removeEventListener('resize', this.debouncedSetMaxWidth);
+	},
 	methods: {
 		setMaxWidth() {
-			const container = this.$refs.tagsContainer.$el as HTMLElement;
+			const containerEl = this.$refs.tagsContainer as ComponentInstance<IntersectionObserver>;
+			const container = containerEl.$el as HTMLElement;
 			const parent = container.parentNode as HTMLElement;
 
 			if (parent) {
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 7f321b3a81..dbfbd49147 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -96,8 +96,14 @@ export default defineComponent({
 		},
 		eventBus: {
 			type: Object as PropType<EventBus>,
+			default: null,
 		},
 	},
+	emits: {
+		'update:modelValue': null,
+		esc: null,
+		blur: null,
+	},
 	setup(props, { emit }) {
 		const i18n = useI18n();
 		const { showError } = useToast();
@@ -119,10 +125,6 @@ export default defineComponent({
 			return tagsStore.allTags;
 		});
 
-		const hasTags = computed<boolean>(() => {
-			return tagsStore.hasTags;
-		});
-
 		const options = computed<ITag[]>(() => {
 			return allTags.value.filter((tag: ITag) => tag && tag.name.includes(filter.value));
 		});
@@ -142,7 +144,9 @@ export default defineComponent({
 		);
 
 		onMounted(() => {
-			const select = selectRef.value?.$refs?.innerSelect;
+			const select = selectRef.value?.$refs?.innerSelect as
+				| { $refs: { input: Element } }
+				| undefined;
 			if (select) {
 				const input = select.$refs.input as Element | undefined;
 				if (input) {
@@ -190,8 +194,6 @@ export default defineComponent({
 				const newTag = await tagsStore.create(name);
 				emit('update:modelValue', [...props.modelValue, newTag.id]);
 
-				void nextTick(() => focusOnTag(newTag.id));
-
 				filter.value = '';
 			} catch (error) {
 				showError(
@@ -233,13 +235,6 @@ export default defineComponent({
 			}
 		}
 
-		function focusOnTag(tagId: string) {
-			const tagOptions = tagRefs.value || [];
-			if (tagOptions && tagOptions.length) {
-				const added = tagOptions.find((ref) => ref.value === tagId);
-			}
-		}
-
 		function focusOnInput() {
 			if (selectRef.value) {
 				selectRef.value.focusOnInput();
@@ -267,8 +262,8 @@ export default defineComponent({
 			const tagsModal = document.querySelector('#tags-manager-modal');
 
 			const clickInsideTagsDropdowns =
-				tagsDropdown?.contains(e.target as Node) || tagsDropdown === e.target;
-			const clickInsideTagsModal = tagsModal?.contains(e.target as Node) || tagsModal === e.target;
+				tagsDropdown?.contains(e.target as Node) ?? tagsDropdown === e.target;
+			const clickInsideTagsModal = tagsModal?.contains(e.target as Node) ?? tagsModal === e.target;
 
 			if (!clickInsideTagsDropdowns && !clickInsideTagsModal && e.type === 'click') {
 				emit('blur');
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index f303ebf1f7..a70b523f9e 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -38,7 +38,22 @@ const matches = (name: string, filter: string) =>
 export default defineComponent({
 	name: 'TagsView',
 	components: { TagsTableHeader, TagsTable },
-	props: ['tags', 'isLoading'],
+	props: {
+		tags: {
+			type: Array as () => ITag[],
+			required: true,
+		},
+		isLoading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	emits: {
+		update: null,
+		delete: null,
+		create: null,
+		disableCreate: null,
+	},
 	data() {
 		return {
 			createEnabled: false,
@@ -61,11 +76,11 @@ export default defineComponent({
 					? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count })
 					: this.$locale.baseText('tagsView.notBeingUsed');
 
-			const disabled = this.isCreateEnabled || this.updateId || this.deleteId;
-			const tagRows = (this.tags || [])
-				.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
+			const disabled = this.isCreateEnabled || !!this.updateId || !!this.deleteId;
+			const tagRows = (this.tags ?? [])
+				.filter((tag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
 				.map(
-					(tag: ITag): ITagRow => ({
+					(tag): ITagRow => ({
 						tag,
 						usage: getUsage(tag.usageCount),
 						disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId,
@@ -140,7 +155,7 @@ export default defineComponent({
 		createTag(): void {
 			this.isSaving = true;
 			const name = this.newName.trim();
-			const onCreate = (created: ITag | null, error?: Error) => {
+			const onCreate = (created: ITag | null) => {
 				if (created) {
 					this.stickyIds.add(created.id);
 					this.disableCreate();
diff --git a/packages/editor-ui/src/components/Telemetry.vue b/packages/editor-ui/src/components/Telemetry.vue
index a3b10715e8..2d94f7f545 100644
--- a/packages/editor-ui/src/components/Telemetry.vue
+++ b/packages/editor-ui/src/components/Telemetry.vue
@@ -21,10 +21,11 @@ export default defineComponent({
 	computed: {
 		...mapStores(useRootStore, useSettingsStore, useUsersStore, useProjectsStore),
 		currentUserId(): string {
-			return this.usersStore.currentUserId || '';
+			return this.usersStore.currentUserId ?? '';
 		},
 		isTelemetryEnabledOnRoute(): boolean {
-			return this.$route.meta?.telemetry ? !this.$route.meta.telemetry.disabled : true;
+			const routeMeta = this.$route.meta as { telemetry?: { disabled?: boolean } } | undefined;
+			return routeMeta?.telemetry ? !routeMeta.telemetry.disabled : true;
 		},
 		telemetry(): ITelemetrySettings {
 			return this.settingsStore.telemetry;
diff --git a/packages/editor-ui/src/components/TimeAgo.vue b/packages/editor-ui/src/components/TimeAgo.vue
index 333375ad57..adb9147d2b 100644
--- a/packages/editor-ui/src/components/TimeAgo.vue
+++ b/packages/editor-ui/src/components/TimeAgo.vue
@@ -17,41 +17,13 @@ export default defineComponent({
 	props: {
 		date: {
 			type: String,
+			required: true,
 		},
 		capitalize: {
 			type: Boolean,
 			default: false,
 		},
 	},
-	beforeMount() {
-		register(this.defaultLocale, this.localeFunc as LocaleFunc);
-	},
-	methods: {
-		localeFunc(num: number, index: number, totalSec: number): [string, string] {
-			// number: the timeago / timein number;
-			// index: the index of array below;
-			// totalSec: total seconds between date to be formatted and today's date;
-			return [
-				[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')],
-				[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
-				[
-					this.$locale.baseText('timeAgo.oneMinuteAgo'),
-					this.$locale.baseText('timeAgo.inOneMinute'),
-				],
-				[this.$locale.baseText('timeAgo.minutesAgo'), this.$locale.baseText('timeAgo.inMinutes')],
-				[this.$locale.baseText('timeAgo.oneHourAgo'), this.$locale.baseText('timeAgo.inOneHour')],
-				[this.$locale.baseText('timeAgo.hoursAgo'), this.$locale.baseText('timeAgo.inHours')],
-				[this.$locale.baseText('timeAgo.oneDayAgo'), this.$locale.baseText('timeAgo.inOneDay')],
-				[this.$locale.baseText('timeAgo.daysAgo'), this.$locale.baseText('timeAgo.inDays')],
-				[this.$locale.baseText('timeAgo.oneWeekAgo'), this.$locale.baseText('timeAgo.inOneWeek')],
-				[this.$locale.baseText('timeAgo.weeksAgo'), this.$locale.baseText('timeAgo.inWeeks')],
-				[this.$locale.baseText('timeAgo.oneMonthAgo'), this.$locale.baseText('timeAgo.inOneMonth')],
-				[this.$locale.baseText('timeAgo.monthsAgo'), this.$locale.baseText('timeAgo.inMonths')],
-				[this.$locale.baseText('timeAgo.oneYearAgo'), this.$locale.baseText('timeAgo.inOneYear')],
-				[this.$locale.baseText('timeAgo.yearsAgo'), this.$locale.baseText('timeAgo.inYears')],
-			][index] as [string, string];
-		},
-	},
 	computed: {
 		...mapStores(useRootStore),
 		defaultLocale(): string {
@@ -72,5 +44,33 @@ export default defineComponent({
 			return convertToHumanReadableDate(epoch);
 		},
 	},
+	beforeMount() {
+		register(this.defaultLocale, this.localeFunc as LocaleFunc);
+	},
+	methods: {
+		localeFunc(_: number, index: number): [string, string] {
+			// number: the timeago / timein number;
+			// index: the index of array below;
+			return [
+				[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')],
+				[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
+				[
+					this.$locale.baseText('timeAgo.oneMinuteAgo'),
+					this.$locale.baseText('timeAgo.inOneMinute'),
+				],
+				[this.$locale.baseText('timeAgo.minutesAgo'), this.$locale.baseText('timeAgo.inMinutes')],
+				[this.$locale.baseText('timeAgo.oneHourAgo'), this.$locale.baseText('timeAgo.inOneHour')],
+				[this.$locale.baseText('timeAgo.hoursAgo'), this.$locale.baseText('timeAgo.inHours')],
+				[this.$locale.baseText('timeAgo.oneDayAgo'), this.$locale.baseText('timeAgo.inOneDay')],
+				[this.$locale.baseText('timeAgo.daysAgo'), this.$locale.baseText('timeAgo.inDays')],
+				[this.$locale.baseText('timeAgo.oneWeekAgo'), this.$locale.baseText('timeAgo.inOneWeek')],
+				[this.$locale.baseText('timeAgo.weeksAgo'), this.$locale.baseText('timeAgo.inWeeks')],
+				[this.$locale.baseText('timeAgo.oneMonthAgo'), this.$locale.baseText('timeAgo.inOneMonth')],
+				[this.$locale.baseText('timeAgo.monthsAgo'), this.$locale.baseText('timeAgo.inMonths')],
+				[this.$locale.baseText('timeAgo.oneYearAgo'), this.$locale.baseText('timeAgo.inOneYear')],
+				[this.$locale.baseText('timeAgo.yearsAgo'), this.$locale.baseText('timeAgo.inYears')],
+			][index] as [string, string];
+		},
+	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/TitledList.vue b/packages/editor-ui/src/components/TitledList.vue
index cd73f6d48e..67878533b0 100644
--- a/packages/editor-ui/src/components/TitledList.vue
+++ b/packages/editor-ui/src/components/TitledList.vue
@@ -8,16 +8,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { type PropType, defineComponent } from 'vue';
 
 export default defineComponent({
 	name: 'TitledList',
 	props: {
 		title: {
 			type: String,
+			required: true,
 		},
 		items: {
-			type: Array,
+			type: Array as PropType<string[]>,
 			default: () => [],
 		},
 	},