Merge pull request #3205 from RedisInsight/latest

Latest to main

Author: vlad-dargel

redisinsight/api/src/modules/autodiscovery/autodiscovery.service.ts

@@ -7,6 +7,7 @@ import { Database } from 'src/modules/database/models/database';
 import { DatabaseService } from 'src/modules/database/database.service';
 import { ClientContext, ClientMetadata } from 'src/common/models';
 import { RedisClientFactory } from 'src/modules/redis/redis.client.factory';
+import { plainToClass } from 'class-transformer';
 
 const SERVER_CONFIG = config.get('server') as Config['server'];
 
@@ -74,7 +75,7 @@ export class AutodiscoveryService implements OnModuleInit {
         {
           context: ClientContext.Common,
         } as ClientMetadata,
-        endpoint as Database,
+        plainToClass(Database, endpoint),
         { useRetry: false, connectionName: 'redisinsight-auto-discovery' },
       );
 

redisinsight/ui/src/components/json-viewer/JSONViewer.tsx

@@ -11,10 +11,10 @@ interface Props {
 }
 
 const JSONViewer = (props: Props) => {
-  const { value, expanded = false, space = 2 } = props
+  const { value, expanded = false, space = 2, useNativeBigInt = true } = props
 
   try {
-    const data = JSONBigInt({ useNativeBigInt: true }).parse(value)
+    const data = JSONBigInt({ useNativeBigInt }).parse(value)
 
     return {
       value: (

redisinsight/ui/src/components/page-header/PageHeader.spec.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { cloneDeep } from 'lodash'
+
+import reactRouterDom from 'react-router-dom'
+import { render, screen, fireEvent, mockedStore, cleanup } from 'uiSrc/utils/test-utils'
+import { resetDataRedisCluster } from 'uiSrc/slices/instances/cluster'
+import { resetDataRedisCloud } from 'uiSrc/slices/instances/cloud'
+import { resetDataSentinel } from 'uiSrc/slices/instances/sentinel'
+import PageHeader from './PageHeader'
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: jest.fn,
+  }),
+}))
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('PageHeader', () => {
+  it('should render', () => {
+    expect(render(<PageHeader title="Page" />)).toBeTruthy()
+  })
+
+  it('should render proper components', () => {
+    render(<PageHeader title="Page" subtitle="subtitle" />)
+
+    expect(screen.getByTestId('page-title')).toHaveTextContent('Page')
+    expect(screen.getByTestId('page-subtitle')).toHaveTextContent('subtitle')
+  })
+
+  it('should call proper actions after click logo', () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+
+    render(<PageHeader title="Page" subtitle="subtitle" />)
+
+    fireEvent.click(screen.getByTestId('redis-logo-home'))
+
+    expect(store.getActions()).toEqual([
+      resetDataRedisCluster(),
+      resetDataRedisCloud(),
+      resetDataSentinel(),
+    ])
+
+    expect(pushMock).toBeCalledWith('/')
+    pushMock.mockRestore()
+  })
+
+  it('should render custom component instead of logo', () => {
+    render(<PageHeader title="Page" logo={(<div data-testid="custom-logo" />)} />)
+
+    expect(screen.getByTestId('custom-logo')).toBeInTheDocument()
+    expect(screen.queryByTestId('redis-logo-home')).not.toBeInTheDocument()
+  })
+})

redisinsight/ui/src/components/page-header/PageHeader.tsx

@@ -9,7 +9,6 @@ import { resetDataRedisCloud } from 'uiSrc/slices/instances/cloud'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { resetDataRedisCluster } from 'uiSrc/slices/instances/cluster'
 import { resetDataSentinel } from 'uiSrc/slices/instances/sentinel'
-import { CapabilityPromotion } from 'uiSrc/pages/home/components/capability-promotion'
 
 import darkLogo from 'uiSrc/assets/img/dark_logo.svg'
 import lightLogo from 'uiSrc/assets/img/light_logo.svg'
@@ -45,14 +44,13 @@ const PageHeader = (props: Props) => {
     <div className={cx(styles.pageHeader, className)}>
       <div className={styles.pageHeaderTop}>
         <div>
-          <EuiTitle size="s" className={styles.title}>
+          <EuiTitle size="s" className={styles.title} data-testid="page-title">
             <h1>
               <b>{title}</b>
             </h1>
           </EuiTitle>
-          {subtitle ? <span>{subtitle}</span> : ''}
+          {subtitle ? <span data-testid="page-subtitle">{subtitle}</span> : ''}
         </div>
-        <CapabilityPromotion wrapperClassName={cx(styles.section, styles.capabilityPromotion)} />
         {logo || (
           <div className={styles.pageHeaderLogo}>
             <EuiButtonEmpty
@@ -62,6 +60,7 @@ const PageHeader = (props: Props) => {
               className={styles.logo}
               tabIndex={0}
               iconType={theme === Theme.Dark ? darkLogo : lightLogo}
+              data-testid="redis-logo-home"
             />
           </div>
         )}

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -33,6 +33,7 @@ import InsightsTrigger from 'uiSrc/components/insights-trigger'
 import DatabasesList from './components/databases-list-component'
 import WelcomeComponent from './components/welcome-component'
 import HomeHeader from './components/home-header'
+import { CapabilityPromotion } from './components/capability-promotion'
 
 import './styles.scss'
 import styles from './styles.module.scss'
@@ -223,7 +224,10 @@ const HomePage = () => {
         title="My Redis databases"
         className={styles.pageHeader}
         logo={(
-          <InsightsTrigger source="home page" />
+          <>
+            <CapabilityPromotion wrapperClassName={cx(styles.section, styles.capabilityPromotion)} />
+            <InsightsTrigger source="home page" />
+          </>
         )}
       />
       <div className={styles.pageWrapper}>

redisinsight/ui/src/utils/formatters/valueFormatters.tsx

@@ -108,7 +108,7 @@ const formattingBuffer = (
       try {
         const vector = Array.from(bufferToFloat32Array(reply.data))
         const value = JSONBigInt.stringify(vector)
-        return JSONViewer({ value, ...props })
+        return JSONViewer({ value, useNativeBigInt: false, ...props })
       } catch (e) {
         return { value: bufferToUTF8(reply), isValid: false }
       }
@@ -117,8 +117,7 @@ const formattingBuffer = (
       try {
         const vector = Array.from(bufferToFloat64Array(reply.data))
         const value = JSONBigInt.stringify(vector)
-
-        return JSONViewer({ value, ...props })
+        return JSONViewer({ value, useNativeBigInt: false, ...props })
       } catch (e) {
         return { value: bufferToUTF8(reply), isValid: false }
       }