* #RIVS-280 - [Regression] CLI returns errors for cluster db

* #RIVS-277 - [Regression] Incorrect displaying in white theme
* #RIVS-281 - [Regression]Text in add key button is not fitted

Author: egor-zalenski

src/webviews/src/assets/database/github.svg

@@ -1,5 +1,5 @@
 .addKey {
-  @apply mr-4 min-w-[68px] max-h-[22px];
+  @apply mr-4 min-w-[72px] max-h-[22px];
 
   &::part(control) {
     @apply px-2 py-0.5;

src/webviews/src/components/no-keys-message/styles.module.scss

@@ -14,7 +14,6 @@ import {
   // Pages
 } from 'uiSrc/constants'
 import { getCommandRepeat, isRepeatCountCorrect, sendEventTelemetry, TelemetryEvent } from 'uiSrc/utils'
-import { ClusterNodeRole } from 'uiSrc/interfaces'
 import { checkUnsupportedCommand, clearOutput, cliCommandOutput } from 'uiSrc/modules/cli/utils/cliHelper'
 import { useDatabasesStore } from 'uiSrc/store'
 
@@ -62,7 +61,7 @@ export const CliBodyWrapper = () => {
   }
 
   useEffect(() => {
-    !cliClientUuid && createCliClientAction(database!)
+    !cliClientUuid && database && createCliClientAction(database!)
     resetCommand()
     return () => {
       removeCliClient()

src/webviews/src/modules/cli/components/cli-body/CliBodyWrapper.tsx

@@ -216,7 +216,7 @@ describe('thunks', () => {
   })
 
   describe('Single Node Cluster Cli command', () => {
-    it.only('call both sendCliClusterCommandAction and sendCliCommandSuccess when response status is successed', async () => {
+    it('call both sendCliClusterCommandAction and sendCliCommandSuccess when response status is successed', async () => {
       // Arrange
       const command = constants.COMMAND
       const data: any[] = [
@@ -234,10 +234,8 @@ describe('thunks', () => {
       sendCliClusterCommandAction(command)
       await waitForStack()
 
-      console.log(useCliOutputStore.getState().data[0])
-
       // Assert
-      expect(useCliOutputStore.getState().data[0]).toContain('(nil)')
+      expect((useCliOutputStore.getState().data[0] as any).props?.children).toEqual('"(nil)"')
     })
 
     it('call both sendCliClusterCommandAction and sendCliCommandSuccess when response status is fail', async () => {
@@ -259,9 +257,7 @@ describe('thunks', () => {
       await waitForStack()
 
       // Assert
-      expect(useCliOutputStore.getState().data[0].toString()).toEqual(
-        '-> Redirected to slot [6918] located at 127.0.0.1:7002'
-      )
+      expect((useCliOutputStore.getState().data[0] as any).props?.children).toEqual('(nil)')
     })
 
     it('call both updateCliClientAction on ClientNotFound error', async () => {

src/webviews/src/modules/cli/hooks/cli-output/tests/useCliOutput.spec.tsx

@@ -23,7 +23,7 @@ export function sendCliCommandAction(
   onSuccessAction?: () => void,
   onFailAction?: () => void,
 ) {
-  return useCliOutputStore.setState(async (state) => {
+  useCliOutputStore.setState(async (state) => {
     let cliClientUuid
     try {
       cliClientUuid = useCliSettingsStore.getState().cliClientUuid
@@ -82,7 +82,7 @@ export function sendCliClusterCommandAction(
   onSuccessAction?: () => void,
   onFailAction?: () => void,
 ) {
-  return useCliOutputStore.setState(async (state) => {
+  useCliOutputStore.setState(async (state) => {
     let cliClientUuid
     try {
       const outputFormat = CliOutputFormatterType.Raw

src/webviews/src/modules/cli/hooks/cli-output/useCliOutputThunks.ts

@@ -81,7 +81,7 @@ export const WelcomePage: FC = () => {
             <div className={styles.data}>
               <h3>{l10n.t('Recommended')}</h3>
               {contentGithub && (
-                <PromoLink Icon={GithubIcon} {...contentGithub} />
+                <PromoLink Icon={GithubIcon} className={styles.github} {...contentGithub} />
               )}
               {contentRI && (
                 <PromoLink Icon={ShortLogoSvg} {...contentRI} />

src/webviews/src/pages/WelcomePage/WelcomePage.tsx

@@ -17,3 +17,7 @@
 .data {
   @apply max-w-[300px];
 }
+
+.github svg path {
+  fill: var(--vscode-foreground);
+}

src/webviews/src/pages/WelcomePage/styles.module.scss

@@ -14,7 +14,7 @@ vscode-dropdown {
   @apply bg-vscode-input-background h-9;
 
   &__option {
-    @apply bg-vscode-input-background h-9 pl-2 items-center #{!important};
+    @apply bg-vscode-input-background h-9 pl-2 items-center text-vscode-foreground #{!important};
   }
 
   &::part(listbox) {

src/webviews/src/styles/base/_select.scss

@@ -1,21 +1,23 @@
 import React, { FunctionComponent, SVGProps } from 'react'
+import cx from 'classnames'
 
 import { ContentFeatureCreateRedis } from 'uiSrc/store/hooks/use-app-info-store/interface'
 import styles from './styles.module.scss'
 
 export interface Props extends ContentFeatureCreateRedis {
   onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
   testId?: string
+  className?: string
   Icon?: FunctionComponent<SVGProps<SVGSVGElement>>
   styles?: any
 }
 
 export const PromoLink = (props: Props) => {
-  const { title, description, links, onClick, testId, Icon, styles: linkStyles } = props
+  const { title, description, links, onClick, testId, Icon, styles: linkStyles, className = '' } = props
 
   return (
     <a
-      className={styles.link}
+      className={cx(styles.link, className)}
       href={links?.main.url}
       target="_blank"
       rel="noreferrer"

src/webviews/src/ui/promo-link/PromoLink.tsx

@@ -1,6 +1,6 @@
 // remove line break and encode angular brackets
 const parsePastedText = (text: string = '') =>
-  text.replace(/\n/gi, '').replace(/</gi, '<').replace(/>/gi, '>')
+  text.replace(/(\r?\n)/gi, '').replace(/</gi, '<').replace(/>/gi, '>')
 
 export {
   parsePastedText,