From c4cd44070780c2849b92291d0865b04e11cc9b7c Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Mon, 12 Aug 2024 14:46:40 +0300
Subject: [PATCH] refactor: Combine event-bus and typed-event-bus

---
 .../src/components/N8nFormBox/FormBox.vue     |  4 +-
 packages/design-system/src/utils/event-bus.ts | 48 ++++++++++++++++---
 .../design-system/src/utils/form-event-bus.ts |  6 +--
 packages/design-system/src/utils/index.ts     |  1 -
 .../src/utils/typed-event-bus.ts              | 36 --------------
 packages/editor-ui/src/components/Modal.vue   |  7 ++-
 packages/editor-ui/src/event-bus/mfa.ts       |  9 ++--
 7 files changed, 53 insertions(+), 58 deletions(-)
 delete mode 100644 packages/design-system/src/utils/typed-event-bus.ts

diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.vue b/packages/design-system/src/components/N8nFormBox/FormBox.vue
index ed01219eb914e..7881c4b5c9ba4 100644
--- a/packages/design-system/src/components/N8nFormBox/FormBox.vue
+++ b/packages/design-system/src/components/N8nFormBox/FormBox.vue
@@ -44,7 +44,7 @@ import N8nHeading from '../N8nHeading';
 import N8nLink from '../N8nLink';
 import N8nButton from '../N8nButton';
 import type { IFormInput } from 'n8n-design-system/types';
