diff --git a/redisinsight/ui/src/pages/home/components/WelcomeComponent/styles.module.scss b/redisinsight/ui/src/pages/home/components/WelcomeComponent/styles.module.scss
index ec9e1459db..5484e91f09 100644
--- a/redisinsight/ui/src/pages/home/components/WelcomeComponent/styles.module.scss
+++ b/redisinsight/ui/src/pages/home/components/WelcomeComponent/styles.module.scss
@@ -28,7 +28,7 @@
.controls {
margin: 7vh auto 0;
- max-width: 390px;
+ max-width: 414px;
}
.logo {
diff --git a/redisinsight/ui/src/pages/home/constants/help-links.ts b/redisinsight/ui/src/pages/home/constants/help-links.ts
index 8cd422eed2..f674d68501 100644
--- a/redisinsight/ui/src/pages/home/constants/help-links.ts
+++ b/redisinsight/ui/src/pages/home/constants/help-links.ts
@@ -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',
diff --git a/redisinsight/ui/src/pages/workbench/components/module-not-loaded/ModuleNotLoaded.tsx b/redisinsight/ui/src/pages/workbench/components/module-not-loaded/ModuleNotLoaded.tsx
index ff880642a8..bdf20630ec 100644
--- a/redisinsight/ui/src/pages/workbench/components/module-not-loaded/ModuleNotLoaded.tsx
+++ b/redisinsight/ui/src/pages/workbench/components/module-not-loaded/ModuleNotLoaded.tsx
@@ -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 = () => (
+
handleClickLink(
+ HELP_LINKS.createRedisCloud.event,
+ { source: HELP_LINKS.createRedisCloud.sources.redisearch }
+ )}
+ >
+
+ {HELP_LINKS.createRedisCloud.label}
+
+
+ Try Redis Cloud with enhanced database capabilities.
+
+
+
+ )
+
return (
@@ -79,17 +116,7 @@ const ModuleNotLoaded = ({ content = {} }: Props) => {
)}
{!!createCloudBtnText && (
-
- {createCloudBtnText}
-
+
) }
{(!!summaryText || !!summaryImgPath || !!summaryImgDark || !!summaryImgLight) && (
diff --git a/redisinsight/ui/src/pages/workbench/components/module-not-loaded/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/module-not-loaded/styles.module.scss
index c35fc59d91..e545f9e952 100644
--- a/redisinsight/ui/src/pages/workbench/components/module-not-loaded/styles.module.scss
+++ b/redisinsight/ui/src/pages/workbench/components/module-not-loaded/styles.module.scss
@@ -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;
+ }
}
diff --git a/redisinsight/ui/src/telemetry/events.ts b/redisinsight/ui/src/telemetry/events.ts
index 8bc41d9fee..1ea03acd16 100644
--- a/redisinsight/ui/src/telemetry/events.ts
+++ b/redisinsight/ui/src/telemetry/events.ts
@@ -22,6 +22,7 @@ export enum TelemetryEvent {
CONFIG_DATABASES_REDIS_SENTINEL_AUTODISCOVERY_SUBMITTED = 'CONFIG_DATABASES_REDIS_SENTINEL_AUTODISCOVERY_SUBMITTED',
CONFIG_DATABASES_REDIS_SENTINEL_AUTODISCOVERY_CANCELLED = 'CONFIG_DATABASES_REDIS_SENTINEL_AUTODISCOVERY_CANCELLED',
CONFIG_DATABASES_GET_REDIS_CLOUD_ACCOUNT_CLICKED = 'CONFIG_DATABASES_GET_REDIS_CLOUD_ACCOUNT_CLICKED',
+ CREATE_FREE_CLOUD_DATABASE_CLICKED = 'CREATE_FREE_CLOUD_DATABASE_CLICKED',
BUILD_FROM_SOURCE_CLICKED = 'BUILD_FROM_SOURCE_CLICKED',
BUILD_USING_DOCKER_CLICKED = 'BUILD_USING_DOCKER_CLICKED',