RI-6841: Add close button for unsupported key types (#4401)

* add close button to module types details, unsuported type details and too long key name details
* remove the key from onClose parameter as it is not used hence not needed
* add the text details wrapper
* side fix: make a property optional
* wrap module type details with text details wrapper to reuse functionality
* wrap too long key name details with text details wrapper to reuse functionality
* wrap unsupported type details with text details wrapper to reuse functionality
* remove unused property from key details header, as keyProp is no longer needed on key close.

Co-authored-by: Krum Tyukenov <[email protected]>

---------

Co-authored-by: Krum Tyukenov <[email protected]>

Author: dantovska

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -39,7 +39,7 @@ export interface Props {
   defaultRefreshRate?: string
   iconSize?: EuiButtonIconSizes
   disabled?: boolean
-  disabledRefreshButtonMessage: string
+  disabledRefreshButtonMessage?: string
   enableAutoRefreshDefault?: boolean
 }
 

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

@@ -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>

redisinsight/ui/src/pages/browser/modules/key-details/components/dynamic-type-details/DynamicTypeDetails.tsx

@@ -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 }

redisinsight/ui/src/pages/browser/modules/key-details/components/modules-type-details/ModulesTypeDetails.spec.tsx

@@ -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()
   })
 })

redisinsight/ui/src/pages/browser/modules/key-details/components/modules-type-details/ModulesTypeDetails.tsx

@@ -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>
   )
 }
 

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

@@ -0,0 +1,4 @@
+.link {
+  text-decoration: underline;
+  color: var(--euiColorFullShade);
+}

redisinsight/ui/src/pages/browser/modules/key-details/components/text-details-wrapper/TextDetailsWrapper.spec.tsx

@@ -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);
+  });
+})

redisinsight/ui/src/pages/browser/modules/key-details/components/text-details-wrapper/TextDetailsWrapper.tsx

@@ -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;

redisinsight/ui/src/pages/browser/modules/key-details/components/too-long-key-name-details/styles.module.scss renamed to redisinsight/ui/src/pages/browser/modules/key-details/components/text-details-wrapper/styles.module.scss

@@ -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;
+    }
+  }
+}

redisinsight/ui/src/pages/browser/modules/key-details/components/too-long-key-name-details/TooLongKeyNameDetails.spec.tsx

@@ -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()
   })
 })