Fe/feature/ri 7252 rdi broken layout for the list of jobs

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx

@@ -5,6 +5,7 @@ import { Theme } from 'uiSrc/components/base/theme/types'
 import { Props } from 'uiSrc/components/inline-item-editor/InlineItemEditor'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons'
+import { TextInput } from '../base/inputs'
 
 interface ContainerProps {
   className?: string
@@ -48,6 +49,8 @@ export const IIEContainer = React.forwardRef<
 type ActionsContainerProps = React.ComponentProps<typeof Row> & {
   $position?: Props['controlsPosition']
   $design?: Props['controlsDesign']
+  $width?: string
+  $height?: string
 }
 
 export const DeclineButton = styled(IconButton).attrs({
@@ -144,11 +147,28 @@ export const ActionsContainer = styled(Row)<ActionsContainerProps>`
   position: absolute;
   background-color: ${({ theme }: { theme: Theme }) =>
     theme.semantic.color.background.primary200};
-  width: 80px;
-  height: 33px;
+  width: ${({ $width }) => $width || '80px'};
+  height: ${({ $height }) => $height || '33px'};
   padding: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
 
   z-index: 3;
   ${({ $position }) => positions[$position || 'inside']}
   ${({ $design }) => designs[$design || 'default']}
 `
+
+
+export const StyledTextInput = styled(TextInput)<{
+  $width?: string
+  $height?: string
+}>`
+  width: ${({ $width }) => $width || 'auto'};
+  height: ${({ $height }) => $height || 'auto'};
+  max-height: ${({ $height }) => $height || 'auto'};
+  min-height: ${({ $height }) => $height || 'auto'};
+
+  // Target the actual input element inside
+  input {
+    width: 100%;
+    height: ${({ $height }) => $height || 'auto'};  
+  }  
+`

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx

@@ -1,8 +1,7 @@
-import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react'
+import React, { Ref, useEffect, useRef, useState } from 'react'
 import cx from 'classnames'
 
 import { useTheme } from '@redis-ui/styles'
-import { EuiFieldText } from '@elastic/eui'
 
 import * as keys from 'uiSrc/constants/keys'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
@@ -19,10 +18,9 @@ import {
   ApplyButton,
   DeclineButton,
   IIEContainer,
+  StyledTextInput,
 } from './InlineItemEditor.styles'
 
-import { TextInput } from 'uiSrc/components/base/inputs'
-
 
 import styles from './styles.module.scss'
 
@@ -61,6 +59,20 @@ export interface Props {
   approveByValidation?: (value: string) => boolean
   approveText?: { title: string; text: string }
   textFiledClassName?: string
+  styles?: {
+    inputContainer?: {
+      width?: string,
+      height?: string,
+    }
+    input?: {
+      width?: string,
+      height?: string,
+    }
+    actionsContainer?: {
+      width?: string
+      height?: string
+    }
+  }
 }
 
 const InlineItemEditor = (props: Props) => {
@@ -94,6 +106,7 @@ const InlineItemEditor = (props: Props) => {
     approveByValidation,
     approveText,
     textFiledClassName,
+    styles: customStyles,
   } = props
   const containerEl: Ref<HTMLDivElement> = useRef(null)
   const [value, setValue] = useState<string>(initialValue)
@@ -210,11 +223,16 @@ const InlineItemEditor = (props: Props) => {
                 onSubmit={(e: unknown) =>
                   handleFormSubmit(e as React.MouseEvent<HTMLElement>)
                 }
+                style={{
+                  ...customStyles?.inputContainer
+                }}
               >
                 <FlexItem grow>
                   {children || (
                     <>
-                      <TextInput
+                      <StyledTextInput
+                        $width={customStyles?.input?.width}
+                        $height={customStyles?.input?.height}
                         name={fieldName}
                         id={fieldName}
                         className={cx(styles.field, textFiledClassName)}
@@ -239,6 +257,8 @@ const InlineItemEditor = (props: Props) => {
                   gap="m"
                   $position={controlsPosition}
                   $design={controlsDesign}
+                  $width={customStyles?.actionsContainer?.width}
+                  $height={customStyles?.actionsContainer?.height}
                   grow={false}
                   className={cx(
                     'inlineItemEditor__controls',

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx

@@ -96,6 +96,17 @@ const RejsonScalar = (props: JSONScalarProps) => {
               {editing ? (
                 <div className="jsonItemEditor">
                   <InlineItemEditor
+                    styles={{
+                      inputContainer: {
+                        height: `24px`,
+                      },
+                      input: {
+                        height: `24px !important`
+                      },
+                      actionsContainer: {
+                        height: `24px`
+                      }
+                    }}
                     initialValue={changedValue}
                     controlsPosition="right"
                     placeholder="Enter JSON value"

redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-tree/JobsTree.tsx

@@ -5,7 +5,6 @@ import cx from 'classnames'
 import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { isNumber } from 'lodash'
-
 import InlineItemEditor from 'uiSrc/components/inline-item-editor'
 import { PageNames } from 'uiSrc/constants'
 import ConfirmationPopover from 'uiSrc/pages/rdi/components/confirmation-popover/ConfirmationPopover'
@@ -69,6 +68,8 @@ const validateJobName = (
   return undefined
 }
 
+
+
 const JobsTree = (props: IProps) => {
   const { onSelectedTab, path, rdiInstanceId, changes = {} } = props
 
@@ -254,6 +255,11 @@ const JobsTree = (props: IProps) => {
         textFiledClassName={styles.input}
         viewChildrenMode={false}
         disableEmpty
+        styles={{
+          actionsContainer: {
+            width: '64px'
+          }
+        }}
       />
     </FlexItem>
   )