From b6e2b6943e5060040e14a830e06794b46a22a337 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 19 Jun 2023 15:20:30 +0300
Subject: [PATCH] feat: migrate several components

---
 packages/design-system/.storybook/main.js      |  4 ++++
 .../src/components/N8nTabs/Tabs.stories.ts     |  4 ++--
 .../src/components/N8nTabs/Tabs.vue            |  9 ++++++---
 .../src/components/N8nTree/Tree.stories.ts     |  1 +
 .../src/components/N8nTree/Tree.vue            | 18 ++++--------------
 packages/design-system/src/components/index.ts |  8 ++++----
 packages/design-system/src/plugin.ts           | 16 ++++++++--------
 .../src/components/NodeSettingsTabs.vue        | 12 +++++++++---
 packages/editor-ui/src/components/RunData.vue  |  6 +++++-
 9 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
index f0b872522d..b8bfdf5a1f 100644
--- a/packages/design-system/.storybook/main.js
+++ b/packages/design-system/.storybook/main.js
@@ -38,9 +38,13 @@ module.exports = {
 		'../src/components/N8nSelect/*.stories.@(js|jsx|ts|tsx)',
 		'../src/components/N8nSpinner/*.stories.@(js|jsx|ts|tsx)',
 		'../src/components/N8nSticky/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nTabs/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nTag/*.stories.@(js|jsx|ts|tsx)',
 		'../src/components/N8nTags/*.stories.@(js|jsx|ts|tsx)',
 		'../src/components/N8nText/*.stories.@(js|jsx|ts|tsx)',
 		'../src/components/N8nTooltip/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nTree/*.stories.@(js|jsx|ts|tsx)',
+		'../src/components/N8nUserInfo/*.stories.@(js|jsx|ts|tsx)',
 	],
 	addons: [
 		'@storybook/addon-styling',
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.stories.ts b/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
index 5a679759f7..614198efec 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
+++ b/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
@@ -13,7 +13,7 @@ export default {
 };
 
 const methods = {
-	onInput: action('input'),
+	onUpdateModelValue: action('update:modelValue'),
 };
 
 const Template: StoryFn = (args, { argTypes }) => ({
@@ -22,7 +22,7 @@ const Template: StoryFn = (args, { argTypes }) => ({
 	components: {
 		N8nTabs,
 	},
-	template: `<n8n-tabs v-model="val" v-bind="args" @input="onInput">
+	template: `<n8n-tabs v-model="val" v-bind="args" @update:modelValue="onUpdateModelValue">
 		</n8n-tabs>`,
 	methods,
 	data() {
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 8ce5387be8..cdcf6df930 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -34,7 +34,7 @@
 
 					<div
 						v-else
-						:class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }"
+						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
 						@click="() => handleTabClick(option.value)"
 					>
 						<n8n-icon v-if="option.icon" :icon="option.icon" size="medium" />
@@ -101,7 +101,10 @@ export default defineComponent({
 		};
 	},
 	props: {
-		value: {},
+		modelValue: {
+			type: String,
+			default: '',
+		},
 		options: {
 			type: Array as PropType<N8nTabOptions[]>,
 			default: (): N8nTabOptions[] => [],
@@ -112,7 +115,7 @@ export default defineComponent({
 			this.$emit('tooltipClick', tab, event);
 		},
 		handleTabClick(tab: string) {
-			this.$emit('input', tab);
+			this.$emit('update:modelValue', tab);
 		},
 		scrollLeft() {
 			this.scroll(-50);
diff --git a/packages/design-system/src/components/N8nTree/Tree.stories.ts b/packages/design-system/src/components/N8nTree/Tree.stories.ts
index 819b5894e2..d8f98dc903 100644
--- a/packages/design-system/src/components/N8nTree/Tree.stories.ts
+++ b/packages/design-system/src/components/N8nTree/Tree.stories.ts
@@ -7,6 +7,7 @@ export default {
 };
 
 export const Default: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
 	props: Object.keys(argTypes),
 	components: {
 		N8nTree,
diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
index 80a11b6670..743fb609e8 100644
--- a/packages/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/design-system/src/components/N8nTree/Tree.vue
@@ -2,24 +2,14 @@
 	<div class="n8n-tree">
 		<div v-for="(label, i) in Object.keys(value)" :key="i" :class="classes">
 			<div :class="$style.simple" v-if="isSimple(value[label])">
-				<slot
-					v-if="$scopedSlots.label"
-					name="label"
-					v-bind:label="label"
-					v-bind:path="getPath(label)"
-				/>
+				<slot v-if="$slots.label" name="label" v-bind:label="label" v-bind:path="getPath(label)" />
 				<span v-else>{{ label }}</span>
 				<span>:</span>
-				<slot v-if="$scopedSlots.value" name="value" v-bind:value="value[label]" />
+				<slot v-if="$slots.value" name="value" v-bind:value="value[label]" />
 				<span v-else>{{ value[label] }}</span>
 			</div>
 			<div v-else>
-				<slot
-					v-if="$scopedSlots.label"
-					name="label"
-					v-bind:label="label"
-					v-bind:path="getPath(label)"
-				/>
+				<slot v-if="$slots.label" name="label" v-bind:label="label" v-bind:path="getPath(label)" />
 				<span v-else>{{ label }}</span>
 				<n8n-tree
 					:path="getPath(label)"
@@ -27,7 +17,7 @@
 					:value="value[label]"
 					:nodeClass="nodeClass"
 				>
-					<template v-for="(index, name) in $scopedSlots" #[name]="data">
+					<template v-for="(index, name) in $slots" #[name]="data">
 						<slot :name="name" v-bind="data"></slot>
 					</template>
 				</n8n-tree>
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index 8b41b119d7..8c833f9b16 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -36,13 +36,13 @@ export { default as N8nRadioButtons } from './N8nRadioButtons';
 export { default as N8nSelect } from './N8nSelect';
 export { default as N8nSpinner } from './N8nSpinner';
 export { default as N8nSticky } from './N8nSticky';
+export { default as N8nTabs } from './N8nTabs';
+export { default as N8nTag } from './N8nTag';
 export { default as N8nTags } from './N8nTags';
-// export { default as N8nTabs } from './N8nTabs';
-// export { default as N8nTag } from './N8nTag';
 export { default as N8nText } from './N8nText';
 export { default as N8nTooltip } from './N8nTooltip';
-// export { default as N8nTree } from './N8nTree';
-// export { default as N8nUserInfo } from './N8nUserInfo';
+export { default as N8nTree } from './N8nTree';
+export { default as N8nUserInfo } from './N8nUserInfo';
 // export { default as N8nUserSelect } from './N8nUserSelect';
 // export { default as N8nUsersList } from './N8nUsersList';
 // export { default as N8nResizeWrapper } from './N8nResizeWrapper';
diff --git a/packages/design-system/src/plugin.ts b/packages/design-system/src/plugin.ts
index 9de54425c2..9079a43629 100644
--- a/packages/design-system/src/plugin.ts
+++ b/packages/design-system/src/plugin.ts
@@ -39,13 +39,13 @@ import {
 	N8nSelect,
 	N8nSpinner,
 	N8nSticky,
+	N8nTabs,
+	N8nTag,
 	N8nTags,
-	// N8nTabs,
-	// N8nTag,
 	N8nText,
 	N8nTooltip,
-	// N8nTree,
-	// N8nUserInfo,
+	N8nTree,
+	N8nUserInfo,
 	// N8nUserSelect,
 	// N8nUsersList,
 	// N8nResizeWrapper,
@@ -94,13 +94,13 @@ export const N8nPlugin: Plugin<{}> = {
 		app.component('n8n-select', N8nSelect);
 		app.component('n8n-spinner', N8nSpinner);
 		app.component('n8n-sticky', N8nSticky);
+		app.component('n8n-tabs', N8nTabs);
+		app.component('n8n-tag', N8nTag);
 		app.component('n8n-tags', N8nTags);
-		// app.component('n8n-tabs', N8nTabs);
-		// app.component('n8n-tag', N8nTag);
 		app.component('n8n-text', N8nText);
 		app.component('n8n-tooltip', N8nTooltip);
-		// app.component('n8n-user-info', N8nUserInfo);
-		// app.component('n8n-tree', N8nTree);
+		app.component('n8n-tree', N8nTree);
+		app.component('n8n-user-info', N8nUserInfo);
 		// app.component('n8n-users-list', N8nUsersList);
 		// app.component('n8n-user-select', N8nUserSelect);
 		// app.component('n8n-resize-wrapper', N8nResizeWrapper);
diff --git a/packages/editor-ui/src/components/NodeSettingsTabs.vue b/packages/editor-ui/src/components/NodeSettingsTabs.vue
index 2f4d9bee31..672acadb05 100644
--- a/packages/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/editor-ui/src/components/NodeSettingsTabs.vue
@@ -1,5 +1,10 @@
 <template>
-	<n8n-tabs :options="options" :value="value" @input="onTabSelect" @tooltipClick="onTooltipClick" />
+	<n8n-tabs
+		:options="options"
+		:modelValue="modelValue"
+		@update:modelValue="onTabSelect"
+		@tooltipClick="onTooltipClick"
+	/>
 </template>
 
 <script lang="ts">
@@ -22,8 +27,9 @@ export default defineComponent({
 	name: 'NodeSettingsTabs',
 	mixins: [externalHooks],
 	props: {
-		value: {
+		modelValue: {
 			type: String,
+			default: '',
 		},
 		nodeType: {},
 		sessionId: {
@@ -137,7 +143,7 @@ export default defineComponent({
 			}
 
 			if (tab === 'settings' || tab === 'params') {
-				this.$emit('input', tab);
+				this.$emit('update:modelValue', tab);
 			}
 		},
 		onTooltipClick(tab: string, event: MouseEvent) {
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index bded4dee20..ed5e9ff9c3 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -167,7 +167,11 @@
 			:class="$style.tabs"
 			data-test-id="branches"
 		>
-			<n8n-tabs :value="currentOutputIndex" @input="onBranchChange" :options="branches" />
+			<n8n-tabs
+				:modelValue="currentOutputIndex"
+				:options="branches"
+				@update:modelValue="onBranchChange"
+			/>
 		</div>
 
 		<div