Merge pull request #2510 from RedisInsight/fe/feature/RI-4888_cloud-link

#RI-4888 - add link to cloud console

Author: mariasergeenko

redisinsight/ui/src/assets/img/oauth/cloud_link.svg

@@ -6,4 +6,5 @@ export const EXTERNAL_LINKS = {
   recommendationFeedback: 'https://github.com/RedisInsight/RedisInsight/issues/new/choose',
   guidesRepo: 'https://github.com/RedisInsight/Tutorials',
   redisStack: 'https://redis.io/docs/about/about-stack/',
+  cloudConsole: 'https://app.redislabs.com/#/databases'
 }

redisinsight/ui/src/constants/links.ts

@@ -63,6 +63,7 @@ const mockInstances = [
       caCertId: '70b95d32-c19d-4311-bb24-e684af12cf15',
       clientCertPairId: '70b95d32-c19d-4311-b23b24-e684af12cf15',
     },
+    cloudDetails: {}
   },
 ]
 
@@ -163,5 +164,29 @@ describe('DatabasesListWrapper', () => {
         numberOfDatabases: 1
       }
     })
+
+    sendEventTelemetry.mockRestore()
+  })
+
+  it('should show link to cloud console', () => {
+    render(<DatabasesListWrapper {...instance(mockedProps)} />)
+
+    expect(screen.queryByTestId(`cloud-link-${mockInstances[0].id}`)).not.toBeInTheDocument()
+    expect(screen.getByTestId(`cloud-link-${mockInstances[1].id}`)).toBeInTheDocument()
+  })
+
+  it('should call proper telemetry on click cloud console ling', () => {
+    const sendEventTelemetryMock = jest.fn()
+
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+    render(<DatabasesListWrapper {...instance(mockedProps)} />)
+
+    fireEvent.click(screen.getByTestId(`cloud-link-${mockInstances[1].id}`))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.CLOUD_LINK_CLICKED,
+    })
+
+    sendEventTelemetry.mockRestore()
   })
 })

redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.spec.tsx

@@ -1,6 +1,7 @@
 import {
   EuiButtonIcon,
   EuiIcon,
+  EuiLink,
   EuiTableFieldDataColumnType,
   EuiText,
   EuiTextColor,
@@ -16,19 +17,16 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 import { saveAs } from 'file-saver'
 import {
   checkConnectToInstanceAction,
-  deleteInstancesAction, exportInstancesAction,
+  deleteInstancesAction,
+  exportInstancesAction,
   instancesSelector,
   setConnectedInstanceId,
 } from 'uiSrc/slices/instances/instances'
-import {
-  CONNECTION_TYPE_DISPLAY,
-  ConnectionType,
-  Instance,
-} from 'uiSrc/slices/interfaces'
+import { CONNECTION_TYPE_DISPLAY, ConnectionType, Instance, } from 'uiSrc/slices/interfaces'
 import { resetKeys } from 'uiSrc/slices/browser/keys'
 import { resetRedisearchKeysData } from 'uiSrc/slices/browser/redisearch'
 import { PageNames, Pages, Theme } from 'uiSrc/constants'
-import { sendEventTelemetry, TelemetryEvent, getRedisModulesSummary } from 'uiSrc/telemetry'
+import { getRedisModulesSummary, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { ShowChildByCondition } from 'uiSrc/components'
 import { formatLongName, getDbIndex, lastConnectionFormat, Nullable, replaceSpaces } from 'uiSrc/utils'
@@ -40,6 +38,8 @@ import RediStackDarkMin from 'uiSrc/assets/img/modules/redistack/RediStackDark-m
 import RediStackLightMin from 'uiSrc/assets/img/modules/redistack/RediStackLight-min.svg'
 import RediStackLightLogo from 'uiSrc/assets/img/modules/redistack/RedisStackLogoLight.svg'
 import RediStackDarkLogo from 'uiSrc/assets/img/modules/redistack/RedisStackLogoDark.svg'
+import { ReactComponent as CloudLinkIcon } from 'uiSrc/assets/img/oauth/cloud_link.svg'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import DatabasesList from './DatabasesList/DatabasesList'
 
 import styles from './styles.module.scss'
@@ -201,6 +201,12 @@ const DatabasesListWrapper = ({
     ))
   }
 
+  const handleClickGoToCloud = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.CLOUD_LINK_CLICKED,
+    })
+  }
+
   const columnsFull: EuiTableFieldDataColumnType<Instance>[] = [
     {
       field: 'name',
@@ -350,11 +356,26 @@ const DatabasesListWrapper = ({
     {
       field: 'controls',
       className: 'column_controls',
-      width: '100px',
+      width: '120px',
       name: '',
       render: function Actions(_act: any, instance: Instance) {
         return (
           <>
+            {instance.cloudDetails && (
+              <EuiToolTip
+                content="Go to Redis Enterprise Cloud"
+              >
+                <EuiLink
+                  target="_blank"
+                  external={false}
+                  href={EXTERNAL_LINKS.cloudConsole}
+                  onClick={handleClickGoToCloud}
+                  data-testid={`cloud-link-${instance.id}`}
+                >
+                  <EuiIcon type={CloudLinkIcon} className={styles.cloudIcon} />
+                </EuiLink>
+              </EuiToolTip>
+            )}
             <EuiButtonIcon
               iconType="pencil"
               className="editInstanceBtn"

redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.tsx

@@ -110,3 +110,11 @@ $breakpoint-l: 1400px;
     padding-left: 5px !important;
   }
 }
+
+.cloudIcon {
+  :global {
+    path {
+      fill: var(--euiTextSubduedColor);
+    }
+  }
+}

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

@@ -258,6 +258,7 @@ export enum TelemetryEvent {
   CLOUD_SIGN_IN_PROVIDER_FORM_CLOSED = 'CLOUD_SIGN_IN_PROVIDER_FORM_CLOSED',
   CLOUD_IMPORT_DATABASES_CLICKED = 'CLOUD_IMPORT_DATABASES_CLICKED',
   CLOUD_API_KEY_REMOVED = 'CLOUD_API_KEY_REMOVED',
+  CLOUD_LINK_CLICKED = 'CLOUD_LINK_CLICKED',
 
   TRIGGERS_AND_FUNCTIONS_LIBRARIES_SORTED = 'TRIGGERS_AND_FUNCTIONS_LIBRARIES_SORTED',
   TRIGGERS_AND_FUNCTIONS_LIBRARY_LIST_REFRESH_CLICKED = 'TRIGGERS_AND_FUNCTIONS_LIBRARY_LIST_REFRESH_CLICKED',