-import { createEventBus } from '../../utils';
+import { createFormEventBus } from '../../utils';
 
 interface FormBoxProps {
 	title?: string;
@@ -67,7 +67,7 @@ withDefaults(defineProps<FormBoxProps>(), {
 	redirectLink: '',
 });
 
-const formBus = createEventBus();
+const formBus = createFormEventBus();
 const emit = defineEmits<{
 	submit: [value: { [key: string]: Value }];
 	update: [value: { name: string; value: Value }];
diff --git a/packages/design-system/src/utils/event-bus.ts b/packages/design-system/src/utils/event-bus.ts
index 23f5e5f02acf8..1b7cb10182a48 100644
--- a/packages/design-system/src/utils/event-bus.ts
+++ b/packages/design-system/src/utils/event-bus.ts
@@ -2,17 +2,51 @@
 export type CallbackFn = Function;
 export type UnregisterFn = () => void;
 
-export interface EventBus {
-	on: (eventName: string, fn: CallbackFn) => UnregisterFn;
-	once: (eventName: string, fn: CallbackFn) => UnregisterFn;
-	off: (eventName: string, fn: CallbackFn) => void;
-	emit: <T = Event>(eventName: string, event?: T) => void;
+export type Listener<Payload> = (payload: Payload) => void;
+
+export type Payloads<ListenerMap> = {
+	[E in keyof ListenerMap]: unknown;
+};
+
+// TODO: Fix all usages of `createEventBus` and convert `any` to `unknown`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface EventBus<ListenerMap extends Payloads<ListenerMap> = Record<string, any>> {
+	on: <EventName extends keyof ListenerMap & string>(
+		eventName: EventName,
+		fn: Listener<ListenerMap[EventName]>,
+	) => UnregisterFn;
+
+	once: <EventName extends keyof ListenerMap & string>(
+		eventName: EventName,
+		fn: Listener<ListenerMap[EventName]>,
+	) => UnregisterFn;
+
+	off: <EventName extends keyof ListenerMap & string>(
+		eventName: EventName,
+		fn: Listener<ListenerMap[EventName]>,
+	) => void;
+
+	emit: <EventName extends keyof ListenerMap & string>(
+		eventName: EventName,
+		event?: ListenerMap[EventName],
+	) => void;
 }
 
 /**
- * @deprecated Use the typed version instead from `typed-event-bus.ts`
+ * Creates an event bus with the given listener map.
+ *
+ * @example
+ * ```ts
+ * const eventBus = createEventBus<{
+ *   'user-logged-in': { username: string };
+ *   'user-logged-out': never;
+ * }>();
  */
-export function createEventBus(): EventBus {
+export function createEventBus<
+	// TODO: Fix all usages of `createEventBus` and convert `any` to `unknown`
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	ListenerMap extends Payloads<ListenerMap> = Record<string, any>,
+>(): EventBus<ListenerMap> {
 	const handlers = new Map<string, CallbackFn[]>();
 
 	function off(eventName: string, fn: CallbackFn) {
diff --git a/packages/design-system/src/utils/form-event-bus.ts b/packages/design-system/src/utils/form-event-bus.ts
index 65ecf9dbfee3f..5b518c8a4233d 100644
--- a/packages/design-system/src/utils/form-event-bus.ts
+++ b/packages/design-system/src/utils/form-event-bus.ts
@@ -1,4 +1,4 @@
-import { createTypedEventBus } from './typed-event-bus';
+import { createEventBus } from './event-bus';
 
 export interface FormEventBusEvents {
 	submit: never;
@@ -9,6 +9,4 @@ export type FormEventBus = ReturnType<typeof createFormEventBus>;
 /**
  * Creates a new event bus to be used with the `FormInputs` component.
  */
-export function createFormEventBus() {
-	return createTypedEventBus<FormEventBusEvents>();
-}
+export const createFormEventBus = createEventBus<FormEventBusEvents>;
diff --git a/packages/design-system/src/utils/index.ts b/packages/design-system/src/utils/index.ts
index e461ee8d632d1..3f4ed339f0f73 100644
--- a/packages/design-system/src/utils/index.ts
+++ b/packages/design-system/src/utils/index.ts
@@ -1,5 +1,4 @@
 export * from './event-bus';
-export * from './typed-event-bus';
 export * from './form-event-bus';
 export * from './markdown';
 export * from './typeguards';
diff --git a/packages/design-system/src/utils/typed-event-bus.ts b/packages/design-system/src/utils/typed-event-bus.ts
deleted file mode 100644
index 8290b68fb2a8a..0000000000000
--- a/packages/design-system/src/utils/typed-event-bus.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { UnregisterFn } from './event-bus';
-import { createEventBus as createUntypedEventBus } from './event-bus';
-
-export type Listener<Payload> = (payload: Payload) => void;
-
-export type Payloads<ListenerMap> = {
-	[E in keyof ListenerMap]: unknown;
-};
-
-export interface TypedEventBus<ListenerMap extends Payloads<ListenerMap>> {
-	on: <EventName extends keyof ListenerMap & string>(
-		eventName: EventName,
-		fn: Listener<ListenerMap[EventName]>,
-	) => UnregisterFn;
-
-	once: <EventName extends keyof ListenerMap & string>(
-		eventName: EventName,
-		fn: Listener<ListenerMap[EventName]>,
-	) => UnregisterFn;
-
-	off: <EventName extends keyof ListenerMap & string>(
-		eventName: EventName,
-		fn: Listener<ListenerMap[EventName]>,
-	) => void;
-
-	emit: <EventName extends keyof ListenerMap & string>(
-		eventName: EventName,
-		event?: ListenerMap[EventName],
-	) => void;
-}
-
-export function createTypedEventBus<
-	ListenerMap extends Payloads<ListenerMap>,
->(): TypedEventBus<ListenerMap> {
-	return createUntypedEventBus() as TypedEventBus<ListenerMap>;
-}
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 7f4a8334af6fa..141e93a521472 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -1,7 +1,7 @@
 <template>
 	<el-dialog
 		:model-value="uiStore.modalsById[name].open"
-		:before-close="() => closeDialog()"
+		:before-close="onCloseDialog"
 		:class="{
 			'dialog-wrapper': true,
 			scrollable: scrollable,
@@ -34,7 +34,7 @@
 			class="modal-content"
 			@keydown.stop
 			@keydown.enter="handleEnter"
-			@keydown.esc="() => closeDialog()"
+			@keydown.esc="onCloseDialog"
 		>
 			<slot v-if="!loading" name="content" />
 			<div v-else :class="$style.loader">
@@ -182,6 +182,9 @@ export default defineComponent({
 				this.$emit('enter');
 			}
 		},
+		async onCloseDialog() {
+			await this.closeDialog();
+		},
 		async closeDialog(returnData?: unknown) {
 			if (this.beforeClose) {
 				const shouldClose = await this.beforeClose();
diff --git a/packages/editor-ui/src/event-bus/mfa.ts b/packages/editor-ui/src/event-bus/mfa.ts
index 905e2d9cd4780..a50b6512b7630 100644
--- a/packages/editor-ui/src/event-bus/mfa.ts
+++ b/packages/editor-ui/src/event-bus/mfa.ts
@@ -1,9 +1,6 @@
-import {
-	createEventBus as createUntypedEventBus,
-	createTypedEventBus,
-} from 'n8n-design-system/utils';
+import { createEventBus } from 'n8n-design-system/utils';
 
-export const mfaEventBus = createUntypedEventBus();
+export const mfaEventBus = createEventBus();
 
 export interface MfaModalClosedEventPayload {
 	mfaCode: string;
@@ -18,4 +15,4 @@ export interface MfaModalEvents {
 /**
  * Event bus for transmitting the MFA code from a modal back to the view
  */
-export const promptMfaCodeBus = createTypedEventBus<MfaModalEvents>();
+export const promptMfaCodeBus = createEventBus<MfaModalEvents>();