From 9141d158238a5996bd56b1dc1526f567b14b6e86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Mon, 23 Sep 2024 10:17:50 +0200
Subject: [PATCH] refactor(editor): Migrate `TagsTable` to composition api
 (no-changelog) (#10898)

---
 .../TagsManager/TagsView/TagsTable.vue        | 273 +++++++++---------
 1 file changed, 137 insertions(+), 136 deletions(-)

diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index 15ff038a3..06f611d2e 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -1,138 +1,138 @@
-<script lang="ts">
-import type { ElTable } from 'element-plus';
+<script setup lang="ts">
+import { ElTable } from 'element-plus';
 import { MAX_TAG_NAME_LENGTH } from '@/constants';
 import type { ITagRow } from '@/Interface';
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
-import type { N8nInput } from 'n8n-design-system';
+import { onMounted, ref, watch } from 'vue';
+import { N8nInput } from 'n8n-design-system';
 import type { BaseTextKey } from '@/plugins/i18n';
 
-type TableRef = InstanceType<typeof ElTable>;
-type N8nInputRef = InstanceType<typeof N8nInput>;
+interface Props {
+	rows: ITagRow[];
+	isLoading: boolean;
+	newName: string;
+	isSaving: boolean;
+	usageColumnTitleLocaleKey: BaseTextKey;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	usageColumnTitleLocaleKey: 'tagsTable.usage',
+});
+
+const emit = defineEmits<{
+	updateEnable: [id: string];
+	newNameChange: [name: string];
+	deleteEnable: [id: string];
+	cancelOperation: [];
+	applyOperation: [];
+}>();
 
 const INPUT_TRANSITION_TIMEOUT = 350;
 const DELETE_TRANSITION_TIMEOUT = 100;
 
