From 08c6e9b57146ef583a5f0b083b0a4edfc0e49fcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Tue, 18 Jun 2024 09:55:10 +0200
Subject: [PATCH] refactor(editor): Replace mixed style of defineProps with the
 new style (no-changelog) (#9787)

---
 packages/@n8n/chat/src/components/Message.vue | 10 ++----
 .../chat/src/components/MessageTyping.vue     | 13 +++----
 .../@n8n/chat/src/components/MessagesList.vue | 10 ++----
 .../N8nCircleLoader/CircleLoader.vue          | 22 +++++-------
 .../src/components/N8nUserStack/UserStack.vue | 35 +++++++------------
 .../ResizeObserver/ResizeObserver.vue         | 23 +++++-------
 .../src/styleguide/ColorCircles.vue           |  8 +----
 .../design-system/src/styleguide/Sizes.vue    | 18 +++++-----
 .../src/components/ChatEmbedModal.vue         | 13 +++----
 .../CredentialPicker/CredentialPicker.vue     | 19 +++-------
 .../CredentialPicker/CredentialsDropdown.vue  | 15 +++-----
 .../ExternalSecretsProviderCard.ee.vue        | 10 ++----
 ...rnalSecretsProviderConnectionSwitch.ee.vue | 30 +++++++---------
 .../ExternalSecretsProviderImage.ee.vue       | 10 ++----
 .../ExternalSecretsProviderModal.ee.vue       | 10 ++----
 .../editor-ui/src/components/Feedback.vue     | 10 ++----
 .../src/components/ImportCurlParameter.vue    |  9 ++---
 .../editor-ui/src/components/NpsSurvey.vue    |  8 ++---
 .../components/SourceControlPullModal.ee.vue  | 17 ++-------
 .../components/SourceControlPushModal.ee.vue  | 10 ++----
 .../src/components/TextWithHighlights.vue     | 13 +++----
 .../editor-ui/src/components/VariablesRow.vue | 19 +++++-----
 .../components/Workers/WorkerAccordion.ee.vue | 24 ++++++-------
 .../global/GlobalExecutionsList.vue           | 29 ++++++---------
 .../global/GlobalExecutionsListItem.vue       | 23 +++++-------
 packages/editor-ui/src/views/MfaView.vue      |  6 ++--
 .../SetupTemplateFormStep.vue                 | 24 +++++--------
 27 files changed, 161 insertions(+), 277 deletions(-)

diff --git a/packages/@n8n/chat/src/components/Message.vue b/packages/@n8n/chat/src/components/Message.vue
index fdcdba101d..81ae8429d9 100644
--- a/packages/@n8n/chat/src/components/Message.vue
+++ b/packages/@n8n/chat/src/components/Message.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { PropType } from 'vue';
 import { computed, toRefs } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
 import hljs from 'highlight.js/lib/core';
@@ -9,12 +8,9 @@ import type MarkdownIt from 'markdown-it';
 import type { ChatMessage, ChatMessageText } from '@n8n/chat/types';
 import { useOptions } from '@n8n/chat/composables';
 
-const props = defineProps({
-	message: {
-		type: Object as PropType<ChatMessage>,
-		required: true,
-	},
-});
+const props = defineProps<{
+	message: ChatMessage;
+}>();
 
 const { message } = toRefs(props);
 const { options } = useOptions();
diff --git a/packages/@n8n/chat/src/components/MessageTyping.vue b/packages/@n8n/chat/src/components/MessageTyping.vue
index cf5981a97c..ff66181284 100644
--- a/packages/@n8n/chat/src/components/MessageTyping.vue
+++ b/packages/@n8n/chat/src/components/MessageTyping.vue
@@ -1,15 +1,16 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import { computed } from 'vue';
 import { Message } from './index';
 import type { ChatMessage } from '@n8n/chat/types';
 
-const props = defineProps({
-	animation: {
-		type: String as PropType<'bouncing' | 'scaling'>,
-		default: 'bouncing',
+const props = withDefaults(
+	defineProps<{
+		animation?: 'bouncing' | 'scaling';
+	}>(),
+	{
+		animation: 'bouncing',
 	},
-});
+);
 
 const message: ChatMessage = {
 	id: 'typing',
diff --git a/packages/@n8n/chat/src/components/MessagesList.vue b/packages/@n8n/chat/src/components/MessagesList.vue
index 7781c45046..d60fbd7187 100644
--- a/packages/@n8n/chat/src/components/MessagesList.vue
+++ b/packages/@n8n/chat/src/components/MessagesList.vue
@@ -1,16 +1,12 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import Message from '@n8n/chat/components/Message.vue';
 import type { ChatMessage } from '@n8n/chat/types';
 import MessageTyping from '@n8n/chat/components/MessageTyping.vue';
 import { useChat } from '@n8n/chat/composables';
 
-defineProps({
-	messages: {
-		type: Array as PropType<ChatMessage[]>,
-		required: true,
-	},
-});
+defineProps<{
+	messages: ChatMessage[];
+}>();
 
 const chatStore = useChat();
 
diff --git a/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue b/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue
index a9231c2852..7f8e88a0b6 100644
--- a/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue
+++ b/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue
@@ -23,20 +23,16 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-const props = defineProps({
-	radius: {
-		type: Number,
-		required: true,
+const props = withDefaults(
+	defineProps<{
+		radius: number;
+		progress: number;
+		strokeWidth?: number;
+	}>(),
+	{
+		strokeWidth: 4,
 	},
-	progress: {
-		type: Number,
-		required: true,
-	},
-	strokeWidth: {
-		type: Number,
-		default: 4,
-	},
-});
+);
 
 // for SVG viewbox and stroke array
 const diameter = computed(() => 2 * (props.radius + props.strokeWidth));
diff --git a/packages/design-system/src/components/N8nUserStack/UserStack.vue b/packages/design-system/src/components/N8nUserStack/UserStack.vue
index 047239ade2..bb338d3c61 100644
--- a/packages/design-system/src/components/N8nUserStack/UserStack.vue
+++ b/packages/design-system/src/components/N8nUserStack/UserStack.vue
@@ -1,31 +1,22 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import type { IUser, UserStackGroups } from 'n8n-design-system/types';
 import N8nAvatar from '../N8nAvatar';
 import N8nUserInfo from '../N8nUserInfo';
-import type { PropType } from 'vue';
-import { computed } from 'vue';
 
-const props = defineProps({
-	users: {
-		type: Object as PropType<UserStackGroups>,
-		required: true,
+const props = withDefaults(
+	defineProps<{
+		users: UserStackGroups;
+		currentUserEmail?: string;
+		maxAvatars?: number;
+		dropdownTrigger?: 'hover' | 'click';
+	}>(),
+	{
+		currentUserEmail: '',
+		maxAvatars: 2,
+		dropdownTrigger: 'hover',
 	},
-	currentUserEmail: {
-		type: String,
-		required: false,
-		default: '',
-	},
-	maxAvatars: {
-		type: Number,
-		default: 2,
-		validator: (value: number) => value > 0,
-	},
-	dropdownTrigger: {
-		type: String,
-		default: 'hover',
-		validator: (value: string) => ['hover', 'click'].includes(value),
-	},
-});
+);
 
 const nonEmptyGroups = computed(() => {
 	const users: UserStackGroups = {};
diff --git a/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue b/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
index afc3fa93f1..1dece8d520 100644
--- a/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
+++ b/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
@@ -3,21 +3,16 @@ import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
 
 export type BreakpointDefinition = { bp: string; width: number };
 
-const props = defineProps({
-	enabled: {
-		type: Boolean,
-		default: true,
+const props = withDefaults(
+	defineProps<{
+		enabled?: boolean;
+		breakpoints?: BreakpointDefinition[];
+	}>(),
+	{
+		enabled: true,
+		breakpoints: () => [],
 	},
-	breakpoints: {
-		type: Array as () => BreakpointDefinition[],
-		validator: (breakpoints: BreakpointDefinition[]) => {
-			if (breakpoints.length === 0) return true;
-
-			return breakpoints.every((bp) => typeof bp.width === 'number' && typeof bp.bp === 'string');
-		},
-		default: () => [],
-	},
-});
+);
 
 const observer = ref<ResizeObserver | null>(null);
 const breakpoint = ref('');
diff --git a/packages/design-system/src/styleguide/ColorCircles.vue b/packages/design-system/src/styleguide/ColorCircles.vue
index a1c2904991..007d731bd8 100644
--- a/packages/design-system/src/styleguide/ColorCircles.vue
+++ b/packages/design-system/src/styleguide/ColorCircles.vue
@@ -1,14 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
-import type { PropType } from 'vue';
 import { getHex, resolveHSLCalc } from './ColorCircles.utils';
 
-const props = defineProps({
-	colors: {
-		type: Array as PropType<string[]>,
-		required: true,
-	},
-});
+const props = defineProps<{ colors: string[] }>();
 
 const getColors = () => {
 	const style = getComputedStyle(document.body);
diff --git a/packages/design-system/src/styleguide/Sizes.vue b/packages/design-system/src/styleguide/Sizes.vue
index 56d9a345bc..0567d62f12 100644
--- a/packages/design-system/src/styleguide/Sizes.vue
+++ b/packages/design-system/src/styleguide/Sizes.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import { ref, onMounted, onUnmounted } from 'vue';
 
 type Size = {
@@ -8,16 +7,15 @@ type Size = {
 };
 
 // Define props with their types
-const props = defineProps({
-	variables: {
-		type: Array as PropType<string[]>,
-		required: true,
+const props = withDefaults(
+	defineProps<{
+		variables: string[];
+		attr?: string;
+	}>(),
+	{
+		attr: '',
 	},
-	attr: {
-		type: String,
-		default: '',
-	},
-});
+);
 
 const getSizes = () => {
 	const style = getComputedStyle(document.body);
diff --git a/packages/editor-ui/src/components/ChatEmbedModal.vue b/packages/editor-ui/src/components/ChatEmbedModal.vue
index 0aad76bb65..2db07e0935 100644
--- a/packages/editor-ui/src/components/ChatEmbedModal.vue
+++ b/packages/editor-ui/src/components/ChatEmbedModal.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import { computed, ref } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
@@ -11,12 +10,14 @@ import HtmlEditor from '@/components/HtmlEditor/HtmlEditor.vue';
 import JsEditor from '@/components/JsEditor/JsEditor.vue';
 import { useI18n } from '@/composables/useI18n';
 
-const props = defineProps({
-	modalBus: {
-		type: Object as PropType<EventBus>,
-		default: () => createEventBus(),
+const props = withDefaults(
+	defineProps<{
+		modalBus?: EventBus;
+	}>(),
+	{
+		modalBus: () => createEventBus(),
 	},
-});
+);
 
 const i18n = useI18n();
 const rootStore = useRootStore();
diff --git a/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue b/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
index 1f3980aca8..b603b9f698 100644
--- a/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
+++ b/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
@@ -7,20 +7,11 @@ import CredentialsDropdown from './CredentialsDropdown.vue';
 import { useI18n } from '@/composables/useI18n';
 import { CREDENTIAL_EDIT_MODAL_KEY } from '@/constants';
 
-const props = defineProps({
-	appName: {
-		type: String,
-		required: true,
-	},
-	credentialType: {
-		type: String,
-		required: true,
-	},
-	selectedCredentialId: {
-		type: String,
-		required: false,
-	},
-});
+const props = defineProps<{
+	appName: string;
+	credentialType: string;
+	selectedCredentialId: string | null;
+}>();
 
 const $emit = defineEmits({
 	credentialSelected: (_credentialId: string) => true,
diff --git a/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue b/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue
index 5c9c2d79e9..b73a9c7167 100644
--- a/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue
+++ b/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import { useI18n } from '@/composables/useI18n';
 
 export type CredentialOption = {
@@ -8,16 +7,10 @@ export type CredentialOption = {
 	typeDisplayName: string | undefined;
 };
 
-const props = defineProps({
-	credentialOptions: {
-		type: Array as PropType<CredentialOption[]>,
-		required: true,
-	},
-	selectedCredentialId: {
-		type: String,
-		required: false,
-	},
-});
+const props = defineProps<{
+	credentialOptions: CredentialOption[];
+	selectedCredentialId: string | null;
+}>();
 
 const $emit = defineEmits({
 	credentialSelected: (_credentialId: string) => true,
diff --git a/packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue b/packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue
index 729c5d9e9f..5722e2734a 100644
--- a/packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue
+++ b/packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import type { ExternalSecretsProvider } from '@/Interface';
 import ExternalSecretsProviderImage from '@/components/ExternalSecretsProviderImage.ee.vue';
 import ExternalSecretsProviderConnectionSwitch from '@/components/ExternalSecretsProviderConnectionSwitch.ee.vue';
@@ -13,12 +12,9 @@ import { DateTime } from 'luxon';
 import { computed, nextTick, onMounted, toRef } from 'vue';
 import { isDateObject } from '@/utils/typeGuards';
 
-const props = defineProps({
-	provider: {
-		type: Object as PropType<ExternalSecretsProvider>,
-		required: true,
-	},
-});
+const props = defineProps<{
+	provider: ExternalSecretsProvider;
+}>();
 
 const externalSecretsStore = useExternalSecretsStore();
 const i18n = useI18n();
diff --git a/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue b/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue
index 79aecfd6f7..e11c8200ab 100644
--- a/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue
+++ b/packages/editor-ui/src/components/ExternalSecretsProviderConnectionSwitch.ee.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import type { ExternalSecretsProvider } from '@/Interface';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { useToast } from '@/composables/useToast';
@@ -12,24 +11,19 @@ const emit = defineEmits<{
 	(e: 'change', value: boolean): void;
 }>();
 
-const props = defineProps({
-	provider: {
-		type: Object as PropType<ExternalSecretsProvider>,
-		required: true,
+const props = withDefaults(
+	defineProps<{
+		provider: ExternalSecretsProvider;
+		eventBus?: EventBus;
+		disabled?: boolean;
+		beforeUpdate?: (value: boolean) => Promise<boolean>;
+	}>(),
+	{
+		eventBus: undefined,
+		disabled: false,
+		beforeUpdate: undefined,
 	},
-	eventBus: {
-		type: Object as PropType<EventBus>,
-		default: undefined,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	beforeUpdate: {
-		type: Function,
-		default: undefined,
-	},
-});
+);
 
 const loadingService = useLoadingService();
 const externalSecretsStore = useExternalSecretsStore();
diff --git a/packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue b/packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue
index 95c362820c..0d6b308d83 100644
--- a/packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue
+++ b/packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import type { ExternalSecretsProvider } from '@/Interface';
 import { computed } from 'vue';
 
@@ -8,12 +7,9 @@ import doppler from '../assets/images/doppler.webp';
 import vault from '../assets/images/hashicorp.webp';
 import awsSecretsManager from '../assets/images/aws-secrets-manager.svg';
 
-const props = defineProps({
-	provider: {
-		type: Object as PropType<ExternalSecretsProvider>,
-		required: true,
-	},
-});
+const props = defineProps<{
+	provider: ExternalSecretsProvider;
+}>();
 
 const image = computed(
 	() =>
diff --git a/packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue b/packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue
index 51b5efdc88..fbd33a3a03 100644
--- a/packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue
+++ b/packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue
@@ -2,7 +2,6 @@
 import Modal from './Modal.vue';
 import { EXTERNAL_SECRETS_PROVIDER_MODAL_KEY, MODAL_CONFIRM } from '@/constants';
 import { computed, onMounted, ref } from 'vue';
-import type { PropType } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 import { useExternalSecretsProvider } from '@/composables/useExternalSecretsProvider';
 import { useI18n } from '@/composables/useI18n';
@@ -21,12 +20,9 @@ import ExternalSecretsProviderImage from '@/components/ExternalSecretsProviderIm
 import ExternalSecretsProviderConnectionSwitch from '@/components/ExternalSecretsProviderConnectionSwitch.ee.vue';
 import { createEventBus } from 'n8n-design-system/utils';
 
-const props = defineProps({
-	data: {
-		type: Object as PropType<{ eventBus: EventBus; name: string }>,
-		default: () => ({}),
-	},
-});
+const props = defineProps<{
+	data: { eventBus: EventBus; name: string };
+}>();
 
 const defaultProviderData: Record<string, Partial<ExternalSecretsProviderData>> = {
 	infisical: {
diff --git a/packages/editor-ui/src/components/Feedback.vue b/packages/editor-ui/src/components/Feedback.vue
index 9171737935..3b6d8a4bed 100644
--- a/packages/editor-ui/src/components/Feedback.vue
+++ b/packages/editor-ui/src/components/Feedback.vue
@@ -1,17 +1,13 @@
 <script lang="ts" setup>
 import { useI18n } from '@/composables/useI18n';
-import type { PropType } from 'vue';
 
 const emit = defineEmits<{
 	(e: 'update:modelValue', feedback: 'positive' | 'negative'): void;
 }>();
 
-defineProps({
-	modelValue: {
-		type: String as PropType<'positive' | 'negative' | undefined>,
-		default: undefined,
-	},
-});
+defineProps<{
+	modelValue?: 'positive' | 'negative';
+}>();
 
 const i18n = useI18n();
 
diff --git a/packages/editor-ui/src/components/ImportCurlParameter.vue b/packages/editor-ui/src/components/ImportCurlParameter.vue
index a1b169d95c..22ebd2f33e 100644
--- a/packages/editor-ui/src/components/ImportCurlParameter.vue
+++ b/packages/editor-ui/src/components/ImportCurlParameter.vue
@@ -3,12 +3,9 @@ import { GENERATE_CURL_MODAL_KEY, IMPORT_CURL_MODAL_KEY } from '@/constants';
 import { useUIStore } from '@/stores/ui.store';
 import { useAIStore } from '@/stores/ai.store';
 
-defineProps({
-	isReadOnly: {
-		type: Boolean,
-		default: false,
-	},
-});
+defineProps<{
+	isReadOnly: boolean;
+}>();
 
 const uiStore = useUIStore();
 const aiStore = useAIStore();
diff --git a/packages/editor-ui/src/components/NpsSurvey.vue b/packages/editor-ui/src/components/NpsSurvey.vue
index 30b0d75617..ff8dee0001 100644
--- a/packages/editor-ui/src/components/NpsSurvey.vue
+++ b/packages/editor-ui/src/components/NpsSurvey.vue
@@ -9,11 +9,9 @@ import { createEventBus } from 'n8n-design-system/utils';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 
-const props = defineProps({
-	isActive: {
-		type: Boolean,
-	},
-});
+const props = defineProps<{
+	isActive?: boolean;
+}>();
 
 const rootStore = useRootStore();
 const i18n = useI18n();
diff --git a/packages/editor-ui/src/components/SourceControlPullModal.ee.vue b/packages/editor-ui/src/components/SourceControlPullModal.ee.vue
index 9bca97122b..624b2dd61f 100644
--- a/packages/editor-ui/src/components/SourceControlPullModal.ee.vue
+++ b/packages/editor-ui/src/components/SourceControlPullModal.ee.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import Modal from './Modal.vue';
 import { SOURCE_CONTROL_PULL_MODAL_KEY } from '@/constants';
-import type { PropType } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 import type { SourceControlAggregatedFile } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
@@ -9,16 +8,12 @@ import { useLoadingService } from '@/composables/useLoadingService';
 import { useToast } from '@/composables/useToast';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores/ui.store';
-import { useRoute, useRouter } from 'vue-router';
 import { computed, nextTick, ref } from 'vue';
 import { sourceControlEventBus } from '@/event-bus/source-control';
 
-const props = defineProps({
-	data: {
-		type: Object as PropType<{ eventBus: EventBus; status: SourceControlAggregatedFile[] }>,
-		default: () => ({}),
-	},
-});
+const props = defineProps<{
+	data: { eventBus: EventBus; status: SourceControlAggregatedFile[] };
+}>();
 
 const incompleteFileTypes = ['variables', 'credential'];
 
@@ -27,8 +22,6 @@ const uiStore = useUIStore();
 const toast = useToast();
 const i18n = useI18n();
 const sourceControlStore = useSourceControlStore();
-const router = useRouter();
-const route = useRoute();
 
 const files = ref<SourceControlAggregatedFile[]>(props.data.status || []);
 
@@ -40,10 +33,6 @@ const modifiedWorkflowFiles = computed(() => {
 	return workflowFiles.value.filter((file) => file.status === 'modified');
 });
 
-const deletedWorkflowFiles = computed(() => {
-	return workflowFiles.value.filter((file) => file.status === 'deleted');
-});
-
 function close() {
 	uiStore.closeModal(SOURCE_CONTROL_PULL_MODAL_KEY);
 }
diff --git a/packages/editor-ui/src/components/SourceControlPushModal.ee.vue b/packages/editor-ui/src/components/SourceControlPushModal.ee.vue
index c7bf91427b..99165c4409 100644
--- a/packages/editor-ui/src/components/SourceControlPushModal.ee.vue
+++ b/packages/editor-ui/src/components/SourceControlPushModal.ee.vue
@@ -2,7 +2,6 @@
 import Modal from './Modal.vue';
 import { CREDENTIAL_EDIT_MODAL_KEY, SOURCE_CONTROL_PUSH_MODAL_KEY } from '@/constants';
 import { computed, onMounted, ref } from 'vue';
-import type { PropType } from 'vue';
 import type { EventBus } from 'n8n-design-system/utils';
 import type { SourceControlAggregatedFile } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
@@ -13,12 +12,9 @@ import { useUIStore } from '@/stores/ui.store';
 import { useRoute } from 'vue-router';
 import dateformat from 'dateformat';
 
-const props = defineProps({
-	data: {
-		type: Object as PropType<{ eventBus: EventBus; status: SourceControlAggregatedFile[] }>,
-		default: () => ({}),
-	},
-});
+const props = defineProps<{
+	data: { eventBus: EventBus; status: SourceControlAggregatedFile[] };
+}>();
 
 const defaultStagedFileTypes = ['tags', 'variables', 'credential'];
 
diff --git a/packages/editor-ui/src/components/TextWithHighlights.vue b/packages/editor-ui/src/components/TextWithHighlights.vue
index ed1d4f7e99..1d6164ef3d 100644
--- a/packages/editor-ui/src/components/TextWithHighlights.vue
+++ b/packages/editor-ui/src/components/TextWithHighlights.vue
@@ -1,16 +1,11 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import type { GenericValue } from 'n8n-workflow';
 import { computed } from 'vue';
 
-const props = defineProps({
-	content: {
-		type: [Object, String, Number] as PropType<GenericValue>,
-	},
-	search: {
-		type: String,
-	},
-});
+const props = defineProps<{
+	content: GenericValue;
+	search?: string;
+}>();
 
 const splitTextBySearch = (
 	text = '',
diff --git a/packages/editor-ui/src/components/VariablesRow.vue b/packages/editor-ui/src/components/VariablesRow.vue
index 0ddbe58c33..43e9e63d2a 100644
--- a/packages/editor-ui/src/components/VariablesRow.vue
+++ b/packages/editor-ui/src/components/VariablesRow.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ComponentPublicInstance, PropType } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import type { Rule, RuleGroup } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
@@ -19,16 +19,15 @@ const usersStore = useUsersStore();
 
 const emit = defineEmits(['save', 'cancel', 'edit', 'delete']);
 
-const props = defineProps({
-	data: {
-		type: Object as PropType<IResource>,
-		default: () => ({}),
+const props = withDefaults(
+	defineProps<{
+		data: IResource;
+		editing: boolean;
+	}>(),
+	{
+		editing: false,
 	},
-	editing: {
-		type: Boolean,
-		default: false,
-	},
-});
+);
 
 const permissions = computed(() => getVariablesPermissions(usersStore.currentUser));
 const modelValue = ref<IResource>({ ...props.data });
diff --git a/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue b/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
index 4f5d145321..39b9b15b9a 100644
--- a/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
@@ -16,20 +16,18 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-const props = defineProps({
-	icon: {
-		type: String,
-		default: 'tasks',
+const props = withDefaults(
+	defineProps<{
+		icon?: string;
+		iconColor?: string;
+		initialExpanded?: boolean;
+	}>(),
+	{
+		icon: 'tasks',
+		iconColor: 'black',
+		initialExpanded: true,
 	},
-	iconColor: {
-		type: String,
-		default: 'black',
-	},
-	initialExpanded: {
-		type: Boolean,
-		default: true,
-	},
-});
+);
 
 const expanded = ref<boolean>(props.initialExpanded);
 
diff --git a/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue b/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
index 0572fafe53..cdece9ebf1 100644
--- a/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
+++ b/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import { watch, computed, ref, onMounted } from 'vue';
 import ExecutionsFilter from '@/components/executions/ExecutionsFilter.vue';
 import GlobalExecutionsListItem from '@/components/executions/global/GlobalExecutionsListItem.vue';
@@ -13,24 +12,18 @@ import type { ExecutionSummary } from 'n8n-workflow';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useExecutionsStore } from '@/stores/executions.store';
 
-const props = defineProps({
-	executions: {
-		type: Array as PropType<ExecutionSummary[]>,
-		default: () => [],
+const props = withDefaults(
+	defineProps<{
+		executions: ExecutionSummary[];
+		filters: ExecutionFilterType;
+		total: number;
+		estimated: boolean;
+	}>(),
+	{
+		total: 0,
+		estimated: false,
 	},
-	filters: {
-		type: Object as PropType<ExecutionFilterType>,
-		default: () => ({}),
-	},
-	total: {
-		type: Number,
-		default: 0,
-	},
-	estimated: {
-		type: Boolean,
-		default: false,
-	},
-});
+);
 
 const emit = defineEmits(['closeModal', 'execution:stop', 'update:autoRefresh', 'update:filters']);
 
diff --git a/packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue b/packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue
index c2049050a7..cdc2de04b0 100644
--- a/packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue
+++ b/packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue';
 import { ref, computed, useCssModule } from 'vue';
 import type { ExecutionSummary } from 'n8n-workflow';
 import { useI18n } from '@/composables/useI18n';
@@ -12,20 +11,16 @@ import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
 
 const emit = defineEmits(['stop', 'select', 'retrySaved', 'retryOriginal', 'delete']);
 
-const props = defineProps({
-	execution: {
-		type: Object as PropType<ExecutionSummary>,
-		required: true,
+const props = withDefaults(
+	defineProps<{
+		execution: ExecutionSummary;
+		selected?: boolean;
+		workflowName?: string;
+	}>(),
+	{
+		selected: false,
 	},
-	selected: {
-		type: Boolean,
-		default: false,
-	},
-	workflowName: {
-		type: String,
-		default: undefined,
-	},
-});
+);
 
 const style = useCssModule();
 const i18n = useI18n();
diff --git a/packages/editor-ui/src/views/MfaView.vue b/packages/editor-ui/src/views/MfaView.vue
index 1b8bc07610..5a6c37af77 100644
--- a/packages/editor-ui/src/views/MfaView.vue
+++ b/packages/editor-ui/src/views/MfaView.vue
@@ -85,9 +85,9 @@ import { toRefs } from '@vueuse/core';
 // #region Props
 // ---------------------------------------------------------------------------
 
-const props = defineProps({
-	reportError: Boolean,
-});
+const props = defineProps<{
+	reportError: Boolean;
+}>();
 
 // #endregion
 
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
index bac25e13ba..cd0114cdd3 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import { computed } from 'vue';
 import N8nHeading from 'n8n-design-system/components/N8nHeading';
 import NodeIcon from '@/components/NodeIcon.vue';
@@ -17,21 +16,16 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import type { TemplateCredentialKey } from '@/utils/templates/templateTransforms';
 
 // Props
-const props = defineProps({
-	order: {
-		type: Number,
-		required: true,
+const props = withDefaults(
+	defineProps<{
+		order: number;
+		credentials: CredentialUsages;
+		selectedCredentialId: string | null;
+	}>(),
+	{
+		selectedCredentialId: null,
 	},
-	credentials: {
-		type: Object as PropType<CredentialUsages>,
-		required: true,
-	},
-	selectedCredentialId: {
-		type: String,
-		required: false,
-		default: null,
-	},
-});
+);
 
 const emit = defineEmits<{
 	(