Merge pull request #2044 from RedisInsight/fe/bugfix/RI-4465_RI-4464

#RI-4465 - fix multiple tooltips

Author: rsergeenko

redisinsight/ui/src/components/notifications/styles.module.scss

@@ -24,8 +24,13 @@
   :global(.euiFlexItem:not(:last-child)) {
     margin-right: 14px !important;
   }
+
   .summaryValue {
     font-size: 14px;
     font-weight: 500;
   }
+
+  .summaryLabel {
+    color: var(--euiToastLightColor) !important;
+  }
 }

redisinsight/ui/src/components/notifications/success-messages.tsx

@@ -163,7 +163,7 @@ export default {
         <>
           Action completed
           <br />
-          <EuiText>Data uploaded with file: {formatLongName(fileName, 24, 5)}</EuiText>
+          <EuiText color="ghost">Data uploaded with file: {formatLongName(fileName, 24, 5)}</EuiText>
         </>
       ),
       message: (
@@ -175,20 +175,20 @@ export default {
           className={styles.summary}
         >
           <EuiFlexItem grow={false}>
-            <EuiText className={styles.summaryValue}>{numberWithSpaces(processed)}</EuiText>
-            <EuiText size="xs" color="subdued" className={styles.summaryLabel}>Commands Processed</EuiText>
+            <EuiText color="ghost" className={styles.summaryValue}>{numberWithSpaces(processed)}</EuiText>
+            <EuiText size="xs" className={styles.summaryLabel}>Commands Processed</EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiText className={styles.summaryValue}>{numberWithSpaces(succeed)}</EuiText>
-            <EuiText size="xs" color="subdued" className={styles.summaryLabel}>Success</EuiText>
+            <EuiText color="ghost" className={styles.summaryValue}>{numberWithSpaces(succeed)}</EuiText>
+            <EuiText size="xs" className={styles.summaryLabel}>Success</EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiText className={styles.summaryValue}>{numberWithSpaces(failed)}</EuiText>
-            <EuiText size="xs" color="subdued" className={styles.summaryLabel}>Errors</EuiText>
+            <EuiText color="ghost" className={styles.summaryValue}>{numberWithSpaces(failed)}</EuiText>
+            <EuiText size="xs" className={styles.summaryLabel}>Errors</EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiText className={styles.summaryValue}>{millisecondsFormat(data?.duration || 0, 'H:mm:ss.SSS')}</EuiText>
-            <EuiText size="xs" color="subdued" className={styles.summaryLabel}>Time Taken</EuiText>
+            <EuiText color="ghost" className={styles.summaryValue}>{millisecondsFormat(data?.duration || 0, 'H:mm:ss.SSS')}</EuiText>
+            <EuiText size="xs" className={styles.summaryLabel}>Time Taken</EuiText>
           </EuiFlexItem>
         </EuiFlexGroup>
       ),

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/RedisUploadButton/RedisUploadButton.tsx

@@ -30,13 +30,16 @@ const RedisUploadButton = ({ label, path }: Props) => {
   }, [pathsInProgress])
 
   const openPopover = () => {
-    setIsPopoverOpen(true)
-    sendEventTelemetry({
-      event: TelemetryEvent.WORKBENCH_ENABLEMENT_AREA_DATA_UPLOAD_CLICKED,
-      eventData: {
-        databaseId: instanceId
-      }
-    })
+    if (!isPopoverOpen) {
+      sendEventTelemetry({
+        event: TelemetryEvent.WORKBENCH_ENABLEMENT_AREA_DATA_UPLOAD_CLICKED,
+        eventData: {
+          databaseId: instanceId
+        }
+      })
+    }
+
+    setIsPopoverOpen((v) => !v)
   }
 
   const uploadData = async () => {

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/RedisUploadButton/styles.module.scss

@@ -27,9 +27,13 @@
 
 .panelPopover {
   border-color: var(--euiColorPrimary) !important;
-  :global(.euiPopover__panelArrow:before) {
+  :global(.euiPopover__panelArrow--bottom:before) {
     border-bottom-color: var(--euiColorPrimary) !important;
   }
+
+  :global(.euiPopover__panelArrow--top:before) {
+    border-top-color: var(--euiColorPrimary) !important;
+  }
 }
 
 .popoverAnchor {

redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss

@@ -73,6 +73,7 @@
   --euiToastSuccessBorderColor: #{$euiToastSuccessBorderColor};
   --euiToastDangerBtnColor: #{$euiToastDangerBtnColor};
   --euiToastDangerBorderColor: #{$euiToastDangerBorderColor};
+  --euiToastLightColor: #{$euiColorDarkShade};
 
   // Custom
   --htmlColor: #{$htmlColor};

redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss

@@ -74,6 +74,7 @@
   --euiToastSuccessBorderColor: #{$euiToastSuccessBorderColor};
   --euiToastDangerBtnColor: #{$euiToastDangerBtnColor};
   --euiToastDangerBorderColor: #{$euiToastDangerBorderColor};
+  --euiToastLightColor: #{$euiColorLightestShade};
 
   // Custom
   --htmlColor: #{$htmlColor};