Merge pull request #4171 from RedisInsight/fe/feature/RI-6338

#RI-6338 - update add database form

Author: mariasergeenko

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/add-database-flow-tabs/AddDatabaseFlowTabs.spec.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({