feat: Replace new Vue() with custom event bus (no-changelog) (#5780)

* refactor: replace new Vue() with custom event bus (no-changelog)

* fix: export types from design system main

* fix: update component types

* fix: update form inputs event bus
This commit is contained in:
Alex Grozav
2023-04-06 16:32:45 +03:00
committed by GitHub
parent 89c12fc1a7
commit 5651a52364
67 changed files with 347 additions and 210 deletions

View File

@@ -266,7 +266,7 @@ import { useUIStore } from '@/stores/ui';
import { useSettingsStore } from '@/stores/settings';
import { useUsersStore } from '@/stores/users';
import { Route, RawLocation } from 'vue-router';
import { nodeViewEventBus } from '@/event-bus/node-view-event-bus';
import { dataPinningEventBus, nodeViewEventBus } from '@/event-bus';
import { useWorkflowsStore } from '@/stores/workflows';
import { useRootStore } from '@/stores/n8nRootStore';
import { useNDVStore } from '@/stores/ndv';
@@ -276,7 +276,6 @@ import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useCredentialsStore } from '@/stores/credentials';
import { useTagsStore } from '@/stores/tags';
import { useNodeCreatorStore } from '@/stores/nodeCreator';
import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
import { useCanvasStore } from '@/stores/canvas';
import useWorkflowsEEStore from '@/stores/workflows.ee';
import * as NodeViewUtils from '@/utils/nodeViewUtils';
@@ -3976,17 +3975,17 @@ export default mixins(
this.$root.$on('newWorkflow', this.newWorkflow);
this.$root.$on('importWorkflowData', this.onImportWorkflowDataEvent);
this.$root.$on('importWorkflowUrl', this.onImportWorkflowUrlEvent);
historyBus.$on('nodeMove', this.onMoveNode);
historyBus.$on('revertAddNode', this.onRevertAddNode);
historyBus.$on('revertRemoveNode', this.onRevertRemoveNode);
historyBus.$on('revertAddConnection', this.onRevertAddConnection);
historyBus.$on('revertRemoveConnection', this.onRevertRemoveConnection);
historyBus.$on('revertRenameNode', this.onRevertNameChange);
historyBus.$on('enableNodeToggle', this.onRevertEnableToggle);
historyBus.on('nodeMove', this.onMoveNode);
historyBus.on('revertAddNode', this.onRevertAddNode);
historyBus.on('revertRemoveNode', this.onRevertRemoveNode);
historyBus.on('revertAddConnection', this.onRevertAddConnection);
historyBus.on('revertRemoveConnection', this.onRevertRemoveConnection);
historyBus.on('revertRenameNode', this.onRevertNameChange);
historyBus.on('enableNodeToggle', this.onRevertEnableToggle);
dataPinningEventBus.$on('pin-data', this.addPinDataConnections);
dataPinningEventBus.$on('unpin-data', this.removePinDataConnections);
nodeViewEventBus.$on('saveWorkflow', this.saveCurrentWorkflowExternal);
dataPinningEventBus.on('pin-data', this.addPinDataConnections);
dataPinningEventBus.on('unpin-data', this.removePinDataConnections);
nodeViewEventBus.on('saveWorkflow', this.saveCurrentWorkflowExternal);
this.canvasStore.isDemo = this.isDemo;
},
@@ -3999,17 +3998,17 @@ export default mixins(
this.$root.$off('newWorkflow', this.newWorkflow);
this.$root.$off('importWorkflowData', this.onImportWorkflowDataEvent);
this.$root.$off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
historyBus.$off('nodeMove', this.onMoveNode);
historyBus.$off('revertAddNode', this.onRevertAddNode);
historyBus.$off('revertRemoveNode', this.onRevertRemoveNode);
historyBus.$off('revertAddConnection', this.onRevertAddConnection);
historyBus.$off('revertRemoveConnection', this.onRevertRemoveConnection);
historyBus.$off('revertRenameNode', this.onRevertNameChange);
historyBus.$off('enableNodeToggle', this.onRevertEnableToggle);
historyBus.off('nodeMove', this.onMoveNode);
historyBus.off('revertAddNode', this.onRevertAddNode);
historyBus.off('revertRemoveNode', this.onRevertRemoveNode);
historyBus.off('revertAddConnection', this.onRevertAddConnection);
historyBus.off('revertRemoveConnection', this.onRevertRemoveConnection);
historyBus.off('revertRenameNode', this.onRevertNameChange);
historyBus.off('enableNodeToggle', this.onRevertEnableToggle);
dataPinningEventBus.$off('pin-data', this.addPinDataConnections);
dataPinningEventBus.$off('unpin-data', this.removePinDataConnections);
nodeViewEventBus.$off('saveWorkflow', this.saveCurrentWorkflowExternal);
dataPinningEventBus.off('pin-data', this.addPinDataConnections);
dataPinningEventBus.off('unpin-data', this.removePinDataConnections);
nodeViewEventBus.off('saveWorkflow', this.saveCurrentWorkflowExternal);
},
destroyed() {
this.resetWorkspace();

View File

@@ -169,6 +169,7 @@ import { useUsersStore } from '@/stores/users';
import { useSettingsStore } from '@/stores/settings';
import { getLdapSynchronizations } from '@/api/ldap';
import { N8N_CONTACT_EMAIL, N8N_SALES_EMAIL } from '@/constants';
import { createEventBus } from '@/event-bus';
type FormValues = {
loginEnabled: boolean;
@@ -221,7 +222,7 @@ export default mixins(showMessage).extend({
loadingTable: false,
hasAnyChanges: false,
formInputs: null as null | IFormInputs,
formBus: new Vue(),
formBus: createEventBus(),
readyToSubmit: false,
page: 0,
loginEnabled: false,
@@ -354,7 +355,7 @@ export default mixins(showMessage).extend({
}
},
onSaveClick() {
this.formBus.$emit('submit');
this.formBus.emit('submit');
},
async onTestConnectionClick() {
this.loadingTestConnection = true;

View File

@@ -89,7 +89,6 @@ import { useLogStreamingStore } from '../stores/logStreamingStore';
import { useSettingsStore } from '../stores/settings';
import { useUIStore } from '../stores/ui';
import { LOG_STREAM_MODAL_KEY, EnterpriseEditionFeature } from '../constants';
import Vue from 'vue';
import {
deepCopy,
defaultMessageEventBusDestinationOptions,
@@ -97,6 +96,7 @@ import {
} from 'n8n-workflow';
import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
import EventDestinationCard from '@/components/SettingsLogStreaming/EventDestinationCard.ee.vue';
import { createEventBus } from '@/event-bus';
export default mixins().extend({
name: 'SettingsLogStreamingView',
@@ -107,7 +107,7 @@ export default mixins().extend({
},
data() {
return {
eventBus: new Vue(),
eventBus: createEventBus(),
destinations: Array<MessageEventBusDestinationOptions>,
disableLicense: false,
allDestinations: [] as MessageEventBusDestinationOptions[],
@@ -135,15 +135,15 @@ export default mixins().extend({
}
});
// refresh when a modal closes
this.eventBus.$on('destinationWasSaved', async () => {
this.eventBus.on('destinationWasSaved', async () => {
this.$forceUpdate();
});
// listen to remove emission
this.eventBus.$on('remove', async (destinationId: string) => {
this.eventBus.on('remove', async (destinationId: string) => {
await this.onRemove(destinationId);
});
// listen to modal closing and remove nodes from store
this.eventBus.$on('closing', async (destinationId: string) => {
this.eventBus.on('closing', async (destinationId: string) => {
this.workflowsStore.removeAllNodes({ setStateDirty: false, removePinData: true });
this.uiStore.stateIsDirty = false;
});

View File

@@ -65,8 +65,8 @@ import { useUIStore } from '@/stores/ui';
import { useUsersStore } from '@/stores/users';
import { useSettingsStore } from '@/stores/settings';
import { mapStores } from 'pinia';
import Vue from 'vue';
import mixins from 'vue-typed-mixins';
import { createEventBus } from '@/event-bus';
export default mixins(showMessage).extend({
name: 'SettingsPersonalView',
@@ -74,7 +74,7 @@ export default mixins(showMessage).extend({
return {
hasAnyChanges: false,
formInputs: null as null | IFormInputs,
formBus: new Vue(),
formBus: createEventBus(),
readyToSubmit: false,
};
},
@@ -160,7 +160,7 @@ export default mixins(showMessage).extend({
}
},
onSaveClick() {
this.formBus.$emit('submit');
this.formBus.emit('submit');
},
openPasswordModal() {
this.uiStore.openModal(CHANGE_PASSWORD_MODAL_KEY);