diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts index 40e3a64584..a01a530a01 100644 --- a/packages/editor-ui/src/Interface.ts +++ b/packages/editor-ui/src/Interface.ts @@ -1589,7 +1589,6 @@ export type ApiKey = { }; export type InputPanel = { - displayMode: IRunDataDisplayMode; nodeName?: string; run?: number; branch?: number; @@ -1600,7 +1599,6 @@ export type InputPanel = { export type OutputPanel = { branch?: number; - displayMode: IRunDataDisplayMode; data: { isEmpty: boolean; }; diff --git a/packages/editor-ui/src/components/RunData.test.ts b/packages/editor-ui/src/components/RunData.test.ts index 370ef1182d..e310389380 100644 --- a/packages/editor-ui/src/components/RunData.test.ts +++ b/packages/editor-ui/src/components/RunData.test.ts @@ -406,9 +406,7 @@ describe('RunData', () => { initialState: { [STORES.SETTINGS]: SETTINGS_STORE_DEFAULT_STATE, [STORES.NDV]: { - output: { - displayMode, - }, + outputPanelDisplayMode: displayMode, activeNodeName: 'Test Node', }, [STORES.WORKFLOWS]: { diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts index 535de082d3..d84377a0f6 100644 --- a/packages/editor-ui/src/constants.ts +++ b/packages/editor-ui/src/constants.ts @@ -437,6 +437,8 @@ export const LOCAL_STORAGE_ACTIVE_MODAL = 'N8N_ACTIVE_MODAL'; export const LOCAL_STORAGE_THEME = 'N8N_THEME'; export const LOCAL_STORAGE_EXPERIMENT_OVERRIDES = 'N8N_EXPERIMENT_OVERRIDES'; export const LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON = 'N8N_HIDE_HIDE_GITHUB_STAR_BUTTON'; +export const LOCAL_STORAGE_NDV_INPUT_PANEL_DISPLAY_MODE = 'N8N_NDV_INPUT_PANEL_DISPLAY_MODE'; +export const LOCAL_STORAGE_NDV_OUTPUT_PANEL_DISPLAY_MODE = 'N8N_NDV_OUTPUT_PANEL_DISPLAY_MODE'; export const BASE_NODE_SURVEY_URL = 'https://n8n-community.typeform.com/to/BvmzxqYv#nodename='; export const HIRING_BANNER = ` diff --git a/packages/editor-ui/src/stores/ndv.store.ts b/packages/editor-ui/src/stores/ndv.store.ts index 137c8ac828..74cbd40d55 100644 --- a/packages/editor-ui/src/stores/ndv.store.ts +++ b/packages/editor-ui/src/stores/ndv.store.ts @@ -1,3 +1,4 @@ +import { useLocalStorage } from '@vueuse/core'; import type { Draggable, InputPanel, @@ -13,6 +14,8 @@ import { useStorage } from '@/composables/useStorage'; import { LOCAL_STORAGE_AUTOCOMPLETE_IS_ONBOARDED, LOCAL_STORAGE_MAPPING_IS_ONBOARDED, + LOCAL_STORAGE_NDV_INPUT_PANEL_DISPLAY_MODE, + LOCAL_STORAGE_NDV_OUTPUT_PANEL_DISPLAY_MODE, LOCAL_STORAGE_TABLE_HOVER_IS_ONBOARDED, STORES, } from '@/constants'; @@ -44,7 +47,6 @@ export const useNDVStore = defineStore(STORES.NDV, () => { }); const pushRef = ref(''); const input = ref({ - displayMode: 'schema', nodeName: undefined, run: undefined, branch: undefined, @@ -52,8 +54,11 @@ export const useNDVStore = defineStore(STORES.NDV, () => { isEmpty: true, }, }); + const inputPanelDisplayMode = useLocalStorage( + LOCAL_STORAGE_NDV_INPUT_PANEL_DISPLAY_MODE, + 'schema', + ); const output = ref({ - displayMode: 'table', branch: undefined, data: { isEmpty: true, @@ -63,6 +68,10 @@ export const useNDVStore = defineStore(STORES.NDV, () => { value: '', }, }); + const outputPanelDisplayMode = useLocalStorage( + LOCAL_STORAGE_NDV_OUTPUT_PANEL_DISPLAY_MODE, + 'table', + ); const focusedMappableInput = ref(''); const focusedInputPath = ref(''); const mappingTelemetry = ref>({}); @@ -125,10 +134,6 @@ export const useNDVStore = defineStore(STORES.NDV, () => { return ndvInputDataWithPinnedData.value.length > 0; }); - const inputPanelDisplayMode = computed(() => input.value.displayMode); - - const outputPanelDisplayMode = computed(() => output.value.displayMode); - const isDraggableDragging = computed(() => draggable.value.isDragging); const draggableType = computed(() => draggable.value.type); @@ -242,9 +247,9 @@ export const useNDVStore = defineStore(STORES.NDV, () => { mode: IRunDataDisplayMode; }): void => { if (params.pane === 'input') { - input.value.displayMode = params.mode; + inputPanelDisplayMode.value = params.mode; } else { - output.value.displayMode = params.mode; + outputPanelDisplayMode.value = params.mode; } };