tweak(ui): useLocalStorageState adapter

ui/.env.development

@@ -3,4 +3,4 @@ REACT_APP_VERSION=$npm_package_version
 REACT_APP_NAME=$npm_package_name
 REACT_APP_SENTRY_DSN=https://[email protected]/5721090
 REACT_APP_SENTRY_ENABLED=false
-RELEASE_VERSION=$set_by_config_overrides
+RELEASE_VERSION=DO_NOT_EDIT_it_set_in_config-overrides.js

ui/.env.production

@@ -4,4 +4,4 @@ REACT_APP_VERSION=$npm_package_version
 REACT_APP_NAME=$npm_package_name
 REACT_APP_SENTRY_DSN=https://[email protected]/5721090
 REACT_APP_SENTRY_ENABLED=true
-RELEASE_VERSION=$set_by_config_overrides
+RELEASE_VERSION=DO_NOT_EDIT_it_set_in_config-overrides.js

ui/dashboardApp/layout/main/index.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useCallback, useEffect } from 'react'
 import { Root } from '@lib/components'
-import { useLocalStorageState } from 'ahooks'
 import { HashRouter as Router } from 'react-router-dom'
 import { useSpring, animated } from 'react-spring'
 
+import { useLocalStorageState } from '@lib/utils/useLocalstorage'
+
 import Sider from './Sider'
 import styles from './index.module.less'
 

ui/lib/apps/SlowQuery/pages/Detail/index.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { Space } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router-dom'
-import { useLocalStorageState } from 'ahooks'
 import { ArrowLeftOutlined } from '@ant-design/icons'
 
 import client from '@lib/client'
@@ -20,6 +19,7 @@ import {
   Pre,
   TextWithInfo,
 } from '@lib/components'
+import { useLocalStorageState } from '@lib/utils/useLocalstorage'
 
 import DetailTabs from './DetailTabs'
 

ui/lib/apps/SlowQuery/pages/List/index.tsx

@@ -17,7 +17,6 @@ import {
   MenuOutlined,
 } from '@ant-design/icons'
 import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane'
-import { useLocalStorageState } from 'ahooks'
 
 import {
   Card,
@@ -27,7 +26,7 @@ import {
   MultiSelect,
 } from '@lib/components'
 import { CacheContext } from '@lib/utils/useCache'
-import { useCompatibilityLocalstorage } from '@lib/utils/useCompatibilityLocalstorage'
+import { useLocalStorageState } from '@lib/utils/useLocalstorage'
 
 import SlowQueriesTable from '../../components/SlowQueriesTable'
 import useSlowQueryTableController, {
@@ -48,12 +47,10 @@ function List() {
 
   const slowQueryCacheMgr = useContext(CacheContext)
 
-  const [
-    visibleColumnKeys,
-    setVisibleColumnKeys,
-  ] = useCompatibilityLocalstorage(
+  const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState(
     SLOW_QUERY_VISIBLE_COLUMN_KEYS,
-    DEF_SLOW_QUERY_COLUMN_KEYS
+    DEF_SLOW_QUERY_COLUMN_KEYS,
+    true
   )
   const [showFullSQL, setShowFullSQL] = useLocalStorageState(
     SLOW_QUERY_SHOW_FULL_SQL,

ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Space } from 'antd'
-import { useLocalStorageState } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import {
   AnimatedSkeleton,
@@ -16,6 +15,7 @@ import {
 import { useClientRequest } from '@lib/utils/useClientRequest'
 import client from '@lib/client'
 import formatSql from '@lib/utils/sqlFormatter'
+import { useLocalStorageState } from '@lib/utils/useLocalstorage'
 
 import type { IPageQuery } from '.'
 import DetailTabs from './PlanDetailTabs'

ui/lib/apps/Statement/pages/Detail/index.tsx

@@ -4,7 +4,6 @@ import { Selection } from 'office-ui-fabric-react/lib/Selection'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router-dom'
-import { useLocalStorageState } from 'ahooks'
 import { ArrowLeftOutlined } from '@ant-design/icons'
 
 import client, { StatementModel } from '@lib/client'
@@ -23,6 +22,7 @@ import CopyLink from '@lib/components/CopyLink'
 import formatSql from '@lib/utils/sqlFormatter'
 import { buildQueryFn, parseQueryFn } from '@lib/utils/query'
 import { useClientRequest } from '@lib/utils/useClientRequest'
+import { useLocalStorageState } from '@lib/utils/useLocalstorage'
 
 import { planColumns as genPlanColumns } from '../../utils/tableColumns'
 import PlanDetail from './PlanDetail'

ui/lib/apps/Statement/pages/List/index.tsx

@@ -11,7 +11,6 @@ import {
   Menu,
   message,
 } from 'antd'
-import { useLocalStorageState } from 'ahooks'
 import {
   ReloadOutlined,
   LoadingOutlined,
@@ -24,7 +23,7 @@ import { useTranslation } from 'react-i18next'
 
 import { CacheContext } from '@lib/utils/useCache'
 import { Card, ColumnsSelector, Toolbar, MultiSelect } from '@lib/components'
-import { useCompatibilityLocalstorage } from '@lib/utils/useCompatibilityLocalstorage'
+import { useLocalStorageState } from '@lib/utils/useLocalstorage'
 
 import { StatementsTable } from '../../components'
 import StatementSettingForm from './StatementSettingForm'
@@ -46,12 +45,10 @@ export default function StatementsOverview() {
   const statementCacheMgr = useContext(CacheContext)
 
   const [showSettings, setShowSettings] = useState(false)
-  const [
-    visibleColumnKeys,
-    setVisibleColumnKeys,
-  ] = useCompatibilityLocalstorage(
+  const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState(
     STMT_VISIBLE_COLUMN_KEYS,
-    DEF_STMT_COLUMN_KEYS
+    DEF_STMT_COLUMN_KEYS,
+    true
   )
   const [showFullSQL, setShowFullSQL] = useLocalStorageState(
     STMT_SHOW_FULL_SQL,

ui/lib/utils/useLocalstorage.ts

@@ -0,0 +1,14 @@
+import { useLocalStorageState as useAhooksLocalStorageState } from 'ahooks'
+
+// attachVersion will use the version field in package.json as the postfix for the localstorage key
+// we can **update version field in package.json** to upgrade local storage version key
+export function useLocalStorageState<T>(
+  key: string,
+  defaultValue: T | (() => T),
+  attachVersion = false
+) {
+  return useAhooksLocalStorageState(
+    attachVersion ? `${key}.v${process.env.REACT_APP_VERSION}` : key,
+    defaultValue
+  )
+}

ui/lib/utils/useOrderState.ts

@@ -1,6 +1,6 @@
 import { useState, useMemo } from 'react'
 
-import { useCompatibilityLocalstorage } from './useCompatibilityLocalstorage'
+import { useLocalStorageState } from './useLocalstorage'
 
 export interface IOrderOptions {
   orderBy: string
@@ -14,10 +14,11 @@ export default function useOrderState(
 ) {
   const storeKey = `${storeKeyPrefix}.order_options`
   const [memoryOrderOptions, setMemoryOrderOptions] = useState(options)
-  const [
-    localOrderOptions,
-    setLocalOrderOptions,
-  ] = useCompatibilityLocalstorage(storeKey, options)
+  const [localOrderOptions, setLocalOrderOptions] = useLocalStorageState(
+    storeKey,
+    options,
+    true
+  )
   const orderOptions = useMemo(
     () => (needSave ? localOrderOptions : memoryOrderOptions),
     [needSave, memoryOrderOptions, localOrderOptions]