Merge pull request #151 from RedisInsight/feature/RI-2218_New_year_promo

#RI-2218 - Add information about limited time offer

Author: egor-zalenski

redisinsight/splash.html

@@ -188,7 +188,12 @@ const HomePage = () => {
         {(resizeRef) => (
           <EuiPage>
             <EuiPageBody component="div">
-              <AddInstanceControls key="instance-controls" onAddInstance={handleAddInstance} direction={Direction.row} />
+              <AddInstanceControls
+                key="instance-controls"
+                onAddInstance={handleAddInstance}
+                direction={Direction.row}
+                welcomePage={!instances.length}
+              />
               {dialogIsOpen ? (
                 <div key="homePage" className="homePage">
                   <EuiResizableContainer style={{ height: '100%' }}>

redisinsight/ui/src/assets/img/NYbg.jpg

@@ -24,19 +24,23 @@ export enum Direction {
 interface Props {
   onAddInstance: () => void;
   direction: Direction;
+  welcomePage?: boolean;
 }
 
-const AddInstanceControls = ({ onAddInstance, direction }: Props) => {
+const AddInstanceControls = ({ onAddInstance, direction, welcomePage = false }: Props) => {
   const handleOnAddDatabase = () => {
     sendEventTelemetry({
       event: TelemetryEvent.CONFIG_DATABASES_CLICKED,
     })
     onAddInstance()
   }
 
-  const handleClickLink = (event: TelemetryEvent) => {
+  const handleClickLink = (event: TelemetryEvent, eventData: any = {}) => {
     sendEventTelemetry({
       event,
+      eventData: {
+        ...eventData
+      }
     })
   }
 
@@ -58,13 +62,16 @@ const AddInstanceControls = ({ onAddInstance, direction }: Props) => {
       href={HELP_LINKS.createRedisCloud.link}
       target="_blank"
       rel="noreferrer"
-      onClick={() => handleClickLink(HELP_LINKS.createRedisCloud.event)}
+      onClick={() => handleClickLink(
+        HELP_LINKS.createRedisCloud.event,
+        { source: HELP_LINKS.createRedisCloud.sources[welcomePage ? 'welcome' : 'databaseList'] }
+      )}
     >
       <EuiText className={styles.createTitle}>
         {HELP_LINKS.createRedisCloud.label}
       </EuiText>
       <EuiText className={styles.createText}>
-        Free managed database up to 30MB, with modules support.
+        Try Redis Cloud with enhanced database capabilities.
       </EuiText>
       <EuiIcon type="arrowRight" size="m" className={styles.arrowRight} />
     </a>

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

@@ -22,28 +22,65 @@
   }
 }
 
+.arrowRight {
+  display: block !important;
+  position: absolute;
+  right: 14px;
+  top: calc(50% - 11px);
+  color: #ffffff;
+  width: 20px;
+  height: 20px;
+}
+
 .createBtn {
   border: 2px solid var(--euiColorSecondary);
   padding: 9px 24px;
+  letter-spacing: normal;
   border-radius: 4px;
   text-align: left;
   position: relative;
+  width: 413px;
+  height: 64px;
+  padding-right: 40px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    opacity: .9;
+    background: url(../../../../assets/img/NYbg.jpg) center;
+    background-size: cover;
+  }
+
   &:hover {
     transform: translateY(-1px);
   }
-}
 
-.createTitle {
-  padding-top: 0;
-  color: var(--euiTextColor) !important;
-  line-height: 16px;
-}
+  .createTitle {
+    padding-top: 3px;
+    line-height: 16px;
+    color: #ffffff !important;
+    position: relative;
+    font-weight: 500 !important;
+  }
 
-.createText {
-  font-size: 12px !important;
-  color: var(--euiTextColor) !important;
-  opacity: 0.7;
-  margin-top: -3px;
+  .createText {
+    font-size: 12px !important;
+    color: #ffffff !important;
+    position: relative;
+  }
+
+  .arrowRight {
+    position: absolute;
+    right: 14px;
+    top: calc(50% - 11px);
+    color: #ffffff;
+    width: 20px;
+    height: 20px;
+  }
 }
 
 .followText {
@@ -83,39 +120,7 @@
   }
 }
 
-.arrowRight {
-  display: none !important;
-}
-
 .containerDl {
-
-  .arrowRight {
-    display: block !important;
-    position: absolute;
-    right: 14px;
-    top: calc(50% - 11px);
-    color: var(--euiTextColor);
-    width: 20px;
-    height: 20px;
-  }
-
-  .createBtn {
-    height: 64px;
-    padding-right: 40px;
-    letter-spacing: normal;
-    width: 412px;
-  }
-
-  .createTitle {
-    margin-top: -1px;
-    padding-top: 0;
-    font-weight: 500;
-  }
-
-  .createText {
-    margin-top: -5px;
-  }
-
   .links {
     max-width: 330px;
     display: none;

redisinsight/ui/src/pages/home/components/AddInstanceControls/AddInstanceControls.tsx

@@ -69,6 +69,7 @@ const Welcome = ({ onAddInstance }: Props) => {
 
         <div className={styles.controls}>
           <AddInstanceControls
+            welcomePage
             onAddInstance={onAddInstance}
             direction={Direction.column}
           />

redisinsight/ui/src/pages/home/components/AddInstanceControls/styles.module.scss

@@ -28,7 +28,7 @@
 
 .controls {
   margin: 7vh auto 0;
-  max-width: 390px;
+  max-width: 414px;
 }
 
 .logo {

redisinsight/ui/src/pages/home/components/WelcomeComponent/WelcomeComponent.tsx

@@ -9,9 +9,14 @@ export enum HelpLink {
 
 export const HELP_LINKS = {
   [HelpLink.CreateRedisCloud]: {
-    label: 'Create a free Redis Database on Redis Cloud',
+    label: 'Limited offer: Up to 6 months free with $200 credits.',
     link: 'https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight',
-    event: TelemetryEvent.CONFIG_DATABASES_GET_REDIS_CLOUD_ACCOUNT_CLICKED
+    event: TelemetryEvent.CREATE_FREE_CLOUD_DATABASE_CLICKED,
+    sources: {
+      welcome: 'Welcome page',
+      databaseList: 'My Redis databases',
+      redisearch: 'RediSearch is not loaded'
+    }
   },
   [HelpLink.BuildRedisFromSource]: {
     label: 'Build from source',

redisinsight/ui/src/pages/home/components/WelcomeComponent/styles.module.scss

@@ -1,13 +1,20 @@
 import React, { useContext } from 'react'
 import cx from 'classnames'
 import {
-  EuiBasicTableColumn, EuiButton,
-  EuiFlexGroup, EuiFlexItem, EuiIcon, EuiInMemoryTable, EuiTextColor
+  EuiBasicTableColumn,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiInMemoryTable,
+  EuiText,
+  EuiTextColor,
 } from '@elastic/eui'
 import parse from 'html-react-parser'
 
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { Theme } from 'uiSrc/constants'
+import { HELP_LINKS } from 'uiSrc/pages/home/constants/help-links'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import styles from './styles.module.scss'
 
 interface IContentColumn {
@@ -54,6 +61,36 @@ const ModuleNotLoaded = ({ content = {} }: Props) => {
 
   const item = columns.reduce((obj, { text }, i) => ({ ...obj, [`text${i}`]: text }), {})
 
+  const handleClickLink = (event: TelemetryEvent, eventData: any = {}) => {
+    sendEventTelemetry({
+      event,
+      eventData: {
+        ...eventData
+      }
+    })
+  }
+
+  const CreateCloudBtn = () => (
+    <a
+      className={styles.createCloudBtn}
+      href={createCloudBtnHref}
+      target="_blank"
+      rel="noreferrer"
+      onClick={() => handleClickLink(
+        HELP_LINKS.createRedisCloud.event,
+        { source: HELP_LINKS.createRedisCloud.sources.redisearch }
+      )}
+    >
+      <EuiText className={styles.createTitle}>
+        {HELP_LINKS.createRedisCloud.label}
+      </EuiText>
+      <EuiText className={styles.createText}>
+        Try Redis Cloud with enhanced database capabilities.
+      </EuiText>
+      <EuiIcon type="arrowRight" size="m" className={styles.arrowRight} />
+    </a>
+  )
+
   return (
     <div className={cx(styles.container)}>
       <EuiFlexGroup direction="column" gutterSize="s">
@@ -79,17 +116,7 @@ const ModuleNotLoaded = ({ content = {} }: Props) => {
         )}
         {!!createCloudBtnText && (
           <EuiFlexItem grow={false} data-testid="query-card-no-module-button">
-            <EuiButton
-              fill
-              size="s"
-              color="secondary"
-              fullWidth={false}
-              className={cx(styles.createCloudBtn)}
-              href={createCloudBtnHref}
-              target="_blank"
-            >
-              {createCloudBtnText}
-            </EuiButton>
+            <CreateCloudBtn />
           </EuiFlexItem>
         ) }
         {(!!summaryText || !!summaryImgPath || !!summaryImgDark || !!summaryImgLight) && (

redisinsight/ui/src/pages/home/constants/help-links.ts

@@ -43,8 +43,56 @@
 }
 
 .createCloudBtn {
-  margin: 16px 0;
-  max-width: 420px !important;
+  border: 2px solid var(--euiColorSecondary);
+  padding: 9px 24px;
+  margin: 20px 0;
+  letter-spacing: normal;
+  border-radius: 4px;
+  text-align: left;
+  position: relative;
+  width: 413px;
+  height: 64px;
+  padding-right: 40px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    opacity: .9;
+    background: url(../../../../assets/img/NYbg.jpg) center;
+    background-size: cover;
+  }
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+
+  .createTitle {
+    padding-top: 3px;
+    line-height: 16px;
+    color: #ffffff !important;
+    position: relative;
+    font-weight: 500 !important;
+  }
+
+  .createText {
+    font-size: 12px !important;
+    color: #ffffff !important;
+    position: relative;
+  }
+
+  .arrowRight {
+    display: block;
+    position: absolute;
+    right: 14px;
+    top: calc(50% - 11px);
+    color: #ffffff;
+    width: 20px;
+    height: 20px;
+  }
 }