* #RI-2241 - CLI and Command helper icons are not in blue when hidden

* #RI-2245 - Background is not fully displayed inside of the button
* #RI-2246 - Link to the Cloud is not correct

Author: egor-zalenski

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx

@@ -10,14 +10,20 @@ import {
   cliSettingsSelector,
   clearSearchingCommand,
   setCliEnteringCommand,
+  toggleHideCliHelper,
 } from 'uiSrc/slices/cli/cli-settings'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import styles from '../../styles.module.scss'
 
 const BottomGroupMinimized = () => {
-  const { isShowHelper, isShowCli } = useSelector(cliSettingsSelector)
   const { instanceId = '' } = useParams<{ instanceId: string }>()
+  const {
+    isShowCli,
+    cliClientUuid,
+    isShowHelper,
+    isMinimizedHelper,
+  } = useSelector(cliSettingsSelector)
   const dispatch = useDispatch()
 
   useEffect(() =>
@@ -43,6 +49,7 @@ const BottomGroupMinimized = () => {
         databaseId: instanceId
       }
     })
+    isMinimizedHelper && dispatch(toggleHideCliHelper())
     dispatch(toggleCliHelper())
   }
 
@@ -60,7 +67,7 @@ const BottomGroupMinimized = () => {
           onClick={handleExpandCli}
           data-testid="expand-cli"
         >
-          <EuiBadge className={cx(styles.componentBadge, { [styles.active]: isShowCli })}>
+          <EuiBadge className={cx(styles.componentBadge, { [styles.active]: isShowCli || cliClientUuid })}>
             <EuiIcon type="console" size="m" />
             <span>CLI</span>
           </EuiBadge>
@@ -71,7 +78,11 @@ const BottomGroupMinimized = () => {
           onClick={handleExpandHelper}
           data-testid="expand-command-helper"
         >
-          <EuiBadge className={cx(styles.componentBadge, { [styles.active]: isShowHelper })}>
+          <EuiBadge className={cx(
+            styles.componentBadge,
+            { [styles.active]: isShowHelper || isMinimizedHelper }
+          )}
+          >
             <EuiIcon type="documents" size="m" />
             <span>Command Helper</span>
           </EuiBadge>

redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.spec.tsx

@@ -6,7 +6,7 @@ import {
   render,
   screen,
 } from 'uiSrc/utils/test-utils'
-import { resetCliHelperSettings, toggleCliHelper } from 'uiSrc/slices/cli/cli-settings'
+import { resetCliHelperSettings, toggleCliHelper, toggleHideCliHelper } from 'uiSrc/slices/cli/cli-settings'
 import CommandHelperHeader from './CommandHelperHeader'
 
 let store: typeof mockedStore
@@ -33,7 +33,7 @@ describe('CommandHelperHeader', () => {
     render(<CommandHelperHeader />)
     fireEvent.click(screen.getByTestId('hide-command-helper'))
 
-    const expectedActions = [toggleCliHelper()]
+    const expectedActions = [toggleCliHelper(), toggleHideCliHelper()]
     expect(store.getActions()).toEqual(expectedActions)
   })
 })

redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx

@@ -11,7 +11,7 @@ import {
   EuiIcon,
 } from '@elastic/eui'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { resetCliHelperSettings, toggleCliHelper } from 'uiSrc/slices/cli/cli-settings'
+import { resetCliHelperSettings, toggleCliHelper, toggleHideCliHelper } from 'uiSrc/slices/cli/cli-settings'
 
 import styles from './styles.module.scss'
 
@@ -37,6 +37,7 @@ const CommandHelperHeader = () => {
       }
     })
     dispatch(toggleCliHelper())
