mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Convert workflowActivate mixin into a composable (no-changelog) (#9423)

Browse source
This commit is contained in:
Ricardo Espinoza 2024-05-17 10:03:39 -04:00 committed by GitHub
parent 9c768a0443
commit 3a5412850c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 141 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/editor-ui/src/components/NodeDetailsView.vue
View file

@ -165,7 +165,7 @@ import {
START_NODE_TYPE,
STICKY_NODE_TYPE,
} from '@/constants';
import { workflowActivate } from '@/mixins/workflowActivate';
import { useWorkflowActivate } from '@/composables/useWorkflowActivate';
import { dataPinningEventBus } from '@/event-bus';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNDVStore } from '@/stores/ndv.store';
@ -189,7 +189,6 @@ export default defineComponent({
NDVDraggablePanels,
TriggerPanel,
},
mixins: [workflowActivate],
props: {
readOnly: {
type: Boolean,
@ -210,16 +209,16 @@ export default defineComponent({
const pinnedData = usePinnedData(activeNode);
const router = useRouter();
const workflowHelpers = useWorkflowHelpers({ router });
const workflowActivate = useWorkflowActivate();
return {
externalHooks,
nodeHelpers,
pinnedData,
workflowHelpers,
workflowActivate,
...useDeviceSupport(),
...useMessage(),
// eslint-disable-next-line @typescript-eslint/no-misused-promises
...workflowActivate.setup?.(props, ctx),
};
},
data() {

8
packages/editor-ui/src/components/WorkflowActivator.vue
View file

@ -52,7 +52,7 @@
<script lang="ts">
import { useToast } from '@/composables/useToast';
import { workflowActivate } from '@/mixins/workflowActivate';
import { useWorkflowActivate } from '@/composables/useWorkflowActivate';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { mapStores } from 'pinia';
@ -61,13 +61,11 @@ import { getActivatableTriggerNodes } from '@/utils/nodeTypesUtils';
export default defineComponent({
name: 'WorkflowActivator',
mixins: [workflowActivate],
props: ['workflowActive', 'workflowId'],
setup(props, ctx) {
setup() {
return {
...useToast(),
// eslint-disable-next-line @typescript-eslint/no-misused-promises
...workflowActivate.setup?.(props, ctx),
...useWorkflowActivate(),
};
},
computed: {

135
packages/editor-ui/src/composables/useWorkflowActivate.ts Normal file
View file

@ -0,0 +1,135 @@
import { useStorage } from '@/composables/useStorage';
import {
LOCAL_STORAGE_ACTIVATION_FLAG,
PLACEHOLDER_EMPTY_WORKFLOW_ID,
WORKFLOW_ACTIVE_MODAL_KEY,
} from '@/constants';
import { useUIStore } from '@/stores/ui.store';
import { useSettingsStore } from '@/stores/settings.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useRouter } from 'vue-router';
import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
import { useTelemetry } from '@/composables/useTelemetry';
import { useToast } from '@/composables/useToast';
import { useI18n } from '@/composables/useI18n';
import { ref } from 'vue';
export function useWorkflowActivate() {
const updatingWorkflowActivation = ref(false);
const router = useRouter();
const workflowHelpers = useWorkflowHelpers({ router });
const workflowsStore = useWorkflowsStore();
const settingsStore = useSettingsStore();
const uiStore = useUIStore();
const telemetry = useTelemetry();
const toast = useToast();
const i18n = useI18n();
//methods
const updateWorkflowActivation = async (
workflowId: string | undefined,
newActiveState: boolean,
telemetrySource?: string,
) => {
updatingWorkflowActivation.value = true;
const nodesIssuesExist = workflowsStore.nodesIssuesExist;
let currWorkflowId: string | undefined = workflowId;
if (!currWorkflowId || currWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
const saved = await workflowHelpers.saveCurrentWorkflow();
if (!saved) {
updatingWorkflowActivation.value = false;
return;
}
currWorkflowId = workflowsStore.workflowId;
}
const isCurrentWorkflow = currWorkflowId === workflowsStore.workflowId;
const activeWorkflows = workflowsStore.activeWorkflows;
const isWorkflowActive = activeWorkflows.includes(currWorkflowId);
const telemetryPayload = {
workflow_id: currWorkflowId,
is_active: newActiveState,
previous_status: isWorkflowActive,
ndv_input: telemetrySource === 'ndv',
};
telemetry.track('User set workflow active status', telemetryPayload);
void useExternalHooks().run('workflowActivate.updateWorkflowActivation', telemetryPayload);
try {
if (isWorkflowActive && newActiveState) {
toast.showMessage({
title: i18n.baseText('workflowActivator.workflowIsActive'),
type: 'success',
});
updatingWorkflowActivation.value = false;
return;
}
if (isCurrentWorkflow && nodesIssuesExist && newActiveState) {
toast.showMessage({
title: i18n.baseText(
'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title',
),
message: i18n.baseText(
'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message',
),
type: 'error',
});
updatingWorkflowActivation.value = false;
return;
}
await workflowHelpers.updateWorkflow(
{ workflowId: currWorkflowId, active: newActiveState },
!uiStore.stateIsDirty,
);
} catch (error) {
const newStateName = newActiveState ? 'activated' : 'deactivated';
toast.showError(
error,
i18n.baseText('workflowActivator.showError.title', {
interpolate: { newStateName },
}) + ':',
);
updatingWorkflowActivation.value = false;
return;
}
const activationEventName = isCurrentWorkflow
? 'workflow.activeChangeCurrent'
: 'workflow.activeChange';
void useExternalHooks().run(activationEventName, {
workflowId: currWorkflowId,
active: newActiveState,
});
updatingWorkflowActivation.value = false;
if (isCurrentWorkflow) {
if (newActiveState && useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value !== 'true') {
uiStore.openModal(WORKFLOW_ACTIVE_MODAL_KEY);
} else {
await settingsStore.fetchPromptsData();
}
}
};
const activateCurrentWorkflow = async (telemetrySource?: string) => {
const workflowId = workflowsStore.workflowId;
return await updateWorkflowActivation(workflowId, true, telemetrySource);
};
return {
activateCurrentWorkflow,
updateWorkflowActivation,
updatingWorkflowActivation,
};
}

134
packages/editor-ui/src/mixins/workflowActivate.ts
View file

@ -1,134 +0,0 @@
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useStorage } from '@/composables/useStorage';
import { useToast } from '@/composables/useToast';
import {
LOCAL_STORAGE_ACTIVATION_FLAG,
PLACEHOLDER_EMPTY_WORKFLOW_ID,
WORKFLOW_ACTIVE_MODAL_KEY,
} from '@/constants';
import { useUIStore } from '@/stores/ui.store';
import { useSettingsStore } from '@/stores/settings.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useRouter } from 'vue-router';
import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
export const workflowActivate = defineComponent({
setup() {
const router = useRouter();
const workflowHelpers = useWorkflowHelpers({ router });
return {
workflowHelpers,
...useToast(),
};
},
data() {
return {
updatingWorkflowActivation: false,
};
},
computed: {
...mapStores(useSettingsStore, useUIStore, useWorkflowsStore),
},
methods: {
async activateCurrentWorkflow(telemetrySource?: string) {
const workflowId = this.workflowsStore.workflowId;
return await this.updateWorkflowActivation(workflowId, true, telemetrySource);
},
async updateWorkflowActivation(
workflowId: string | undefined,
newActiveState: boolean,
telemetrySource?: string,
) {
this.updatingWorkflowActivation = true;
const nodesIssuesExist = this.workflowsStore.nodesIssuesExist;
let currWorkflowId: string | undefined = workflowId;
if (!currWorkflowId || currWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
const saved = await this.workflowHelpers.saveCurrentWorkflow();
if (!saved) {
this.updatingWorkflowActivation = false;
return;
}
currWorkflowId = this.workflowsStore.workflowId;
}
const isCurrentWorkflow = currWorkflowId === this.workflowsStore.workflowId;
const activeWorkflows = this.workflowsStore.activeWorkflows;
const isWorkflowActive = activeWorkflows.includes(currWorkflowId);
const telemetryPayload = {
workflow_id: currWorkflowId,
is_active: newActiveState,
previous_status: isWorkflowActive,
ndv_input: telemetrySource === 'ndv',
};
this.$telemetry.track('User set workflow active status', telemetryPayload);
void useExternalHooks().run('workflowActivate.updateWorkflowActivation', telemetryPayload);
try {
if (isWorkflowActive && newActiveState) {
this.showMessage({
title: this.$locale.baseText('workflowActivator.workflowIsActive'),
type: 'success',
});
this.updatingWorkflowActivation = false;
return;
}
if (isCurrentWorkflow && nodesIssuesExist && newActiveState) {
this.showMessage({
title: this.$locale.baseText(
'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title',
),
message: this.$locale.baseText(
'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message',
),
type: 'error',
});
this.updatingWorkflowActivation = false;
return;
}
await this.workflowHelpers.updateWorkflow(
{ workflowId: currWorkflowId, active: newActiveState },
!this.uiStore.stateIsDirty,
);
} catch (error) {
const newStateName = newActiveState ? 'activated' : 'deactivated';
this.showError(
error,
this.$locale.baseText('workflowActivator.showError.title', {
interpolate: { newStateName },
}) + ':',
);
this.updatingWorkflowActivation = false;
return;
}
const activationEventName = isCurrentWorkflow
? 'workflow.activeChangeCurrent'
: 'workflow.activeChange';
void useExternalHooks().run(activationEventName, {
workflowId: currWorkflowId,
active: newActiveState,
});
this.$emit('workflowActiveChanged', { id: currWorkflowId, active: newActiveState });
this.updatingWorkflowActivation = false;
if (isCurrentWorkflow) {
if (newActiveState && useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value !== 'true') {
this.uiStore.openModal(WORKFLOW_ACTIVE_MODAL_KEY);
} else {
await this.settingsStore.fetchPromptsData();
}
}
},
},
});