refactor(editor): Convert some smaller components to composition api (no-changelog) (#11546)

Co-authored-by: Ricardo Espinoza <ricardo@n8n.io>

packages/editor-ui/src/components/EnterpriseEdition.ee.vue

@@ -1,26 +1,25 @@
-<script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import type { EnterpriseEditionFeatureValue } from '@/Interface';
-import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 
-export default defineComponent({
-	name: 'EnterpriseEdition',
-	props: {
-		features: {
-			type: Array as PropType<EnterpriseEditionFeatureValue[]>,
-			default: () => [],
+const props = withDefaults(
+	defineProps<{
+		features: EnterpriseEditionFeatureValue[];
+	}>(),
+	{
+		features: () => [],
 	},
-	},
-	computed: {
-		...mapStores(useSettingsStore),
-		canAccess(): boolean {
-			return this.features.reduce((acc: boolean, feature) => {
-				return acc && !!this.settingsStore.isEnterpriseFeatureEnabled[feature];
-			}, true);
-		},
-	},
-});
+);
+
+const settingsStore = useSettingsStore();
+
+const canAccess = computed(() =>
+	props.features.reduce(
+		(acc: boolean, feature) => acc && !!settingsStore.isEnterpriseFeatureEnabled[feature],
+		true,
+	),
+);
 </script>
 
 <template>

packages/editor-ui/src/components/PushConnectionTracker.vue

@@ -1,26 +1,23 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { useRootStore } from '@/stores/root.store';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
-	name: 'PushConnectionTracker',
-	computed: {
-		...mapStores(useRootStore),
-	},
-});
+const rootStore = useRootStore();
+const pushConnectionActive = computed(() => rootStore.pushConnectionActive);
+const i18n = useI18n();
 </script>
 
 <template>
 	<span>
-		<div v-if="!rootStore.pushConnectionActive" class="push-connection-lost primary-color">
+		<div v-if="!pushConnectionActive" class="push-connection-lost primary-color">
 			<n8n-tooltip placement="bottom-end">
 				<template #content>
-					<div v-n8n-html="$locale.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
+					<div v-n8n-html="i18n.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
 				</template>
 				<span>
 					<font-awesome-icon icon="exclamation-triangle" />&nbsp;
-					{{ $locale.baseText('pushConnectionTracker.connectionLost') }}
+					{{ i18n.baseText('pushConnectionTracker.connectionLost') }}
 				</span>
 			</n8n-tooltip>
 		</div>

packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue

@@ -1,98 +1,91 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeMount } from 'vue';
 import { EnterpriseEditionFeature } from '@/constants';
-import { mapStores } from 'pinia';
 import { useProjectsStore } from '@/stores/projects.store';
-import type { PropType } from 'vue';
 import type { ProjectSharingData } from '@/types/projects.types';
 import ProjectSharing from '@/components/Projects/ProjectSharing.vue';
+import type { IFilters } from '../layouts/ResourcesListLayout.vue';
+import { useI18n } from '@/composables/useI18n';
 
-export type IResourceFiltersType = Record<string, boolean | string | string[]>;
+type IResourceFiltersType = Record<string, boolean | string | string[]>;
 
