Merge pull request #2553 from RedisInsight/fe/feature/RI-4810_Open_existing_db_in_new_window

#RI-4810 - open existing db in new window

Author: vlad-dargel

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,15 +17,16 @@ 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()}`
+      resolved += `${resolved.indexOf('?') !== -1 ? '&' : '?'}${queryParameters.toString()}`
     } catch (e) {
       // todo: log error
     }

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

@@ -9,6 +9,7 @@ import { Pages } from 'uiSrc/constants'
 import { updateRecommendation } from 'uiSrc/slices/recommendations/recommendations'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 import { MOCK_RECOMMENDATIONS } from 'uiSrc/constants/mocks/mock-recommendations'
+import { openNewWindowDatabase } from 'uiSrc/utils'
 import Recommendation, { IProps } from './Recommendation'
 
 const recommendationsContent = MOCK_RECOMMENDATIONS
@@ -24,6 +25,11 @@ jest.mock('uiSrc/telemetry', () => ({
   sendEventTelemetry: jest.fn(),
 }))
 
+jest.mock('uiSrc/utils', () => ({
+  ...jest.requireActual('uiSrc/utils'),
+  openNewWindowDatabase: jest.fn(),
+}))
+
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
@@ -88,10 +94,10 @@ describe('Recommendation', () => {
     sendEventTelemetry.mockRestore()
   })
 
-  it('should properly push history on workbench page to specific guide', () => {
+  it('should properly call openNewWindowDatabase and open a new window on workbench page to specific guide', () => {
     // will be improved
-    const pushMock = jest.fn()
-    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+    const openNewWindowDatabaseMock = jest.fn();
+    (openNewWindowDatabase as jest.Mock).mockImplementation(() => openNewWindowDatabaseMock)
 
     const { container } = render(
       <Recommendation
@@ -106,7 +112,7 @@ describe('Recommendation', () => {
     fireEvent.click(container.querySelector('[data-test-subj="searchJSON-button"]') as HTMLButtonElement)
     fireEvent.click(screen.getByTestId('searchJSON-to-tutorial-btn'))
 
-    expect(pushMock)
+    expect(openNewWindowDatabase)
       .toHaveBeenCalledWith(`${Pages.workbench(INSTANCE_ID_MOCK)}?guidePath=quick-guides/working-with-hash.html`)
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.INSIGHTS_RECOMMENDATION_TUTORIAL_CLICKED,
@@ -117,12 +123,13 @@ describe('Recommendation', () => {
       }
     })
     sendEventTelemetry.mockRestore()
+    openNewWindowDatabase.mockRestore()
   })
 
   it('should properly push history on workbench page to specific tutorial', () => {
     // will be improved
-    const pushMock = jest.fn()
-    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+    const openNewWindowDatabaseMock = jest.fn();
+    (openNewWindowDatabase as jest.Mock).mockImplementation(() => openNewWindowDatabaseMock)
 
     const { container } = render(
       <Recommendation
@@ -137,7 +144,7 @@ describe('Recommendation', () => {
     fireEvent.click(container.querySelector('[data-test-subj="searchJSON-button"]') as HTMLButtonElement)
     fireEvent.click(screen.getByTestId('searchJSON-to-tutorial-btn'))
 
-    expect(pushMock)
+    expect(openNewWindowDatabase)
       .toHaveBeenCalledWith(`${Pages.workbench(INSTANCE_ID_MOCK)}?guidePath=/redis_stack/working_with_json.md`)
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.INSIGHTS_RECOMMENDATION_TUTORIAL_CLICKED,
@@ -148,6 +155,7 @@ describe('Recommendation', () => {
       }
     })
     sendEventTelemetry.mockRestore()
+    openNewWindowDatabase.mockRestore()
   })
 
   it('should render hide/unhide button', () => {

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.spec.tsx

@@ -56,7 +56,7 @@ describe('OAuthConnectFreeDb', () => {
       }
     })
 
-    const expectedActions = [setDefaultInstance(), resetConnectedInstance()]
+    const expectedActions = [setDefaultInstance()]
     expect(store.getActions()).toEqual(expectedActions)
   })