fix(editor): Remove misleading reset zoom control (#35843)

This commit is contained in:
Rob Hough
2026-08-11 10:22:36 +00:00
committed by GitHub
parent fd67bf8b78
commit cce5401ed2
6 changed files with 2 additions and 53 deletions
@@ -1926,7 +1926,6 @@ defineExpose({
@zoom-to-fit="onFitView"
@zoom-in="onZoomIn"
@zoom-out="onZoomOut"
@reset-zoom="onResetZoom"
@tidy-up="onTidyUp({ source: 'canvas-button' })"
@toggle-zoom-mode="onToggleZoomMode"
/>
@@ -28,26 +28,6 @@ describe('CanvasControlButtons', () => {
expect(wrapper.html()).toMatchSnapshot();
});
it('should show reset zoom button when zoom is not equal to 1', () => {
const wrapper = renderComponent({
props: {
zoom: 1.5,
},
});
expect(wrapper.getByTestId('reset-zoom-button')).toBeVisible();
});
it('should hide the reset zoom button when zoom is equal to 1', () => {
const wrapper = renderComponent({
props: {
zoom: 1,
},
});
expect(wrapper.queryByTestId('reset-zoom-button')).not.toBeInTheDocument();
});
it('should hide the tidy up button when canvas is read-only', () => {
const wrapper = renderComponent({
props: {
@@ -20,7 +20,6 @@ const props = withDefaults(
);
const emit = defineEmits<{
'reset-zoom': [];
'zoom-in': [];
'zoom-out': [];
'zoom-to-fit': [];
@@ -38,12 +37,6 @@ const isExperimentalNdvActive = computed(() => experimentalNdvStore.isActive(pro
const isToggleZoomVisible = computed(() => experimentalNdvStore.isZoomedViewEnabled);
const isResetZoomVisible = computed(() => !isToggleZoomVisible.value && props.zoom !== 1);
function onResetZoom() {
emit('reset-zoom');
}
function onZoomIn() {
emit('zoom-in');
}
@@ -129,20 +122,6 @@ function handleClickCollapseAll() {
@click="emit('toggle-zoom-mode')"
/>
</KeyboardShortcutTooltip>
<KeyboardShortcutTooltip
v-if="isResetZoomVisible"
:label="i18n.baseText('nodeView.resetZoom')"
:shortcut="{ keys: ['0'] }"
>
<N8nIconButton
variant="subtle"
size="large"
icon="undo-2"
:aria-label="i18n.baseText('nodeView.resetZoom')"
data-test-id="reset-zoom-button"
@click="onResetZoom"
/>
</KeyboardShortcutTooltip>
<KeyboardShortcutTooltip
v-if="!readOnly"
:label="i18n.baseText('nodeView.tidyUp')"
@@ -12,7 +12,6 @@ exports[`CanvasControlButtons > should render correctly 1`] = `
<!--v-if--><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-button-stub variant="subtle" icon="zoom-in" size="large" loading="false" icononly="true" disabled="false" class="" aria-label="Zoom In" data-test-id="zoom-in-button"></n8n-icon-button-stub></span>
<!--v-if--><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-button-stub variant="subtle" icon="zoom-out" size="large" loading="false" icononly="true" disabled="false" class="" aria-label="Zoom Out" data-test-id="zoom-out-button"></n8n-icon-button-stub></span>
<!--v-if-->
<!--v-if-->
<!--v-if--><span class="" data-state="closed" data-grace-area-trigger=""><n8n-button-stub variant="subtle" size="large" loading="false" icononly="true" disabled="false" class="iconButton" aria-label="Tidy Up" data-test-id="tidy-up-button"></n8n-button-stub></span>
<!--v-if-->
<!--v-if-->
@@ -896,10 +896,6 @@ export class CanvasPage extends BasePage {
return this.page.getByTestId('zoom-in-button');
}
getResetZoomButton(): Locator {
return this.page.getByTestId('reset-zoom-button');
}
async clickZoomInButton(): Promise<void> {
await this.clickByTestId('zoom-in-button');
}
@@ -55,13 +55,9 @@ test.describe(
expect(finalZoom).toBeLessThanOrEqual(ZOOM_OUT_X2_FACTOR + ZOOM_TOLERANCE);
});
test('should reset zoom', async ({ n8n }) => {
await expect(n8n.canvas.getResetZoomButton()).not.toBeAttached();
test('should reset zoom on keyboard shortcut', async ({ n8n }) => {
await n8n.canvas.clickZoomInButton();
await expect(n8n.canvas.getResetZoomButton()).toBeVisible();
await n8n.canvas.getResetZoomButton().click();
await n8n.page.keyboard.press('0');
await expectZoomLevel(n8n, DEFAULT_ZOOM_FACTOR);
});