mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-30 05:42:00 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™ 2024-12-04 13:40:08 +01:00 committed by GitHub
parent 872535a40c
commit bd693162b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor-ui/src/Interface.ts
View file

@ -1589,7 +1589,6 @@ export type ApiKey = {
}; };
export type InputPanel = { export type InputPanel = {
displayMode: IRunDataDisplayMode;
nodeName?: string; nodeName?: string;
run?: number; run?: number;
branch?: number; branch?: number;
@ -1600,7 +1599,6 @@ export type InputPanel = {
export type OutputPanel = { export type OutputPanel = {
branch?: number; branch?: number;
displayMode: IRunDataDisplayMode;
data: { data: {
isEmpty: boolean; isEmpty: boolean;
}; };

4
packages/editor-ui/src/components/RunData.test.ts
View file

@ -406,9 +406,7 @@ describe('RunData', () => {
initialState: { initialState: {
[STORES.SETTINGS]: SETTINGS_STORE_DEFAULT_STATE, [STORES.SETTINGS]: SETTINGS_STORE_DEFAULT_STATE,
[STORES.NDV]: { [STORES.NDV]: {
output: { outputPanelDisplayMode: displayMode,
displayMode,
},
activeNodeName: 'Test Node', activeNodeName: 'Test Node',
}, },
[STORES.WORKFLOWS]: { [STORES.WORKFLOWS]: {

2
packages/editor-ui/src/constants.ts
View file

@ -437,6 +437,8 @@ export const LOCAL_STORAGE_ACTIVE_MODAL = 'N8N_ACTIVE_MODAL';
export const LOCAL_STORAGE_THEME = 'N8N_THEME'; export const LOCAL_STORAGE_THEME = 'N8N_THEME';
export const LOCAL_STORAGE_EXPERIMENT_OVERRIDES = 'N8N_EXPERIMENT_OVERRIDES'; 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_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 BASE_NODE_SURVEY_URL = 'https://n8n-community.typeform.com/to/BvmzxqYv#nodename=';
export const HIRING_BANNER = ` export const HIRING_BANNER = `

21
packages/editor-ui/src/stores/ndv.store.ts
View file

@ -1,3 +1,4 @@
import { useLocalStorage } from '@vueuse/core';
import type { import type {
Draggable, Draggable,
InputPanel, InputPanel,
@ -13,6 +14,8 @@ import { useStorage } from '@/composables/useStorage';
import { import {
LOCAL_STORAGE_AUTOCOMPLETE_IS_ONBOARDED, LOCAL_STORAGE_AUTOCOMPLETE_IS_ONBOARDED,
LOCAL_STORAGE_MAPPING_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, LOCAL_STORAGE_TABLE_HOVER_IS_ONBOARDED,
STORES, STORES,
} from '@/constants'; } from '@/constants';
@ -44,7 +47,6 @@ export const useNDVStore = defineStore(STORES.NDV, () => {
}); });
const pushRef = ref(''); const pushRef = ref('');
const input = ref<InputPanel>({ const input = ref<InputPanel>({
displayMode: 'schema',
nodeName: undefined, nodeName: undefined,
run: undefined, run: undefined,
branch: undefined, branch: undefined,
@ -52,8 +54,11 @@ export const useNDVStore = defineStore(STORES.NDV, () => {
isEmpty: true, isEmpty: true,
}, },
}); });
const inputPanelDisplayMode = useLocalStorage<IRunDataDisplayMode>(
LOCAL_STORAGE_NDV_INPUT_PANEL_DISPLAY_MODE,
'schema',
);
const output = ref<OutputPanel>({ const output = ref<OutputPanel>({
displayMode: 'table',
branch: undefined, branch: undefined,
data: { data: {
isEmpty: true, isEmpty: true,
@ -63,6 +68,10 @@ export const useNDVStore = defineStore(STORES.NDV, () => {
value: '', value: '',
}, },
}); });
const outputPanelDisplayMode = useLocalStorage<IRunDataDisplayMode>(
LOCAL_STORAGE_NDV_OUTPUT_PANEL_DISPLAY_MODE,
'table',
);
const focusedMappableInput = ref(''); const focusedMappableInput = ref('');
const focusedInputPath = ref(''); const focusedInputPath = ref('');
const mappingTelemetry = ref<Record<string, string | number | boolean>>({}); const mappingTelemetry = ref<Record<string, string | number | boolean>>({});
@ -125,10 +134,6 @@ export const useNDVStore = defineStore(STORES.NDV, () => {
return ndvInputDataWithPinnedData.value.length > 0; return ndvInputDataWithPinnedData.value.length > 0;
}); });
const inputPanelDisplayMode = computed(() => input.value.displayMode);
const outputPanelDisplayMode = computed(() => output.value.displayMode);
const isDraggableDragging = computed(() => draggable.value.isDragging); const isDraggableDragging = computed(() => draggable.value.isDragging);
const draggableType = computed(() => draggable.value.type); const draggableType = computed(() => draggable.value.type);
@ -242,9 +247,9 @@ export const useNDVStore = defineStore(STORES.NDV, () => {
mode: IRunDataDisplayMode; mode: IRunDataDisplayMode;
}): void => { }): void => {
if (params.pane === 'input') { if (params.pane === 'input') {
input.value.displayMode = params.mode; inputPanelDisplayMode.value = params.mode;
} else { } else {
output.value.displayMode = params.mode; outputPanelDisplayMode.value = params.mode;
} }
}; };