fix BulkDeleteSummaryButton.spec.tsx test, added test to spacer.spec.tsx, small changes to SentinelDatabases.tsx

Author: pd-redis

redisinsight/ui/src/components/base/icons/Icon.tsx

@@ -3,11 +3,12 @@ import { useTheme } from '@redis-ui/styles'
 import cx from 'classnames'
 import { IconSizeType } from '@redis-ui/icons'
 import { MonochromeIconProps } from 'uiSrc/components/base/icons'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 type BaseIconProps = Omit<MonochromeIconProps, 'color' | 'size'> & {
   icon: React.ComponentType<any>
   color?:
-    | keyof ReturnType<typeof useTheme>['semantic']['color']['icon']
+    | keyof Theme['semantic']['color']['icon']
     | 'currentColor'
     | (string & {})
   size?: IconSizeType | null
@@ -30,7 +31,7 @@ const sizesMap = {
  * @returns A boolean indicating if the color is valid and a type predicate
  */
 function isValidIconColor(
-  theme: ReturnType<typeof useTheme>,
+  theme: Theme,
   color: string | number | symbol,
 ): color is keyof typeof theme.semantic.color.icon {
   return color in theme.semantic.color.icon

redisinsight/ui/src/components/base/layout/spacer/spacer.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { render } from 'uiSrc/utils/test-utils'
+import { Spacer } from './Spacer'
+import { SpacerProps } from './spacer.styles'
+
+const sizeToValue = {
+  xs: '0.2rem',
+  s: '0.4rem',
+  m: '0.8rem',
+  l: '1.6rem',
+  xl: '2rem',
+  xxl: '2.4rem',
+} as const
+describe('Spacer', () => {
+  test('is rendered', () => {
+    const { container } = render(<Spacer />)
+
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  describe('Size', () => {
+    Object.entries(sizeToValue).forEach(([size, value]) => {
+      it(`size '${size}' is rendered`, () => {
+        const { container } = render(
+          <Spacer size={size as SpacerProps['size']} />,
+        )
+        expect(container.firstChild).toHaveStyle(`height: ${value}`)
+      })
+    })
+  })
+
+  describe('Direction', () => {
+    it(`width is rendered for Horizontal direction`, () => {
+      const { container } = render(<Spacer />)
+      expect(container.firstChild).toHaveStyle(`height: 1.6rem`)
+      expect(container.firstChild).not.toHaveStyle(`width: 1.6rem`)
+    })
+    it(`width is rendered for explicit Horizontal direction`, () => {
+      const { container } = render(<Spacer direction="horizontal" />)
+      expect(container.firstChild).toHaveStyle(`width: 1.6rem`)
+      expect(container.firstChild).not.toHaveStyle(`height: 1.6rem`)
+    })
+    it(`height is rendered for Vertical direction`, () => {
+      const { container } = render(<Spacer direction="vertical" />)
+      expect(container.firstChild).toHaveStyle('height: 1.6rem')
+      expect(container.firstChild).not.toHaveStyle(`width: 1.6rem`)
+    })
+  })
+})

redisinsight/ui/src/components/base/link/UserProfileLink.tsx

@@ -1,11 +1,11 @@
-import styled from "styled-components"
-import { useTheme } from "@redis-ui/styles"
-import { Link } from "./Link"
+import styled from 'styled-components'
+import { Link } from './Link'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 export const UserProfileLink = styled(Link)`
   padding: 8px 12px !important;
   width: 100%;
-  color: ${({ theme }: { theme: ReturnType<typeof useTheme> }) =>
+  color: ${({ theme }: { theme: Theme }) =>
     theme.semantic.color.text.informative400} !important;
   text-decoration: none !important;
 

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx

@@ -9,10 +9,11 @@ import { AutodiscoveryPageTemplate } from 'uiSrc/templates'
 import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import {
   DestructiveButton,
+  EmptyButton,
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { RiIcon } from 'uiSrc/components/base/icons'
+import { ArrowLeftIcon, RiIcon } from 'uiSrc/components/base/icons'
 import { SearchInput } from 'uiSrc/components/base/inputs'
 import { Text } from 'uiSrc/components/base/text'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
@@ -66,6 +67,7 @@ const SentinelDatabases = ({
   const [rowSelection, setRowSelection] = useState<
     Record<NonNullable<ModifiedSentinelMaster['id']>, boolean>
   >({})
+
   useEffect(() => {
     setRowSelection(
       selection.reduce(
@@ -203,30 +205,45 @@ const SentinelDatabases = ({
   return (
     <AutodiscoveryPageTemplate>
       <DatabaseContainer justify="start">
-        <PageTitle data-testid="title">
-          Auto-Discover Redis Sentinel Primary Groups
-        </PageTitle>
-
-        <Row justify="between" align="center" grow={false}>
-          <FlexItem grow>
-            <PageSubTitle>
-              Redis Sentinel instance found. <br />
-              Here is a list of primary groups your Sentinel instance is
-              managing. Select the primary group(s) you want to add:
-            </PageSubTitle>
-          </FlexItem>
-          <SearchContainer>
-            <SearchForm>
-              <SearchInput
-                placeholder="Search..."
-                onChange={onQueryChange}
-                aria-label="Search"
-                data-testid="search"
-              />
-            </SearchForm>
-          </SearchContainer>
+        <Row align="center" justify="between" grow={false}>
+          <Col align="start" justify="start">
+            <EmptyButton
+              icon={ArrowLeftIcon}
+              onClick={onBack}
+              className="btn-cancel btn-back"
+              data-testid="btn-back-adding"
+            >
+              Add databases
+            </EmptyButton>
+            <Spacer size="s" />
+            <PageTitle data-testid="title">
+              Auto-Discover Redis Sentinel Primary Groups
+            </PageTitle>
+            <Spacer size="m" />
+            {items.length > 0 && (
+              <FlexItem grow>
+                <PageSubTitle>
+                  Redis Sentinel instance found. <br />
+                  Here is a list of primary groups your Sentinel instance is
+                  managing. Select the primary group(s) you want to add:
+                </PageSubTitle>
+              </FlexItem>
+            )}
+          </Col>
+          <Row justify="end" gap="s" grow={false}>
+            <SearchContainer>
+              <SearchForm>
+                <SearchInput
+                  placeholder="Search..."
+                  onChange={onQueryChange}
+                  aria-label="Search"
+                  data-testid="search"
+                />
+              </SearchForm>
+            </SearchContainer>
+          </Row>
         </Row>
-        <Spacer size="l" />
+        <Spacer size="m" />
         <DatabaseWrapper>
           <Table
             rowSelectionMode="multiple"
@@ -243,6 +260,13 @@ const SentinelDatabases = ({
               },
             ]}
             stripedRows
+            emptyState={() => (
+              <Col centered full>
+                <FlexItem padding={13}>
+                  <Text size="L">{message}</Text>
+                </FlexItem>
+              </Col>
+            )}
           />
           {!items.length && message !== notMastersMsg && (
             <>
@@ -258,14 +282,7 @@ const SentinelDatabases = ({
         </DatabaseWrapper>
       </DatabaseContainer>
       <Footer>
-        <Row justify="between">
-          <SecondaryButton
-            onClick={onBack}
-            className="btn-cancel btn-back"
-            data-testid="btn-back-to-adding"
-          >
-            Back to adding databases
-          </SecondaryButton>
+        <Row justify="end">
           <Row gap="m" grow={false}>
             <CancelButton isPopoverOpen={isPopoverOpen} />
             <SubmitButton onClick={handleSubmit} />

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteSummaryButton/BulkDeleteSummaryButton.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
 import BulkDeleteSummaryButton from './BulkDeleteSummaryButton'
+import { render, screen } from 'uiSrc/utils/test-utils'
 
 const readBlobContent = async (blob: Blob): Promise<string> => {
   return blob.text()