fix errors after main merge

Author: pd-redis

redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import { render, screen, userEvent } from 'uiSrc/utils/test-utils'
 import ConsentOption from './ConsentOption'
 import { IConsent } from '../ConsentsSettings'
 
@@ -39,10 +39,10 @@ describe('ConsentOption', () => {
     expect(screen.getByTestId('switch-option-analytics')).toBeInTheDocument()
   })
 
-  it('should call onChangeAgreement when switch is clicked', () => {
+  it('should call onChangeAgreement when switch is clicked', async () => {
     render(<ConsentOption {...defaultProps} />)
 
-    fireEvent.click(screen.getByTestId('switch-option-analytics'))
+    await userEvent.click(screen.getByTestId('switch-option-analytics'))
 
     expect(mockOnChangeAgreement).toHaveBeenCalledWith(true, 'analytics')
   })
@@ -56,7 +56,9 @@ describe('ConsentOption', () => {
 
     render(<ConsentOption {...defaultProps} consent={consentWithDescription} />)
 
-    expect(screen.getByText('Help us improve Redis Insight by sharing usage data.')).toBeInTheDocument()
+    expect(
+      screen.getByText('Help us improve Redis Insight by sharing usage data.'),
+    ).toBeInTheDocument()
     expect(screen.queryByText('Privacy Policy')).not.toBeInTheDocument()
   })
 
@@ -75,7 +77,7 @@ describe('ConsentOption', () => {
     const privacyPolicyLink = screen.getByText('Privacy Policy')
     expect(privacyPolicyLink.closest('a')).toHaveAttribute(
       'href',
-      'https://redis.io/legal/privacy-policy/?utm_source=redisinsight&utm_medium=app&utm_campaign=telemetry'
+      'https://redis.io/legal/privacy-policy/?utm_source=redisinsight&utm_medium=app&utm_campaign=telemetry',
     )
   })
 
@@ -86,7 +88,13 @@ describe('ConsentOption', () => {
       linkToPrivacyPolicy: true,
     }
 
-    render(<ConsentOption {...defaultProps} consent={consentWithPrivacyLink} isSettingsPage />)
+    render(
+      <ConsentOption
+        {...defaultProps}
+        consent={consentWithPrivacyLink}
+        isSettingsPage
+      />,
+    )
 
     // Verify that the Privacy Policy link is rendered
     expect(screen.getByText('Privacy Policy')).toBeInTheDocument()
@@ -99,9 +107,17 @@ describe('ConsentOption', () => {
       linkToPrivacyPolicy: false,
     }
 
-    render(<ConsentOption {...defaultProps} consent={consentWithoutPrivacyLink} isSettingsPage />)
+    render(
+      <ConsentOption
+        {...defaultProps}
+        consent={consentWithoutPrivacyLink}
+        isSettingsPage
+      />,
+    )
 
-    expect(screen.getByText('Help us improve Redis Insight by sharing usage data.')).toBeInTheDocument()
+    expect(
+      screen.getByText('Help us improve Redis Insight by sharing usage data.'),
+    ).toBeInTheDocument()
     expect(screen.queryByText('Privacy Policy')).not.toBeInTheDocument()
   })
 
@@ -123,4 +139,4 @@ describe('ConsentOption', () => {
     const switchElement = screen.getByTestId('switch-option-analytics')
     expect(switchElement).toBeChecked()
   })
-})
+})

redisinsight/ui/src/pages/browser/components/browser-right-panel/BrowserRightPanel.tsx

