#RI-6338 - update add database form

Author: rsergeenko

redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx

@@ -14,15 +14,22 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import { Pages } from 'uiSrc/constants'
 import OAuthForm from 'uiSrc/components/oauth/shared/oauth-form'
+
+import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
+
+import { OAuthSsoHandlerDialog } from 'uiSrc/components'
+import { getUtmExternalLink } from 'uiSrc/utils/links'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import styles from './styles.module.scss'
 
 export interface Props {
   inline?: boolean
   source?: OAuthSocialSource
+  onClose?: () => void
 }
 
 const OAuthAutodiscovery = (props: Props) => {
-  const { inline, source = OAuthSocialSource.Autodiscovery } = props
+  const { inline, source = OAuthSocialSource.Autodiscovery, onClose } = props
   const { data } = useSelector(oauthCloudUserSelector)
 
   const [isDiscoverDisabled, setIsDiscoverDisabled] = useState(false)
@@ -94,6 +101,32 @@ const OAuthAutodiscovery = (props: Props) => {
     })
   }
 
+  const CreateFreeDb = () => (
+    <div className={styles.createDbSection}>
+      <div className={styles.createDbTitle}><CloudIcon /><span>Start FREE with Redis Cloud</span></div>
+      <OAuthSsoHandlerDialog>
+        {(ssoCloudHandlerClick) => (
+          <EuiButton
+            fill
+            color="secondary"
+            size="s"
+            href={getUtmExternalLink(EXTERNAL_LINKS.tryFree, { campaign: '' })}
+            target="_blank"
+            onClick={(e: React.MouseEvent) => {
+              ssoCloudHandlerClick(e, {
+                source: OAuthSocialSource.DiscoveryForm,
+                action: OAuthSocialAction.Create
+              })
+              onClose?.()
+            }}
+          >
+            Quick start
+          </EuiButton>
+        )}
+      </OAuthSsoHandlerDialog>
+    </div>
+  )
+
   return (
     <div
       className={styles.container}
@@ -111,6 +144,8 @@ const OAuthAutodiscovery = (props: Props) => {
               Discover subscriptions and add your databases.
               A new Redis Cloud account will be created for you if you don’t have one.
             </EuiText>
+            <EuiSpacer size="m" />
+            <CreateFreeDb />
             <EuiSpacer size="xl" />
             <EuiText>Get started with</EuiText>
             <EuiTitle className={styles.title} size="l"><h3>Redis Cloud account</h3></EuiTitle>

redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss

@@ -55,6 +55,26 @@
       font-size: 12px !important;
     }
   }
