redis · dantovska · Feb 28, 2025 · Feb 26, 2025 · Feb 26, 2025 · Feb 27, 2025
@@ -39,7 +39,7 @@ export interface Props {
   defaultRefreshRate?: string
   iconSize?: EuiButtonIconSizes
   disabled?: boolean
-  disabledRefreshButtonMessage: string
+  disabledRefreshButtonMessage?: string
   enableAutoRefreshDefault?: boolean
 }
 

@@ -36,7 +36,7 @@ import { KeyDetailsHeaderSizeLength } from './components/key-details-header-size
 import styles from './styles.module.scss'
 
 export interface KeyDetailsHeaderProps {
-  onCloseKey: (key: RedisResponseBuffer) => void
+  onCloseKey: () => void
   onRemoveKey: () => void
   onEditKey: (key: RedisResponseBuffer, newKey: RedisResponseBuffer, onFailure?: () => void) => void
   isFullScreen: boolean
@@ -58,7 +58,6 @@ const KeyDetailsHeader = ({
   const {
     type,
     length,
-    nameString: keyProp,
     name: keyBuffer,
   } = useSelector(selectedKeyDataSelector) ?? initialKeyInfo
   const { id: instanceId } = useSelector(connectedInstanceSelector)
@@ -142,7 +141,7 @@ const KeyDetailsHeader = ({
                         color="primary"
                         aria-label="Close key"
                         className={styles.closeBtn}
-                        onClick={() => onCloseKey(keyProp)}
+                        onClick={() => onCloseKey()}
                         data-testid="close-key-btn"
                       />
                     </EuiToolTip>

@@ -36,7 +36,7 @@ const DynamicTypeDetails = (props: Props) => {
   }
 
   if (isTruncatedString(keyProp)) {
-    return <TooLongKeyNameDetails />
+    return <TooLongKeyNameDetails onClose={ props.onCloseKey }/>
   }
 
   // Supported key type
@@ -46,11 +46,11 @@ const DynamicTypeDetails = (props: Props) => {
 
   // Unsupported redis modules key type
   if (Object.values(ModulesKeyTypes).includes(selectedKeyType as ModulesKeyTypes)) {
-    return <ModulesTypeDetails moduleName={MODULES_KEY_TYPES_NAMES[selectedKeyType]} />
+    return <ModulesTypeDetails moduleName={MODULES_KEY_TYPES_NAMES[selectedKeyType]} onClose={ props.onCloseKey }/>
   }
 
   // Unsupported key type
-  return <UnsupportedTypeDetails />
+  return <UnsupportedTypeDetails onClose={ props.onCloseKey }/>
 }
 
 export { DynamicTypeDetails }
@@ -6,6 +6,6 @@ import ModulesTypeDetails from './ModulesTypeDetails'
 
 describe('ModulesTypeDetails', () => {
   it('should render', () => {
-    expect(render(<ModulesTypeDetails moduleName={MODULES_KEY_TYPES_NAMES[ModulesKeyTypes.Graph]} />)).toBeTruthy()
+    expect(render(<ModulesTypeDetails moduleName={MODULES_KEY_TYPES_NAMES[ModulesKeyTypes.Graph]} onClose={jest.fn()} />)).toBeTruthy()
   })
 })
@@ -1,14 +1,19 @@
 import React from 'react'
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'
+import { EuiText, EuiTitle } from '@elastic/eui'
 import { useHistory } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 
 import { Pages } from 'uiSrc/constants'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 
-import styles from '../unsupported-type-details/styles.module.scss'
+import styles from './styles.module.scss'
+import TextDetailsWrapper from '../text-details-wrapper/TextDetailsWrapper'
 
-const ModulesTypeDetails = ({ moduleName = 'unsupported' }: { moduleName: string }) => {
+type ModulesTypeDetailsProps = {
+  moduleName: string, 
+  onClose: () => void,
+}
+const ModulesTypeDetails = ({ moduleName = 'unsupported', onClose }: ModulesTypeDetailsProps) => {
   const history = useHistory()
   const { id: connectedInstanceId = '' } = useSelector(connectedInstanceSelector)
 
@@ -18,30 +23,26 @@ const ModulesTypeDetails = ({ moduleName = 'unsupported' }: { moduleName: string
   }
 
   return (
-    <div className={styles.container} data-testid="modules-type-details">
-      <EuiFlexGroup alignItems="center" justifyContent="center">
-        <EuiFlexItem className={styles.textWrapper}>
-          <EuiTitle>
-            <h4>{`This is a ${moduleName} key.`}</h4>
-          </EuiTitle>
-          <EuiText size="s">
-            {'Use Redis commands in the '}
-            <a
-              tabIndex={0}
-              onClick={handleGoWorkbenchPage}
-              className={styles.link}
-              data-testid="internal-workbench-link"
-              onKeyDown={() => ({})}
-              role="link"
-              rel="noreferrer"
-            >
-              Workbench
-            </a>
-            {' tool to view the value.'}
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
+    <TextDetailsWrapper onClose={onClose} testid="modules-type">
+      <EuiTitle>
+        <h4>{`This is a ${moduleName} key.`}</h4>
+      </EuiTitle>
+      <EuiText size="s">
+        {'Use Redis commands in the '}
+        <a
+          tabIndex={0}
+          onClick={handleGoWorkbenchPage}
+          className={styles.link}
+          data-testid="internal-workbench-link"
+          onKeyDown={() => ({})}
+          role="link"
+          rel="noreferrer"
+        >
+          Workbench
+        </a>
+        {' tool to view the value.'}
+      </EuiText>
+    </TextDetailsWrapper>
   )
 }
 

@@ -0,0 +1,4 @@
+.link {
+  text-decoration: underline;
+  color: var(--euiColorFullShade);
+}
@@ -0,0 +1,29 @@
+import React from "react"
+import TextDetailsWrapper from "./TextDetailsWrapper"
+import { fireEvent, render, screen } from "uiSrc/utils/test-utils";
+
+describe('TextDetailsWrapper', () => {
+  it('should render children correctly', () => {
+    const { queryByTestId } = render(
+      <TextDetailsWrapper onClose={jest.fn()}>
+        <div data-testid="children-wrapper">Children</div>
+      </TextDetailsWrapper>
+    );
+
+    expect(queryByTestId('children-wrapper')).toBeInTheDocument();
+  });
+
+  it('should call onClose when close button is clicked', () => {
+    const mockOnClose = jest.fn();
+
+    render(
+      <TextDetailsWrapper onClose={mockOnClose}>
+        <div data-testid="children-wrapper">Children</div>
+      </TextDetailsWrapper>
+    );
+
+    fireEvent.click(screen.getByTestId("close-key-btn"));
+
+    expect(mockOnClose).toBeCalledTimes(1);
+  });
+})
@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from "@elastic/eui";
+
+import styles from './styles.module.scss';
+
+const TextDetailsWrapper = (
+  { onClose, children, testid }: { onClose: () => void, children: ReactNode, testid?: string }
+) => {
+  const getDataTestid = (suffix: string) => (testid ? `${testid}-${suffix}` : suffix);
+
+  return (
+  <div className={styles.container} data-testid={getDataTestid('details')}>
+    <EuiToolTip
+      content="Close"
+      position="left"
+      anchorClassName={styles.closeRightPanel}
+    >
+      <EuiButtonIcon
+        iconType="cross"
+        color="primary"
+        aria-label="Close key"
+        className={styles.closeBtn}
+        onClick={() => onClose()}
+        data-testid={getDataTestid('close-key-btn')}
+      />
+    </EuiToolTip>
+    <EuiFlexGroup alignItems="center" justifyContent="center">
+      <EuiFlexItem className={styles.textWrapper}>
+        <div>{children}</div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    </div>
+  );
+}
+
+
+export default TextDetailsWrapper;
@@ -20,7 +20,15 @@
   top: -7%;
 }
 
-.link {
-  text-decoration: underline;
-  color: var(--euiColorFullShade);
-}
+.closeRightPanel {
+  position: absolute;
+  top: 22px;
+  right: 18px;
+
+  .closeBtn {
+    :global(svg) {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
@@ -1,10 +1,9 @@
 import React from 'react'
 import { render } from 'uiSrc/utils/test-utils'
-import TooLongKeyNameDetails
-  from 'uiSrc/pages/browser/modules/key-details/components/too-long-key-name-details/TooLongKeyNameDetails'
+import TooLongKeyNameDetails from './TooLongKeyNameDetails';
 
 describe('TooLongKeyNameDetails', () => {
   it('should render', () => {
-    expect(render(<TooLongKeyNameDetails />)).toBeTruthy()
+    expect(render(<TooLongKeyNameDetails onClose={jest.fn()}/>)).toBeTruthy()
   })
 })
@@ -1,21 +1,17 @@
 import React from 'react'
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'
+import { EuiText, EuiTitle } from '@elastic/eui'
 
-import styles from './styles.module.scss'
+import TextDetailsWrapper from '../text-details-wrapper/TextDetailsWrapper'
 
-const TooLongKeyNameDetails = () => (
-  <div className={styles.container} data-testid="too-long-key-name-details">
-    <EuiFlexGroup alignItems="center" justifyContent="center">
-      <EuiFlexItem className={styles.textWrapper}>
-        <EuiTitle>
-          <h4>The key name is too long</h4>
-        </EuiTitle>
-        <EuiText size="s">
-          Details cannot be displayed.
-        </EuiText>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
+const TooLongKeyNameDetails = ({ onClose }: { onClose: () => void}) => (
+  <TextDetailsWrapper onClose={onClose} testid="too-long-key-name">
+    <EuiTitle>
+      <h4>The key name is too long</h4>
+    </EuiTitle>
+    <EuiText size="s">
+      Details cannot be displayed.
+    </EuiText>
+  </TextDetailsWrapper>
 )
 
 export default TooLongKeyNameDetails
@@ -5,6 +5,6 @@ import UnsupportedTypeDetails from './UnsupportedTypeDetails'
 
 describe('UnsupportedTypeDetails', () => {
   it('should render', () => {
-    expect(render(<UnsupportedTypeDetails />)).toBeTruthy()
+    expect(render(<UnsupportedTypeDetails onClose={jest.fn()}/>)).toBeTruthy()
   })
 })
@@ -1,31 +1,29 @@
 import React from 'react'
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'
+import { EuiText, EuiTitle } from '@elastic/eui'
 
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
+import TextDetailsWrapper from '../text-details-wrapper/TextDetailsWrapper';
+
 import styles from './styles.module.scss'
 
-const UnsupportedTypeDetails = () => (
-  <div className={styles.container} data-testid="unsupported-type-details">
-    <EuiFlexGroup alignItems="center" justifyContent="center">
-      <EuiFlexItem className={styles.textWrapper}>
-        <EuiTitle>
-          <h4>This key type is not currently supported.</h4>
-        </EuiTitle>
-        <EuiText size="s">
-          See{' '}
-          <a
-            href={EXTERNAL_LINKS.githubRepo}
-            className={styles.link}
-            target="_blank"
-            rel="noreferrer"
-          >
-            our repository
-          </a>
-          {' '}for the list of supported key types.
-        </EuiText>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
+const UnsupportedTypeDetails = ({ onClose }: { onClose: () => void }) => (
+  <TextDetailsWrapper onClose={onClose} testid="unsupported-type">
+    <EuiTitle>
+      <h4>This key type is not currently supported.</h4>
+    </EuiTitle>
+    <EuiText size="s">
+      See{' '}
+      <a
+        href={EXTERNAL_LINKS.githubRepo}
+        className={styles.link}
+        target="_blank"
+        rel="noreferrer"
+      >
+        our repository
+      </a>
+      {' '}for the list of supported key types.
+    </EuiText>
+  </TextDetailsWrapper>
 )
 
 export default UnsupportedTypeDetails
@@ -1,26 +1,4 @@
-.container {
-  display: flex;
-  flex-grow: 1;
-  padding: 16px 40px 30px;
-
-  text-align: center;
-  color: #FFFFFFAD;
-
-  h4 {
-    font-size: 18px;
-    font-weight: normal;
-    margin-bottom: 18px;
-    line-height: 24px;
-  }
-}
-
-.textWrapper {
-  max-width: 640px;
-  position: relative;
-  top: -7%;
-}
-
 .link {
   text-decoration: underline;
-  color: var(--euiColorFullShade);
-}
+  color: var(--euiColorFullShade) !important;
+}