#RI-5229 - add deeplink tls support

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/global-url-handler/GlobalUrlHandler.spec.tsx

@@ -13,6 +13,7 @@ import { userSettingsSelector } from 'uiSrc/slices/user/user-settings'
 import { addInfiniteNotification } from 'uiSrc/slices/app/notifications'
 import { INFINITE_MESSAGES } from 'uiSrc/components/notifications/components'
 import { Pages } from 'uiSrc/constants'
+import { ADD_NEW, ADD_NEW_CA_CERT } from 'uiSrc/pages/home/constants'
 import { UrlHandlingActions } from 'uiSrc/slices/interfaces/urlHandling'
 import GlobalUrlHandler from './GlobalUrlHandler'
 
@@ -131,7 +132,10 @@ describe('GlobalUrlHandler', () => {
           password: 'password',
           port: 6379,
           tls: false,
-          username: undefined
+          username: undefined,
+          caCert: undefined,
+          clientCert: undefined,
+          verifyServerCert: false,
         }
       }),
     ]
@@ -141,15 +145,15 @@ describe('GlobalUrlHandler', () => {
     expect(pushMock).toBeCalledWith(Pages.home)
   })
 
-  it('should call proper actions only after consents popup is accepted and open form to add db', async () => {
+  it('should call proper actions only after consents popup is accepted and open form to add db with caCert', async () => {
     const pushMock = jest.fn()
     reactRouterDom.useHistory = jest.fn().mockReturnValueOnce({ push: pushMock });
     (userSettingsSelector as jest.Mock).mockReturnValueOnce({
       config: {},
       isShowConsents: false
     })
 
-    const url = `${fromUrl}&requiredTls=true`;
+    const url = `${fromUrl}&requiredCaCert=true`;
 
     (appRedirectionSelector as jest.Mock).mockReturnValueOnce({
       fromUrl: url
@@ -177,6 +181,104 @@ describe('GlobalUrlHandler', () => {
           password: 'password',
           port: 6379,
           tls: true,
+          verifyServerCert: true,
+          caCert: { id: ADD_NEW_CA_CERT },
+          username: 'default',
+        }
+      })
+    ]
+
+    expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
+    expect(pushMock).toBeCalledWith(Pages.home)
+  })
+
+  it('should call proper actions only after consents popup is accepted and open form to add db with client cert', async () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValueOnce({ push: pushMock });
+    (userSettingsSelector as jest.Mock).mockReturnValueOnce({
+      config: {},
+      isShowConsents: false
+    })
+
+    const url = `${fromUrl}&requiredClientCert=true`;
+
+    (appRedirectionSelector as jest.Mock).mockReturnValueOnce({
+      fromUrl: url
+    })
+
+    await act(() => {
+      render(<GlobalUrlHandler />)
+    })
+
+    const actionUrl = new URL(url)
+    const fromParams = new URLSearchParams(actionUrl.search)
+    // @ts-ignore
+    const urlProperties = Object.fromEntries(fromParams) || {}
+    urlProperties.cloudId = urlProperties.cloudBdbId
+    delete urlProperties.cloudBdbId
+
+    const expectedActions = [
+      setUrlProperties(urlProperties),
+      setFromUrl(null),
+      setUrlDbConnection({
+        action: UrlHandlingActions.Connect,
+        dbConnection: {
+          host: 'localhost',
+          name: 'My Name',
+          password: 'password',
+          port: 6379,
+          tls: true,
+          caCert: undefined,
+          clientCert: { id: ADD_NEW },
+          verifyServerCert: false,
+          username: 'default',
+        }
+      })
+    ]
+
+    expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)
+    expect(pushMock).toBeCalledWith(Pages.home)
+  })
+
+  it('should call proper actions only after consents popup is accepted and open form to add db with tls certs', async () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValueOnce({ push: pushMock });
+    (userSettingsSelector as jest.Mock).mockReturnValueOnce({
+      config: {},
+      isShowConsents: false
+    })
+
+    const url = `${fromUrl}&requiredCaCert=true&requiredClientCert=true`;
+
+    (appRedirectionSelector as jest.Mock).mockReturnValueOnce({
+      fromUrl: url
+    })
+
+    await act(() => {
+      render(<GlobalUrlHandler />)
+    })
+
+    const actionUrl = new URL(url)
+    const fromParams = new URLSearchParams(actionUrl.search)
+    // @ts-ignore
+    const urlProperties = Object.fromEntries(fromParams) || {}
+    urlProperties.cloudId = urlProperties.cloudBdbId
+    delete urlProperties.cloudBdbId
+
+    const expectedActions = [
+      setUrlProperties(urlProperties),
+      setFromUrl(null),
+      setUrlDbConnection({
+        action: UrlHandlingActions.Connect,
+        dbConnection: {
+          host: 'localhost',
+          name: 'My Name',
+          password: 'password',
+          port: 6379,
+          tls: true,
+          caCert: { id: ADD_NEW_CA_CERT },
+          clientCert: { id: ADD_NEW },
+          verifyServerCert: true,
           username: 'default',
         }
       })

redisinsight/ui/src/components/global-url-handler/GlobalUrlHandler.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react'
 import { ConnectionString } from 'connection-string'
 import { isNull, isNumber, every, values, pick } from 'lodash'
 import { Pages, REDIS_URI_SCHEMES } from 'uiSrc/constants'
+import { ADD_NEW_CA_CERT, ADD_NEW } from 'uiSrc/pages/home/constants'
 import {
   appRedirectionSelector,
   setFromUrl,
@@ -87,8 +88,9 @@ const GlobalUrlHandler = () => {
       const {
         redisUrl,
         databaseAlias,
-        requiredTls,
         redirect,
+        requiredCaCert,
+        requiredClientCert,
       } = properties
 
       const cloudDetails = transformQueryParamsObject(
@@ -107,7 +109,7 @@ const GlobalUrlHandler = () => {
         host: url.hostname,
         port: url.port,
         username: url.user,
-        password: url.password
+        password: url.password,
       }
 
       const isAllObligatoryProvided = every(values(obligatoryForAutoConnectFields), (value) => value || isNumber(value))
@@ -117,7 +119,7 @@ const GlobalUrlHandler = () => {
         name: databaseAlias || url.host,
       } as any
 
-      if (isAllObligatoryProvided && requiredTls !== 'true') {
+      if (isAllObligatoryProvided && (requiredCaCert !== 'true' && requiredClientCert !== 'true')) {
         if (cloudDetails?.cloudId) {
           db.cloudDetails = cloudDetails
         }
@@ -131,7 +133,11 @@ const GlobalUrlHandler = () => {
         action: UrlHandlingActions.Connect,
         dbConnection: {
           ...db,
-          tls: requiredTls === 'true',
+          // set tls with new cert option
+          tls: requiredCaCert === 'true' || requiredClientCert === 'true',
+          verifyServerCert: requiredCaCert === 'true',
+          caCert: requiredCaCert === 'true' ? { id: ADD_NEW_CA_CERT } : undefined,
+          clientCert: requiredClientCert === 'true' ? { id: ADD_NEW } : undefined,
         }
       }))
 

redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx

@@ -137,6 +137,7 @@ const ManualConnectionForm = (props: Props) => {
     initialValues: formFields,
     validate,
     enableReinitialize: true,
+    validateOnMount: true,
     onSubmit: (values: any) => {
       onSubmit(values)
     },