Merge pull request #793 from RedisInsight/feature/bugfix

#RI-3098 - Tooltip for channel name

Author: egor-zalenski

redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/MessagesList.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { ListChildComponentProps, ListOnScrollProps, VariableSizeList as List } from 'react-window'
 import { useParams } from 'react-router-dom'
-import { EuiButtonIcon } from '@elastic/eui'
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'
 
 import { getFormatDateTime } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -131,7 +131,15 @@ const MessagesList = (props: Props) => {
     return (
       <div style={style} className={styles.item} data-testid={`row-${index}`}>
         <div className={styles.time}>{getFormatDateTime(time)}</div>
-        <div className={styles.channel}>{channel}</div>
+        <div className={styles.channel}>
+          <EuiToolTip
+            content={channel}
+            position="bottom"
+            display="inlineBlock"
+          >
+            <div className={styles.channelAnchor}>{channel}</div>
+          </EuiToolTip>
+        </div>
         <div className={styles.message} ref={rowRef}>{message}</div>
       </div>
     )

redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesList/styles.module.scss

@@ -20,13 +20,20 @@
 
 .channel {
   color: var(--euiColorMediumShade);
-  padding-right: 12px;
   width: 220px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+.channelAnchor {
+  max-width: 220px;
+  padding-right: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .message {
   width: calc(100% - 372px);
   color: var(--htmlColor);