fix(editor): Fix local storage flags defaulting to undefined string (#7603)

useStorage takes the default value `undefined` and sets it in local
storage.. also returns "undefined" as string which breaks onboarding
flows

Github issue / Community forum post (link here to close automatically):
This commit is contained in:
Mutasem Aldmour
2023-11-07 10:06:08 +01:00
committed by GitHub
parent 78b84af8d1
commit 151e60f829
12 changed files with 97 additions and 42 deletions

View File

@@ -50,6 +50,7 @@ import { getActivatableTriggerNodes, getTriggerNodeServiceName } from '@/utils';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useStorage } from '@/composables/useStorage';
export default defineComponent({
name: 'ActivationModal',
@@ -88,7 +89,7 @@ export default defineComponent({
},
handleCheckboxChange(checkboxValue: boolean) {
this.checked = checkboxValue;
window.localStorage.setItem(LOCAL_STORAGE_ACTIVATION_FLAG, checkboxValue.toString());
useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value = checkboxValue.toString();
},
},
computed: {

View File

@@ -41,7 +41,7 @@ import { defineComponent } from 'vue';
import type { PropType } from 'vue';
import { mapStores } from 'pinia';
import { get } from 'lodash-es';
import { useStorage } from '@vueuse/core';
import { useStorage } from '@/composables/useStorage';
import type { INodeTypeDescription } from 'n8n-workflow';
import PanelDragButton from './PanelDragButton.vue';
@@ -348,7 +348,6 @@ export default defineComponent({
restorePositionData() {
const storedPanelWidthData = useStorage(
`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`,
undefined,
).value;
if (storedPanelWidthData) {
@@ -362,10 +361,8 @@ export default defineComponent({
return false;
},
storePositionData() {
window.localStorage.setItem(
`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`,
this.mainPanelDimensions.relativeWidth.toString(),
);
useStorage(`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`).value =
this.mainPanelDimensions.relativeWidth.toString();
},
onDragStart() {
this.isDragging = true;

View File

@@ -170,7 +170,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useStorage } from '@vueuse/core';
import { useStorage } from '@/composables/useStorage';
import {
CUSTOM_API_CALL_KEY,
LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
@@ -582,10 +582,7 @@ export default defineComponent({
},
},
created() {
const hasSeenPinDataTooltip = useStorage(
LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
undefined,
).value;
const hasSeenPinDataTooltip = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value;
if (!hasSeenPinDataTooltip) {
this.unwatchWorkflowDataItems = this.$watch('workflowDataItems', (dataItemsCount: number) => {
this.showPinDataDiscoveryTooltip(dataItemsCount);
@@ -626,7 +623,7 @@ export default defineComponent({
)
return;
localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, 'true');
useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
this.pinDataDiscoveryTooltipVisible = true;
this.unwatchWorkflowDataItems();

View File

@@ -496,7 +496,7 @@
import { defineAsyncComponent, defineComponent } from 'vue';
import type { PropType } from 'vue';
import { mapStores } from 'pinia';
import { useStorage } from '@vueuse/core';
import { useStorage } from '@/composables/useStorage';
import { saveAs } from 'file-saver';
import type {
ConnectionTypes,
@@ -940,10 +940,7 @@ export default defineComponent({
return;
}
const pinDataDiscoveryFlag = useStorage(
LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG,
undefined,
).value;
const pinDataDiscoveryFlag = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value;
if (value && value.length > 0 && !this.isReadOnlyRoute && !pinDataDiscoveryFlag) {
this.pinDataDiscoveryComplete();
@@ -963,8 +960,8 @@ export default defineComponent({
}
},
pinDataDiscoveryComplete() {
localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG, 'true');
localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, 'true');
useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value = 'true';
useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
},
enterEditMode({ origin }: EnterEditModeArgs) {
const inputData = this.pinData