#RI-4810 - Open an existing database in a new window

Author: egor-zalenski

redisinsight/desktop/src/lib/app/deep-link.handlers.ts

@@ -8,8 +8,8 @@ import { IpcOnEvent } from 'uiSrc/electron/constants'
 
 export interface IParsedDeepLink {
   initialPage?: string
-  target: string
-  from: string
+  target?: string
+  from?: string
 }
 
 export const deepLinkHandler = async (from?: string): Promise<undefined | IParsedDeepLink> => {

redisinsight/desktop/src/lib/app/index.ts

@@ -1,3 +1,4 @@
+import { initWindowIPCHandlers } from 'desktopSrc/lib/window'
 import { initAppHandlers } from './app.handlers'
 import { initDialogHandlers } from './dialog.handlers'
 import { initIPCHandlers } from './ipc.handlers'
@@ -6,4 +7,6 @@ export const initElectronHandlers = () => {
   initAppHandlers()
   initIPCHandlers()
   initDialogHandlers()
+
+  initWindowIPCHandlers()
 }

redisinsight/desktop/src/lib/window/window.handlers.ts

@@ -1,13 +1,16 @@
-import { BrowserWindow, app, shell } from 'electron'
+import { BrowserWindow, app, shell, ipcMain } from 'electron'
 import {
   MenuBuilder,
   getDisplayAppInTrayValue,
   getIsQuiting,
   getTray,
   getTrayInstance,
-  electronStore
+  electronStore,
+  windowFactory,
+  WindowType,
 } from 'desktopSrc/lib'
-import { ElectronStorageItem, IpcOnEvent } from 'uiSrc/electron/constants'
+import { IpcInvokeEvent, ElectronStorageItem, IpcOnEvent } from 'uiSrc/electron/constants'
+import { Pages } from 'uiSrc/constants/pages'
 
 export const initWindowHandlers = (
   newWindow: BrowserWindow,
@@ -92,3 +95,9 @@ export const initWindowHandlers = (
     return { action: 'deny' }
   })
 }
+
+export const initWindowIPCHandlers = () => {
+  ipcMain.handle(IpcInvokeEvent.windowOpen, async (_event, { location }) => {
+    await windowFactory(WindowType.Main, null, { parsedDeepLink: { initialPage: location } })
+  })
+}

redisinsight/desktop/src/utils/resolveHtmlPath.ts

