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 = {
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;
};

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

@ -406,9 +406,7 @@ describe('RunData', () => {
initialState: {
[STORES.SETTINGS]: SETTINGS_STORE_DEFAULT_STATE,
[STORES.NDV]: {
output: {
displayMode,
},
outputPanelDisplayMode: displayMode,
activeNodeName: 'Test Node',
},
[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_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 = `

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

@ -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<InputPanel>({
displayMode: 'schema',
nodeName: undefined,
run: undefined,
branch: undefined,
@ -52,8 +54,11 @@ export const useNDVStore = defineStore(STORES.NDV, () => {
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;
}
};