[RI-7074] revert anchorClassName prop usage for RiTooltip (#4710)

* RI-7074: expose anchorClassName  for RiTooltip

* revert anchorClassName prop usage for RiTooltip

* revert missing styles

* fix missing import

Author: KrumTy

redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx

@@ -22,7 +22,11 @@ export const WindowControlGroup = ({
 }: Props) => (
   <Row gap="m" justify="end">
     <FlexItem>
-      <RiTooltip content={hideContent} position="top">
+      <RiTooltip
+        content={hideContent}
+        position="top"
+        anchorClassName="flex-row"
+      >
         <IconButton
           size="S"
           icon={MinusIcon}
@@ -34,7 +38,11 @@ export const WindowControlGroup = ({
       </RiTooltip>
     </FlexItem>
     <FlexItem>
-      <RiTooltip content={closeContent} position="top">
+      <RiTooltip
+        content={closeContent}
+        position="top"
+        anchorClassName="flex-row"
+      >
         <IconButton
           size="S"
           icon={CancelSlimIcon}

redisinsight/ui/src/components/base/tooltip/RITooltip.tsx

@@ -8,6 +8,7 @@ export interface RiTooltipProps
   title?: React.ReactNode
   position?: TooltipProps['placement']
   delay?: TooltipProps['openDelayDuration']
+  anchorClassName?: string
 }
 
 export const RiTooltip = ({
@@ -16,6 +17,7 @@ export const RiTooltip = ({
   content,
   position,
   delay,
+  anchorClassName,
   ...props
 }: RiTooltipProps) => (
   <TooltipProvider>
@@ -25,7 +27,7 @@ export const RiTooltip = ({
       placement={position}
       openDelayDuration={delay}
     >
-      <span>{children}</span>
+      <span className={anchorClassName}>{children}</span>
     </Tooltip>
   </TooltipProvider>
 )

redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx

@@ -17,7 +17,6 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { InfoIcon } from 'uiSrc/components/base/icons'
 import { Title } from 'uiSrc/components/base/text/Title'
-import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut'
 import { Text } from 'uiSrc/components/base/text'
 import { SwitchInput } from 'uiSrc/components/base/inputs'
 import { Link } from 'uiSrc/components/base/link/Link'
@@ -330,6 +329,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
         <FlexItem>
           <RiTooltip
             position="top"
+            anchorClassName="euiToolTip__btn-disabled"
             content={
               submitIsDisabled() ? (
                 <span>

redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx

@@ -142,7 +142,12 @@ const DatabaseListModules = React.memo((props: Props) => {
       !inCircle ? (
         Module(moduleName, abbreviation, icon, content)
       ) : (
-        <RiTooltip position="bottom" content={Content[i]} key={moduleName}>
+        <RiTooltip
+          position="bottom"
+          content={Content[i]}
+          anchorClassName={styles.anchorModuleTooltip}
+          key={moduleName}
+        >
           <>{Module(moduleName, abbreviation, icon, content)}</>
         </RiTooltip>
       ),

redisinsight/ui/src/components/database-list-modules/styles.module.scss

@@ -54,3 +54,7 @@
 .abbr {
   vertical-align: text-top;
 }
+
+.anchorModuleTooltip {
+  margin-right: 18px;
+}

redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx

@@ -96,6 +96,7 @@ const DatabaseListOptions = ({ options }: Props) => {
               : contentProp
           }
           position="top"
+          anchorClassName={styles.tooltip}
         >
           {icon ? (
             <IconButton

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

@@ -4,6 +4,7 @@ import { DATETIME_FORMATTER_DEFAULT, TimezoneOption } from 'uiSrc/constants'
 import { userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings'
 import { formatTimestamp } from 'uiSrc/utils'
 import { RiTooltip } from 'uiSrc/components'
+import styles from './styles.module.scss'
 
 export interface Props {
   date: Date | string | number
@@ -19,7 +20,7 @@ const FormatedDate = ({ date }: Props) => {
   const formatedDate = formatTimestamp(date, dateFormat, timezone)
 
   return (
-    <RiTooltip content={formatedDate}>
+    <RiTooltip anchorClassName={styles.text} content={formatedDate}>
       <span>{formatedDate}</span>
     </RiTooltip>
   )

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/full-screen/FullScreen.tsx

@@ -19,6 +19,7 @@ const FullScreen = ({
   <RiTooltip
     content={isFullScreen ? 'Exit Full Screen' : 'Full Screen'}
     position="left"
+    anchorClassName={anchorClassName}
   >
     <IconButton
       icon={isFullScreen ? ShrinkIcon : ExtendIcon}

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx

@@ -165,6 +165,7 @@ const InlineItemEditor = (props: Props) => {
 
   const ApplyBtn = (
     <RiTooltip
+      anchorClassName={styles.tooltip}
       position="bottom"
       title={
         (isDisabled && disabledTooltipText?.title) ||