#RI-6265 - update home page

redisinsight/ui/src/components/index.ts

@@ -19,7 +19,6 @@ import GlobalSubscriptions from './global-subscriptions'
 import MonitorWrapper from './monitor'
 import PagePlaceholder from './page-placeholder'
 import BulkActionsConfig from './bulk-actions-config'
-import ImportDatabasesDialog from './import-databases-dialog'
 import OnboardingTour from './onboarding-tour'
 import CodeBlock from './code-block'
 import ShowChildByCondition from './show-child-by-condition'
@@ -67,7 +66,6 @@ export {
   ShortcutsFlyout,
   PagePlaceholder,
   BulkActionsConfig,
-  ImportDatabasesDialog,
   OnboardingTour,
   CodeBlock,
   ShowChildByCondition,

redisinsight/ui/src/components/item-list/ItemList.tsx

@@ -4,10 +4,11 @@ import {
   EuiTableFieldDataColumnType,
   EuiTableSelectionType,
   PropertySort,
+  EuiBasicTableProps
 } from '@elastic/eui'
 import cx from 'classnames'
 import React, { useEffect, useRef, useState } from 'react'
-import { Maybe, Nullable } from 'uiSrc/utils'
+import { Maybe } from 'uiSrc/utils'
 import { findColumn, getColumnWidth, hideColumn } from './utils'
 
 import { ActionBar, DeleteAction, ExportAction } from './components'
@@ -16,13 +17,14 @@ import styles from './styles.module.scss'
 
 export interface Props<T> {
   width: number
-  editedInstance: Nullable<T>
   columns: EuiTableFieldDataColumnType<T>[]
   columnsToHide?: string[]
   onDelete: (ids: T[]) => void
   hideExport?: boolean
   onExport?: (ids: T[], withSecrets: boolean) => void
   onWheel: () => void
+  rowProps?: EuiBasicTableProps<T>['rowProps']
+  getSelectableItems?: (item: T) => boolean
   loading: boolean
   data: T[]
   onTableChange: ({ sort, page }: Criteria<T>) => void
@@ -37,7 +39,8 @@ function ItemList<T extends { id: string; visible?: boolean }>({
   hideExport = false,
   onExport,
   onWheel,
-  editedInstance,
+  rowProps,
+  getSelectableItems,
   loading,
   data: instances,
   onTableChange,
@@ -143,7 +146,10 @@ function ItemList<T extends { id: string; visible?: boolean }>({
   }
 
   const selectionValue: EuiTableSelectionType<T> = {
-    onSelectionChange: (selected: T[]) => setSelection(selected)
+    selectable: (item) => (getSelectableItems ? getSelectableItems?.(item) : true),
+    onSelectionChange: (selected: T[]) => {
+      setSelection(selected)
+    }
   }
 
   const handleResetSelection = () => {
@@ -159,12 +165,6 @@ function ItemList<T extends { id: string; visible?: boolean }>({
     tableRef.current?.setSelection([])
   }
 
-  const toggleSelectedRow = (instance: T) => ({
-    className: cx({
-      'euiTableRow-isSelected': instance?.id === editedInstance?.id
-    })
-  })
-
   const actionMsg = (action: string) => `
     Selected
     ${' '}
@@ -183,7 +183,7 @@ function ItemList<T extends { id: string; visible?: boolean }>({
         loading={loading}
         message={message}
         columns={columns ?? []}
-        rowProps={toggleSelectedRow}
+        rowProps={rowProps}
         sorting={{ sort }}
         selection={selectionValue}
         onWheel={onWheel}

redisinsight/ui/src/components/navigation-menu/NavigationMenu.spec.tsx

@@ -143,6 +143,13 @@ describe('NavigationMenu', () => {
       expect(screen.getByTestId('settings-page-btn')).toBeTruthy()
     })
 
+    it('should render cloud link', () => {
+      const { container } = render(<NavigationMenu />)
+
+      const createCloudLink = container.querySelector('[data-test-subj="create-cloud-nav-link"]')
+      expect(createCloudLink).toBeTruthy()
+    })
+
     it('should render github btn with proper link', () => {
       (appInfoSelector as jest.Mock).mockImplementation(() => ({
         ...mockAppInfoSelector,

redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

@@ -43,6 +43,7 @@ import { FeatureFlagComponent } from 'uiSrc/components'
 
 import { appContextSelector } from 'uiSrc/slices/app/context'
 import { AppWorkspace } from 'uiSrc/slices/interfaces'
+import CreateCloud from './components/create-cloud'
 import HelpMenu from './components/help-menu/HelpMenu'
 import NotificationMenu from './components/notifications-center'
 
@@ -309,6 +310,7 @@ const NavigationMenu = () => {
       </div>
       <div className={styles.bottomContainer}>
         <FeatureFlagComponent name={FeatureFlags.disabledByEnv} enabledByDefault>
+          <CreateCloud />
           <NotificationMenu />
         </FeatureFlagComponent>
         <HelpMenu />

redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { cloneDeep } from 'lodash'
+import { cleanup, mockedStore, render, fireEvent } from 'uiSrc/utils/test-utils'
+
+import { setSSOFlow } from 'uiSrc/slices/instances/cloud'
+import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
+import { setSocialDialogState } from 'uiSrc/slices/oauth/cloud'
+import CreateCloud from './CreateCloud'
+
+jest.mock('uiSrc/slices/app/features', () => ({
+  ...jest.requireActual('uiSrc/slices/app/features'),
+  appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
+    cloudSso: {
+      flag: true
+    }
+  }),
+}))
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('CreateCloud', () => {
+  it('should render', () => {
+    expect(render(<CreateCloud />)).toBeTruthy()
+  })
+
+  it('should call proper actions on click cloud button', () => {
+    const { container } = render(<CreateCloud />)
+    const createCloudLink = container.querySelector('[data-test-subj="create-cloud-nav-link"]')
+
+    fireEvent.click(createCloudLink as Element)
+
+    expect(store.getActions()).toEqual([
+      setSSOFlow(OAuthSocialAction.Create),
+      setSocialDialogState(OAuthSocialSource.NavigationMenu)
+    ])
+  })
+})

redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import cx from 'classnames'
+import { EuiIcon, EuiLink, EuiToolTip } from '@elastic/eui'
+
+import { OAuthSsoHandlerDialog } from 'uiSrc/components'
+import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
+import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
+
+import { getUtmExternalLink } from 'uiSrc/utils/links'
+import styles from '../../styles.module.scss'
+
+const CreateCloud = () => (
+  <EuiToolTip
+    content="Create FREE Redis Cloud database"
+    position="right"
+  >
+    <span className={cx(styles.iconNavItem)}>
+      <OAuthSsoHandlerDialog>
+        {(ssoCloudHandlerClick) => (
+          <EuiLink
+            external={false}
+            onClick={(e) => {
+              ssoCloudHandlerClick(e,
+                { source: OAuthSocialSource.NavigationMenu, action: OAuthSocialAction.Create })
+            }}
+            className={styles.cloudLink}
+            href={getUtmExternalLink(EXTERNAL_LINKS.tryFree, { campaign: 'navigation_menu' })}
+            target="_blank"
+            data-test-subj="create-cloud-nav-link"
+          >
+            <EuiIcon
+              className={styles.cloudIcon}
+              type={CloudIcon}
+              data-testid="cloud-db-icon"
+            />
+          </EuiLink>
+        )}
+      </OAuthSsoHandlerDialog>
+    </span>
+  </EuiToolTip>
+)
+
+export default CreateCloud

redisinsight/ui/src/components/navigation-menu/components/create-cloud/index.ts

@@ -0,0 +1,3 @@
+import CreateCloud from './CreateCloud'
+
+export default CreateCloud

redisinsight/ui/src/components/navigation-menu/styles.module.scss

@@ -182,3 +182,16 @@ $sideBarWidth: 60px;
     background-color: #465282 !important;
   }
 }
+
+.cloudLink {
+  border-radius: 8px;
+  border: 1px solid #8BA2FF;
+  max-width: 44px;
+  max-height: 44px;
+
+  .cloudIcon {
+    fill:none;
+    max-width: 26px;
+    color: #BDC3D7;
+  }
+}

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { EuiButton, EuiText } from '@elastic/eui'
+import { EuiButton, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { find } from 'lodash'
@@ -108,11 +108,15 @@ const OAuthAutodiscovery = (props: Props) => {
         {(form: React.ReactNode) => (
           <>
             <EuiText className={styles.text} color="subdued">
-              Auto-discover subscriptions and add your databases.
-              <br />
+              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="xl" />
+            <EuiText>Get started with</EuiText>
+            <EuiTitle className={styles.title} size="l"><h3>Redis Cloud account</h3></EuiTitle>
+            <EuiSpacer size="xl" />
             {form}
+            <EuiSpacer size="xxl" />
             <div className={styles.containerAgreement}>
               <OAuthAgreement size="s" />
             </div>