+    dispatch(toggleHideCliHelper())
   }
 
   return (

redisinsight/ui/src/pages/home/components/AddInstanceControls/styles.module.scss

@@ -42,6 +42,8 @@
   width: 413px;
   height: 64px;
   padding-right: 40px;
+  background: url(../../../../assets/img/NYbg.jpg) center;
+  background-size: cover;
 
   &::before {
     content: '';
@@ -50,9 +52,7 @@
     right: 0px;
     bottom: 0px;
     left: 0px;
-    opacity: .9;
-    background: url(../../../../assets/img/NYbg.jpg) center;
-    background-size: cover;
+    background-color: var(--overlayPromoNYColor);
   }
 
   &:hover {

redisinsight/ui/src/pages/workbench/components/module-not-loaded/styles.module.scss

@@ -53,6 +53,8 @@
   width: 413px;
   height: 64px;
   padding-right: 40px;
+  background: url(../../../../assets/img/NYbg.jpg) center;
+  background-size: cover;
 
   &::before {
     content: '';
@@ -61,9 +63,7 @@
     right: 0px;
     bottom: 0px;
     left: 0px;
-    opacity: .9;
-    background: url(../../../../assets/img/NYbg.jpg) center;
-    background-size: cover;
+    background-color: var(--overlayPromoNYColor);
   }
 
   &:hover {

redisinsight/ui/src/pages/workbench/constants.ts

@@ -31,7 +31,7 @@ export enum ModuleCommandPrefix {
 export const RSNotLoadedContent: IModuleNotLoadedContent = {
   output: 'RediSearch module is not loaded for this database',
   createCloudBtnText: 'Create your free Redis database with RediSearch on Redis Cloud​',
-  createCloudBtnHref: 'https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight_offer_jan',
+  createCloudBtnHref: 'https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight_redisearch_offer_jan',
   summaryText: 'RedisInsight supports RediSearch and allows you to:<br/><br/>'
     + '<ul><li>Build and execute queries</li><li>Browse, analyse and export results</li></ul></br>'
     + 'As a benefit you get faster turnarounds when building your application using Redis and RediSearch.',

redisinsight/ui/src/slices/cli/cli-settings.ts

@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit'
-import { apiService, localStorageService, sessionStorageService } from 'uiSrc/services'
+import { apiService, sessionStorageService } from 'uiSrc/services'
 import { ApiEndpoints, BrowserStorageItem } from 'uiSrc/constants'
 import { getApiErrorMessage, getUrl, isStatusSuccessful } from 'uiSrc/utils'
 import { CreateCliClientResponse, DeleteClientResponse } from 'apiSrc/modules/cli/dto/cli.dto'
@@ -8,6 +8,7 @@ import { AppDispatch, RootState } from '../store'
 import { StateCliSettings } from '../interfaces/cli'
 
 export const initialState: StateCliSettings = {
+  isMinimizedHelper: false,
   isShowHelper: false,
   isShowCli: false,
   loading: false,
@@ -35,10 +36,12 @@ const cliSettingsSlice = createSlice({
     },
     // collapse / uncollapse CLI Helper
     toggleCliHelper: (state) => {
-      const isShowHelper = !state.isShowHelper
-      state.isShowHelper = isShowHelper
-
-      localStorageService?.set(BrowserStorageItem.cliIsShowHelper, isShowHelper)
+      state.isShowHelper = !state.isShowHelper
+      state.isMinimizedHelper = !state.isMinimizedHelper
+    },
+    // hide / unhide CLI Helper
+    toggleHideCliHelper: (state) => {
+      state.isMinimizedHelper = !state.isMinimizedHelper
     },
 
     setMatchedCommand: (state, { payload }: { payload: string }) => {
@@ -121,6 +124,7 @@ const cliSettingsSlice = createSlice({
       state.isShowHelper = false
       state.isSearching = false
       state.isEnteringCommand = false
+      state.isMinimizedHelper = false
       state.matchedCommand = ''
       state.searchingCommand = ''
       state.searchedCommand = ''
@@ -134,6 +138,7 @@ export const {
   setCliSettingsInitialState,
   toggleCli,
   toggleCliHelper,
+  toggleHideCliHelper,
   setMatchedCommand,
   setSearchedCommand,
   setSearchingCommand,

redisinsight/ui/src/slices/interfaces/cli.ts

@@ -10,6 +10,7 @@ export enum ClusterNodeRole {
 }
 
 export interface StateCliSettings {
+  isMinimizedHelper: boolean;
   isShowCli: boolean;
   isShowHelper: boolean;
   cliClientUuid: string;

redisinsight/ui/src/slices/tests/cli/cli-settings.spec.ts

@@ -48,6 +48,7 @@ describe('cliSettings slice', () => {
       const state: typeof initialState = {
         ...initialState,
         isShowHelper: false,
+        isMinimizedHelper: false,
       }
 
       expect(cliSettingsSelector(initialStateDefault)).toEqual(state)
@@ -58,6 +59,7 @@ describe('cliSettings slice', () => {
       const state: typeof initialState = {
         ...initialState,
         isShowHelper: true,
+        isMinimizedHelper: true,
       }
 
       // Act
@@ -79,6 +81,7 @@ describe('cliSettings slice', () => {
       const state: typeof initialState = {
         ...initialState,
         isShowCli: true,
+        isMinimizedHelper: false,
       }
 
       // Act
@@ -95,7 +98,7 @@ describe('cliSettings slice', () => {
   })
 
   describe('setMatchedCommand', () => {
-    it('should properly set !isShowCli', () => {
+    it('should properly set matchedCommand', () => {
       // Arrange
       const matchedCommand = 'get'
       const state: typeof initialState = {
@@ -117,7 +120,7 @@ describe('cliSettings slice', () => {
   })
 
   describe('setCliEnteringCommand', () => {
-    it('should properly set !isShowCli', () => {
+    it('should properly set isEnteringCommand = true', () => {
       // Arrange
       const state: typeof initialState = {
         ...initialState,
@@ -281,6 +284,7 @@ describe('cliSettings slice', () => {
         isShowHelper: true,
         isSearching: true,
         isEnteringCommand: true,
+        isMinimizedHelper: true,
         matchedCommand: '123',
         searchingCommand: '123',
         searchedCommand: '123',
@@ -292,6 +296,7 @@ describe('cliSettings slice', () => {
         isShowHelper: false,
         isSearching: false,
         isEnteringCommand: false,
+        isMinimizedHelper: false,
         matchedCommand: '',
         searchingCommand: '',
         searchedCommand: '',

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

@@ -109,6 +109,8 @@
   --moduleBackgroundColor: #{$commandGroupBadgeColor};
   --callOutBackgroundColor: #{$euiTooltipBackgroundColor};
 
+  --overlayPromoNYColor: #{$overlayPromoNYColor};
+
   // KeyTypes
   --typeHashColor: #{$typeHashColor};
   --typeListColor: #{$typeListColor};