RI-7401: fix key name input layout on focus (#5016)

Author: KrumTy

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx

@@ -19,17 +19,11 @@ import {
   sendEventTelemetry,
   TelemetryEvent,
 } from 'uiSrc/telemetry'
-import {
-  formatLongName,
-  isEqualBuffers,
-  replaceSpaces,
-  stringToBuffer,
-} from 'uiSrc/utils'
+import { formatLongName, isEqualBuffers, stringToBuffer } from 'uiSrc/utils'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { CopyIcon } from 'uiSrc/components/base/icons'
-import { Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiTooltip } from 'uiSrc/components'
 import { TextInput } from 'uiSrc/components/base/inputs'
@@ -40,6 +34,11 @@ const StyledInputWrapper = styled(Row)`
   min-width: 150px;
 `
 
+const StyledFlexWrapper = styled(FlexItem)`
+  max-width: 450px;
+  gap: ${({ theme }) => theme.core.space.space050};
+`
+
 export interface Props {
   onEditKey: (
     key: RedisResponseBuffer,
@@ -146,84 +145,69 @@ const KeyDetailsHeaderName = ({ onEditKey }: Props) => {
   }
 
   return (
-    <FlexItem
-      grow={5}
+    <StyledFlexWrapper
+      grow={10}
       direction="row"
       onMouseEnter={onMouseEnterKey}
       onMouseLeave={onMouseLeaveKey}
       onClick={onClickKey}
-      $gap="xs"
       data-testid="edit-key-btn"
     >
-      {keyIsEditing || keyIsHovering ? (
-        <RiTooltip
-          title="Key Name"
-          position="left"
-          content={tooltipContent}
-          anchorClassName={styles.toolTipAnchorKey}
-        >
-          <InlineItemEditor
-            onApply={() => applyEditKey()}
-            isDisabled={!keyIsEditable}
-            disabledTooltipText={TEXT_UNPRINTABLE_CHARACTERS}
-            onDecline={(event) => cancelEditKey(event)}
-            viewChildrenMode={!keyIsEditing}
-            isLoading={loading}
-            declineOnUnmount={false}
-          >
-            <StyledInputWrapper align="center">
-              <TextInput
-                name="key"
-                id="key"
-                ref={keyNameRef}
-                className={cx(styles.keyInput, {
-                  [styles.keyInputEditing]: keyIsEditing,
-                  'input-warning': !keyIsEditable,
-                })}
-                placeholder={AddCommonFieldsFormConfig?.keyName?.placeholder}
-                value={key!}
-                loading={loading}
-                onChange={onChangeKey}
-                readOnly={!keyIsEditing}
-                autoComplete="off"
-                data-testid="edit-key-input"
-                // todo: do not hardcode. align with other components in a single place
-                style={{ paddingLeft: 9, lineHeight: '31px' }}
-              />
-              {!keyIsEditing && <RiIcon size="M" type="EditIcon" />}
-            </StyledInputWrapper>
-          </InlineItemEditor>
-        </RiTooltip>
-      ) : (
-        <Text
-          className={cx(styles.key, {
-            [styles.hidden]: keyIsEditing || keyIsHovering,
-          })}
-          data-testid="key-name-text"
-        >
-          <b className="truncateText">
-            {replaceSpaces(keyProp?.substring(0, 200))}
-          </b>
-        </Text>
-      )}
-      {keyIsHovering && (
-        <RiTooltip
-          position="right"
-          content="Copy"
-          anchorClassName={styles.copyKey}
+      <RiTooltip
+        title="Key Name"
+        position="left"
+        content={tooltipContent}
+        anchorClassName={styles.toolTipAnchorKey}
+      >
+        <InlineItemEditor
+          onApply={() => applyEditKey()}
+          isDisabled={!keyIsEditable}
+          disabledTooltipText={TEXT_UNPRINTABLE_CHARACTERS}
+          onDecline={(event) => cancelEditKey(event)}
+          viewChildrenMode={!keyIsEditing}
+          isLoading={loading}
+          declineOnUnmount={false}
         >
-          <IconButton
-            icon={CopyIcon}
-            id={COPY_KEY_NAME_ICON}
-            aria-label="Copy key name"
-            onClick={(event: any) =>
-              handleCopy(event, key!, keyIsEditing, keyNameRef)
-            }
-            data-testid="copy-key-name-btn"
-          />
-        </RiTooltip>
-      )}
-    </FlexItem>
+          <StyledInputWrapper align="center">
+            <TextInput
+              name="key"
+              id="key"
+              ref={keyNameRef}
+              className={cx(styles.keyInput, {
+                [styles.keyInputEditing]: keyIsEditing,
+                'input-warning': !keyIsEditable,
+              })}
+              placeholder={AddCommonFieldsFormConfig?.keyName?.placeholder}
+              value={key!}
+              loading={loading}
+              onChange={onChangeKey}
+              readOnly={!keyIsEditing}
+              autoComplete="off"
+              data-testid="edit-key-input"
+              // todo: do not hardcode. align with other components in a single place
+              style={{ paddingLeft: 9, lineHeight: '31px' }}
+            />
+            {!keyIsEditing && <RiIcon size="M" type="EditIcon" />}
+          </StyledInputWrapper>
+        </InlineItemEditor>
+      </RiTooltip>
+      <RiTooltip
+        position="right"
+        content="Copy"
+        anchorClassName={styles.copyKey}
+      >
+        <IconButton
+          icon={CopyIcon}
+          id={COPY_KEY_NAME_ICON}
+          aria-label="Copy key name"
+          onClick={(event: any) =>
+            handleCopy(event, key!, keyIsEditing, keyNameRef)
+          }
+          data-testid="copy-key-name-btn"
+          className={!keyIsHovering ? styles.hidden : ''}
+        />
+      </RiTooltip>
+    </StyledFlexWrapper>
   )
 }
 

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

@@ -18,7 +18,7 @@
   font-size: 14px !important;
   font-weight: 500 !important;
   flex: 1;
-  max-width: 400px;
+  min-width: 150px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -62,5 +62,5 @@
 }
 
 .hidden {
-  display: none;
+  visibility: hidden;
 }