Skip to content

Commit

Permalink
fix(editor): Add back prompt requesting to save unsaved changes (no-c…
Browse files Browse the repository at this point in the history 
…hangelog) (#10190)
  • Loading branch information
@alexgrozav @cstuncsik
alexgrozav authored and cstuncsik committed Aug 1, 2024
1 parent a28cae4 commit f587b3f
Show file tree
Hide file tree
Showing 9 changed files with 156 additions and 137 deletions.
3 changes: 3 additions & 0 deletions cypress/composables/modals/save-changes-modal.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function getSaveChangesModal() {
return cy.get('.el-overlay').contains('Save changes before leaving?');
}
26 changes: 26 additions & 0 deletions cypress/e2e/44-routing.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { WorkflowsPage as WorkflowsPageClass } from '../pages/workflows';
import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
import { EDIT_FIELDS_SET_NODE_NAME } from '../constants';
import { getSaveChangesModal } from '../composables/modals/save-changes-modal';

const WorkflowsPage = new WorkflowsPageClass();
const WorkflowPage = new WorkflowPageClass();

describe('Workflows', () => {
beforeEach(() => {
cy.visit(WorkflowsPage.url);
});

it('should ask to save unsaved changes before leaving route', () => {
WorkflowsPage.getters.newWorkflowButtonCard().should('be.visible');
WorkflowsPage.getters.newWorkflowButtonCard().click();

cy.createFixtureWorkflow('Test_workflow_1.json', 'Empty State Card Workflow');

WorkflowPage.actions.addNodeToCanvas(EDIT_FIELDS_SET_NODE_NAME);

cy.getByTestId('project-home-menu-item').click();

getSaveChangesModal().should('be.visible');
});
});
1 change: 1 addition & 0 deletions packages/editor-ui/src/components/executions/workflow/WorkflowExecutionsList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export default defineComponent({
next();
return;
}
if (this.uiStore.stateIsDirty) {
const confirmModal = await this.confirm(
this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
Expand Down
8 changes: 3 additions & 5 deletions packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ import type { IConnection, Workflow } from 'n8n-workflow';
import { NodeConnectionType } from 'n8n-workflow';
import { useCanvasOperations } from '@/composables/useCanvasOperations';
import type { CanvasNode } from '@/types';
import type { ICredentialsResponse, INodeUi, IWorkflowDb, XYPosition } from '@/Interface';
import type { ICredentialsResponse, INodeUi, IWorkflowDb } from '@/Interface';
import { RemoveNodeCommand } from '@/models/history';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useUIStore } from '@/stores/ui.store';
import { useHistoryStore } from '@/stores/history.store';
import { useNDVStore } from '@/stores/ndv.store';
import { ref } from 'vue';
import {
createTestNode,
createTestWorkflowObject,
Expand Down Expand Up @@ -49,7 +48,6 @@ describe('useCanvasOperations', () => {
let canvasOperations: ReturnType<typeof useCanvasOperations>;
let workflowHelpers: ReturnType<typeof useWorkflowHelpers>;

const lastClickPosition = ref<XYPosition>([450, 450]);
const router = useRouter();

beforeEach(async () => {
Expand Down Expand Up @@ -77,7 +75,7 @@ describe('useCanvasOperations', () => {
workflowsStore.resetState();
workflowHelpers.initState(workflow);

canvasOperations = useCanvasOperations({ router, lastClickPosition });
canvasOperations = useCanvasOperations({ router });
vi.clearAllMocks();
});

Expand Down Expand Up @@ -135,7 +133,7 @@ describe('useCanvasOperations', () => {
mockNodeTypeDescription({ name: 'type' }),
);

expect(result.position).toEqual([460, 460]); // Default last click position
expect(result.position).toEqual([0, 0]); // Default last click position
});

it('should create node with provided position when position is provided', () => {
Expand Down
14 changes: 5 additions & 9 deletions packages/editor-ui/src/composables/useCanvasOperations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,7 @@ import type {
} from 'n8n-workflow';
import { deepCopy, NodeConnectionType, NodeHelpers, TelemetryHelpers } from 'n8n-workflow';
import { v4 as uuid } from 'uuid';
import type { Ref } from 'vue';
import { computed, nextTick } from 'vue';
import { computed, nextTick, ref } from 'vue';
import type { useRouter } from 'vue-router';
import { useClipboard } from '@/composables/useClipboard';
import { isPresent } from '../utils/typesUtils';
Expand All @@ -108,13 +107,7 @@ type AddNodeOptions = {
isAutoAdd?: boolean;
};

export function useCanvasOperations({
router,
lastClickPosition,
}: {
router: ReturnType<typeof useRouter>;
lastClickPosition: Ref<XYPosition>;
}) {
export function useCanvasOperations({ router }: { router: ReturnType<typeof useRouter> }) {
const rootStore = useRootStore();
const workflowsStore = useWorkflowsStore();
const credentialsStore = useCredentialsStore();
Expand All @@ -136,6 +129,8 @@ export function useCanvasOperations({
const externalHooks = useExternalHooks();
const clipboard = useClipboard();

const lastClickPosition = ref<XYPosition>([0, 0]);

const preventOpeningNDV = !!localStorage.getItem('NodeView.preventOpeningNDV');

const editableWorkflow = computed(() => workflowsStore.workflow);
Expand Down Expand Up @@ -1698,6 +1693,7 @@ export function useCanvasOperations({
}

return {
lastClickPosition,
editableWorkflow,
editableWorkflowObject,
triggerNodes,
Expand Down
50 changes: 50 additions & 0 deletions packages/editor-ui/src/composables/useWorkflowHelpers.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
HTTP_REQUEST_NODE_TYPE,
MODAL_CANCEL,
MODAL_CONFIRM,
PLACEHOLDER_EMPTY_WORKFLOW_ID,
PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
Expand Down Expand Up @@ -66,6 +67,8 @@ import { useTelemetry } from '@/composables/useTelemetry';
import { useProjectsStore } from '@/stores/projects.store';
import { useTagsStore } from '@/stores/tags.store';
import useWorkflowsEEStore from '@/stores/workflows.ee.store';
import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
import type { NavigationGuardNext } from 'vue-router';

type ResolveParameterOptions = {
targetItem?: TargetItem;
Expand Down Expand Up @@ -1055,6 +1058,52 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
}
}

async function promptSaveUnsavedWorkflowChanges(
next: NavigationGuardNext,
{
confirm = async () => true,
cancel = async () => {},
}: {
confirm?: () => Promise<boolean>;
cancel?: () => Promise<void>;
} = {},
) {
if (uiStore.stateIsDirty) {
const npsSurveyStore = useNpsSurveyStore();

const confirmModal = await message.confirm(
i18n.baseText('generic.unsavedWork.confirmMessage.message'),
{
title: i18n.baseText('generic.unsavedWork.confirmMessage.headline'),
type: 'warning',
confirmButtonText: i18n.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
cancelButtonText: i18n.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
showClose: true,
},
);

if (confirmModal === MODAL_CONFIRM) {
const saved = await saveCurrentWorkflow({}, false);
if (saved) {
await npsSurveyStore.fetchPromptsData();
}
uiStore.stateIsDirty = false;

const goToNext = await confirm();
if (goToNext) {
next();
}
} else if (confirmModal === MODAL_CANCEL) {
await cancel();

uiStore.stateIsDirty = false;
next();
}
} else {
next();
}
}

function initState(workflowData: IWorkflowDb) {
workflowsStore.addWorkflow(workflowData);
workflowsStore.setActive(workflowData.active || false);
Expand Down Expand Up @@ -1107,6 +1156,7 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
updateNodePositions,
removeForeignCredentialsFromWorkflow,
getWorkflowProjectRole,
promptSaveUnsavedWorkflowChanges,
initState,
};
}
69 changes: 3 additions & 66 deletions packages/editor-ui/src/views/NodeView.v2.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
ref,
useCssModule,
} from 'vue';
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import WorkflowCanvas from '@/components/canvas/WorkflowCanvas.vue';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useUIStore } from '@/stores/ui.store';
Expand Down Expand Up @@ -42,10 +42,8 @@ import {
EnterpriseEditionFeature,
MAIN_HEADER_TABS,
MANUAL_CHAT_TRIGGER_NODE_TYPE,
MODAL_CANCEL,
MODAL_CONFIRM,
NODE_CREATOR_OPEN_SOURCES,
PLACEHOLDER_EMPTY_WORKFLOW_ID,
START_NODE_TYPE,
STICKY_NODE_TYPE,
VALID_WORKFLOW_IMPORT_URL_REGEX,
Expand Down Expand Up @@ -136,8 +134,6 @@ const templatesStore = useTemplatesStore();
const canvasEventBus = createEventBus();
const lastClickPosition = ref<XYPosition>([0, 0]);
const { runWorkflow, stopCurrentExecution, stopWaitingForWebhook } = useRunWorkflow({ router });
const {
updateNodePosition,
Expand Down Expand Up @@ -171,7 +167,8 @@ const {
initializeWorkspace,
editableWorkflow,
editableWorkflowObject,
} = useCanvasOperations({ router, lastClickPosition });
lastClickPosition,
} = useCanvasOperations({ router });
const { applyExecutionData } = useExecutionDebugging();
useClipboard({ onPaste: onClipboardPaste });
Expand Down Expand Up @@ -1372,66 +1369,6 @@ function registerCustomActions() {
// });
}
/**
* Routing
*/
onBeforeRouteLeave(async (to, from, next) => {
const toNodeViewTab = getNodeViewTab(to);
if (
toNodeViewTab === MAIN_HEADER_TABS.EXECUTIONS ||
from.name === VIEWS.TEMPLATE_IMPORT ||
(toNodeViewTab === MAIN_HEADER_TABS.WORKFLOW && from.name === VIEWS.EXECUTION_DEBUG)
) {
next();
return;
}
if (uiStore.stateIsDirty && !isReadOnlyEnvironment.value) {
const confirmModal = await message.confirm(
i18n.baseText('generic.unsavedWork.confirmMessage.message'),
{
title: i18n.baseText('generic.unsavedWork.confirmMessage.headline'),
type: 'warning',
confirmButtonText: i18n.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
cancelButtonText: i18n.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
showClose: true,
},
);
if (confirmModal === MODAL_CONFIRM) {
// Make sure workflow id is empty when leaving the editor
workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
const saved = await workflowHelpers.saveCurrentWorkflow({}, false);
if (saved) {
await npsSurveyStore.fetchPromptsData();
}
uiStore.stateIsDirty = false;
if (from.name === VIEWS.NEW_WORKFLOW) {
// Replace the current route with the new workflow route
// before navigating to the new route when saving new workflow.
await router.replace({
name: VIEWS.WORKFLOW,
params: { name: workflowId.value },
});
await router.push(to);
} else {
next();
}
} else if (confirmModal === MODAL_CANCEL) {
workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
resetWorkspace();
uiStore.stateIsDirty = false;
next();
}
} else {
next();
}
});
/**
* Lifecycle
*/
Expand Down
55 changes: 0 additions & 55 deletions packages/editor-ui/src/views/NodeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,61 +414,6 @@ export default defineComponent({
ContextMenu,
LazySetupWorkflowCredentialsButton,
},
async beforeRouteLeave(to, from, next) {
if (
getNodeViewTab(to) === MAIN_HEADER_TABS.EXECUTIONS ||
from.name === VIEWS.TEMPLATE_IMPORT ||
(getNodeViewTab(to) === MAIN_HEADER_TABS.WORKFLOW && from.name === VIEWS.EXECUTION_DEBUG)
) {
next();
return;
}
if (this.uiStore.stateIsDirty && !this.readOnlyEnv) {
const confirmModal = await this.confirm(
this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
{
title: this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
type: 'warning',
confirmButtonText: this.$locale.baseText(
'generic.unsavedWork.confirmMessage.confirmButtonText',
),
cancelButtonText: this.$locale.baseText(
'generic.unsavedWork.confirmMessage.cancelButtonText',
),
showClose: true,
},
);
if (confirmModal === MODAL_CONFIRM) {
// Make sure workflow id is empty when leaving the editor
this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
const saved = await this.workflowHelpers.saveCurrentWorkflow({}, false);
if (saved) {
await this.npsSurveyStore.fetchPromptsData();
}
this.uiStore.stateIsDirty = false;

if (from.name === VIEWS.NEW_WORKFLOW) {
// Replace the current route with the new workflow route
// before navigating to the new route when saving new workflow.
await this.$router.replace({
name: VIEWS.WORKFLOW,
params: { name: this.currentWorkflow },
});

await this.$router.push(to);
} else {
next();
}
} else if (confirmModal === MODAL_CANCEL) {
this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
this.resetWorkspace();
this.uiStore.stateIsDirty = false;
next();
}
} else {
next();
}
},
setup() {
const nodeViewRootRef = ref<HTMLElement | null>(null);
const nodeViewRef = ref<HTMLElement | null>(null);
Expand Down
Loading

0 comments on commit f587b3f

Please sign in to comment.