fix: allow view options to update (#5024)

Author: drdelambre

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -1,4 +1,4 @@
-import React, {FC} from 'react'
+import React, {FC, useEffect} from 'react'
 import {createLocalStorageStateHook} from 'use-local-storage-state'
 
 // Components
@@ -10,6 +10,7 @@ import {SidebarProvider} from 'src/dataExplorer/context/sidebar'
 import ResultsPane from 'src/dataExplorer/components/ResultsPane'
 import Sidebar from 'src/dataExplorer/components/Sidebar'
 import Schema from 'src/dataExplorer/components/Schema'
+import {useSessionStorage} from 'src/dataExplorer/shared/utils'
 
 // Styles
 import './FluxQueryBuilder.scss'
@@ -19,7 +20,17 @@ const useResizeState = createLocalStorageStateHook(
   [0.25, 0.8]
 )
 const FluxQueryBuilder: FC = () => {
-  const [vertDragPosition, setVertDragPosition] = useResizeState()
+  const [oldVertDragPosition, oldSetVertDragPosition] = useResizeState()
+  const [vertDragPosition, setVertDragPosition] = useSessionStorage(
+    'dataExplorer.resize.vertical',
+    oldVertDragPosition
+  )
+
+  // migration to allow people to keep their last used settings
+  // immediately after rollout
+  useEffect(() => {
+    oldSetVertDragPosition([0.25, 0.8])
+  }, [])
 
   return (
     <QueryProvider>

src/dataExplorer/components/Results.tsx

@@ -71,9 +71,13 @@ const WrappedOptions: FC = () => {
       properties={view.properties}
       results={result.parsed}
       update={update => {
-        Object.keys(update).forEach(k => (view.properties[k] = update[k]))
-
-        setView({...view})
+        setView({
+          ...view,
+          properties: {
+            ...view.properties,
+            ...update,
+          },
+        })
       }}
     />
   )

src/dataExplorer/components/ResultsContext.tsx

@@ -1,6 +1,7 @@
 import React, {FC, createContext, useState, useRef, useEffect} from 'react'
 import {createLocalStorageStateHook} from 'use-local-storage-state'
 
+import {useSessionStorage} from 'src/dataExplorer/shared/utils'
 import {FluxResult} from 'src/types/flows'
 import {
   RemoteDataState,
@@ -61,7 +62,20 @@ export const ResultsProvider: FC = ({children}) => {
   )
 
   // for display, should be moved
-  const [view, setView] = useLocalStorageState()
+  const [oldView, setOldView] = useLocalStorageState()
+  const [view, setView] = useSessionStorage('dataExplorer.results', oldView)
+
+  // migration to allow people to keep their last used settings
+  // immediately after rollout
+  useEffect(() => {
+    setOldView({
+      state: 'table',
+      properties: {
+        type: 'simple-table',
+        showAll: false,
+      } as SimpleTableViewProperties,
+    })
+  }, [])
 
   useEffect(() => {
     let running = false

src/dataExplorer/components/ResultsPane.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, lazy, Suspense, useContext} from 'react'
+import React, {FC, lazy, Suspense, useContext, useEffect} from 'react'
 import {
   DraggableResizer,
   Orientation,
@@ -40,6 +40,7 @@ import {getWindowPeriodVariableFromVariables} from 'src/variables/utils/getWindo
 // Constants
 import {TIME_RANGE_START, TIME_RANGE_STOP} from 'src/variables/constants'
 import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
+import {useSessionStorage} from '../shared/utils'
 
 const FluxMonacoEditor = lazy(() =>
   import('src/shared/components/FluxMonacoEditor')
@@ -94,9 +95,26 @@ const ResultsPane: FC = () => {
   const {basic, query} = useContext(QueryContext)
   const {status, setStatus, setResult} = useContext(ResultsContext)
 
-  const [horizDragPosition, setHorizDragPosition] = useResizeState()
-  const [text, setText] = useQueryState()
-  const [timeRange, setTimeRange] = useRangeState()
+  const [oldHorizDragPosition, setOldHorizDragPosition] = useResizeState()
+  const [horizDragPosition, setHorizDragPosition] = useSessionStorage(
+    'dataExplorer.resize.horizontal',
+    oldHorizDragPosition
+  )
+  const [oldText, setOldText] = useQueryState()
+  const [text, setText] = useSessionStorage('dataExplorer.query', oldText)
+  const [oldTimeRange, setOldTimeRange] = useRangeState()
+  const [timeRange, setTimeRange] = useSessionStorage(
+    'dataExplorer.range',
+    oldTimeRange
+  )
+
+  // migration to allow people to keep their last used settings
+  // immediately after rollout
+  useEffect(() => {
+    setOldHorizDragPosition([0.2])
+    setOldText('')
+    setOldTimeRange(DEFAULT_TIME_RANGE)
+  }, [])
 
   const download = () => {
     event('CSV Download Initiated')

src/dataExplorer/context/fluxQueryBuilder.tsx

@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useContext,
   useCallback,
+  useEffect,
 } from 'react'
 import {createLocalStorageStateHook} from 'use-local-storage-state'
 
@@ -24,6 +25,7 @@ import {
   ExecuteCommandInjectTagValue,
   ExecuteCommandInjectField,
 } from 'src/languageSupport/languages/flux/lsp/utils'
+import {useSessionStorage} from 'src/dataExplorer/shared/utils'
 
 const useLocalStorageState = createLocalStorageStateHook(
   'dataExplorer.schema',
@@ -80,9 +82,22 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
   const {injectViaLsp} = useContext(EditorContext)
 
   // States
-  const [selection, setSelection] = useLocalStorageState()
+  const [oldSelection, setOldSelection] = useLocalStorageState()
+  const [selection, setSelection] = useSessionStorage(
+    'dataExplorer.schema',
+    oldSelection
+  )
   const [searchTerm, setSearchTerm] = useState('')
 
+  // migration to allow people to keep their last used settings
+  // immediately after rollout
+  useEffect(() => {
+    setOldSelection({
+      bucket: null,
+      measurement: null,
+    })
+  }, [])
+
   const handleSelectBucket = (bucket: Bucket): void => {
     selection.bucket = bucket
     selection.measurement = ''

src/dataExplorer/shared/utils.ts

@@ -1,3 +1,4 @@
+import {useState} from 'react'
 export const LOAD_MORE_LIMIT_INITIAL = 8
 export const LOAD_MORE_LIMIT = 25
 export const IMPORT_REGEXP = 'import "regexp"\n'
@@ -14,3 +15,29 @@ export const FROM_BUCKET = (bucketName: string) =>
 
 export const SEARCH_STRING = (searchTerm: string): string =>
   `|> filter(fn: (r) => r._value =~ regexp.compile(v: "(?i:" + regexp.quoteMeta(v: "${searchTerm}") + ")"))`
+
+export const useSessionStorage = (keyName: string, defaultValue: any) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const value = window.sessionStorage.getItem(keyName)
+
+      if (value) {
+        return JSON.parse(value)
+      } else {
+        window.sessionStorage.setItem(keyName, JSON.stringify(defaultValue))
+        return defaultValue
+      }
+    } catch (err) {
+      return defaultValue
+    }
+  })
+
+  const setValue = (newValue: any) => {
+    try {
+      window.sessionStorage.setItem(keyName, JSON.stringify(newValue))
+    } catch (err) {}
+    setStoredValue(newValue)
+  }
+
+  return [storedValue, setValue]
+}