diff --git a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx index afaae61ee9..ccb79c4318 100644 --- a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx +++ b/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" > - + CLI @@ -71,7 +78,11 @@ const BottomGroupMinimized = () => { onClick={handleExpandHelper} data-testid="expand-command-helper" > - + Command Helper diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.spec.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.spec.tsx index ff14c3e2cc..f39db60692 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.spec.tsx +++ b/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() fireEvent.click(screen.getByTestId('hide-command-helper')) - const expectedActions = [toggleCliHelper()] + const expectedActions = [toggleCliHelper(), toggleHideCliHelper()] expect(store.getActions()).toEqual(expectedActions) }) }) diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx index 75852a3554..a6c8794e72 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx +++ b/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 ( diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceControls/AddInstanceControls.tsx b/redisinsight/ui/src/pages/home/components/AddInstanceControls/AddInstanceControls.tsx index c090f5ea71..0091de6c95 100644 --- a/redisinsight/ui/src/pages/home/components/AddInstanceControls/AddInstanceControls.tsx +++ b/redisinsight/ui/src/pages/home/components/AddInstanceControls/AddInstanceControls.tsx @@ -66,6 +66,7 @@ const AddInstanceControls = ({ onAddInstance, direction, welcomePage = false }: HELP_LINKS.createRedisCloud.event, { source: HELP_LINKS.createRedisCloud.sources[welcomePage ? 'welcome' : 'databaseList'] } )} + data-testid="promo-btn" > {HELP_LINKS.createRedisCloud.label} diff --git a/redisinsight/ui/src/pages/home/components/AddInstanceControls/styles.module.scss b/redisinsight/ui/src/pages/home/components/AddInstanceControls/styles.module.scss index 9e93011691..31b4c77ab2 100644 --- a/redisinsight/ui/src/pages/home/components/AddInstanceControls/styles.module.scss +++ b/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 { diff --git a/redisinsight/ui/src/pages/workbench/components/module-not-loaded/ModuleNotLoaded.tsx b/redisinsight/ui/src/pages/workbench/components/module-not-loaded/ModuleNotLoaded.tsx index bdf20630ec..e3f5a3c735 100644 --- a/redisinsight/ui/src/pages/workbench/components/module-not-loaded/ModuleNotLoaded.tsx +++ b/redisinsight/ui/src/pages/workbench/components/module-not-loaded/ModuleNotLoaded.tsx @@ -80,6 +80,7 @@ const ModuleNotLoaded = ({ content = {} }: Props) => { HELP_LINKS.createRedisCloud.event, { source: HELP_LINKS.createRedisCloud.sources.redisearch } )} + data-testid="promo-btn" > {HELP_LINKS.createRedisCloud.label} diff --git a/redisinsight/ui/src/pages/workbench/components/module-not-loaded/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/module-not-loaded/styles.module.scss index e545f9e952..272e2b3b89 100644 --- a/redisinsight/ui/src/pages/workbench/components/module-not-loaded/styles.module.scss +++ b/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 { diff --git a/redisinsight/ui/src/pages/workbench/constants.ts b/redisinsight/ui/src/pages/workbench/constants.ts index bf84841c64..31d70b3e12 100644 --- a/redisinsight/ui/src/pages/workbench/constants.ts +++ b/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:

' + '
  • Build and execute queries
  • Browse, analyse and export results

' + 'As a benefit you get faster turnarounds when building your application using Redis and RediSearch.', diff --git a/redisinsight/ui/src/slices/cli/cli-settings.ts b/redisinsight/ui/src/slices/cli/cli-settings.ts index a4d746c0b2..a316c41207 100644 --- a/redisinsight/ui/src/slices/cli/cli-settings.ts +++ b/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, diff --git a/redisinsight/ui/src/slices/interfaces/cli.ts b/redisinsight/ui/src/slices/interfaces/cli.ts index 624e858dde..9c1465d2f0 100644 --- a/redisinsight/ui/src/slices/interfaces/cli.ts +++ b/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; diff --git a/redisinsight/ui/src/slices/tests/cli/cli-settings.spec.ts b/redisinsight/ui/src/slices/tests/cli/cli-settings.spec.ts index 3283247999..620292110c 100644 --- a/redisinsight/ui/src/slices/tests/cli/cli-settings.spec.ts +++ b/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: '', diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss index 7352b3c036..692b273a29 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss +++ b/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}; diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss index ba80f1b1d5..6ff8cf6e37 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss @@ -70,6 +70,8 @@ $cliOutputResponseFailColor: #e06c75; $badgeBackgroundColor: #707070; $commandGroupBadgeColor: #3F4B5F; +$overlayPromoNYColor: #0000001a; + // Types colors $typeHashColor: #364CFF; $typeListColor: #008556; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss index 4b631452f0..91253851cf 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss @@ -111,6 +111,8 @@ --moduleBackgroundColor: #{$typeHashColor}; --callOutBackgroundColor: #{$callOutBackgroundColor}; + --overlayPromoNYColor: #{$overlayPromoNYColor}; + // KeyTypes --typeHashColor: #{$typeHashColor}; --typeListColor: #{$typeListColor}; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss index 13fe50fe88..d8d05da59d 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss @@ -68,6 +68,8 @@ $badgeBackgroundColor: #E8EFFF; $commandGroupBadgeColor: #B8C5DB; $callOutBackgroundColor: #E9EDFA; +$overlayPromoNYColor: #ffffff1a; + // Types colors $typeHashColor: #CDDDF8; $typeListColor: #A5D4C3;