+
+  .createDbSection {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    border: 1px solid var(--controlsBorderColor);
+    border-radius: 8px;
+    padding: 8px 16px;
+
+    .createDbTitle {
+      display: flex;
+      align-items: center;
+
+      > svg {
+        margin-right: 8px;
+      }
+    }
+  }
 }
 
 .withAdvantagesWrapper {

redisinsight/ui/src/constants/links.ts

@@ -24,6 +24,7 @@ export const UTM_CAMPAINGS: Record<any, string> = {
   [OAuthSocialSource.Workbench]: 'redisinsight_workbench',
   [CloudSsoUtmCampaign.BrowserFilter]: 'browser_filter',
   [OAuthSocialSource.EmptyDatabasesList]: 'empty_db_list',
+  [OAuthSocialSource.AddDbForm]: 'add_db_form',
   PubSub: 'pub_sub',
   Main: 'main',
 }

redisinsight/ui/src/contexts/ModalTitleProvider.tsx

@@ -3,7 +3,7 @@ import { Nullable } from 'uiSrc/utils'
 
 interface ModalHeaderContextType {
   modalHeader: Nullable<React.ReactNode>
-  setModalHeader: (content: Nullable<React.ReactNode>) => void
+  setModalHeader: (content: Nullable<React.ReactNode>, withBack?: boolean) => void
 }
 
 // Create a context

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -50,7 +50,6 @@ enum OpenDialogName {
 
 const HomePage = () => {
   const [openDialog, setOpenDialog] = useState<Nullable<OpenDialogName>>(null)
-  const initialDbTypeRef = useRef<AddDbType>(AddDbType.cloud)
 
   const dispatch = useDispatch()
 
@@ -176,7 +175,6 @@ const HomePage = () => {
   }
 
   const handleAddInstance = (addDbType = AddDbType.manual) => {
-    initialDbTypeRef.current = addDbType
     setOpenDialog(OpenDialogName.AddDatabase)
     dispatch(setEditedInstance(null))
   }
@@ -226,7 +224,6 @@ const HomePage = () => {
                   : handleClose
               }
               onDbEdited={onDbEdited}
-              initConnectionType={initialDbTypeRef.current}
             />
             <div key="homePage" className="homePage">
               {(!isInstanceExists && !loading && !loadingChanging ? (

redisinsight/ui/src/pages/home/components/cloud-connection/CloudConnectionFormWrapper.tsx

@@ -2,11 +2,13 @@ import React, { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
+import { EuiTitle } from '@elastic/eui'
 import { Pages } from 'uiSrc/constants'
 import { cloudSelector, fetchSubscriptionsRedisCloud, setSSOFlow } from 'uiSrc/slices/instances/cloud'
 import { resetErrors } from 'uiSrc/slices/app/notifications'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
+import { useModalHeader } from 'uiSrc/contexts/ModalTitleProvider'
 import CloudConnectionForm from './cloud-connection-form'
 
 export interface Props {
@@ -24,12 +26,19 @@ const CloudConnectionFormWrapper = ({ onClose }: Props) => {
   const history = useHistory()
   const { loading, credentials } = useSelector(cloudSelector)
 
-  useEffect(
-    () => () => {
+  const { setModalHeader } = useModalHeader()
+
+  useEffect(() => {
+    setModalHeader(
+      <EuiTitle size="s"><h4>Discover Cloud databases</h4></EuiTitle>,
+      true
+    )
+
+    return () => {
+      setModalHeader(null)
       dispatch(resetErrors())
-    },
-    []
-  )
+    }
+  }, [])
 
   const formSubmit = (credentials: ICloudConnectionSubmit) => {
     sendEventTelemetry({

redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx

@@ -234,9 +234,11 @@ const CloudConnectionForm = (props: Props) => {
             />
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiSpacer />
+        <EuiSpacer size="s" />
       </FeatureFlagComponent>
-      {type === CloudConnectionOptions.Account && (<OAuthAutodiscovery source={OAuthSocialSource.DiscoveryForm} />)}
+      {type === CloudConnectionOptions.Account && (
+        <OAuthAutodiscovery source={OAuthSocialSource.DiscoveryForm} onClose={onClose} />
+      )}
       {type === CloudConnectionOptions.ApiKeys && CloudApiForm}
     </div>
   )

redisinsight/ui/src/pages/home/components/cluster-connection/ClusterConnectionFormWrapper.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
+import { EuiTitle } from '@elastic/eui'
 import {
   clusterSelector,
   fetchInstancesRedisCluster,
@@ -12,6 +13,7 @@ import { ICredentialsRedisCluster, InstanceType } from 'uiSrc/slices/interfaces'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { autoFillFormDetails } from 'uiSrc/pages/home/utils'
 
+import { useModalHeader } from 'uiSrc/contexts/ModalTitleProvider'
 import ClusterConnectionForm from './cluster-connection-form/ClusterConnectionForm'
 
 export interface Props {
@@ -28,17 +30,23 @@ const ClusterConnectionFormWrapper = ({ onClose }: Props) => {
 
   const history = useHistory()
   const dispatch = useDispatch()
+  const { setModalHeader } = useModalHeader()
 
   const formRef = useRef<HTMLDivElement>(null)
 
   const { loading, credentials } = useSelector(clusterSelector)
 
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    setModalHeader(
+      <EuiTitle size="s"><h4>Redis Software</h4></EuiTitle>,
+      true
+    )
+
+    return () => {
+      setModalHeader(null)
       dispatch(resetErrors())
-    },
-    []
-  )
+    }
+  }, [])
 
   useEffect(() => {
     if (credentials) {

redisinsight/ui/src/pages/home/components/connection-url/ConnectionUrl.spec.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { mock } from 'ts-mockito'
+import { cloneDeep } from 'lodash'
+import { render, screen, fireEvent, mockedStore, cleanup, act } from 'uiSrc/utils/test-utils'
+
+import { defaultInstanceChanging } from 'uiSrc/slices/instances/instances'
+import { AddDbType } from 'uiSrc/pages/home/constants'
+import ConnectionUrl, { Props } from './ConnectionUrl'
+
+const mockedProps = mock<Props>()
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('ConnectionUrl', () => {
+  it('should render', () => {
+    expect(render(<ConnectionUrl {...mockedProps} />)).toBeTruthy()
+  })
+
+  it('should call proper actions with empty connection url', async () => {
+    render(<ConnectionUrl {...mockedProps} />)
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('btn-submit'))
+    })
+
+    expect(store.getActions()).toEqual([defaultInstanceChanging()])
+  })
+
+  it('should disable test connection and submit buttons when connection url is invalid', async () => {
+    render(<ConnectionUrl {...mockedProps} />)
+
+    await act(async () => {
+      fireEvent.change(
+        screen.getByTestId('connection-url'),
+        { target: { value: 'q' } }
+      )
+    })
+
+    expect(screen.getByTestId('btn-submit')).toBeDisabled()
+    expect(screen.getByTestId('btn-test-connection')).toBeDisabled()
+  })
+
+  it('should not disable buttons with proper connection url', async () => {
+    render(<ConnectionUrl {...mockedProps} />)
+
+    await act(async () => {
+      fireEvent.change(
+        screen.getByTestId('connection-url'),
+        { target: { value: 'redis://localhost:6322' } }
+      )
+    })
+
+    expect(screen.getByTestId('btn-submit')).not.toBeDisabled()
+    expect(screen.getByTestId('btn-test-connection')).not.toBeDisabled()
+  })
+
+  it('should call proper actions after click manual settings', async () => {
+    const onSelectOptionMock = jest.fn()
+    render(<ConnectionUrl {...mockedProps} onSelectOption={onSelectOptionMock} />)
+
+    await act(async () => {
+      fireEvent.change(
+        screen.getByTestId('connection-url'),
+        { target: { value: 'redis://localhost:6322' } }
+      )
+    })
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('btn-connection-settings'))
+    })
+
+    expect(onSelectOptionMock).toBeCalledWith(
+      AddDbType.manual,
+      {
+        db: undefined,
+        host: 'localhost',
+        name: 'localhost:6322',
+        password: undefined,
+        port: 6322,
+        tls: false,
+        username: undefined
+      }
+    )
+  })
+
+  it('should call proper actions after click connectivity option', async () => {
+    const onSelectOptionMock = jest.fn()
+    render(<ConnectionUrl {...mockedProps} onSelectOption={onSelectOptionMock} />)
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('option-btn-sentinel'))
+    })
+
+    expect(onSelectOptionMock).toBeCalledWith(AddDbType.sentinel, expect.any(Object))
+  })
+})