Merge pull request #1166 from RedisInsight/fe/feature/RI-3466_change-tooltip-text

#RI-3466 - change tooltip text for formatters

Author: vlad-dargel

redisinsight/ui/src/constants/browser.ts

@@ -4,3 +4,5 @@ export const TEXT_UNPRINTABLE_CHARACTERS = {
   title: 'Non-printable characters have been detected',
   text: 'Use Workbench or CLI to edit without data loss.',
 }
+
+export const TEXT_DISABLED_FORMATTER_EDITING = 'Cannot edit the value in this format'

redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx

@@ -40,7 +40,13 @@ import { selectedKeyDataSelector, keysSelector, selectedKeySelector } from 'uiSr
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import HelpTexts from 'uiSrc/constants/help-texts'
-import { KeyTypes, OVER_RENDER_BUFFER_COUNT, TableCellAlignment, TEXT_UNPRINTABLE_CHARACTERS } from 'uiSrc/constants'
+import {
+  KeyTypes,
+  OVER_RENDER_BUFFER_COUNT,
+  TableCellAlignment,
+  TEXT_DISABLED_FORMATTER_EDITING,
+  TEXT_UNPRINTABLE_CHARACTERS
+} from 'uiSrc/constants'
 import { getColumnWidth } from 'uiSrc/components/virtual-grid'
 import { StopPropagation } from 'uiSrc/components/virtual-table'
 import { stringToBuffer } from 'uiSrc/utils/formatters/bufferFormatters'
@@ -408,7 +414,7 @@ const HashDetails = (props: Props) => {
         return (
           <StopPropagation>
             <div className="value-table-actions">
-              <EuiToolTip content={!isEditable ? 'Cannot change data in this format' : null}>
+              <EuiToolTip content={!isEditable ? TEXT_DISABLED_FORMATTER_EDITING : null}>
                 <EuiButtonIcon
                   iconType="pencil"
                   aria-label="Edit field"

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

@@ -19,7 +19,15 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 
 import { GroupBadge } from 'uiSrc/components'
 import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEditor'
-import { KEY_TYPES_ACTIONS, KeyTypes, LENGTH_NAMING_BY_TYPE, ModulesKeyTypes, STREAM_ADD_ACTION, TEXT_UNPRINTABLE_CHARACTERS } from 'uiSrc/constants'
+import {
+  KEY_TYPES_ACTIONS,
+  KeyTypes,
+  LENGTH_NAMING_BY_TYPE,
+  ModulesKeyTypes,
+  STREAM_ADD_ACTION,
+  TEXT_DISABLED_FORMATTER_EDITING,
+  TEXT_UNPRINTABLE_CHARACTERS
+} from 'uiSrc/constants'
 import { AddCommonFieldsFormConfig } from 'uiSrc/pages/browser/components/add-key/constants/fields-config'
 import { initialKeyInfo, keysSelector, selectedKeyDataSelector, selectedKeySelector } from 'uiSrc/slices/browser/keys'
 import { streamSelector } from 'uiSrc/slices/browser/stream'
@@ -393,7 +401,7 @@ const KeyDetailsHeader = ({
         {KEY_TYPES_ACTIONS[keyType] && 'editItem' in KEY_TYPES_ACTIONS[keyType] && (
           <div className={styles.actionBtn}>
             <EuiToolTip
-              content={!isEditable ? 'Cannot change data in this format' : null}
+              content={!isEditable ? TEXT_DISABLED_FORMATTER_EDITING : null}
             >
               <EuiButtonIcon
                 disabled={!isEditable}

redisinsight/ui/src/pages/browser/components/list-details/ListDetails.tsx

@@ -23,7 +23,13 @@ import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { sendEventTelemetry, TelemetryEvent, getBasedOnViewTypeEvent } from 'uiSrc/telemetry'
-import { KeyTypes, OVER_RENDER_BUFFER_COUNT, TableCellAlignment, TEXT_UNPRINTABLE_CHARACTERS } from 'uiSrc/constants'
+import {
+  KeyTypes,
+  OVER_RENDER_BUFFER_COUNT,
+  TableCellAlignment,
+  TEXT_DISABLED_FORMATTER_EDITING,
+  TEXT_UNPRINTABLE_CHARACTERS
+} from 'uiSrc/constants'
 import {
   bufferToSerializedFormat,
   bufferToString,
@@ -354,7 +360,7 @@ const ListDetails = (props: Props) => {
         return (
           <StopPropagation>
             <div className="value-table-actions">
-              <EuiToolTip content={!isEditable ? 'Cannot change data in this format' : null}>
+              <EuiToolTip content={!isEditable ? TEXT_DISABLED_FORMATTER_EDITING : null}>
                 <EuiButtonIcon
                   iconType="pencil"
                   aria-label="Edit element"

tests/e2e/tests/critical-path/browser/formatters.e2e.ts

@@ -197,7 +197,7 @@ notEditableFormattersSet.forEach(formatter => {
                 // Hover on disabled button
                 await t.hover(editBtn);
                 // Verify tooltip content
-                await t.expect(browserPage.tooltip.textContent).contains('Cannot change data in this format', 'Tooltip has wrong text');
+                await t.expect(browserPage.tooltip.textContent).contains('Cannot edit the value in this format', 'Tooltip has wrong text');
             }
         }
     });