RI-5934 truncate date in css

Author: kchepikava

redisinsight/ui/src/components/formated-date/FormatedDate.tsx

@@ -1,34 +1,25 @@
-import { EuiToolTip } from '@elastic/eui'
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { DATETIME_FORMATTER_DEFAULT, TimezoneOption } from 'uiSrc/constants'
 import { userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings'
 import { formatTimestamp } from 'uiSrc/utils'
+import styles from './styles.module.scss'
 
 export interface Props {
   date: Date | string | number
-  truncate?: number
 }
 
-const FormatedDate = ({ date, truncate }: Props) => {
+const FormatedDate = ({ date }: Props) => {
   const config = useSelector(userSettingsConfigSelector)
   const dateFormat = config?.dateFormat || DATETIME_FORMATTER_DEFAULT
   const timezone = config?.timezone || TimezoneOption.Local
 
   const formatedDate = formatTimestamp(date, dateFormat, timezone)
 
-  if (truncate && dateFormat.length > truncate) {
-    return (
-      <EuiToolTip
-        content={formatedDate}
-      >
-        <>{formatedDate.slice(0, truncate).concat('...')}</>
-      </EuiToolTip>
-    )
-  }
-
   return (
-    <span>{formatedDate}</span>
+    <span className={styles.text}>
+      {formatedDate}
+    </span>
   )
 }
 

redisinsight/ui/src/components/formated-date/styles.module.scss

@@ -0,0 +1,9 @@
+.text {
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  max-width: 100%;
+  vertical-align: middle;
+}

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -311,7 +311,7 @@ const QueryCardHeader = (props: Props) => {
             <EuiFlexItem className={cx(styles.time)} data-testid="command-execution-date-time">
               {!!createdAt && (
                 <EuiTextColor className={styles.timeText} component="div">
-                  <FormatedDate date={createdAt} truncate={15} />
+                  <FormatedDate date={createdAt} />
                 </EuiTextColor>
               )}
             </EuiFlexItem>

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

@@ -120,7 +120,7 @@ const MessagesList = (props: Props) => {
 
     return (
       <div style={style} className={styles.item} data-testid={`row-${index}`}>
-        <div className={styles.time}><FormatedDate date={time} truncate={18} /></div>
+        <div className={styles.time}><FormatedDate date={time} /></div>
         <div className={styles.channel}>
           <EuiToolTip
             content={channel}

redisinsight/ui/src/pages/slow-log/SlowLogPage.tsx

@@ -174,7 +174,7 @@ const SlowLogPage = () => {
                         {lastTimestamp && (
                           <>
                             <span>&nbsp;from &nbsp;</span>
-                            <FormatedDate date={lastTimestamp * 1000} truncate={30} />
+                            <FormatedDate date={lastTimestamp * 1000} />
                           </>
                         )})
                       </EuiText>

redisinsight/ui/src/pages/slow-log/components/SlowLogTable/SlowLogTable.tsx

@@ -47,7 +47,7 @@ const SlowLogTable = (props: Props) => {
       isSortable: true,
       render: (timestamp) => (
         <EuiText size="s" color="subdued" data-testid="timestamp-value">
-          <FormatedDate date={timestamp * 1000} truncate={20} />
+          <FormatedDate date={timestamp * 1000} />
         </EuiText>
       )
     },