-export default defineComponent({
-	name: 'TagsTable',
-	props: {
-		rows: {
-			type: Array as () => ITagRow[],
-			required: true,
-		},
-		isLoading: {
-			type: Boolean,
-			required: true,
-		},
-		newName: {
-			type: String,
-			required: true,
-		},
-		isSaving: {
-			type: Boolean,
-			required: true,
-		},
-		usageColumnTitleLocaleKey: {
-			type: String as PropType<BaseTextKey>,
-			default: 'tagsTable.usage',
-		},
-	},
-	data() {
-		return {
-			maxLength: MAX_TAG_NAME_LENGTH,
-		};
-	},
-	watch: {
-		rows(newValue: ITagRow[] | undefined) {
-			if (newValue?.[0] && newValue[0].create) {
-				this.focusOnCreate();
-			}
-		},
-	},
-	mounted() {
-		if (this.rows.length === 1 && this.rows[0].create) {
-			this.focusOnInput();
+const table = ref<InstanceType<typeof ElTable> | null>(null);
+// ESLint: false positive, this is not a redundant type
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+const nameInput = ref<InstanceType<typeof N8nInput> | null>(null);
+
+const maxLength = ref(MAX_TAG_NAME_LENGTH);
+
+const getRowClasses = ({ row }: { row: ITagRow }): string => {
+	return row.disable ? 'disabled' : '';
+};
+
+const getSpan = ({
+	row,
+	columnIndex,
+}: {
+	row: ITagRow;
+	columnIndex: number;
+}): { rowspan: number; colspan: number } | undefined => {
+	// expand text column with delete message
+	if (columnIndex === 0 && row.tag && row.delete) {
+		return { rowspan: 1, colspan: 2 };
+	}
+	// hide usage column on delete
+	if (columnIndex === 1 && row.tag && row.delete) {
+		return { rowspan: 0, colspan: 0 };
+	}
+
+	return { rowspan: 1, colspan: 1 };
+};
+
+const enableUpdate = (row: ITagRow): void => {
+	if (row.tag) {
+		emit('updateEnable', row.tag.id);
+		emit('newNameChange', row.tag.name);
+		focusOnInput();
+	}
+};
+
+const enableDelete = (row: ITagRow): void => {
+	if (row.tag) {
+		emit('deleteEnable', row.tag.id);
+		focusOnDelete();
+	}
+};
+
+const cancel = (): void => {
+	emit('cancelOperation');
+};
+
+const apply = (): void => {
+	emit('applyOperation');
+};
+
+const onNewNameChange = (name: string): void => {
+	emit('newNameChange', name);
+};
+
+const focusOnInput = (): void => {
+	setTimeout(() => {
+		if (nameInput.value?.focus) {
+			nameInput.value.focus();
+		}
+	}, INPUT_TRANSITION_TIMEOUT);
+};
+
+const focusOnDelete = (): void => {
+	setTimeout(() => {
+		const inputRef = nameInput.value;
+		if (inputRef?.focus) {
+			inputRef.focus();
+		}
+	}, DELETE_TRANSITION_TIMEOUT);
+};
+
+const focusOnCreate = (): void => {
+	const bodyWrapperRef = table.value?.$refs.bodyWrapper as HTMLElement;
+	if (bodyWrapperRef) {
+		bodyWrapperRef.scrollTop = 0;
+	}
+
+	focusOnInput();
+};
+
+watch(
+	() => props.rows,
+	(newValue: ITagRow[] | undefined) => {
+		if (newValue?.[0] && newValue[0].create) {
+			focusOnCreate();
 		}
 	},
-	methods: {
-		getRowClasses: ({ row }: { row: ITagRow }): string => {
-			return row.disable ? 'disabled' : '';
-		},
+);
 
-		getSpan({ row, columnIndex }: { row: ITagRow; columnIndex: number }): number | number[] {
-			// expand text column with delete message
-			if (columnIndex === 0 && row.tag && row.delete) {
-				return [1, 2];
-			}
-			// hide usage column on delete
-			if (columnIndex === 1 && row.tag && row.delete) {
-				return [0, 0];
-			}
-
-			return 1;
-		},
-
-		enableUpdate(row: ITagRow): void {
-			if (row.tag) {
-				this.$emit('updateEnable', row.tag.id);
-				this.$emit('newNameChange', row.tag.name);
-				this.focusOnInput();
-			}
-		},
-
-		enableDelete(row: ITagRow): void {
-			if (row.tag) {
-				this.$emit('deleteEnable', row.tag.id);
-				this.focusOnDelete();
-			}
-		},
-
-		cancel(): void {
-			this.$emit('cancelOperation');
-		},
-		apply(): void {
-			this.$emit('applyOperation');
-		},
-
-		onNewNameChange(name: string): void {
-			this.$emit('newNameChange', name);
-		},
-
-		focusOnInput(): void {
-			setTimeout(() => {
-				const inputRef = this.$refs.nameInput as N8nInputRef | undefined;
-				if (inputRef?.focus) {
-					inputRef.focus();
-				}
-			}, INPUT_TRANSITION_TIMEOUT);
-		},
-
-		focusOnDelete(): void {
-			setTimeout(() => {
-				const inputRef = this.$refs.deleteHiddenInput as N8nInputRef | undefined;
-				if (inputRef?.focus) {
-					inputRef.focus();
-				}
-			}, DELETE_TRANSITION_TIMEOUT);
-		},
-
-		focusOnCreate(): void {
-			const bodyWrapperRef = (this.$refs.table as TableRef).$refs.bodyWrapper as HTMLElement;
-			if (bodyWrapperRef) {
-				bodyWrapperRef.scrollTop = 0;
-			}
-
-			this.focusOnInput();
-		},
-	},
+onMounted(() => {
+	if (props.rows.length === 1 && props.rows[0].create) {
+		focusOnInput();
+	}
 });
 </script>
 
 <template>
-	<el-table
+	<ElTable
 		ref="table"
 		v-loading="isLoading"
-		class="tags-table"
+		:class="$style['tags-table']"
 		stripe
 		max-height="450"
 		:empty-text="$locale.baseText('tagsTable.noMatchingTagsExist')"
@@ -142,20 +142,20 @@ export default defineComponent({
 	>
 		<el-table-column :label="$locale.baseText('tagsTable.name')">
 			<template #default="scope">
-				<div :key="scope.row.id" class="name" @keydown.stop>
+				<div :key="scope.row.id" :class="$style.name" @keydown.stop>
 					<transition name="fade" mode="out-in">
-						<n8n-input
+						<N8nInput
 							v-if="scope.row.create || scope.row.update"
 							ref="nameInput"
 							:model-value="newName"
 							:maxlength="maxLength"
 							@update:model-value="onNewNameChange"
-						></n8n-input>
+						></N8nInput>
 						<span v-else-if="scope.row.delete">
 							<span>{{ $locale.baseText('tagsTable.areYouSureYouWantToDeleteThisTag') }}</span>
-							<input ref="deleteHiddenInput" class="hidden" />
+							<input ref="deleteHiddenInput" :class="$style.hidden" />
 						</span>
-						<span v-else :class="{ disabled: scope.row.disable }">
+						<span v-else :class="{ [$style.disabled]: scope.row.disable }">
 							{{ scope.row.tag.name }}
 						</span>
 					</transition>
@@ -167,7 +167,7 @@ export default defineComponent({
 				<transition name="fade" mode="out-in">
 					<div
 						v-if="!scope.row.create && !scope.row.delete"
-						:class="{ disabled: scope.row.disable }"
+						:class="{ [$style.disabled]: scope.row.disable }"
 					>
 						{{ scope.row.usage }}
 					</div>
@@ -177,7 +177,7 @@ export default defineComponent({
 		<el-table-column>
 			<template #default="scope">
 				<transition name="fade" mode="out-in">
-					<div v-if="scope.row.create" class="ops">
+					<div v-if="scope.row.create" :class="$style.ops">
 						<n8n-button
 							:label="$locale.baseText('tagsTable.cancel')"
 							type="secondary"
@@ -190,7 +190,7 @@ export default defineComponent({
 							@click.stop="apply"
 						/>
 					</div>
-					<div v-else-if="scope.row.update" class="ops">
+					<div v-else-if="scope.row.update" :class="$style.ops">
 						<n8n-button
 							:label="$locale.baseText('tagsTable.cancel')"
 							type="secondary"
@@ -203,7 +203,7 @@ export default defineComponent({
 							@click.stop="apply"
 						/>
 					</div>
-					<div v-else-if="scope.row.delete" class="ops">
+					<div v-else-if="scope.row.delete" :class="$style.ops">
 						<n8n-button
 							:label="$locale.baseText('tagsTable.cancel')"
 							type="secondary"
@@ -216,7 +216,7 @@ export default defineComponent({
 							@click.stop="apply"
 						/>
 					</div>
-					<div v-else-if="!scope.row.disable" class="ops main">
+					<div v-else-if="!scope.row.disable" :class="[$style.ops, $style.main]">
 						<n8n-icon-button
 							:title="$locale.baseText('tagsTable.editTag')"
 							icon="pen"
@@ -234,16 +234,15 @@ export default defineComponent({
 				</transition>
 			</template>
 		</el-table-column>
-	</el-table>
+	</ElTable>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .tags-table {
 	:deep(tr.disabled) {
 		pointer-events: none;
 	}
 }
-
 .name {
 	min-height: 45px;
 	display: flex;
@@ -261,6 +260,11 @@ export default defineComponent({
 	> * {
 		margin: 2px;
 	}
+
+	&.main {
+		display: none;
+		margin-left: 2px;
+	}
 }
 
 .disabled {
@@ -273,15 +277,12 @@ export default defineComponent({
 	opacity: 0;
 }
 
-.ops.main {
-	display: none;
-	margin-left: 2px;
-}
-
 tr:hover .ops:not(.disabled) {
 	display: flex;
 }
+</style>
 
+<style lang="scss" scoped>
 .fade-enter-active,
 .fade-leave-active {
 	transition: opacity 0.2s;