refactor(editor): Replace mixed style of defineProps with the new style (no-changelog) (#9787)

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();

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,

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,

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();

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();

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(
 	() =>

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: {

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();
 

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();

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();

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);
 }

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'];
 

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 = '',

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 });

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);
 

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']);
 

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();