feat: Replace Vue.extend with defineComponent in editor-ui (no-changelog) (#6033)

* refactor: replace Vue.extend with defineComponent in editor-ui

* fix: change $externalHooks extractions from mixins

* fix: refactor externalHooks mixin

packages/editor-ui/src/views/AuthView.vue

@@ -22,12 +22,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import Logo from '@/components/Logo.vue';
 import SSOLogin from '@/components/SSOLogin.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'AuthView',
 	components: {
 		Logo,

packages/editor-ui/src/views/ErrorView.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ErrorView',
 	props: {
 		messageKey: {

packages/editor-ui/src/views/ExecutionsView.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ExecutionsList from '@/components/ExecutionsList.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ExecutionsView',
 	components: {
 		ExecutionsList,

packages/editor-ui/src/views/SettingsFakeDoorView.vue

@@ -4,12 +4,12 @@
 
 <script lang="ts">
 import { IFakeDoor } from '@/Interface';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import FeatureComingSoon from '@/components/FeatureComingSoon.vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'SettingsFakeDoorView',
 	components: {
 		FeatureComingSoon,

packages/editor-ui/src/views/TemplatesView.vue

@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import GoBackButton from '@/components/GoBackButton.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'TemplatesView',
 	components: {
 		GoBackButton,

packages/editor-ui/src/views/__tests__/VariablesView.spec.ts

@@ -4,16 +4,19 @@ import { setupServer } from '@/__tests__/server';
 import { render } from '@testing-library/vue';
 import VariablesView from '@/views/VariablesView.vue';
 import { useSettingsStore, useUsersStore } from '@/stores';
+import { renderComponent } from '@/__tests__/utils';
 
 describe('store', () => {
 	let server: ReturnType<typeof setupServer>;
+	let pinia: ReturnType<typeof createPinia>;
 
 	beforeAll(() => {
 		server = setupServer();
 	});
 
 	beforeEach(async () => {
-		setActivePinia(createPinia());
+		pinia = createPinia();
+		setActivePinia(pinia);
 
 		await useSettingsStore().getSettings();
 		await useUsersStore().fetchUsers();
@@ -25,13 +28,13 @@ describe('store', () => {
 	});
 
 	it('should render loading state', () => {
-		const wrapper = render(VariablesView);
+		const wrapper = renderComponent(VariablesView, { pinia });
 
 		expect(wrapper.container.querySelectorAll('.n8n-loading')).toHaveLength(3);
 	});
 
 	it('should render empty state', async () => {
-		const wrapper = render(VariablesView);
+		const wrapper = renderComponent(VariablesView, { pinia });
 
 		await wrapper.findByTestId('empty-resources-list');
 		expect(wrapper.getByTestId('empty-resources-list')).toBeVisible();
@@ -40,7 +43,7 @@ describe('store', () => {
 	it('should render variable entries', async () => {
 		server.createList('variable', 3);
 
-		const wrapper = render(VariablesView);
+		const wrapper = renderComponent(VariablesView, { pinia });
 
 		await wrapper.findByTestId('resources-table');
 		expect(wrapper.getByTestId('resources-table')).toBeVisible();