feat: Rewrite Front End cloud and posthog hooks using TypeScript (no-changelog) (#5491)

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

@@ -219,10 +219,8 @@ export default defineComponent({
 				for (const item of injectedItems) {
 					items.push({
 						id: item.id,
-						// @ts-ignore
-						icon: item.properties ? item.properties.icon : '',
-						// @ts-ignore
-						label: item.properties ? item.properties.title : '',
+						icon: item.icon || '',
+						label: item.label || '',
 						position: item.position,
 						type: item.properties?.href ? 'link' : 'regular',
 						properties: item.properties,
@@ -353,7 +351,9 @@ export default defineComponent({
 	mounted() {
 		this.basePath = this.rootStore.baseUrl;
 		if (this.$refs.user) {
-			void this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
+			void this.$externalHooks().run('mainSidebar.mounted', {
+				userRef: this.$refs.user as Element,
+			});
 		}
 
 		void this.$nextTick(() => {

packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue

@@ -16,7 +16,6 @@ import {
 } from '@/constants';
 
 import { useUsersStore } from '@/stores/users.store';
-import { useWebhooksStore } from '@/stores/webhooks.store';
 import { runExternalHook } from '@/utils';
 
 import { useActions } from '../composables/useActions';
@@ -171,7 +170,7 @@ function trackActionsView() {
 		trigger_action_count,
 	};
 
-	void runExternalHook('nodeCreateList.onViewActions', useWebhooksStore(), trackingPayload);
+	void runExternalHook('nodeCreateList.onViewActions', trackingPayload);
 	telemetry?.trackNodesPanel('nodeCreateList.onViewActions', trackingPayload);
 }
 
@@ -192,7 +191,7 @@ function addHttpNode() {
 	if (telemetry) setAddedNodeActionParameters(updateData);
 
 	const app_identifier = actions.value[0].key;
-	void runExternalHook('nodeCreateList.onActionsCustmAPIClicked', useWebhooksStore(), {
+	void runExternalHook('nodeCreateList.onActionsCustmAPIClicked', {
 		app_identifier,
 	});
 	telemetry?.trackNodesPanel('nodeCreateList.onActionsCustmAPIClicked', { app_identifier });

packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue

@@ -25,8 +25,7 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, toRefs, onBeforeUnmount } from 'vue';
-import { useWebhooksStore } from '@/stores/webhooks.store';
-import { runExternalHook } from '@/utils';
+import { useExternalHooks } from '@/composables';
 
 export interface Props {
 	placeholder: string;
@@ -46,6 +45,8 @@ const state = reactive({
 	inputRef: null as HTMLInputElement | null,
 });
 
+const externalHooks = useExternalHooks();
+
 function focus() {
 	state.inputRef?.focus();
 }
@@ -60,9 +61,7 @@ function clear() {
 }
 
 onMounted(() => {
-	void runExternalHook('nodeCreator_searchBar.mount', useWebhooksStore(), {
-		inputRef: state.inputRef,
-	});
+	void externalHooks.run('nodeCreatorSearchBar.mount', { inputRef: state.inputRef });
 	setTimeout(focus, 0);
 });
 

packages/editor-ui/src/components/Node/NodeCreator/composables/useActions.ts

@@ -27,7 +27,6 @@ import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { runExternalHook } from '@/utils';
-import { useWebhooksStore } from '@/stores/webhooks.store';
 
 import { sortNodeCreateElements, transformNodeType } from '../utils';
 
@@ -256,7 +255,7 @@ export const useActions = () => {
 			source_mode: rootView.toLowerCase(),
 			resource: (action.value as INodeParameters).resource || '',
 		};
-		void runExternalHook('nodeCreateList.addAction', useWebhooksStore(), payload);
+		void runExternalHook('nodeCreateList.addAction', payload);
 		telemetry?.trackNodesPanel('nodeCreateList.addAction', payload);
 	}
 

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

@@ -1254,7 +1254,7 @@ export default defineComponent({
 
 		void this.$externalHooks().run('parameterInput.mount', {
 			parameter: this.parameter,
-			inputFieldRef: this.$refs.inputField,
+			inputFieldRef: this.$refs.inputField as InstanceType<typeof N8nInput>,
 		});
 	},
 	beforeUnmount() {

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

@@ -642,7 +642,10 @@ export default defineComponent({
 					personalization_survey_n8n_version: this.rootStore.versionCli,
 				};
 
-				await this.$externalHooks().run('personalizationModal.onSubmit', survey);
+				await this.$externalHooks().run(
+					'personalizationModal.onSubmit',
+					survey as IPersonalizationLatestVersion,
+				);
 
 				await this.usersStore.submitPersonalizationSurvey(survey as IPersonalizationLatestVersion);
 

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

@@ -4,7 +4,6 @@ import type { INodeUi } from '@/Interface';
 import RunDataSchemaItem from '@/components/RunDataSchemaItem.vue';
 import Draggable from '@/components/Draggable.vue';
 import { useNDVStore } from '@/stores/ndv.store';
-import { useWebhooksStore } from '@/stores/webhooks.store';
 import { telemetry } from '@/plugins/telemetry';
 import type { IDataObject } from 'n8n-workflow';
 import { isEmpty, runExternalHook } from '@/utils';
@@ -27,7 +26,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const draggingPath = ref<string>('');
 const ndvStore = useNDVStore();
-const webhooksStore = useWebhooksStore();
 const { getSchemaForExecutionData } = useDataSchema();
 
 const schema = computed(() => getSchemaForExecutionData(props.data));
@@ -59,7 +57,7 @@ const onDragEnd = (el: HTMLElement) => {
 			...mappingTelemetry,
 		};
 
-		void runExternalHook('runDataJson.onDragEnd', webhooksStore, telemetryPayload);
+		void runExternalHook('runDataJson.onDragEnd', telemetryPayload);
 
 		telemetry.track('User dragged data for mapping', telemetryPayload);
 	}, 1000); // ensure dest data gets set if drop

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

@@ -4,7 +4,8 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import type { EnvironmentVariable, Rule, RuleGroup } from '@/Interface';
 import { useI18n, useToast, useCopyToClipboard } from '@/composables';
 import { EnterpriseEditionFeature } from '@/constants';
-import { useSettingsStore, useUsersStore } from '@/stores';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
 import { getVariablesPermissions } from '@/permissions';
 
 const i18n = useI18n();

packages/editor-ui/src/components/__tests__/BannersStack.test.ts

@@ -6,14 +6,13 @@ import { STORES } from '@/constants';
 
 import { createTestingPinia } from '@pinia/testing';
 import BannerStack from '@/components/banners/BannerStack.vue';
-import { useUIStore } from '@/stores/ui.store';
-import { useUsersStore } from '@/stores/users.store';
 import type { RenderOptions } from '@/__tests__/render';
 import { createComponentRenderer } from '@/__tests__/render';
 import { waitFor } from '@testing-library/vue';
+import { useUIStore } from '@/stores/ui.store';
+import { useUsersStore } from '@/stores/users.store';
 
 let uiStore: ReturnType<typeof useUIStore>;
-let usersStore: ReturnType<typeof useUsersStore>;
 
 const initialState = {
 	[STORES.SETTINGS]: {
@@ -55,7 +54,6 @@ const renderComponent = createComponentRenderer(BannerStack, defaultRenderOption
 describe('BannerStack', () => {
 	beforeEach(() => {
 		uiStore = useUIStore();
-		usersStore = useUsersStore();
 	});
 
 	afterEach(() => {
@@ -75,7 +73,7 @@ describe('BannerStack', () => {
 	it('should dismiss banner on click', async () => {
 		const { getByTestId } = renderComponent();
 		const dismissBannerSpy = vi
-			.spyOn(useUIStore(), 'dismissBanner')
+			.spyOn(uiStore, 'dismissBanner')
 			.mockImplementation(async (banner, mode) => {});
 		expect(getByTestId('banners-V1')).toBeInTheDocument();
 		const closeTrialBannerButton = getByTestId('banner-V1-close');
@@ -87,7 +85,7 @@ describe('BannerStack', () => {
 	it('should permanently dismiss banner on click', async () => {
 		const { getByTestId } = renderComponent();
 		const dismissBannerSpy = vi
-			.spyOn(useUIStore(), 'dismissBanner')
+			.spyOn(uiStore, 'dismissBanner')
 			.mockImplementation(async (banner, mode) => {});
 
 		const permanentlyDismissBannerLink = getByTestId('banner-confirm-v1');

packages/editor-ui/src/components/__tests__/VariablesRow.spec.ts

@@ -3,7 +3,8 @@ import type { EnvironmentVariable } from '@/Interface';
 import { fireEvent } from '@testing-library/vue';
 import { setupServer } from '@/__tests__/server';
 import { afterAll, beforeAll } from 'vitest';
-import { useSettingsStore, useUsersStore } from '@/stores';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createTestingPinia } from '@pinia/testing';
 import { STORES } from '@/constants';

packages/editor-ui/src/components/banners/TrialBanner.vue

@@ -3,7 +3,7 @@ import BaseBanner from '@/components/banners/BaseBanner.vue';
 import { i18n as locale } from '@/plugins/i18n';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
 import { computed } from 'vue';
-import { useUIStore } from '@/stores';
+import { useUIStore } from '@/stores/ui.store';
 
 const trialDaysLeft = computed(() => {
 	const { trialDaysLeft } = useCloudPlanStore();

packages/editor-ui/src/components/banners/TrialOverBanner.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import BaseBanner from '@/components/banners/BaseBanner.vue';
 import { i18n as locale } from '@/plugins/i18n';
-import { useUIStore } from '@/stores';
+import { useUIStore } from '@/stores/ui.store';
 
 function onUpdatePlanClick() {
 	void useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');

packages/editor-ui/src/components/banners/V1Banner.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import BaseBanner from '@/components/banners/BaseBanner.vue';
 import { i18n as locale } from '@/plugins/i18n';
-import { useUsersStore } from '@/stores';
+import { useUsersStore } from '@/stores/users.store';
 import { useUIStore } from '@/stores/ui.store';
 
 const uiStore = useUIStore();