* #RIVS-258 - Change analytics page text for vscode

egor-zalenski · egor-zalenski · commit af9586c2b2de · 2024-08-19T19:18:40.000+02:00
* #RIVS-245 - [Regression] Cli does not connect to the database when opened for the first time
* #RIVS-247 - [Regression] Invalid database is displayed for some period of time after installing the extension
diff --git a/src/Webview.ts b/src/Webview.ts
@@ -10,7 +10,9 @@ type WebviewOptions = {
   scriptUri?: vscode.Uri
   styleUri?: vscode.Uri
   nonce?: string
-  message?: object
+  message?: {
+    data: object
+  }
   column?: vscode.ViewColumn
   handleMessage?: (message: any) => any
 }
@@ -57,6 +59,14 @@ abstract class Webview {
     const styleUri = webview.asWebviewUri(this._opts.styleUri as vscode.Uri)
 
     const uiStorage = getUIStorage()
+    const database = (this._opts?.message?.data as any)?.database || (uiStorage as any)?.database
+    const keyInfo = (this._opts?.message?.data as any)?.keyInfo || (uiStorage as any)?.keyInfo
+
+    const uiStorageStringify = JSON.stringify({
+      ...uiStorage,
+      database,
+      keyInfo,
+    })
 
     const contentSecurity = [
       `img-src ${webview.cspSource} 'self' data:`,
@@ -89,7 +99,7 @@ abstract class Webview {
         <link href="${styleUri}" rel="stylesheet" />
         <script nonce="${this._opts.nonce}">
           window.acquireVsCodeApi = acquireVsCodeApi;
-          window.ri=${JSON.stringify(uiStorage)};
+          window.ri=${uiStorageStringify};
         </script>
 
         <title>Redis for VS Code Webview</title>
diff --git a/src/webviews/src/actions/selectKeyAction.ts b/src/webviews/src/actions/selectKeyAction.ts
@@ -1,6 +1,6 @@
 import { VscodeMessageAction } from 'uiSrc/constants'
 import { PostMessage } from 'uiSrc/interfaces'
-import { fetchKeyInfo, resetZustand, useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
+import { fetchDatabaseOverview, fetchKeyInfo, useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
 import { TelemetryEvent, isEqualBuffers, sendEventTelemetry } from 'uiSrc/utils'
 
 export const selectKeyAction = (message: PostMessage) => {
@@ -11,15 +11,18 @@ export const selectKeyAction = (message: PostMessage) => {
   const { keyInfo, database } = message?.data
   const { key } = keyInfo || {}
   const prevKey = useSelectedKeyStore.getState().data?.name
+  const prevDatabaseId = useDatabasesStore.getState().connectedDatabase?.id
 
-  if (isEqualBuffers(key, prevKey)) {
+  const isTheSameKey = prevDatabaseId === database?.id && isEqualBuffers(prevKey, key)
+
+  if (isTheSameKey || !prevKey) {
     return
   }
 
   window.ri.database = database
-  resetZustand()
 
   fetchKeyInfo({ key }, true, ({ type: keyType, length }) => {
+    fetchDatabaseOverview()
     useDatabasesStore.getState().setConnectedDatabase(database)
     sendEventTelemetry({
       event: TelemetryEvent.TREE_VIEW_KEY_VALUE_VIEWED,
diff --git a/src/webviews/src/modules/key-details/KeyDetails.tsx b/src/webviews/src/modules/key-details/KeyDetails.tsx
@@ -62,7 +62,11 @@ const KeyDetails = () => {
   const onEditKey = (key: RedisString, newKey: RedisString) => {
     vscodeApi.postMessage({
       action: VscodeMessageAction.EditKeyName,
-      data: { type: SelectedKeyActionType.Renamed, database: database!, keyInfo: { key, newKey } },
+      data: {
+        type: SelectedKeyActionType.Renamed,
+        database: database!,
+        keyInfo: { key, newKey },
+      },
     })
   }
 
diff --git a/src/webviews/src/modules/key-details/components/hash-details/hooks/useHashStore.ts b/src/webviews/src/modules/key-details/components/hash-details/hooks/useHashStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { AxiosError } from 'axios'
-import { devtools, persist } from 'zustand/middleware'
+import { devtools } from 'zustand/middleware'
 import * as l10n from '@vscode/l10n'
 import { immer } from 'zustand/middleware/immer'
 import { cloneDeep, findIndex, map, remove } from 'lodash'
@@ -36,7 +36,7 @@ export const initialState: HashState = {
 }
 
 export const useHashStore = create<HashState & HashActions>()(
-  immer(devtools(persist((set) => ({
+  immer(devtools((set) => ({
     ...initialState,
     // actions
     resetHashStore: () => set(initialState),
@@ -76,8 +76,7 @@ export const useHashStore = create<HashState & HashActions>()(
       state.updateValue = cloneDeep(initialState.updateValue)
     }),
 
-  }),
-  { name: 'keyHash' }))),
+  }))),
 )
 
 // async actions
diff --git a/src/webviews/src/modules/key-details/components/list-details/hooks/useListStore.ts b/src/webviews/src/modules/key-details/components/list-details/hooks/useListStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { AxiosError } from 'axios'
-import { devtools, persist } from 'zustand/middleware'
+import { devtools } from 'zustand/middleware'
 import { immer } from 'zustand/middleware/immer'
 
 import { refreshKeyInfo, useSelectedKeyStore } from 'uiSrc/store'
@@ -40,7 +40,7 @@ export const initialState: ListState = {
 }
 
 export const useListStore = create<ListState & ListActions>()(
-  immer(devtools(persist((set) => ({
+  immer(devtools((set) => ({
     ...initialState,
     // actions
     resetListStore: () => set(initialState),
@@ -73,8 +73,7 @@ export const useListStore = create<ListState & ListActions>()(
       state.data.elements[state.data.elements.length === 1 ? 0 : element.index] = element
     }),
 
-  }),
-  { name: 'keyList' }))),
+  }))),
 )
 
 // async actions
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/hooks/useRejsonStore.ts b/src/webviews/src/modules/key-details/components/rejson-details/hooks/useRejsonStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import axios, { AxiosError, CancelTokenSource } from 'axios'
-import { devtools, persist } from 'zustand/middleware'
+import { devtools } from 'zustand/middleware'
 import { immer } from 'zustand/middleware/immer'
 import { isNumber } from 'lodash'
 
@@ -38,15 +38,14 @@ export const initialState: RejsonState = {
 }
 
 export const useRejsonStore = create<RejsonState & RejsonActions>()(
-  immer(devtools(persist((set) => ({
+  immer(devtools((set) => ({
     ...initialState,
     // actions
     resetRejsonStore: () => set(initialState),
     processRejson: () => set({ loading: true }),
     processRejsonFinal: () => set({ loading: false }),
     processRejsonSuccess: (data) => set({ data }),
-  }),
-  { name: 'keyRejson' }))),
+  }))),
 )
 
 // async actions
diff --git a/src/webviews/src/modules/key-details/components/set-details/hooks/useSetStore.ts b/src/webviews/src/modules/key-details/components/set-details/hooks/useSetStore.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import { immer } from 'zustand/middleware/immer'
 import { AxiosError } from 'axios'
-import { devtools, persist } from 'zustand/middleware'
+import { devtools } from 'zustand/middleware'
 import { remove } from 'lodash'
 import * as l10n from '@vscode/l10n'
 
@@ -39,7 +39,7 @@ export const initialState: SetState = {
 }
 
 export const useSetStore = create<SetState & SetActions>()(
-  immer(devtools(persist((set) => ({
+  immer(devtools((set) => ({
     ...initialState,
     // actions
     processSet: () => set(() => ({ loading: true })),
@@ -65,8 +65,7 @@ export const useSetStore = create<SetState & SetActions>()(
       remove(state.data.members, (member) =>
         members.findIndex((item) => isEqualBuffers(item, member)) > -1)
     }),
-  }),
-  { name: 'keySet' }))),
+  }))),
 )
 
 // Async action
diff --git a/src/webviews/src/modules/key-details/components/string-details/hooks/useStringStore.ts b/src/webviews/src/modules/key-details/components/string-details/hooks/useStringStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { AxiosError, AxiosResponseHeaders } from 'axios'
-import { devtools, persist } from 'zustand/middleware'
+import { devtools } from 'zustand/middleware'
 import { immer } from 'zustand/middleware/immer'
 import { IFetchKeyArgs, RedisString } from 'uiSrc/interfaces'
 import { apiService } from 'uiSrc/services'
@@ -28,19 +28,16 @@ export const initialState: StringState = {
 export const useStringStore = create<StringState & StringActions>()(
   immer(
     devtools(
-      persist(
-        (set) => ({
-          ...initialState,
-          // actions
-          resetStringStore: () => set(initialState),
-          processString: () => set({ loading: true }),
-          processStringFinal: () => set({ loading: false }),
-          processStringSuccess: ({ keyName, value }: any) =>
-            set({ data: { key: keyName, value } }),
-          setIsStringCompressed: (isCompressed) => set({ isCompressed }),
-        }),
-        { name: 'keyString' },
-      ),
+      (set) => ({
+        ...initialState,
+        // actions
+        resetStringStore: () => set(initialState),
+        processString: () => set({ loading: true }),
+        processStringFinal: () => set({ loading: false }),
+        processStringSuccess: ({ keyName, value }: any) =>
+          set({ data: { key: keyName, value } }),
+        setIsStringCompressed: (isCompressed) => set({ isCompressed }),
+      }),
     ),
   ),
 )
diff --git a/src/webviews/src/pages/KeyDetailsPage/KeyDetailsPage.spec.tsx b/src/webviews/src/pages/KeyDetailsPage/KeyDetailsPage.spec.tsx
@@ -1,17 +1,22 @@
 import React from 'react'
 
-import * as useDatabases from 'uiSrc/store/hooks/use-databases-store/useDatabasesStore'
-import { render } from 'testSrc/helpers'
+import * as useSelectedKey from 'uiSrc/store/hooks/use-selected-key-store/useSelectedKeyStore'
+import { constants, render } from 'testSrc/helpers'
 import { KeyDetailsPage } from './KeyDetailsPage'
 
-vi.spyOn(useDatabases, 'fetchDatabaseOverview')
+vi.spyOn(useSelectedKey, 'fetchKeyInfo')
+
+beforeEach(() => {
+  vi.stubGlobal('ri', { })
+})
 
 describe('KeyDetailsPage', () => {
   it('should render', () => {
     expect(render(<KeyDetailsPage />)).toBeTruthy()
   })
-  it('should call fetchDatabaseOverview', () => {
+  it('should call fetchKeyInfo', () => {
+    vi.stubGlobal('ri', { database: constants.DATABASE, keyInfo: { key: constants.KEY_NAME_1 } })
     expect(render(<KeyDetailsPage />)).toBeTruthy()
-    expect(useDatabases.fetchDatabaseOverview).toBeCalled()
+    expect(useSelectedKey.fetchKeyInfo).toBeCalled()
   })
 })
diff --git a/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.ts b/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { AxiosError } from 'axios'
-import { devtools, persist } from 'zustand/middleware'
+import { devtools } from 'zustand/middleware'
 import { immer } from 'zustand/middleware/immer'
 import { apiService } from 'uiSrc/services'
 import { ApiEndpoints } from 'uiSrc/constants'
@@ -14,16 +14,14 @@ export const initialCertsState: CertificatesStore = {
 }
 
 export const useCertificatesStore = create<CertificatesStore & CertificatesActions>()(
-  immer(devtools(persist((set) => ({
+  immer(devtools((set) => ({
     ...initialCertsState,
     // actions
     processCerts: () => set({ loading: true }),
     processCertsFinal: () => set({ loading: false }),
     processCertsSuccess: (caCerts: Certificate[], clientCerts: Certificate[]) =>
       set({ caCerts, clientCerts }),
-
-  }),
-  { name: 'certificates' }))),
+  }))),
 )
 
 // Asynchronous thunk action
diff --git a/src/webviews/src/store/hooks/use-databases-store/useDatabasesStore.ts b/src/webviews/src/store/hooks/use-databases-store/useDatabasesStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 import { AxiosError } from 'axios'
-import { createJSONStorage, devtools, persist } from 'zustand/middleware'
+import { devtools } from 'zustand/middleware'
 import { immer } from 'zustand/middleware/immer'
 import { cloneDeep, filter, first, map, orderBy } from 'lodash'
 import { apiService, localStorageService } from 'uiSrc/services'
@@ -31,7 +31,7 @@ export const initialDatabasesState: DatabasesStore = {
 }
 
 export const useDatabasesStore = create<DatabasesStore & DatabasesActions>()(
-  immer(devtools(persist((set, get) => ({
+  immer(devtools((set, get) => ({
     ...initialDatabasesState,
     // actions
     processDatabase: () => set({ loading: true }),
@@ -56,9 +56,6 @@ export const useDatabasesStore = create<DatabasesStore & DatabasesActions>()(
         version: data?.version || get().databaseOverview.version || '',
       },
     }),
-  }), {
-    name: 'databases',
-    storage: createJSONStorage(() => sessionStorage),
   }))),
 )
 
diff --git a/src/webviews/src/store/hooks/use-selected-key-store/interface.ts b/src/webviews/src/store/hooks/use-selected-key-store/interface.ts
@@ -35,6 +35,7 @@ export interface SelectedKeyActions {
   // deleteSelectedKey: () => void
 
   // update selected key
+  updateSelectedKeyName: (name: RedisString) => void
   updateSelectedKeyRefreshTime: (data: number) => void
   setSelectedKeyAction: (data: Nullable<SelectedKeyAction>) => void
   setSelectedKeyRefreshDisabled: (data: boolean) => void
diff --git a/src/webviews/src/store/hooks/use-selected-key-store/useSelectedKeyStore.ts b/src/webviews/src/store/hooks/use-selected-key-store/useSelectedKeyStore.ts
@@ -37,7 +37,7 @@ export const initialSelectedKeyState: SelectedKeyStore = {
 }
 
 export const useSelectedKeyStore = create<SelectedKeyStore & SelectedKeyActions>()(
-  immer(devtools(persist((set) => ({
+  immer(devtools((set, get) => ({
     ...initialSelectedKeyState,
     // actions
     resetSelectedKeyStore: () => set(initialSelectedKeyState),
@@ -51,13 +51,10 @@ export const useSelectedKeyStore = create<SelectedKeyStore & SelectedKeyActions>
     // deleteSelectedKey: () => set({ data: null }),
     // update selected key
     updateSelectedKeyRefreshTime: (lastRefreshTime) => set({ lastRefreshTime }),
+    updateSelectedKeyName: (name) => set({ data: { ...get().data, name } }),
 
     setSelectedKeyAction: (action) => set({ action }),
     setSelectedKeyRefreshDisabled: (refreshDisabled: boolean) => set({ refreshDisabled }),
-  }),
-  {
-    name: 'selectedKey',
-    storage: createJSONStorage(() => sessionStorage),
   }))),
 )
 
diff --git a/src/webviews/src/store/index.ts b/src/webviews/src/store/index.ts
@@ -1,7 +1,6 @@
 import createSelectors from './selectors'
 
 export * from './vscodeState'
-export * from './zustand'
 export * from './hooks/use-selected-key-store/useSelectedKeyStore'
 export * from './hooks/use-certificates-store/useCertificatesStore'
 export * from './hooks/use-databases-store/useDatabasesStore'
diff --git a/src/webviews/src/store/zustand.ts b/src/webviews/src/store/zustand.ts
diff --git a/src/webviews/src/types/index.d.ts b/src/webviews/src/types/index.d.ts
@@ -1,5 +1,5 @@
 import { Environment } from 'monaco-editor/esm/vs/editor/editor.api'
-import { IVSCodeApi, Nullable } from 'uiSrc/interfaces'
+import { IVSCodeApi, Nullable, RedisString } from 'uiSrc/interfaces'
 import { Database } from 'uiSrc/store'
 import { AppInfoStore } from 'uiSrc/store/hooks/use-app-info-store/interface'
 
@@ -14,6 +14,9 @@ declare global {
 interface IRI {
   cliDatabase?: Database
   database?: Database
+  keyInfo?: {
+    key?: RedisString
+  }
   appPort?: string
   appInfo: Nullable<Partial<AppInfoStore>>
 }
