admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Migrate genericHelpers mixin to composable (#8220)

Browse Source 
## Summary
- Moved out canvas loading handling to canvas store
- Tag editable routes via meta to remove router dependency from generic
helpers
- Replace all occurrences of `genericHelpers` mixin with composable and
audit usage
- Moved out `isRedirectSafe` and `getRedirectQueryParameter` out of
genericHelpers to remove dependency on router

Removing the router dependency is important, because `useRouter` and
`useRoute` compostables are only available if called from component
instance. So if composable is nested within another composable, we
wouldn't be able to use these. In this case we'd always need to inject
the router and pass it through several composables. That's why I moved
the `readonly` logic to router meta and `isRedirectSafe` and
`getRedirectQueryParameter` out as they were only used in a single
component.

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
This commit is contained in:
oleg
2024-01-05 12:23:28 +01:00
committed by GitHub
parent f53c482939
commit 184ed8e17d
38 changed files with 199 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/editor-ui/src/views/NodeView.vue
View File

@@ -49,18 +49,18 @@
:name="nodeData.name"
:is-read-only="isReadOnlyRoute || readOnlyEnv"
:instance="instance"
@deselectAllNodes="deselectAllNodes"
:is-active="!!activeNode && activeNode.name === nodeData.name"
@deselectNode="nodeDeselectedByName"
:hide-actions="pullConnActive"
@nodeSelected="nodeSelectedByName"
:is-production-execution-preview="isProductionExecutionPreview"
@runWorkflow="onRunNode"
:workflow="currentWorkflowObject"
@moved="onNodeMoved"
:disable-pointer-events="!canOpenNDV"
@run="onNodeRun"
:hide-node-issues="hideNodeIssues"
@deselectAllNodes="deselectAllNodes"
@deselectNode="nodeDeselectedByName"
@nodeSelected="nodeSelectedByName"
@runWorkflow="onRunNode"
@moved="onNodeMoved"
@run="onNodeRun"
>
<template #custom-tooltip>
<span
@@ -77,10 +77,10 @@
:instance="instance"
:is-active="!!activeNode && activeNode.name === stickyData.name"
:node-view-scale="nodeViewScale"
@deselectAllNodes="deselectAllNodes"
:grid-size="GRID_SIZE"
@deselectNode="nodeDeselectedByName"
:hide-actions="pullConnActive"
@deselectAllNodes="deselectAllNodes"
@deselectNode="nodeDeselectedByName"
@nodeSelected="nodeSelectedByName"
@removeNode="(name) => removeNode(name, true)"
/>
@@ -239,7 +239,6 @@ import {
UPDATE_WEBHOOK_ID_NODE_TYPES,
TIME,
} from '@/constants';
import { genericHelpers } from '@/mixins/genericHelpers';
import { moveNodeWorkflow } from '@/mixins/moveNodeWorkflow';
import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
@@ -372,6 +371,7 @@ import { useViewStacks } from '@/components/Node/NodeCreator/composables/useView
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useClipboard } from '@/composables/useClipboard';
import { usePinnedData } from '@/composables/usePinnedData';
import { useSourceControlStore } from '@/stores/sourceControl.store';
interface AddNodeOptions {
position?: XYPosition;
@@ -394,7 +394,7 @@ export default defineComponent({
CanvasControls,
ContextMenu,
},
mixins: [genericHelpers, moveNodeWorkflow, workflowHelpers, workflowRun, debounceHelper],
mixins: [moveNodeWorkflow, workflowHelpers, workflowRun, debounceHelper],
async beforeRouteLeave(to, from, next) {
if (
getNodeViewTab(to) === MAIN_HEADER_TABS.EXECUTIONS ||
@@ -504,14 +504,14 @@ export default defineComponent({
// When entering this tab:
if (currentTab === MAIN_HEADER_TABS.WORKFLOW || isOpeningTemplate) {
if (workflowChanged || nodeViewNotInitialized || isOpeningTemplate) {
this.startLoading();
this.canvasStore.startLoading();
if (nodeViewNotInitialized) {
const previousDirtyState = this.uiStore.stateIsDirty;
this.resetWorkspace();
this.uiStore.stateIsDirty = previousDirtyState;
}
await Promise.all([this.loadCredentials(), this.initView()]);
this.stopLoading();
this.canvasStore.stopLoading();
if (this.blankRedirect) {
this.blankRedirect = false;
}
@@ -570,6 +570,7 @@ export default defineComponent({
useExternalSecretsStore,
useCollaborationStore,
usePushConnectionStore,
useSourceControlStore,
),
nativelyNumberSuffixedDefaults(): string[] {
return this.nodeTypesStore.nativelyNumberSuffixedDefaults;
@@ -587,9 +588,7 @@ export default defineComponent({
return this.$route.name === VIEWS.DEMO;
},
showCanvasAddButton(): boolean {
return (
this.loadingService === null && !this.containsTrigger && !this.isDemo && !this.readOnlyEnv
);
return !this.isLoading && !this.containsTrigger && !this.isDemo && !this.readOnlyEnv;
},
lastSelectedNode(): INodeUi | null {
return this.uiStore.getLastSelectedNode;
@@ -702,11 +701,17 @@ export default defineComponent({
return this.canvasStore.jsPlumbInstance;
},
isLoading(): boolean {
return this.loadingService !== null;
return this.canvasStore.isLoading;
},
currentWorkflowObject(): Workflow {
return this.workflowsStore.getCurrentWorkflow();
},
readOnlyEnv(): boolean {
return this.sourceControlStore.preferences.branchReadOnly;
},
isReadOnlyRoute() {
return this.$route?.meta?.readOnlyCanvas === true;
},
},
data() {
return {
@@ -756,7 +761,7 @@ export default defineComponent({
this.clipboard.onPaste.value = this.onClipboardPasteEvent;
this.startLoading();
this.canvasStore.startLoading();
const loadPromises = [
this.loadActiveWorkflows(),
this.loadCredentials(),
@@ -799,7 +804,7 @@ export default defineComponent({
this.$locale.baseText('nodeView.showError.mounted2.message') + ':',
);
}
this.stopLoading();
this.canvasStore.stopLoading();
setTimeout(() => {
void this.usersStore.showPersonalizationSurvey();
@@ -1140,7 +1145,7 @@ export default defineComponent({
this.onToggleNodeCreator({ source, createNodeActive: true });
},
async openExecution(executionId: string) {
this.startLoading();
this.canvasStore.startLoading();
this.resetWorkspace();
let data: IExecutionResponse | undefined;
try {
@@ -1239,7 +1244,7 @@ export default defineComponent({
duration: 0,
});
}
this.stopLoading();
this.canvasStore.stopLoading();
},
async importWorkflowExact(data: { workflow: IWorkflowDataUpdate }) {
if (!data.workflow.nodes || !data.workflow.connections) {
@@ -1257,8 +1262,8 @@ export default defineComponent({
this.canvasStore.zoomToFit();
},
async openWorkflowTemplate(templateId: string) {
this.startLoading();
this.setLoadingText(this.$locale.baseText('nodeView.loadingTemplate'));
this.canvasStore.startLoading();
this.canvasStore.setLoadingText(this.$locale.baseText('nodeView.loadingTemplate'));
this.resetWorkspace();
this.workflowsStore.currentWorkflowExecutions = [];
@@ -1297,10 +1302,10 @@ export default defineComponent({
templateName: data.name,
workflow: data.workflow,
});
this.stopLoading();
this.canvasStore.stopLoading();
},
async openWorkflow(workflow: IWorkflowDb) {
this.startLoading();
this.canvasStore.startLoading();
const selectedExecution = this.workflowsStore.activeWorkflowExecution;
@@ -1354,7 +1359,7 @@ export default defineComponent({
} else {
this.workflowsStore.activeWorkflowExecution = selectedExecution;
}
this.stopLoading();
this.canvasStore.stopLoading();
this.collaborationStore.notifyWorkflowOpened(workflow.id);
},
touchTap(e: MouseEvent | TouchEvent) {
@@ -1997,18 +2002,18 @@ export default defineComponent({
async getWorkflowDataFromUrl(url: string): Promise<IWorkflowDataUpdate | undefined> {
let workflowData: IWorkflowDataUpdate;
this.startLoading();
this.canvasStore.startLoading();
try {
workflowData = await this.workflowsStore.getWorkflowFromUrl(url);
} catch (error) {
this.stopLoading();
this.canvasStore.stopLoading();
this.showError(
error,
this.$locale.baseText('nodeView.showError.getWorkflowDataFromUrl.title'),
);
return;
}
this.stopLoading();
this.canvasStore.stopLoading();
return workflowData;
},
@@ -3423,7 +3428,7 @@ export default defineComponent({
e.returnValue = true; //Gecko + IE
return true; //Gecko + Webkit, Safari, Chrome etc.
} else {
this.startLoading(this.$locale.baseText('nodeView.redirecting'));
this.canvasStore.startLoading(this.$locale.baseText('nodeView.redirecting'));
this.collaborationStore.notifyWorkflowClosed(this.workflowsStore.workflowId);
return;
}
@@ -3434,7 +3439,7 @@ export default defineComponent({
clearTimeout(this.unloadTimeout);
},
async newWorkflow(): Promise<void> {
this.startLoading();
this.canvasStore.startLoading();
this.resetWorkspace();
this.workflowData = await this.workflowsStore.getNewWorkflowData();
this.workflowsStore.currentWorkflowExecutions = [];
@@ -3446,7 +3451,7 @@ export default defineComponent({
this.uiStore.nodeViewInitialized = true;
this.historyStore.reset();
this.workflowsStore.activeWorkflowExecution = null;
this.stopLoading();
this.canvasStore.stopLoading();
},
async tryToAddWelcomeSticky(): Promise<void> {
this.canvasStore.zoomToFit();
@@ -4574,9 +4579,9 @@ export default defineComponent({
if (nodesToBeFetched.length > 0) {
// Only call API if node information is actually missing
this.startLoading();
this.canvasStore.startLoading();
await this.nodeTypesStore.getNodesInformation(nodesToBeFetched);
this.stopLoading();
this.canvasStore.stopLoading();
}
},
async onPostMessageReceived(message: MessageEvent) {
@@ -4829,7 +4834,7 @@ export default defineComponent({
onPageShow(e: PageTransitionEvent) {
// Page was restored from the bfcache (back-forward cache)
if (e.persisted) {
this.stopLoading();
this.canvasStore.stopLoading();
}
},
readOnlyEnvRouteCheck() {