-export default defineComponent({
-	components: {
-		ProjectSharing,
+const props = withDefaults(
+	defineProps<{
+		modelValue?: IResourceFiltersType;
+		keys?: string[];
+		shareable?: boolean;
+		reset?: () => void;
+	}>(),
+	{
+		modelValue: () => ({}),
+		keys: () => [],
+		shareable: true,
+		reset: () => {},
 	},
-	props: {
-		modelValue: {
-			type: Object as PropType<IResourceFiltersType>,
-			default: () => ({}),
-		},
-		keys: {
-			type: Array as PropType<string[]>,
-			default: () => [],
-		},
-		shareable: {
-			type: Boolean,
-			default: true,
-		},
-		reset: {
-			type: Function as PropType<() => void>,
-			default: () => {},
-		},
-	},
-	data() {
-		return {
-			EnterpriseEditionFeature,
-			selectedProject: null as ProjectSharingData | null,
-		};
-	},
-	computed: {
-		...mapStores(useProjectsStore),
-		filtersLength(): number {
+);
+
+const emit = defineEmits<{
+	'update:modelValue': [value: IFilters];
+	'update:filtersLength': [value: number];
+}>();
+
+const selectedProject = ref<ProjectSharingData | null>(null);
+
+const projectsStore = useProjectsStore();
+
+const i18n = useI18n();
+
+const filtersLength = computed(() => {
 	let length = 0;
 
-			this.keys.forEach((key) => {
+	props.keys.forEach((key) => {
 		if (key === 'search') {
 			return;
 		}
 
-				const value = this.modelValue[key];
+		const value = props.modelValue[key];
 		length += (Array.isArray(value) ? value.length > 0 : value !== '') ? 1 : 0;
 	});
 
 	return length;
-		},
-		hasFilters(): boolean {
-			return this.filtersLength > 0;
-		},
-	},
-	watch: {
-		filtersLength(value: number) {
-			this.$emit('update:filtersLength', value);
-		},
-	},
-	async beforeMount() {
-		await this.projectsStore.getAvailableProjects();
-		this.selectedProject =
-			this.projectsStore.availableProjects.find(
-				(project) => project.id === this.modelValue.homeProject,
-			) ?? null;
-	},
-	methods: {
-		setKeyValue(key: string, value: unknown) {
-			const filters = {
-				...this.modelValue,
-				[key]: value,
-			};
-
-			this.$emit('update:modelValue', filters);
-		},
-		resetFilters() {
-			if (this.reset) {
-				this.reset();
-			} else {
-				const filters = { ...this.modelValue };
-
-				this.keys.forEach((key) => {
-					filters[key] = Array.isArray(this.modelValue[key]) ? [] : '';
 });
 
-				this.$emit('update:modelValue', filters);
+const hasFilters = computed(() => filtersLength.value > 0);
+
+const setKeyValue = (key: string, value: unknown) => {
+	const filters = {
+		...props.modelValue,
+		[key]: value,
+	} as IFilters;
+
+	emit('update:modelValue', filters);
+};
+
+const resetFilters = () => {
+	if (props.reset) {
+		props.reset();
+	} else {
+		const filters = { ...props.modelValue } as IFilters;
+
+		props.keys.forEach((key) => {
+			filters[key] = Array.isArray(props.modelValue[key]) ? [] : '';
+		});
+
+		emit('update:modelValue', filters);
 	}
-			this.selectedProject = null;
-		},
-	},
+	selectedProject.value = null;
+};
+
+watch(filtersLength, (value) => {
+	emit('update:filtersLength', value);
+});
+
+onBeforeMount(async () => {
+	await projectsStore.getAvailableProjects();
+	selectedProject.value =
+		projectsStore.availableProjects.find(
+			(project) => project.id === props.modelValue.homeProject,
+		) ?? null;
 });
 </script>
 
@@ -109,7 +102,7 @@ export default defineComponent({
 				<n8n-badge v-show="filtersLength > 0" theme="primary" class="mr-4xs">
 					{{ filtersLength }}
 				</n8n-badge>
-				{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
+				{{ i18n.baseText('forms.resourceFiltersDropdown.filters') }}
 			</n8n-button>
 		</template>
 		<div :class="$style['filters-dropdown']" data-test-id="resources-list-filters-dropdown">
@@ -119,7 +112,7 @@ export default defineComponent({
 				:features="[EnterpriseEditionFeature.Sharing]"
 			>
 				<n8n-input-label
-					:label="$locale.baseText('forms.resourceFiltersDropdown.owner')"
+					:label="i18n.baseText('forms.resourceFiltersDropdown.owner')"
 					:bold="false"
 					size="small"
 					color="text-base"
@@ -128,14 +121,14 @@ export default defineComponent({
 				<ProjectSharing
 					v-model="selectedProject"
 					:projects="projectsStore.availableProjects"
-					:placeholder="$locale.baseText('forms.resourceFiltersDropdown.owner.placeholder')"
-					:empty-options-text="$locale.baseText('projects.sharing.noMatchingProjects')"
+					:placeholder="i18n.baseText('forms.resourceFiltersDropdown.owner.placeholder')"
+					:empty-options-text="i18n.baseText('projects.sharing.noMatchingProjects')"
 					@update:model-value="setKeyValue('homeProject', ($event as ProjectSharingData).id)"
 				/>
 			</enterprise-edition>
 			<div v-if="hasFilters" :class="[$style['filters-dropdown-footer'], 'mt-s']">
 				<n8n-link @click="resetFilters">
-					{{ $locale.baseText('forms.resourceFiltersDropdown.reset') }}
+					{{ i18n.baseText('forms.resourceFiltersDropdown.reset') }}
 				</n8n-link>
 			</div>
 		</div>