Merge pull request #4054 from RedisInsight/fe/feature/RI-6265_update-list-of-databases

#RI-6265 - update home page

Author: rsergeenko

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

@@ -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/assets/img/oauth/cloud_centered.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/components/import-databases-dialog/ImportDatabasesDialog.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/import-databases-dialog/index.ts

@@ -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/import-databases-dialog/styles.module.scss

@@ -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)
+    ])
+  })
+})