fix(ui): add spacing betwеen the key details in the header (#5037)

* fix(ui): add spacing between the key details in the header
* fix(ui): added spacing between action buttons in edit json key
* fix(ui): update ttl input placement in key details header

Author: valkirilov

redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx

@@ -172,7 +172,7 @@ const KeyDetailsHeader = ({
                 align="start"
                 justify="between"
               >
-                <Row>
+                <Row gap="l">
                   <KeyDetailsHeaderSizeLength width={width} />
                   <KeyDetailsHeaderTTL onEditTTL={handleEditTTL} />
                 </Row>

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-ttl/KeyDetailsHeaderTTL.tsx

@@ -96,12 +96,15 @@ const KeyDetailsHeaderTTL = ({ onEditTTL }: Props) => {
           <Grid
             columns={2}
             responsive={false}
-            gap="none"
+            gap="s"
             className={styles.ttlGridComponent}
             data-testid="edit-ttl-grid"
           >
             <FlexItem>
-              <Text size="s" className={styles.subtitleText}>
+              <Text
+                size="s"
+                className={cx(styles.subtitleText, styles.subtitleTextTTL)}
+              >
                 TTL:
               </Text>
             </FlexItem>
@@ -139,7 +142,7 @@ const KeyDetailsHeaderTTL = ({ onEditTTL }: Props) => {
         )}
         <Text
           size="s"
-          className={cx(styles.subtitleText, {
+          className={cx(styles.subtitleTextTTL, {
             [styles.hidden]: ttlIsEditing || ttlIsHovering,
           })}
           data-testid="key-ttl-text"

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-ttl/styles.module.scss

@@ -2,6 +2,12 @@
   padding: 6px 2px 6px 0;
 }
 
+.subtitleTextTTL {
+  height: 26px;
+  line-height: 26px;
+  padding: 0;
+}
+
 .controlsKey {
   right: 25px;
 }
@@ -21,21 +27,27 @@
 
 .ttlInput {
   min-width: 106px;
-  font-size: 13px !important;
-  height: 25px !important;
+  font-size: 12px !important;
+  height: 24px !important;
+  padding: 2px 0 0 9px !important;
 }
 
 .ttlGridComponent,
 .classNameGridComponent {
   position: relative;
 }
 
+.ttlGridComponent {
+  height: 24px;
+  line-height: 24px;
+}
+
 .hidden {
   display: none;
 }
 
 .ttlTextValue {
-  padding-left: 11px;
+  padding-left: 14px;
 }
 
 @include global.insights-open {

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen } from 'uiSrc/utils/test-utils'
 import { configureStore } from '@reduxjs/toolkit'
 import { Provider } from 'react-redux'
 

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx

@@ -1,6 +1,5 @@
 import React, { useRef, useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { EuiFlexItem } from '@elastic/eui'
 import { monaco } from 'react-monaco-editor'
 import JSONbig from 'json-bigint'
 
@@ -13,6 +12,8 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { Spacer } from 'uiSrc/components/base/layout'
 import { BaseProps } from '../interfaces'
 import { useChangeEditorType } from '../../change-editor-type-button'
 
@@ -64,8 +65,8 @@ const MonacoEditor = (props: BaseProps) => {
         editorWrapperClassName={styles.editorWrapper}
         onEditorDidMount={onEditorDidMount}
       />
-
-      <EuiFlexItem className={styles.actions}>
+      <Spacer size="m" />
+      <Row justify="end" gap="m" className={styles.actions}>
         <SecondaryButton
           onClick={switchEditorType}
           data-testid="json-data-cancel-btn"
@@ -80,7 +81,7 @@ const MonacoEditor = (props: BaseProps) => {
         >
           Overwrite Data
         </PrimaryButton>
-      </EuiFlexItem>
+      </Row>
     </div>
   )
 }

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/styles.module.scss

@@ -13,7 +13,7 @@
   position: relative;
 
   input {
-    font-family: "Graphik", sans-serif !important;
+    font-family: 'Graphik', sans-serif !important;
   }
 
   :global {
@@ -56,7 +56,7 @@
 .jsonData {
   font-size: 14px;
   line-height: 25px;
-  font-family: "Inconsolata", monospace !important;
+  font-family: 'Inconsolata', monospace !important;
   letter-spacing: 0.15px;
   flex-grow: 1;
 
@@ -69,7 +69,7 @@
 .monacoEditorJsonData {
   font-size: 14px;
   line-height: 25px;
-  font-family: "Inconsolata", monospace !important;
+  font-family: 'Inconsolata', monospace !important;
   letter-spacing: 0.15px;
   flex-grow: 1;
   width: 100%;
@@ -78,7 +78,7 @@
 }
 
 .defaultFont {
-  font-family: "Graphik", sans-serif !important;
+  font-family: 'Graphik', sans-serif !important;
 }
 
 .errorMessage {
@@ -95,7 +95,8 @@
   z-index: 2;
   display: flex;
   align-items: center;
-  justify-content: center;gap:12px;
+  justify-content: center;
+  gap: 12px;
   box-shadow: 0 3px 3px var(--controlsBoxShadowColor);
 
   &.controls {
@@ -123,7 +124,7 @@
   align-items: center;
 
   &:before {
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     height: 100%;
@@ -142,7 +143,9 @@
     background: var(--hoverInListColor);
   }
 
-  > div, span, button {
+  > div,
+  span,
+  button {
     z-index: 1;
   }
 }
@@ -189,7 +192,7 @@
 .jsonValue {
   font-size: 14px;
   line-height: 25px;
-  font-family: "Inconsolata", monospace;
+  font-family: 'Inconsolata', monospace;
   letter-spacing: 0.15px;
   padding: 0 8px;
   max-width: 1000px;
@@ -240,7 +243,8 @@
   }
 }
 
-.actionButtons, .deleteBtn {
+.actionButtons,
+.deleteBtn {
   margin-left: 1em;
   display: flex;
   align-items: center;
@@ -269,22 +273,8 @@
   max-width: none;
 }
 
-.actions {
-  margin-top: 1em;
-  display: flex;
-  flex-direction: row !important;
-  width: 100%;
-  justify-content: flex-end;
-
-  button {
-
-    &:first-of-type {
-      margin-right: 1em;
-    }
-  }
-}
-
-.editor, .editorWrapper {
+.editor,
+.editorWrapper {
   // Using 100% height starts a weird Monaco animation,
   // which causes the editor to overflow its container.
   // Probably it's related to the borders of the inside elements.