Merge branch 'main' into feature/RI-2083_enablement-area-markdown

# Conflicts:
#	redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx
#	redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx

Author: Artyom Podymov

redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

@@ -161,7 +161,7 @@ const NavigationMenu = () => {
         </>
         )}
     >
-      <div className={styles.popover}>
+      <div className={styles.popover} data-testid="help-center">
         <EuiTitle size="xs">
           <span>Help Center</span>
         </EuiTitle>
@@ -173,6 +173,7 @@ const NavigationMenu = () => {
               className={styles.helpMenuItemLink}
               href="https://github.com/RedisInsight/RedisInsight/issues"
               target="_blank"
+              data-testid="submit-bug-btn"
             >
               <EuiIcon type="flag" size="xl" />
               <EuiSpacer size="s" />
@@ -185,6 +186,7 @@ const NavigationMenu = () => {
           <EuiFlexItem
             className={styles.helpMenuItem}
             onClick={() => onKeyboardShortcutClick()}
+            data-testid="shortcuts-btn"
           >
             <div className={styles.helpMenuItemLink}>
               <EuiIcon type="keyboardShortcut" size="xl" />
@@ -206,6 +208,7 @@ const NavigationMenu = () => {
               onClick={onClickReleaseNotes}
               href="https://docs.redis.com/staging/release-ri-v2.0/ri/release-notes/"
               target="_blank"
+              data-testid="release-notes-btn"
             >
               <div className={cx({ [styles.helpMenuItemNotified]: isReleaseNotesViewed === false })}>
                 <EuiIcon type="package" size="xl" />

redisinsight/ui/src/components/query-card/QueryCard.tsx

@@ -149,7 +149,7 @@ const QueryCard = (props: Props) => {
         {isOpen && (
           <>
             {React.isValidElement(result)
-              ? <QueryCardCommonResult result={result} />
+              ? <QueryCardCommonResult loading={loading} result={result} />
               : (
                 <>
                   {viewTypeSelected === WBQueryType.Plugin && (
@@ -170,7 +170,7 @@ const QueryCard = (props: Props) => {
                     </>
                   )}
                   {viewTypeSelected === WBQueryType.Text && (
-                    <QueryCardCliResult query={query} status={status} result={result} />
+                    <QueryCardCliResult loading={loading} query={query} status={status} result={result} />
                   )}
                 </>
               )}

redisinsight/ui/src/components/query-card/QueryCardCliPlugin/QueryCardCliPlugin.tsx

@@ -47,24 +47,32 @@ const QueryCardCliPlugin = (props: Props) => {
 
   const dispatch = useDispatch()
 
+  const sendMessageToPlugin = (data = {}) => {
+    const event: any = document.createEvent('Event')
+    event.initEvent('message', false, false)
+    event.data = data
+    event.origin = '*'
+    pluginIframeRef?.current?.contentWindow?.dispatchEvent(event)
+  }
+
   const executeCommand = () => {
-    pluginIframeRef?.current?.contentWindow?.postMessage({
+    sendMessageToPlugin({
       event: 'executeCommand',
       method: currentView.activationMethod,
       data: { command: query, data: result, status }
-    }, '*')
+    })
   }
 
   const sendRedisCommand = (command: string, requestId: string) => {
     dispatch(
       sendPluginCommandAction({
         command,
         onSuccessAction: (response) => {
-          pluginIframeRef?.current?.contentWindow?.postMessage({
+          sendMessageToPlugin({
             event: 'executeRedisCommand',
             requestId,
             data: response
-          }, '*')
+          })
         }
       })
     )
@@ -108,7 +116,7 @@ const QueryCardCliPlugin = (props: Props) => {
       modules
     })
     // @ts-ignore
-    pluginIframeRef.current.src = `data:text/html;charset=utf-8,${encodeURI(html)}`
+    pluginIframeRef.current.srcdoc = html
   }
 
   const getGlobalStylesSrc = (): string =>

redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.spec.tsx

@@ -50,7 +50,7 @@ describe('QueryCardCliResult', () => {
     expect(resultEl).toHaveTextContent(result)
   })
 
-  it('Result element should not render without result prop', () => {
+  it('Result element should render (nil) result', () => {
     const result = ''
 
     const { queryByTestId } = render(
@@ -59,6 +59,6 @@ describe('QueryCardCliResult', () => {
 
     const resultEl = queryByTestId(resultTestId)
 
-    expect(resultEl).not.toBeInTheDocument()
+    expect(resultEl).toHaveTextContent('(nil)')
   })
 })

redisinsight/ui/src/components/query-card/QueryCardCliResult/QueryCardCliResult.tsx

@@ -4,25 +4,27 @@ import { EuiLoadingContent } from '@elastic/eui'
 
 import { cliParseTextResponse, CliPrefix, Maybe } from 'uiSrc/utils'
 import { CommandExecutionStatus } from 'uiSrc/slices/interfaces/cli'
+
 import styles from './styles.module.scss'
 
 export interface Props {
   status: Maybe<CommandExecutionStatus>;
   query: string;
   result: any;
+  loading?: boolean;
 }
 
 const QueryCardCliResult = (props: Props) => {
-  const { result, query, status } = props
+  const { result, query, status, loading } = props
 
   return (
     <div className={cx('queryResultsContainer', styles.container)}>
-      {!!result && (
+      {!loading && (
         <div data-testid="query-cli-result">
-          {cliParseTextResponse(result, query, status, CliPrefix.QueryCard)}
+          {cliParseTextResponse(result || '(nil)', query, status, CliPrefix.QueryCard)}
         </div>
       )}
-      {!result && (
+      {loading && (
         <div className={styles.loading}>
           <EuiLoadingContent lines={1} />
         </div>

redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.spec.tsx

@@ -17,4 +17,14 @@ describe('QueryCardCliResult', () => {
   it('should render', () => {
     expect(render(<QueryCardCommonResult {...instance(mockedProps)} />)).toBeTruthy()
   })
+  it('should render (nil) result', () => {
+    const result = ''
+    const { queryByTestId } = render(
+      <QueryCardCommonResult {...instance(mockedProps)} result={result} />
+    )
+
+    const resultEl = queryByTestId('query-common-result')
+
+    expect(resultEl).toHaveTextContent('(nil)')
+  })
 })

redisinsight/ui/src/components/query-card/QueryCardCommonResult/QueryCardCommonResult.tsx

@@ -5,20 +5,21 @@ import { EuiLoadingContent } from '@elastic/eui'
 import styles from './styles.module.scss'
 
 export interface Props {
-  result: React.ReactElement;
+  result: React.ReactElement | string;
+  loading?: boolean;
 }
 
 const QueryCardCommonResult = (props: Props) => {
-  const { result } = props
+  const { result, loading } = props
 
   return (
     <div className={cx('queryResultsContainer', styles.container)}>
-      {!!result && (
+      {!loading && (
         <div data-testid="query-common-result">
-          { result }
+          { result || '(nil)' }
         </div>
       )}
-      {!result && (
+      {loading && (
         <div className={styles.loading}>
           <EuiLoadingContent lines={1} />
         </div>

redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx

@@ -31,7 +31,7 @@ describe('ShortcutsFlyout', () => {
 
     SHORTCUTS.forEach((group: ShortcutGroup) => {
       expect(
-        document.querySelector(`[data-test-subj="shortcut-title-${group.name}"]`)
+        document.querySelector(`[data-test-subj="shortcuts-section-${group.name}"]`)
       ).toBeInTheDocument()
     })
   })

redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx

@@ -36,7 +36,7 @@ const ShortcutsFlyout = () => {
 
   const ShortcutsTable = ({ name, items }: ShortcutGroup) => (
     <div key={name}>
-      <EuiTitle size="xxs" data-test-subj={`shortcut-title-${name}`}>
+      <EuiTitle size="xxs" data-test-subj={`shortcuts-section-${name}`}>
         <h6>{name}</h6>
       </EuiTitle>
       <EuiSpacer size="m" />
@@ -55,9 +55,10 @@ const ShortcutsFlyout = () => {
       ownFocus
       size="538px"
       onClose={() => dispatch(setShortcutsFlyoutState(false))}
+      data-test-subj="shortcuts-flyout"
     >
       <EuiFlyoutBody>
-        <EuiTitle size="s" className={styles.title}>
+        <EuiTitle size="s" className={styles.title} data-testid="shortcuts-title">
           <h4>Shortcuts</h4>
         </EuiTitle>
         <EuiSpacer size="m" />

redisinsight/ui/src/constants/storage.ts

@@ -8,6 +8,7 @@ enum BrowserStorageItem {
   segmentAnonymousId = 'ajs_anonymous_id',
   wbClientUuid = 'wbClientUuid',
   wbInputHistory = 'wbInputHistory',
+  isEnablementAreaMinimized = 'isEnablementAreaMinimized'
 }
 
 export default BrowserStorageItem