fix(ui): localstorage compatibility issue

ui/.env.development

@@ -3,3 +3,5 @@ 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
+# REACT_APP_RELEASE_VERSION is set in config-overrides.js
+REACT_APP_RELEASE_VERSION=unknown

ui/.env.production

@@ -4,3 +4,5 @@ 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
+# REACT_APP_RELEASE_VERSION is set in config-overrides.js
+REACT_APP_RELEASE_VERSION=unknown

ui/config-overrides.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const fs = require('fs')
+const os = require('os')
 const {
   override,
   fixBabelImports,
@@ -106,6 +107,38 @@ const supportDynamicPublicPathPrefix = () => (config) => {
   return config
 }
 
+const overrideProcessEnv = (value) => (config) => {
+  const plugin = config.plugins.find(
+    (plugin) => plugin.constructor.name === 'DefinePlugin'
+  )
+  const processEnv = plugin.definitions['process.env'] || {}
+
+  plugin.definitions['process.env'] = {
+    ...processEnv,
+    ...value,
+  }
+
+  return config
+}
+
+const getInternalVersion = () => {
+  // react-app-rewired does not support async override config method right now,
+  // subscribe: https://github.com/timarney/react-app-rewired/pull/543
+  const version = fs
+    .readFileSync('../release-version', 'utf8')
+    .split(os.EOL)
+    .map((l) => l.trim())
+    .filter((l) => !l.startsWith('#') && l !== '')[0]
+
+  if (version === '') {
+    throw new Error(
+      `invalid release version, please check the release-version @tidb-dashboard/root`
+    )
+  }
+
+  return version
+}
+
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
@@ -152,5 +185,8 @@ module.exports = override(
   ),
   disableMinimizeByEnv(),
   addExtraEntries(),
-  supportDynamicPublicPathPrefix()
+  supportDynamicPublicPathPrefix(),
+  overrideProcessEnv({
+    REACT_APP_RELEASE_VERSION: JSON.stringify(getInternalVersion()),
+  })
 )

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/useLocalStorageState'
+
 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/useLocalStorageState'
 
 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,6 +26,7 @@ import {
   MultiSelect,
 } from '@lib/components'
 import { CacheContext } from '@lib/utils/useCache'
+import { useLocalStorageState } from '@lib/utils/useLocalStorageState'
 
 import SlowQueriesTable from '../../components/SlowQueriesTable'
 import useSlowQueryTableController, {
@@ -49,7 +49,8 @@ function List() {
 
   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/useLocalStorageState'
 
 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/useLocalStorageState'
 
 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,6 +23,7 @@ import { useTranslation } from 'react-i18next'
 
 import { CacheContext } from '@lib/utils/useCache'
 import { Card, ColumnsSelector, Toolbar, MultiSelect } from '@lib/components'
+import { useLocalStorageState } from '@lib/utils/useLocalStorageState'
 
 import { StatementsTable } from '../../components'
 import StatementSettingForm from './StatementSettingForm'
@@ -47,7 +47,8 @@ export default function StatementsOverview() {
   const [showSettings, setShowSettings] = useState(false)
   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/useLocalStorageState.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,5 +1,6 @@
 import { useState, useMemo } from 'react'
-import { useLocalStorageState } from 'ahooks'
+
+import { useLocalStorageState } from './useLocalStorageState'
 
 export interface IOrderOptions {
   orderBy: string
@@ -15,7 +16,8 @@ export default function useOrderState(
   const [memoryOrderOptions, setMemoryOrderOptions] = useState(options)
   const [localOrderOptions, setLocalOrderOptions] = useLocalStorageState(
     storeKey,
-    options
+    options,
+    true
   )
   const orderOptions = useMemo(
     () => (needSave ? localOrderOptions : memoryOrderOptions),

ui/src/sentry.ts

@@ -4,10 +4,7 @@ import { Integrations } from '@sentry/tracing'
 import { sentryEnabled } from '@lib/utils/sentryHelpers'
 
 if (sentryEnabled) {
-  const version = process.env.REACT_APP_VERSION
-  const name = process.env.REACT_APP_NAME
-  const hash = process.env.REACT_APP_COMMIT_HASH
-  const release = `${name}@${version}+${hash}`
+  const release = process.env.REACT_APP_RELEASE_VERSION
 
   // this is on purpose
   console.log('current release: ', release)