Merge pull request #3003 from RedisInsight/bugfix/release-2.42

#RI-5372 - fix message showing

Author: vlad-dargel

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CodeButtonBlock/CodeButtonBlock.tsx

@@ -82,7 +82,7 @@ const CodeButtonBlock = (props: Props) => {
 
   const handleRunClicked = () => {
     if (!instanceId || notLoadedModule || (!isNotShowConfirmation && isButtonHasConfirmation)) {
-      setIsPopoverOpen(true)
+      setIsPopoverOpen((v) => !v)
       return
     }
 

redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.spec.tsx

@@ -17,7 +17,12 @@ import { DatabaseAnalysisViewTab } from 'uiSrc/slices/interfaces/analytics'
 import { fetchRedisearchListAction, loadList } from 'uiSrc/slices/browser/redisearch'
 import { stringToBuffer } from 'uiSrc/utils'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
-import { changeSelectedTab, toggleInsightsPanel } from 'uiSrc/slices/panels/insights'
+import {
+  changeSelectedTab,
+  resetExplorePanelSearch,
+  setExplorePanelIsPageOpen,
+  toggleInsightsPanel
+} from 'uiSrc/slices/panels/insights'
 import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
 import { ONBOARDING_FEATURES } from './OnboardingFeatures'
 
@@ -503,6 +508,19 @@ describe('ONBOARDING_FEATURES', () => {
       expect(clearStoreActions(store.getActions().slice(-2)))
         .toEqual(clearStoreActions(expectedActions))
     })
+
+    it('should call proper actions on next', () => {
+      render(<OnboardingTour options={ONBOARDING_FEATURES.EXPLORE_REDIS}><span /></OnboardingTour>)
+      fireEvent.click(screen.getByTestId('next-btn'))
+
+      const expectedActions = [
+        resetExplorePanelSearch(),
+        setExplorePanelIsPageOpen(false),
+        setOnboardNextStep()
+      ]
+      expect(clearStoreActions(store.getActions().slice(-3)))
+        .toEqual(clearStoreActions(expectedActions))
+    })
   })
 
   describe('WORKBENCH_CUSTOM_TUTORIALS', () => {

redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx

@@ -20,7 +20,12 @@ import { fetchRedisearchListAction } from 'uiSrc/slices/browser/redisearch'
 import { bufferToString, Nullable } from 'uiSrc/utils'
 import { CodeBlock } from 'uiSrc/components'
 
-import { changeSelectedTab, toggleInsightsPanel } from 'uiSrc/slices/panels/insights'
+import {
+  changeSelectedTab,
+  resetExplorePanelSearch,
+  setExplorePanelIsPageOpen,
+  toggleInsightsPanel
+} from 'uiSrc/slices/panels/insights'
 import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
 import styles from './styles.module.scss'
 
@@ -281,7 +286,11 @@ const ONBOARDING_FEATURES = {
           dispatch(toggleInsightsPanel(false))
           sendBackTelemetryEvent(...telemetryArgs)
         },
-        onNext: () => sendNextTelemetryEvent(...telemetryArgs)
+        onNext: () => {
+          dispatch(resetExplorePanelSearch())
+          dispatch(setExplorePanelIsPageOpen(false))
+          sendNextTelemetryEvent(...telemetryArgs)
+        }
       }
     }
   },

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/styles.module.scss

