#RI-6265 - update home page

Author: rsergeenko

redisinsight/ui/src/assets/img/icons/star.svg

@@ -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/assets/img/oauth/cloud_centered.svg

@@ -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/item-list/ItemList.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/NavigationMenu.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/NavigationMenu.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/CreateCloud.spec.tsx

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

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

@@ -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/navigation-menu/components/create-cloud/index.ts

@@ -29,11 +29,14 @@ import {
 } from 'uiSrc/slices/instances/instances'
 import { localStorageService } from 'uiSrc/services'
 import { resetDataSentinel, sentinelSelector } from 'uiSrc/slices/instances/sentinel'
-import { fetchContentAction as fetchCreateRedisButtonsAction } from 'uiSrc/slices/content/create-redis-buttons'
+import {
+  contentSelector,
+  fetchContentAction as fetchCreateRedisButtonsAction
+} from 'uiSrc/slices/content/create-redis-buttons'
 import { sendEventTelemetry, sendPageViewTelemetry, TelemetryEvent, TelemetryPageView } from 'uiSrc/telemetry'
 import { appRedirectionSelector, setUrlHandlingInitialState } from 'uiSrc/slices/app/url-handling'
 import { UrlHandlingActions } from 'uiSrc/slices/interfaces/urlHandling'
-import { AddDbType } from 'uiSrc/pages/home/constants'
+import { AddDbType, CREATE_CLOUD_DB_ID } from 'uiSrc/pages/home/constants'
 
 import DatabasesList from './components/database-list-component'
 import DatabaseListHeader from './components/database-list-header'
@@ -58,6 +61,7 @@ const HomePage = () => {
   const { credentials: cloudCredentials } = useSelector(cloudSelector)
   const { instance: sentinelInstance } = useSelector(sentinelSelector)
   const { action, dbConnection } = useSelector(appRedirectionSelector)
+  const { data: createDbContent } = useSelector(contentSelector)
 
   const {
     loading,
@@ -73,6 +77,11 @@ const HomePage = () => {
 
   const { contextInstanceId } = useSelector(appContextSelector)
 
+  const predefinedInstances = createDbContent?.cloud_list_of_databases ? [
+    { id: CREATE_CLOUD_DB_ID, ...createDbContent.cloud_list_of_databases } as Instance
+  ] : []
+  const isInstanceExists = instances.length > 0 || predefinedInstances.length > 0
+
   useEffect(() => {
     setTitle('Redis databases')
 
@@ -199,7 +208,7 @@ const HomePage = () => {
   const onResizeTrottled = useCallback(throttle(onResize, 100), [])
 
   const InstanceList = () =>
-    (!instances.length && !loading && !loadingChanging ? (
+    (!isInstanceExists && !loading && !loadingChanging ? (
       <EuiPanel className={styles.emptyPanel} borderRadius="none">
         <EmptyMessage onAddInstanceClick={handleAddInstance} />
       </EuiPanel>
@@ -208,6 +217,9 @@ const HomePage = () => {
         {(resizeRef) => (
           <div ref={resizeRef} style={{ height: '100%' }}>
             <DatabasesList
+              loading={loading}
+              instances={instances}
+              predefinedInstances={predefinedInstances}
               width={width}
               editedInstance={editedInstance}
               onEditInstance={handleEditInstance}
@@ -241,7 +253,7 @@ const HomePage = () => {
                         className: cx('home__resizePanelLeft', {
                           fullWidth: !openRightPanel,
                           openedRightPanel: !!openRightPanel,
-                          hidden: !!openRightPanel && !instances.length,
+                          hidden: !!openRightPanel && !isInstanceExists,
                         })
                       }}
                     >
@@ -250,7 +262,7 @@ const HomePage = () => {
 
                     <EuiResizableButton
                       className={cx('home__resizableButton', {
-                        hidden: !openRightPanel || !instances.length,
+                        hidden: !openRightPanel || !isInstanceExists,
                       })}
                       style={{ margin: 0 }}
                     />
@@ -261,7 +273,7 @@ const HomePage = () => {
                       wrapperProps={{
                         className: cx('home__resizePanelRight', {
                           hidden: !openRightPanel,
-                          fullWidth: !instances.length,
+                          fullWidth: !isInstanceExists,
                         })
                       }}
                       id="form"
@@ -286,7 +298,7 @@ const HomePage = () => {
                               : handleClose
                           }
                           onDbEdited={onDbEdited}
-                          isFullWidth={!instances.length}
+                          isFullWidth={!isInstanceExists}
                           initConnectionType={initialDbTypeRef.current}
                         />
                       )}