RI-7224 - in messages - ACK / CLAIM buttons need space between (#4769)

Author: Kristiyan Ivanov

redisinsight/ui/src/components/base/layout/horizontal-spacer/HorizontalSpacer.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+import { HorizontalSpacer } from './horizontal-spacer'
+
+describe('HorizontalSpacer', () => {
+  it('should render with different sizes correctly', () => {
+    const sizes = ['xs', 's', 'm', 'l', 'xl', 'xxl'] as const
+    
+    sizes.forEach(size => {
+      const { container } = render(<HorizontalSpacer size={size} />)
+      const spacer = container.querySelector('.RI-horizontal-spacer') as HTMLElement
+      
+      if (size === 'xl') {
+        expect(spacer).toHaveStyle('width: calc(var(--base) * 2.25)')
+      } else {
+        expect(spacer).toHaveStyle(`width: var(--size-${size})`)
+      }
+    })
+  })
+
+  it('should render children when provided', () => {
+    const { getByText } = render(
+      <HorizontalSpacer size="s">
+        <span>Test content</span>
+      </HorizontalSpacer>
+    )
+    const content = getByText('Test content')
+    expect(content).toBeInTheDocument()
+    expect(content.parentElement).toHaveStyle('width: var(--size-s)')
+  })
+
+  it('should apply custom className', () => {
+    const { container } = render(<HorizontalSpacer className="custom-class" />)
+    const spacer = container.querySelector('.RI-horizontal-spacer') as HTMLElement
+    
+    expect(spacer).toHaveClass('RI-horizontal-spacer')
+    expect(spacer).toHaveClass('custom-class')
+  })
+
+  it('should pass through custom props', () => {
+    const { container } = render(
+      <HorizontalSpacer data-testid="my-spacer" id="spacer-id" />
+    )
+    const spacer = container.querySelector('.RI-horizontal-spacer') as HTMLElement
+    
+    expect(spacer).toHaveAttribute('data-testid', 'my-spacer')
+    expect(spacer).toHaveAttribute('id', 'spacer-id')
+  })
+}) 

redisinsight/ui/src/components/base/layout/horizontal-spacer/horizontal-spacer.styles.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from 'react'
+import styled from 'styled-components'
+import { CommonProps } from 'uiSrc/components/base/theme/types'
+
+export const HorizontalSpacerSizes = ['xs', 's', 'm', 'l', 'xl', 'xxl'] as const
+export type HorizontalSpacerSize = (typeof HorizontalSpacerSizes)[number]
+export type HorizontalSpacerProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode
+    size?: HorizontalSpacerSize
+  }
+
+export const horizontalSpacerStyles = {
+  xs: 'var(--size-xs)',
+  s: 'var(--size-s)',
+  m: 'var(--size-m)',
+  l: 'var(--size-l)',
+  xl: 'calc(var(--base) * 2.25)',
+  xxl: 'var(--size-xxl)',
+}
+
+export const StyledHorizontalSpacer = styled.div<HorizontalSpacerProps>`
+  flex-shrink: 0;
+  width: ${({ size = 'l' }) => horizontalSpacerStyles[size]};
+  display: inline-block;
+` 

redisinsight/ui/src/components/base/layout/horizontal-spacer/horizontal-spacer.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import cx from 'classnames'
+import {
+  HorizontalSpacerProps,
+  StyledHorizontalSpacer,
+} from './horizontal-spacer.styles'
+
+export const HorizontalSpacer = ({ className, children, ...rest }: HorizontalSpacerProps) => (
+  <StyledHorizontalSpacer {...rest} className={cx('RI-horizontal-spacer', className)}>
+    {children}
+  </StyledHorizontalSpacer>
+) 

redisinsight/ui/src/components/base/layout/horizontal-spacer/index.ts

@@ -0,0 +1,2 @@
+export { HorizontalSpacer } from './horizontal-spacer'
+export type { HorizontalSpacerSize, HorizontalSpacerProps } from './horizontal-spacer.styles' 

redisinsight/ui/src/components/base/layout/index.ts

@@ -6,6 +6,8 @@ import ResizablePanelHandle from './resize/handle/ResizablePanelHandle'
 
 
 export * from './card'
+export * from './horizontal-spacer'
+export * from './spacer'
 export {
   HorizontalRule,
   LoadingContent,

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageAckPopover/MessageAckPopover.tsx

@@ -6,6 +6,7 @@ import {
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
 import { RiPopover } from 'uiSrc/components/base'
+import { HorizontalSpacer } from 'uiSrc/components/base/layout'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -35,15 +36,18 @@ const AckPopover = (props: Props) => {
       anchorClassName="ackMessagePopover"
       panelClassName={styles.popoverWrapper}
       button={
-        <SecondaryButton
-          size="s"
-          aria-label="Acknowledge pending message"
-          onClick={showPopover}
-          className={styles.ackBtn}
-          data-testid="acknowledge-btn"
-        >
-          ACK
-        </SecondaryButton>
+        <>
+          <SecondaryButton
+            size="s"
+            aria-label="Acknowledge pending message"
+            onClick={showPopover}
+            className={styles.ackBtn}
+            data-testid="acknowledge-btn"
+          >
+            ACK
+          </SecondaryButton>
+          <HorizontalSpacer size="s" />
+        </>
       }
     >
       <div className={styles.popover}>

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageAckPopover/styles.module.scss

@@ -26,11 +26,4 @@
   margin-top: 12px;
 }
 
-.ackBtn:global(.euiButton.euiButton--secondary) {
-  min-width: initial !important;
-  color: var(--textColorShade) !important;
-}
 
-.ackBtn :global(.euiButtonContent .euiButton__text) {
-  font: normal normal normal 12px/18px Graphik, sans-serif !important;
-}