Merge pull request #2869 from RedisInsight/fe/feature/RI-5229_deeplink_tls

mariasergeenko · web-flow · commit c23a86d001b5 · 2023-12-18T17:58:50.000+01:00
#RI-5229 - add deeplink tls support
diff --git a/redisinsight/ui/src/components/global-url-handler/GlobalUrlHandler.spec.tsx b/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,9 @@ describe('GlobalUrlHandler', () => {
           password: 'password',
           port: 6379,
           tls: false,
-          username: undefined
+          username: undefined,
+          caCert: undefined,
+          clientCert: undefined,
         }
       }),
     ]
@@ -141,7 +144,147 @@ 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}&requiredCaCert=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 },
+          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 },
+          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 },
+          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', async () => {
     const pushMock = jest.fn()
     reactRouterDom.useHistory = jest.fn().mockReturnValueOnce({ push: pushMock });
     (userSettingsSelector as jest.Mock).mockReturnValueOnce({
@@ -177,6 +320,8 @@ describe('GlobalUrlHandler', () => {
           password: 'password',
           port: 6379,
           tls: true,
+          caCert: undefined,
+          clientCert: undefined,
           username: 'default',
         }
       })
diff --git a/redisinsight/ui/src/components/global-url-handler/GlobalUrlHandler.tsx b/redisinsight/ui/src/components/global-url-handler/GlobalUrlHandler.tsx
@@ -2,8 +2,9 @@ import { useHistory, useLocation } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import { useEffect } from 'react'
 import { ConnectionString } from 'connection-string'
-import { isNull, isNumber, every, values, pick } from 'lodash'
+import { isNull, isNumber, every, values, pick, some } 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,10 @@ const GlobalUrlHandler = () => {
       const {
         redisUrl,
         databaseAlias,
-        requiredTls,
         redirect,
+        requiredTls,
+        requiredCaCert,
+        requiredClientCert,
       } = properties
 
       const cloudDetails = transformQueryParamsObject(
@@ -107,17 +110,24 @@ const GlobalUrlHandler = () => {
         host: url.hostname,
         port: url.port,
         username: url.user,
-        password: url.password
+        password: url.password,
+      }
+
+      const tlsFields = {
+        requiredTls,
+        requiredCaCert,
+        requiredClientCert,
       }
 
       const isAllObligatoryProvided = every(values(obligatoryForAutoConnectFields), (value) => value || isNumber(value))
+      const isTlsProvided = some(values(tlsFields), (value) => value === 'true')
 
       const db = {
         ...obligatoryForAutoConnectFields,
         name: databaseAlias || url.host,
       } as any
 
-      if (isAllObligatoryProvided && requiredTls !== 'true') {
+      if (isAllObligatoryProvided && !isTlsProvided) {
         if (cloudDetails?.cloudId) {
           db.cloudDetails = cloudDetails
         }
@@ -131,7 +141,10 @@ const GlobalUrlHandler = () => {
         action: UrlHandlingActions.Connect,
         dbConnection: {
           ...db,
-          tls: requiredTls === 'true',
+          // set tls with new cert option
+          tls: isTlsProvided,
+          caCert: requiredCaCert === 'true' ? { id: ADD_NEW_CA_CERT } : undefined,
+          clientCert: requiredClientCert === 'true' ? { id: ADD_NEW } : undefined,
         }
       }))
 
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx b/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)
     },
diff --git a/tests/e2e/pageObjects/browser-page.ts b/tests/e2e/pageObjects/browser-page.ts
@@ -206,7 +206,7 @@ export class BrowserPage extends InstancePage {
     listElementsList = Selector('[data-testid^=list-element-value-]');
     jsonKeyValue = Selector('[data-testid=json-data]');
     jsonError = Selector('[data-testid=edit-json-error]');
-    tooltip = Selector('[role=tooltip]');
+    tooltip = Selector('[role=tooltip]', { timeout: 500 });
     noResultsFound = Selector('[data-test-subj=no-result-found]');
     noResultsFoundOnly = Selector('[data-testid=no-result-found-only]');
     searchAdvices = Selector('[data-test-subj=search-advices]');
diff --git a/tests/e2e/tests/web/regression/url-handling/url-handling.e2e.ts b/tests/e2e/tests/web/regression/url-handling/url-handling.e2e.ts
@@ -0,0 +1,66 @@
+import { commonUrl, ossStandaloneRedisGears } from '../../../../helpers/conf';
+import { rte } from '../../../../helpers/constants';
+import { DatabaseAPIRequests } from '../../../../helpers/api/api-database';
+import { Common } from '../../../../helpers/common';
+import { MyRedisDatabasePage } from '../../../../pageObjects';
+import { DatabaseHelper } from '../../../../helpers/database';
+import { BrowserActions } from '../../../../common-actions/browser-actions';
+
+const myRedisDatabasePage = new MyRedisDatabasePage();
+const browserActions = new BrowserActions();
+
+const databaseAPIRequests = new DatabaseAPIRequests();
+const databaseHelper = new DatabaseHelper();
+
+let { host, port, databaseName, databaseUsername = '', databasePassword = '' } = ossStandaloneRedisGears;
+
+function generateLink(params: Record<string, any>): string {
+    const params1 = Common.generateUrlTParams(params);
+    const from = encodeURIComponent(`${redisConnect}?${params1}`);
+    return (new URL(`?from=${from}`, commonUrl)).toString();
+}
+
+const redisConnect = 'redisinsight://databases/connect';
+
+fixture `Add DB from SM`
+    .meta({ type: 'critical_path', rte: rte.none })
+    .afterEach(async() => {
+        // Delete all existing connections
+        await databaseAPIRequests.deleteAllDatabasesApi();
+    })
+    .beforeEach(async() => {
+        await databaseHelper.acceptLicenseTerms();
+    });
+test
+    .page(commonUrl)('Tls dropdown', async t => {
+        const connectUrlParams = {
+            redisUrl: `redis://${databaseUsername}:${databasePassword}@${host}:${port}`,
+            databaseAlias: databaseName,
+            redirect: 'workbench',
+            requiredCaCert: 'true',
+            requiredClientCert: 'true'
+        };
+
+        const tooltipText = [
+            'CA Certificate Name',
+            'CA certificate',
+            'Client Certificate Name',
+            'Client Certificate',
+            'Private Key'
+        ];
+
+        await t.navigateTo(generateLink(connectUrlParams));
+        await t.expect(myRedisDatabasePage.AddRedisDatabase.caCertField.textContent).contains('Add new CA certificate', 'add CA certificate is not shown');
+        await t.expect(myRedisDatabasePage.AddRedisDatabase.clientCertField.textContent).contains('Add new certificate', 'add client certificate is not shown');
+        await t.hover(myRedisDatabasePage.AddRedisDatabase.addRedisDatabaseButton);
+
+        for (const text of tooltipText) {
+            await browserActions.verifyTooltipContainsText(text, true);
+        }
+
+        // Verify that user can see the Test Connection button enabled/disabled with the same rules as the button to add/apply the changes
+        await t.hover(myRedisDatabasePage.AddRedisDatabase.testConnectionBtn);
+        for (const text of tooltipText) {
+            await browserActions.verifyTooltipContainsText(text, true);
+        }
+    });
