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

* #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

Author: egor-zalenski

src/webviews/src/modules/add-key/AddKey.tsx

@@ -56,7 +56,7 @@ export const AddKey = () => {
       action: VscodeMessageAction.CloseAddKeyAndRefresh,
       data: {
         type: SelectedKeyActionType.Added,
-        database: database!,
+        database: window.ri.database!,
         keyInfo: {
           keyType,
           keyString: keyName,

src/webviews/src/pages/KeyDetailsPage/KeyDetailsPage.tsx

@@ -1,15 +1,36 @@
 import React, { FC, useEffect } from 'react'
-import { useShallow } from 'zustand/react/shallow'
 import { KeyDetails } from 'uiSrc/modules'
-import { ContextStoreProvider, fetchDatabaseOverview, fetchKeyInfo, useSelectedKeyStore } from 'uiSrc/store'
+import {
+  ContextStoreProvider,
+  fetchDatabaseOverview,
+  fetchKeyInfo,
+  useDatabasesStore,
+} from 'uiSrc/store'
 import { KeysStoreProvider } from 'uiSrc/modules/keys-tree/hooks/useKeys'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/utils'
 
 export const KeyDetailsPage: FC = () => {
-  const selectedKey = useSelectedKeyStore(useShallow((state) => state.data?.name))
-
   useEffect(() => {
+    const { database, keyInfo: { key } = {} } = window.ri
+
+    if (!key || !database) {
+      return
+    }
+
+    fetchKeyInfo({ key }, true, ({ type: keyType, length }) => {
+      useDatabasesStore.getState().setConnectedDatabase(database!)
+      sendEventTelemetry({
+        event: TelemetryEvent.TREE_VIEW_KEY_VALUE_VIEWED,
+        eventData: {
+          keyType,
+          databaseId: database?.id,
+          length,
+        },
+      })
+    })
+
     fetchDatabaseOverview()
-  }, [selectedKey])
+  }, [])
 
   return (
     <div className="h-full" data-testid="key-details-page">