feat(editor): Persist user's preferred display modes on localStorage (#…

…11929)
n8n-io · Dec 4, 2024 · bd69316 · bd69316
1 parent 872535a
commit bd69316
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,16 +47,18 @@ export const useNDVStore = defineStore(STORES.NDV, () => {
 	});
 	const pushRef = ref('');
 	const input = ref<InputPanel>({
-		displayMode: 'schema',
 		nodeName: undefined,
 		run: undefined,
 		branch: undefined,
 		data: {
 			isEmpty: true,
 		},
 	});
+	const inputPanelDisplayMode = useLocalStorage<IRunDataDisplayMode>(
+		LOCAL_STORAGE_NDV_INPUT_PANEL_DISPLAY_MODE,
+		'schema',
+	);
 	const output = ref<OutputPanel>({
-		displayMode: 'table',
 		branch: undefined,
 		data: {
 			isEmpty: true,
@@ -63,6 +68,10 @@ export const useNDVStore = defineStore(STORES.NDV, () => {
 			value: '',
 		},
 	});
+	const outputPanelDisplayMode = useLocalStorage<IRunDataDisplayMode>(
+		LOCAL_STORAGE_NDV_OUTPUT_PANEL_DISPLAY_MODE,
+		'table',
+	);
 	const focusedMappableInput = ref('');
 	const focusedInputPath = ref('');
 	const mappingTelemetry = ref<Record<string, string | number | boolean>>({});
@@ -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;
 		}
 	};