@@ -98,7 +98,7 @@ const BrowserRightPanel = (props: Props) => {
   }
 
   const handleEditKey = (
-    key: RedisResponseBuffer,
+    _key: RedisResponseBuffer,
     newKey: RedisResponseBuffer,
   ) => {
     setSelectedKey(newKey)

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionSummary/BulkActionSummary.tsx

@@ -19,7 +19,7 @@ export interface Props {
 const SummaryContainer = styled(Row)`
   padding-top: 18px;
 `
-const SummaryValue = styled(EuiText)`
+const SummaryValue = styled(Text)`
   font-size: 18px !important;
   line-height: 24px;
   font-weight: 500 !important;
@@ -36,27 +36,21 @@ const BulkActionSummary = ({
   <SummaryContainer data-testid={testId} gap="xl">
     <FlexItem>
       <SummaryValue>{numberWithSpaces(processed)}</SummaryValue>
-      <Text color="subdued" className={styles.summaryLabel}>
+      <SummaryValue color="subdued">
         {type === BulkActionsType.Delete ? 'Keys' : 'Commands'} Processed
-      </Text>
+      </SummaryValue>
     </FlexItem>
     <FlexItem>
       <SummaryValue>{numberWithSpaces(succeed)}</SummaryValue>
-      <Text color="subdued" className={styles.summaryLabel}>
-        Success
-      </Text>
+      <SummaryValue color="subdued">Success</SummaryValue>
     </FlexItem>
     <FlexItem>
       <SummaryValue>{numberWithSpaces(failed)}</SummaryValue>
-      <Text color="subdued" className={styles.summaryLabel}>
-        Errors
-      </Text>
+      <SummaryValue color="subdued">Errors</SummaryValue>
     </FlexItem>
     <FlexItem>
       <SummaryValue>{millisecondsFormat(duration, 'H:mm:ss.SSS')}</SummaryValue>
-      <Text color="subdued" className={styles.summaryLabel}>
-        Time Taken
-      </Text>
+      <SummaryValue color="subdued">Time Taken</SummaryValue>
     </FlexItem>
   </SummaryContainer>
 )

redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.tsx

@@ -66,7 +66,7 @@ const LoadSampleData = (props: Props) => {
         </PrimaryButton>
       }
     >
-      <Row gap="m" responsive={false}>
+      <Row gap="m" responsive={false} style={{ padding: 8 }}>
         <FlexItem>
           <EuiIcon type="alert" className={styles.popoverIcon} />
         </FlexItem>

redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/Node.tsx

@@ -13,6 +13,7 @@ import KeyRowType from 'uiSrc/pages/browser/components/key-row-type'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { RiTooltip } from 'uiSrc/components'
+import { Col, Row } from 'uiSrc/components/base/layout/flex'
 import { DeleteKeyPopover } from '../../../delete-key-popover/DeleteKeyPopover'
 import { TreeData } from '../../interfaces'
 import styles from './styles.module.scss'
@@ -111,8 +112,12 @@ const Node = ({
   }
 
   const Folder = () => (
-    <RiTooltip content={tooltipContent} position="bottom">
-      <span className={styles.anchorTooltipNode}>
+    <RiTooltip
+      content={tooltipContent}
+      position="bottom"
+      style={{ width: '100%' }}
+    >
+      <Row responsive align="center" grow className={styles.anchorTooltipNode}>
         <div className={styles.nodeName}>
           <EuiIcon
             type={isOpen ? 'arrowDown' : 'arrowRight'}
@@ -141,7 +146,7 @@ const Node = ({
             {keyCount ?? ''}
           </div>
         </div>
-      </span>
+      </Row>
     </RiTooltip>
   )
 
@@ -179,7 +184,9 @@ const Node = ({
   )
 
   const Node = (
-    <div
+    <Row
+      justify="between"
+      align="center"
       className={cx(styles.nodeContent, 'rowKey', {
         [styles.nodeContentOpen]: isOpen && !isLeaf,
       })}
@@ -192,11 +199,11 @@ const Node = ({
     >
       {!isLeaf && <Folder />}
       {isLeaf && <Leaf />}
-    </div>
+    </Row>
   )
 
   const tooltipContent = (
-    <>
+    <Col gap="m">
       <div className={styles.folderTooltipHeader}>
         <span
           className={styles.folderPattern}
@@ -210,7 +217,7 @@ const Node = ({
         )}
       </div>
       <span>{`${keyCount} key(s) (${Math.round(keyApproximate * 100) / 100}%)`}</span>
-    </>
+    </Col>
   )
 
   return (

redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/styles.module.scss

@@ -1,9 +1,6 @@
 .anchorTooltipNode {
-  width: 100%;
   height: 42px;
-  display: flex !important;
   position: relative;
-  align-items: center;
 }
 
 .nodeContainer {
@@ -19,12 +16,9 @@
 }
 
 .nodeContent {
-  display: flex;
-  justify-content: space-between;
   cursor: pointer;
   padding: 8px 16px;
   color: var(--euiTextSubduedColor) !important;
-  align-items: center;
   font:
     normal normal normal 13px/28px Graphik,
     sans-serif !important;

redisinsight/ui/src/pages/browser/modules/key-details/components/change-editor-type-button/ChangeEditorTypeButton.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 
 import { userEvent } from 'uiSrc/utils/test-utils'
-import ChangeEditorTypeButton, { ButtonMode } from './ChangeEditorTypeButton'
+import ChangeEditorTypeButton from './ChangeEditorTypeButton'
 
 const mockSwitchEditorType = jest.fn()
 let mockIsTextEditorDisabled = false
@@ -43,7 +43,11 @@ describe('ChangeEditorTypeButton', () => {
 
     await userEvent.hover(button)
     expect(
-      (await screen.findAllByText('This JSON is too large to edit'))[0],
+      (
+        await screen.findAllByText(
+          'This JSON document is too large to view or edit in full.',
+        )
+      )[0],
     ).toBeInTheDocument()
   })
 

redisinsight/ui/src/pages/browser/modules/key-details/components/change-editor-type-button/ChangeEditorTypeButton.tsx

@@ -26,3 +26,5 @@ const ChangeEditorTypeButton = () => {
 }
 
 export default ChangeEditorTypeButton
+
+export class ButtonMode {}

redisinsight/ui/src/pages/browser/modules/key-details/components/no-key-selected/NoKeySelected.tsx

@@ -44,15 +44,17 @@ export const NoKeySelected = (props: Props) => {
 
   return (
     <>
-      <RiTooltip content="Close" position="left">
-        <IconButton
-          icon={CancelSlimIcon}
-          aria-label="Close panel"
-          className={styles.closeBtn}
-          onClick={handleClosePanel}
-          data-testid="close-right-panel-btn"
-        />
-      </RiTooltip>
+      <div className={styles.closeRightPanel}>
+        <RiTooltip content="Close" position="left">
+          <IconButton
+            icon={CancelSlimIcon}
+            aria-label="Close panel"
+            className={styles.closeBtn}
+            onClick={handleClosePanel}
+            data-testid="close-right-panel-btn"
+          />
+        </RiTooltip>
+      </div>
 
       <div className={styles.placeholder}>
         <Text textAlign="center" color="subdued" size="s">