#RI-3649-fix tooltip content

Author: AmirAllayarovSofteq

redisinsight/api/src/modules/core/encryption/strategies/keytar-encryption.strategy.ts

@@ -33,7 +33,7 @@ export class KeytarEncryptionStrategy implements IEncryptionStrategy {
       // eslint-disable-next-line global-require
       this.keytar = require('keytar');
     } catch (e) {
-      this.logger.error('Failed to initialize keytar module');
+      this.logger.error('Failed to initialize keytar module', e);
     }
   }
 

redisinsight/ui/src/pages/databaseAnalysis/components/top-keys/Table.tsx

@@ -12,7 +12,14 @@ import { useParams, useHistory } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
 
-import { formatBytes, truncateNumberToDuration, truncateNumberToFirstUnit, truncateTTLToSeconds, stringToBuffer } from 'uiSrc/utils'
+import {
+  formatBytes,
+  formatLongName,
+  truncateNumberToDuration,
+  truncateNumberToFirstUnit,
+  truncateTTLToSeconds,
+  stringToBuffer
+} from 'uiSrc/utils'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { GroupBadge } from 'uiSrc/components'
 import { setFilter, setSearchMatch, resetKeysData, fetchKeys, keysSelector } from 'uiSrc/slices/browser/keys'
@@ -86,23 +93,26 @@ const Table = (props: Props) => {
       height: '42px',
       sortable: true,
       truncateText: true,
-      render: (name: string) => (
-        <div data-testid="top-keys-table-name" className={cx(styles.delimiter, 'truncateText')}>
-          <EuiToolTip
-            anchorClassName={styles.tooltip}
-            position="bottom"
-            content={name}
-          >
-            <EuiButtonEmpty
-              className={styles.link}
-              style={{ height: 'auto' }}
-              onClick={() => handleRedirect(name)}
+      render: (name: string) => {
+        const tooltipContent = formatLongName(name)
+        return (
+          <div data-testid="top-keys-table-name" className={cx(styles.delimiter, 'truncateText')}>
+            <EuiToolTip
+              anchorClassName={styles.tooltip}
+              position="bottom"
+              content={tooltipContent}
             >
-              {name}
-            </EuiButtonEmpty>
-          </EuiToolTip>
-        </div>
-      )
+              <EuiButtonEmpty
+                className={styles.link}
+                style={{ height: 'auto' }}
+                onClick={() => handleRedirect(name)}
+              >
+                {name}
+              </EuiButtonEmpty>
+            </EuiToolTip>
+          </div>
+        )
+      }
     },
     {
       name: 'TTL',

redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/Table.tsx

@@ -11,8 +11,7 @@ import { useParams, useHistory } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
 
-import { NspTypeSummary } from 'apiSrc/modules/database-analysis/models/nsp-type-summary'
-import { formatBytes, Nullable } from 'uiSrc/utils'
+import { formatBytes, formatLongName, Nullable } from 'uiSrc/utils'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { GroupBadge } from 'uiSrc/components'
 import { Pages } from 'uiSrc/constants'
@@ -21,6 +20,7 @@ import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api
 import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import { setBrowserTreeDelimiter, setBrowserKeyListDataLoaded, resetBrowserTree } from 'uiSrc/slices/app/context'
 import { NspSummary } from 'apiSrc/modules/database-analysis/models/nsp-summary'
+import { NspTypeSummary } from 'apiSrc/modules/database-analysis/models/nsp-type-summary'
 
 import styles from './styles.module.scss'
 
@@ -117,12 +117,13 @@ const NameSpacesTable = (props: Props) => {
       className: 'nsp-cell',
       render: (nsp: string, { types }: { types: any[] }) => {
         const filterType = types.length > 1 ? null : types[0].type
+        const tooltipContent = formatLongName(`${nsp}${delimiter}*`)
         return (
           <div className={cx(styles.delimiter, 'truncateText')}>
             <EuiToolTip
               anchorClassName={styles.tooltip}
               position="bottom"
-              content={`${nsp}${delimiter}*`}
+              content={tooltipContent}
             >
               <EuiButtonEmpty
                 className={styles.link}