Fe/bugfix/ri 7545 fix stream layout

redisinsight/ui/src/components/base/inputs/ComposedInput.tsx

@@ -0,0 +1,19 @@
+import React, { ComponentProps } from 'react'
+
+import { Input } from '@redis-ui/components'
+
+export type ComposedInputProps = ComponentProps<typeof Input> & {
+  before?: JSX.Element
+  after?: JSX.Element
+}
+
+export default function ComposedInput(props: ComposedInputProps) {
+  const { before, after, placeholder, ...inputProps } = props
+  return (
+    <Input.Compose {...inputProps}>
+      {before}
+      <Input.Tag placeholder={placeholder} />
+      {after}
+    </Input.Compose>
+  )
+}

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

@@ -3,4 +3,5 @@ export { default as SearchInput } from './SearchInput'
 export { default as NumericInput } from './NumericInput'
 export { default as SwitchInput } from './SwitchInput'
 export { default as TextArea } from './TextArea'
-export { default as TextInput } from './TextInput'  
+export { default as TextInput } from './TextInput'
+export { default as ComposedInput } from './ComposedInput'

redisinsight/ui/src/components/base/tooltip/RITooltip.tsx

@@ -13,7 +13,7 @@ export interface RiTooltipProps
 }
 
 const StyledTooltip = styled(Tooltip)`
-  word-break: break-all;
+  word-break: break-word;
 `
 
 export const RiTooltip = ({

redisinsight/ui/src/components/confirmation-popover/ConfirmationPopover.tsx

@@ -5,7 +5,7 @@ import { Col, Row } from 'uiSrc/components/base/layout/flex'
 import { Text, Title } from 'uiSrc/components/base/text'
 
 const PopoverContentWrapper = styled(Col)`
-  word-break: break-all;
+  word-break: break-word;
   max-width: 300px;
 `
 
@@ -26,7 +26,7 @@ const ConfirmationPopover = (props: ConfirmationPopoverProps) => {
         {title && <Title size="S">{title}</Title>}
         {message && <Text size="m">{message}</Text>}
         {appendInfo}
-        <Row>{confirmButton}</Row>
+        <Row justify="end">{confirmButton}</Row>
       </PopoverContentWrapper>
     </RiPopover>
   )

redisinsight/ui/src/components/range-filter/RangeFilter.tsx

@@ -1,8 +1,41 @@
 import React, { useCallback, useState, useEffect, useRef } from 'react'
 import cx from 'classnames'
+import styled from 'styled-components'
 
 import { FormatedDate } from '../formated-date'
 import styles from './styles.module.scss'
+import { Theme } from 'uiSrc/components/base/theme/types'
+
+const SliderRange = styled.div<
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+>`
+  background-color: ${({ theme }: { theme: Theme }) =>
+    theme.semantic.color.background.primary400};
+  height: 1px;
+  z-index: 2;
+  transform: translateY(2px);
+
+  &:before {
+    content: '';
+    width: 1px;
+    height: 6px;
+    position: absolute;
+    top: -5px;
+    left: -1px;
+    background-color: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.background.primary400};
+  }
+
+  &:after {
+    content: '';
+    width: 1px;
+    height: 6px;
+    position: absolute;
+    right: -1px;
+    background-color: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.background.primary400};
+  }
+`
 
 const buttonString = 'Reset Filter'
 
@@ -130,7 +163,7 @@ const RangeFilter = (props: Props) => {
   if (start === end) {
     return (
       <div data-testid="mock-fill-range" className={styles.rangeWrapper}>
-        <div className={cx(styles.sliderRange, styles.mockRange)}>
+        <SliderRange className={cx(styles.sliderRange, styles.mockRange)}>
           <div
             className={styles.sliderLeftValue}
             data-testid="range-left-timestamp"
@@ -143,7 +176,7 @@ const RangeFilter = (props: Props) => {
           >
             <FormatedDate date={end?.toString()} />
           </div>
-        </div>
+        </SliderRange>
       </div>
     )
   }
@@ -177,7 +210,7 @@ const RangeFilter = (props: Props) => {
         />
         <div className={styles.slider}>
           <div className={styles.sliderTrack} />
-          <div
+          <SliderRange
             ref={range}
             className={cx(styles.sliderRange, {
               [styles.leftPosition]: max - startVal < (max - min) / 2,
@@ -200,7 +233,7 @@ const RangeFilter = (props: Props) => {
             >
               <FormatedDate date={endVal?.toString()} />
             </div>
-          </div>
+          </SliderRange>
         </div>
       </div>
       {(start !== min || end !== max) && (

redisinsight/ui/src/components/range-filter/styles.module.scss

@@ -37,32 +37,6 @@
   z-index: 1;
 }
 
-.rangeWrapper .sliderRange {
-  height: 1px;
-  background-color: var(--euiColorPrimary);
-  z-index: 2;
-  transform: translateY(2px);
-
-  &:before {
-    content: '';
-    width: 1px;
-    height: 6px;
-    position: absolute;
-    top: -5px;
-    left: -1px;
-    background-color: var(--euiColorPrimary);
-  }
-
-  &:after {
-    content: '';
-    width: 1px;
-    height: 6px;
-    position: absolute;
-    right: -1px;
-    background-color: var(--euiColorPrimary);
-  }
-}
-
 .rangeWrapper:hover .sliderRange:not(.disabled) {
   height: 5px;
   transform: translateY(0px);
@@ -92,14 +66,6 @@
   margin-top: -25px;
 }
 
-.rangeWrapper:hover .sliderLeftValue:not(.disabled) {
-  margin-top: -23px;
-}
-
-.rangeWrapper:hover .sliderRightValue:not(.disabled) {
-  margin-top: 10px;
-}
-
 .sliderLeftValue.leftPosition {
   transform: translateX(-100%);
 }

redisinsight/ui/src/components/virtual-grid/VirtualGrid.tsx

@@ -11,6 +11,7 @@
 import { Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { ProgressBarLoader } from 'uiSrc/components/base/display'
+import { Row } from 'uiSrc/components/base/layout/flex'
 import { IProps } from './interfaces'
 import { getColumnWidth, useInnerElementType } from './utils'
 
@@ -202,19 +203,22 @@
                     className={styles.gridHeaderItemSortable}
                     onClick={() => changeSorting(column.id)}
                   >
-                    {content.render
-                      ? content.render(content)
-                      : renderNotEmptyContent(content.label)}
-                    <span style={{ paddingLeft: 0 }}>
-                      <RiIcon
-                        style={{ marginLeft: '4px' }}
-                        type={
-                          sortedColumn?.order === SortOrder.DESC
-                            ? 'ArrowDownIcon'
-                            : 'ArrowUpIcon'
-                        }
-                      />
-                    </span>
+                    <Row align="center">
+                      {content.render
+                        ? content.render(content)
+                        : renderNotEmptyContent(content.label)}
+                      <span style={{ paddingLeft: 0 }}>
+                        <RiIcon
+                          size="S"
+                          style={{ marginLeft: '4px' }}
+                          type={
+                            sortedColumn?.order === SortOrder.DESC
+                              ? 'ArrowDownIcon'
+                              : 'ArrowUpIcon'
+                          }
+                        />
+                      </span>
+                    </Row>
                   </button>
                 )}
                 {!content?.sortable &&

redisinsight/ui/src/constants/texts.tsx

@@ -50,11 +50,16 @@ export const ScanNoResultsFoundText = (
 
 export const lastDeliveredIDTooltipText = (
   <>
-    Specify the ID of the last delivered entry in the stream from the new
-    group's perspective.
+    <Text size="s">
+      Specify the ID of the last delivered entry in the stream from the new
+      group's perspective.
+    </Text>
     <Spacer size="xs" />
-    Otherwise, <b>$</b> represents the ID of the last entry in the stream,&nbsp;
-    <b>0</b> fetches the entire stream from the beginning.
+    <Text size="s">
+      Otherwise, <b>$</b> represents the ID of the last entry in the
+      stream,&nbsp;
+      <b>0</b> fetches the entire stream from the beginning.
+    </Text>
   </>
 )
 

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

@@ -36,9 +36,3 @@
     display: flex;
   }
 }
-
-.editBtn {
-  position: absolute;
-  top: 20px;
-  right: 0;
-}

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/groups-view/GroupsViewWrapper.tsx

@@ -37,7 +37,8 @@ import { FormatedDate, RiTooltip } from 'uiSrc/components'
 import { Text } from 'uiSrc/components/base/text'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { TextInput } from 'uiSrc/components/base/inputs'
+import { ComposedInput } from 'uiSrc/components/base/inputs'
+
 import {
   ConsumerDto,
   ConsumerGroupDto,
@@ -371,19 +372,8 @@ const GroupsViewWrapper = (props: Props) => {
             delay={500}
             editBtnClassName={styles.editBtn}
           >
-            <FormField
-              additionalText={
-                <RiTooltip
-                    anchorClassName="inputAppendIcon"
-                    position="left"
-                    title="Enter Valid ID, 0 or $"
-                    content={lastDeliveredIDTooltipText}
-                  >
-                    <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
-                  </RiTooltip>
-              }
-            >
-              <TextInput
+            <FormField>
+              <ComposedInput
                 name="id"
                 id="id"
                 placeholder="ID*"
@@ -396,6 +386,16 @@ const GroupsViewWrapper = (props: Props) => {
                 style={{ width: 240 }}
                 autoComplete="off"
                 data-testid="last-id-field"
+                after={
+                  <RiTooltip
+                    anchorClassName="inputAppendIcon"
+                    position="left"
+                    title="Enter Valid ID, 0 or $"
+                    content={lastDeliveredIDTooltipText}
+                  >
+                    <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
+                  </RiTooltip>
+                }
               />
               {!showIdError && (
                 <span className={styles.idText} data-testid="id-help-text">

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

@@ -1,13 +1,11 @@
 import React from 'react'
 
-import { Text } from 'uiSrc/components/base/text'
 import {
   DestructiveButton,
   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'
+import ConfirmationPopover from 'uiSrc/components/confirmation-popover'
 
 export interface Props {
   id: string
@@ -26,47 +24,39 @@
     acknowledge = () => {},
   } = props
   return (
-    <RiPopover
+    <ConfirmationPopover
       key={id}
+      title={id}
+      message="will be acknowledged and removed from the pending messages list"
       anchorPosition="leftCenter"
       ownFocus
       isOpen={isOpen}
       closePopover={closePopover}
       panelPaddingSize="m"
       anchorClassName="ackMessagePopover"
-      panelClassName={styles.popoverWrapper}
+      confirmButton={
+        <DestructiveButton
+          size="s"
+          onClick={() => acknowledge(id)}
+          data-testid="acknowledge-submit"
+        >
+          Acknowledge
+        </DestructiveButton>
+      }
       button={
         <>
           <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}>
-        <Text size="m">
-          <b>{id}</b>
-          <br />
-          will be acknowledged and removed from the pending messages list
-        </Text>
-        <div className={styles.popoverFooter}>
-          <DestructiveButton
-            size="s"
-            onClick={() => acknowledge(id)}
-            data-testid="acknowledge-submit"
-          >
-            Acknowledge
-          </DestructiveButton>
-        </div>
-      </div>
-    </RiPopover>
+    />
   )
 }