@@ -3,10 +3,10 @@
 @import '@elastic/eui/src/global_styling/index';
 
 :global(.homePage) :global(.cloudDatabaseListResult) {
-  height: calc(100vh - 277px) !important;
+  height: calc(100vh - 292px) !important;
 
   @media (min-width: 1130px) {
-    height: calc(100vh - 225px) !important;
+    height: calc(100vh - 236px) !important;
   }
 
   @media only screen and (max-width: 767px) {

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/styles.module.scss

@@ -3,14 +3,10 @@
 @import '@elastic/eui/src/global_styling/index';
 
 :global(.homePage) :global(.cloudDatabaseList) {
-  height: calc(100vh - 310px) !important;
+  height: calc(100vh - 326px) !important;
 
   @media (min-width: 1130px) {
-    height: calc(100vh - 255px) !important;
-  }
-
-  @media only screen and (max-width: 767px) {
-    height: calc(100vh - 394px) !important;
+    height: calc(100vh - 272px) !important;
   }
 }
 

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/styles.module.scss

@@ -32,14 +32,10 @@
 
 .cloudSubscriptions {
   overflow: hidden !important;
-  height: calc(100vh - 275px) !important;
+  height: calc(100vh - 292px) !important;
 
   @media (min-width: 1230px) {
-    height: calc(100vh - 225px) !important;
-  }
-
-  @media only screen and (max-width: 767px) {
-    height: calc(100vh - 360px) !important;
+    height: calc(100vh - 238px) !important;
   }
 }
 

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/styles.module.scss

@@ -3,14 +3,10 @@
 @import '@elastic/eui/src/global_styling/index';
 
 :global(.homePage) :global(.sentinelDatabaseListResult) {
-  height: calc(100vh - 275px) !important;
+  height: calc(100vh - 292px) !important;
 
   @media (min-width: 1130px) {
-    height: calc(100vh - 225px) !important;
-  }
-
-  @media only screen and (max-width: 767px) {
-    height: calc(100vh - 360px) !important;
+    height: calc(100vh - 238px) !important;
   }
 }
 

redisinsight/ui/src/pages/autodiscover-sentinel/styles.module.scss

@@ -3,18 +3,10 @@
 @import "@elastic/eui/src/global_styling/index";
 
 :global(.homePage) :global(.sentinelDatabaseList) {
-  height: calc(100vh - 340px) !important;
+  height: calc(100vh - 356px) !important;
 
   @media (min-width: 1180px) {
-    height: calc(100vh - 280px) !important;
-  }
-
-  @media only screen and (max-width: 767px) {
-    height: calc(100vh - 440px) !important;
-  }
-
-  @media (min-width: 768px) and (max-width: 870px) {
-    height: calc(100vh - 360px) !important;
+    height: calc(100vh - 292px) !important;
   }
 }
 

redisinsight/ui/src/pages/home/components/databases-list-component/styles.module.scss

@@ -66,18 +66,10 @@ $breakpoint-l: 1400px;
 .noSearchResults {
   display: flex;
 
-  height: calc(100vh - 315px);
+  height: calc(100vh - 278px);
   align-items: center;
   flex-direction: column;
   justify-content: center;
-
-  @media (min-width: 768px) and (max-width: 1100px) {
-    height: calc(100vh - 223px);
-  }
-
-  @media (min-width: 1101px) {
-    height: calc(100vh - 248px);
-  }
 }
 
 .tableMsgTitle {

redisinsight/ui/src/pages/redis-cluster/styles.module.scss

@@ -13,26 +13,18 @@ $breakpoint-to-wrap-buttons: 660px;
 
 :global(.homePage) {
   :global(.clusterDatabaseList) {
-    height: calc(100vh - 300px) !important;
+    height: calc(100vh - 316px) !important;
 
     @media (min-width: 1130px) {
-      height: calc(100vh - 245px) !important;
-    }
-
-    @media only screen and (max-width: 767px) {
-      height: calc(100vh - 389px) !important;
+      height: calc(100vh - 256px) !important;
     }
   }
 
   :global(.clusterDatabaseListResult) {
-    height: calc(100vh - 280px) !important;
+    height: calc(100vh - 296px) !important;
 
     @media (min-width: 1130px) {
-      height: calc(100vh - 220px) !important;
-    }
-
-    @media only screen and (max-width: 767px) {
-      height: calc(100vh - 360px) !important;
+      height: calc(100vh - 232px) !important;
     }
   }
 }