@@ -17,12 +17,13 @@ export const resolveHtmlPath = (htmlFileName: string, parsedDeepLink?: IParsedDe
   if (parsedDeepLink) {
     try {
       if (parsedDeepLink.initialPage) {
-        resolved += `${parsedDeepLink.initialPage}`
+        const initialPage = parsedDeepLink.initialPage.slice(+parsedDeepLink.initialPage.startsWith('/'))
+        resolved += initialPage
       }
 
       const queryParameters = new URLSearchParams([
-        ['from', parsedDeepLink.from],
-        ['target', parsedDeepLink.target],
+        ['from', parsedDeepLink.from || ''],
+        ['target', parsedDeepLink.target || ''],
       ])
 
       resolved += `?${queryParameters.toString()}`

redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx

@@ -16,7 +16,7 @@ import {
 import { isUndefined } from 'lodash'
 import cx from 'classnames'
 
-import { Nullable, Maybe } from 'uiSrc/utils'
+import { Nullable, Maybe, openNewWindowDatabase } from 'uiSrc/utils'
 import { renderRecommendationContent } from 'uiSrc/utils/recommendation/utils'
 import { Pages, Theme } from 'uiSrc/constants'
 import { RecommendationVoting, RecommendationCopyComponent } from 'uiSrc/components'
@@ -83,7 +83,7 @@ const Recommendation = ({
 
     dispatch(setWorkbenchEAMinimized(false))
     if (tutorial) {
-      history.push(`${Pages.workbench(instanceId)}?guidePath=${tutorial}`)
+      openNewWindowDatabase(`${Pages.workbench(instanceId)}?guidePath=${tutorial}`)
       return
     }
 

redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx

@@ -28,7 +28,7 @@ const FilterNotAvailable = ({ onClose } : { onClose?: () => void }) => {
       {!!freeInstance && (
         <>
           <EuiText color="subdued">
-            Use your Redis Stack database in Redis Enterprise Cloud to start exploring these capabilities.
+            Use your free all-in-one Redis Enterprise Cloud database to start exploring these capabilities.
           </EuiText>
           <EuiSpacer size="l" />
           <OAuthConnectFreeDb source={OAuthSocialSource.BrowserFiltering} onSuccessClick={onClose} />

redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoaded.tsx

@@ -1,21 +1,25 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import cx from 'classnames'
 import {
   EuiTextColor,
   EuiText,
   EuiTitle,
   EuiLink,
   EuiButton,
+  EuiIcon,
 } from '@elastic/eui'
 import { useSelector } from 'react-redux'
 
 import { ReactComponent as MobileIcon } from 'uiSrc/assets/img/icons/mobile_module_not_loaded.svg'
 import { ReactComponent as DesktopIcon } from 'uiSrc/assets/img/icons/module_not_loaded.svg'
+import { ReactComponent as TelescopeDark } from 'uiSrc/assets/img/telescope-dark.svg'
+import { ReactComponent as TelescopeLight } from 'uiSrc/assets/img/telescope-light.svg'
 import { ReactComponent as CheerIcon } from 'uiSrc/assets/img/icons/cheer.svg'
-import { MODULE_NOT_LOADED_CONTENT as CONTENT, MODULE_TEXT_VIEW } from 'uiSrc/constants'
+import { MODULE_NOT_LOADED_CONTENT as CONTENT, MODULE_TEXT_VIEW, Theme } from 'uiSrc/constants'
 import { RedisDefaultModules, OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { OAuthConnectFreeDb, OAuthSsoHandlerDialog } from 'uiSrc/components'
 import { freeInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { ThemeContext } from 'uiSrc/contexts/themeContext'
 
 import styles from './styles.module.scss'
 
@@ -51,6 +55,7 @@ const ListItem = ({ item }: { item: string }) => (
 const ModuleNotLoaded = ({ moduleName, id, type = 'workbench', onClose }: IProps) => {
   const [width, setWidth] = useState(0)
   const freeInstance = useSelector(freeInstanceSelector)
+  const { theme } = useContext(ThemeContext)
 
   const module = MODULE_TEXT_VIEW[moduleName]
 
@@ -78,8 +83,8 @@ const ModuleNotLoaded = ({ moduleName, id, type = 'workbench', onClose }: IProps
       {`Create a free Redis Stack database with ${moduleName} which extends the core capabilities of open-source Redis`}
     </EuiText>
   ) : (
-    <EuiText className={cx(styles.text, styles.marginBottom)}>
-      Use your Redis Stack database in Redis Enterprise Cloud to start exploring these capabilities.
+    <EuiText className={cx(styles.text, styles.marginBottom, styles.textFooter)}>
+      Use your free all-in-one Redis Enterprise Cloud database to start exploring these capabilities.
     </EuiText>
   )), [freeInstance])
 
@@ -95,9 +100,18 @@ const ModuleNotLoaded = ({ moduleName, id, type = 'workbench', onClose }: IProps
     >
       <div className={styles.flex}>
         <div>
-          {width > MAX_ELEMENT_WIDTH
-            ? <DesktopIcon className={styles.bigIcon} />
-            : <MobileIcon className={styles.icon} />}
+          {type !== 'browser' && (
+            width > MAX_ELEMENT_WIDTH
+              ? <DesktopIcon className={styles.bigIcon} />
+              : <MobileIcon className={styles.icon} />
+          )}
+          {type === 'browser' && (
+            <EuiIcon
+              className={styles.iconTelescope}
+              type={theme === Theme.Dark ? TelescopeDark : TelescopeLight}
+              size="original"
+            />
+          )}
         </div>
         <div className={styles.contentWrapper}>
           {renderTitle(width, module)}

redisinsight/ui/src/components/messages/module-not-loaded/styles.module.scss

@@ -47,6 +47,11 @@
       width: 317px;
       margin-bottom: 42px;
     }
+
+    .iconTelescope {
+      width: 250px;
+      margin-left: 15px;
+    }
   }
 
   .list.bloomList {
@@ -148,5 +153,20 @@
 
   &.modal {
     padding: 30px;
+    background-color: var(--browserTableRowEven);
+
+    .title {
+      padding-top: 42px;
+      font-size: 18px;
+      line-height: 1;
+    }
+
+    .bigText {
+      font-size: 14px;
+    }
+
+    .textFooter {
+      font-weight: 500;
+    }
   }
 }

redisinsight/ui/src/components/oauth/oauth-connect-free-db/OAuthConnectFreeDb.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { EuiButton } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
 
 import { TelemetryEvent, getRedisModulesSummary, sendEventTelemetry } from 'uiSrc/telemetry'
 import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
@@ -10,10 +9,8 @@ import {
   connectedInstanceSelector,
   freeInstanceSelector,
   instancesSelector,
-  setConnectedInstanceId,
 } from 'uiSrc/slices/instances/instances'
-import { resetKeys } from 'uiSrc/slices/browser/keys'
-import { appContextSelector, setAppContextInitialState } from 'uiSrc/slices/app/context'
+import { openNewWindowDatabase } from 'uiSrc/utils'
 import { Pages } from 'uiSrc/constants'
 
 import styles from './styles.module.scss'
@@ -29,11 +26,9 @@ const OAuthConnectFreeDb = ({
 }: Props) => {
   const { loading } = useSelector(instancesSelector) ?? {}
   const { modules, provider } = useSelector(connectedInstanceSelector) ?? {}
-  const { contextInstanceId } = useSelector(appContextSelector)
   const { id = '' } = useSelector(freeInstanceSelector) ?? {}
 
   const dispatch = useDispatch()
-  const history = useHistory()
 
   if (!id) {
     return null
@@ -52,38 +47,36 @@ const OAuthConnectFreeDb = ({
     })
   }
 
-  const connectToInstance = () => {
+  const connectToInstanceSuccess = () => {
     onSuccessClick?.()
-    if (contextInstanceId && contextInstanceId !== id) {
-      dispatch(resetKeys())
-      dispatch(setAppContextInitialState())
-    }
-    dispatch(setConnectedInstanceId(id ?? ''))
 
-    history.push(Pages.home)
-    setTimeout(() => {
-      history.push(Pages.browser(id))
-    }, 0)
+    openNewWindowDatabase(Pages.browser(id))
   }
 
   const handleCheckConnectToInstance = (
   ) => {
     sendTelemetry()
-    dispatch(checkConnectToInstanceAction(id, connectToInstance))
+    dispatch(checkConnectToInstanceAction(
+      id,
+      connectToInstanceSuccess,
+      () => {},
+      false,
+    ))
   }
 
   return (
     <EuiButton
       fill
       size="s"
+      iconType="popout"
       isDisabled={loading}
       isLoading={loading}
       color="secondary"
       onClick={handleCheckConnectToInstance}
       className={styles.btn}
       data-testid="connect-free-db-btn"
     >
-      Connect
+      Launch database
     </EuiButton>
   )
 }

redisinsight/ui/src/electron/constants/ipcEvent.ts

@@ -3,6 +3,7 @@ enum IpcInvokeEvent {
   deleteStoreValue = 'store:delete:value',
   getAppVersion = 'app:get:version',
   cloudOauth = 'cloud:oauth',
+  windowOpen = 'window:open',
 }
 
 enum IpcOnEvent {