Merge pull request #1213 from RedisInsight/fe/feature/RI-3479_redis-auto-btn

#RI-3479 - add redis-auto button

Author: rsergeenko

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

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
+import { v4 as uuidv4 } from 'uuid'
 import { EuiFlexItem, EuiIcon, EuiLoadingContent, EuiTextColor } from '@elastic/eui'
 import { pluginApi } from 'uiSrc/services/PluginAPI'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
@@ -210,7 +211,7 @@ const QueryCardCliPlugin = (props: Props) => {
   useEffect(() => {
     const view = visualizations.find((visualization: IPluginVisualization) => visualization.uniqId === id)
     if (view) {
-      generatedIframeNameRef.current = `${view.plugin.name}-${Date.now()}`
+      generatedIframeNameRef.current = `${view.plugin.name}-${uuidv4()}`
       setCurrentView(view)
 
       const { plugin } = view

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/EnablementArea.tsx

@@ -3,6 +3,7 @@ import { useHistory, useLocation } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
 import cx from 'classnames'
 import { EuiListGroup, EuiLoadingContent } from '@elastic/eui'
+import { CodeButtonParams, ExecuteButtonMode } from 'uiSrc/pages/workbench/components/enablement-area/interfaces'
 import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 import { EnablementAreaProvider, IInternalPage } from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
 import { appContextWorkbenchEA, resetWorkbenchEAItem } from 'uiSrc/slices/app/context'
@@ -14,7 +15,7 @@ import {
   InternalLink,
   LazyCodeButton,
   LazyInternalPage,
-  PlainText
+  PlainText,
 } from './components'
 
 import styles from './styles.module.scss'
@@ -25,7 +26,11 @@ export interface Props {
   guides: Record<string, IEnablementAreaItem>
   tutorials: Record<string, IEnablementAreaItem>
   loading: boolean
-  openScript: (script: string, path?: string, name?: string) => void
+  openScript: (
+    script: string,
+    execute?: { mode?: ExecuteButtonMode, params?: CodeButtonParams },
+    file?: { path?: string, name?: string }
+  ) => void
   onOpenInternalPage: (page: IInternalPage) => void
   isCodeBtnDisabled?: boolean
 }

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Code/Code.spec.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { fireEvent, render } from 'uiSrc/utils/test-utils'
-import { EnablementAreaProvider, defaultValue } from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
 import { MONACO_MANUAL } from 'uiSrc/constants'
+import { ExecuteButtonMode } from 'uiSrc/pages/workbench/components/enablement-area/interfaces'
+import { defaultValue, EnablementAreaProvider } from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 
 import Code, { Props } from './Code'
 
@@ -29,6 +30,21 @@ describe('Code', () => {
 
     const link = queryByTestId(`preselect-${label}`)
     fireEvent.click(link as Element)
-    expect(setScript).toBeCalledWith(MONACO_MANUAL)
+    expect(setScript).toBeCalledWith(MONACO_MANUAL, {}, undefined)
+  })
+
+  it('should correctly set script with auto execute', () => {
+    const setScript = jest.fn()
+    const label = 'Manual'
+
+    render(
+      <EnablementAreaProvider value={{ ...defaultValue, setScript }}>
+        <Code {...instance(mockedProps)} label={label} mode={ExecuteButtonMode.Auto}>{MONACO_MANUAL}</Code>
+      </EnablementAreaProvider>
+    )
+
+    screen.debug()
+    fireEvent.click(screen.queryByTestId(`preselect-auto-${label}`) as Element)
+    expect(setScript).toBeCalledWith(MONACO_MANUAL, { mode: ExecuteButtonMode.Auto }, undefined)
   })
 })

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Code/Code.tsx

@@ -1,33 +1,48 @@
-import React, { useContext } from 'react'
 import { startCase } from 'lodash'
+import React, { useContext } from 'react'
 import { useLocation } from 'react-router-dom'
-
+import { getFileInfo, parseParams } from 'uiSrc/pages/workbench/components/enablement-area/EnablementArea/utils'
+import { CodeButtonParams, ExecuteButtonMode } from 'uiSrc/pages/workbench/components/enablement-area/interfaces'
 import EnablementAreaContext from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
-import { getFileInfo } from 'uiSrc/pages/workbench/components/enablement-area/EnablementArea/utils/getFileInfo'
+import { Maybe } from 'uiSrc/utils'
 
 import CodeButton from '../CodeButton'
 
 export interface Props {
-  label: string;
-  children: string;
+  label: string
+  children: string
+  params?: string
+  mode?: ExecuteButtonMode
 }
 
-const Code = ({ children, ...rest }: Props) => {
+const Code = ({ children, params, mode, ...rest }: Props) => {
   const { search } = useLocation()
   const { setScript, isCodeBtnDisabled } = useContext(EnablementAreaContext)
 
-  const loadContent = () => {
+  const loadContent = (execute: { mode?: ExecuteButtonMode, params?: CodeButtonParams }) => {
     const pagePath = new URLSearchParams(search).get('item')
+    let file: Maybe<{ path: string, name: string }>
+
     if (pagePath) {
       const pageInfo = getFileInfo(pagePath)
-      setScript(children, `${pageInfo.location}/${pageInfo.name}`, startCase(rest.label))
-    } else {
-      setScript(children)
+      file = {
+        path: `${pageInfo.location}/${pageInfo.name}`,
+        name: startCase(rest.label)
+      }
     }
+
+    setScript(children, execute, file)
   }
 
   return (
-    <CodeButton className="mb-s mt-s" onClick={loadContent} disabled={isCodeBtnDisabled} {...rest} />
+    <CodeButton
+      className="mb-s mt-s"
+      onClick={loadContent}
+      params={parseParams(params)}
+      mode={mode}
+      disabled={isCodeBtnDisabled}
+      {...rest}
+    />
   )
 }
 

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/CodeButton/CodeButton.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
+import { ExecuteButtonMode } from 'uiSrc/pages/workbench/components/enablement-area/interfaces'
 import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import CodeButton, { Props } from './CodeButton'
 
@@ -14,6 +15,14 @@ describe('CodeButton', () => {
     expect(component).toBeTruthy()
     expect(container).toHaveTextContent(label)
   })
+
+  it('should not render auto-execute button', () => {
+    const label = 'Manual'
+    render(<CodeButton {...instance(mockedProps)} label={label} />)
+
+    expect(screen.queryByTestId(`preselect-auto-${label}`)).not.toBeInTheDocument()
+  })
+
   it('should call onClick function', () => {
     const onClick = jest.fn()
     const label = 'Manual'
@@ -23,4 +32,22 @@ describe('CodeButton', () => {
 
     expect(onClick).toBeCalled()
   })
+
+  it('should call onClick with auto execute param', () => {
+    const onClick = jest.fn()
+    const label = 'Auto'
+
+    render(
+      <CodeButton
+        {...instance(mockedProps)}
+        label={label}
+        onClick={onClick}
+        mode={ExecuteButtonMode.Auto}
+        params={{}}
+      />
+    )
+    fireEvent.click(screen.getByTestId(`preselect-auto-${label}`))
+
+    expect(onClick).toBeCalledWith({ mode: ExecuteButtonMode.Auto, params: {} })
+  })
 })

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/CodeButton/CodeButton.tsx

@@ -1,32 +1,48 @@
+import { EuiButton, EuiIcon } from '@elastic/eui'
+import cx from 'classnames'
 import React from 'react'
-import { EuiButton } from '@elastic/eui'
+import { CodeButtonParams, ExecuteButtonMode } from 'uiSrc/pages/workbench/components/enablement-area/interfaces'
 import { truncateText } from 'uiSrc/utils'
 
 import styles from './styles.module.scss'
 
 export interface Props {
-  onClick: () => void
+  onClick: (execute: { mode?: ExecuteButtonMode, params?: CodeButtonParams }) => void
   label: string
   isLoading?: boolean
   disabled?: boolean
   className?: string
+  params?: CodeButtonParams
+  mode?: ExecuteButtonMode
+}
+const CodeButton = ({ onClick, label, isLoading, className, disabled, params, mode, ...rest }: Props) => {
+  const isAutoExecute = mode === ExecuteButtonMode.Auto
+
+  return (
+    <EuiButton
+      iconSide="right"
+      isLoading={isLoading}
+      size="s"
+      onClick={() => onClick({ mode, params })}
+      fullWidth
+      color="secondary"
+      className={cx(className, styles.button)}
+      textProps={{ className: styles.buttonText }}
+      data-testid={`preselect-${isAutoExecute ? 'auto-' : ''}${label}`}
+      disabled={disabled}
+      {...rest}
+    >
+      <>
+        {truncateText(label, 86)}
+        {isAutoExecute && (
+          <EuiIcon
+            className={styles.autoExecuteIcon}
+            type="playFilled"
+          />
+        )}
+      </>
+    </EuiButton>
+  )
 }
-const CodeButton = ({ onClick, label, isLoading, className, disabled, ...rest }: Props) => (
-  <EuiButton
-    iconSide="right"
-    isLoading={isLoading}
-    size="s"
-    onClick={onClick}
-    fullWidth
-    color="secondary"
-    className={[className, styles.button].join(' ')}
-    textProps={{ className: styles.buttonText }}
-    data-testid={`preselect-${label}`}
-    disabled={disabled}
-    {...rest}
-  >
-    {truncateText(label, 86)}
-  </EuiButton>
-)
 
 export default CodeButton

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/CodeButton/styles.module.scss

@@ -2,6 +2,7 @@
 
 .button {
   justify-content: space-between;
+  position: relative;
   &[class*='euiButton--secondary']:not([class*='isDisabled']) {
     &:hover,
     &:focus,
@@ -15,6 +16,20 @@
       color: var(--euiTextSubduedColor);
     }
   }
+
+  :global(.euiButton__content) {
+    padding: 0 24px !important;
+  }
+
+  .autoExecuteIcon {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    transform: translateY(-50%);
+
+    width: 16px;
+    height: 16px;
+  }
 }
 
 .buttonText {

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/LazyCodeButton/LazyCodeButton.tsx

@@ -27,7 +27,7 @@ const LazyCodeButton = ({ path = '', ...rest }: Props) => {
         if (isStatusSuccessful(status)) {
           setLoading(false)
           const pageInfo = getFileInfo(path)
-          setScript(data, pageInfo.location, startCase(pageInfo.name))
+          setScript(data, {}, { path: pageInfo.location, name: startCase(pageInfo.name) })
         }
       } catch (error) {
         setLoading(false)

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/index.ts

@@ -0,0 +1,5 @@
+export * from './parseParams'
+export * from './getFileInfo'
+export * from './remarkImage'
+export * from './rehypeLinks'
+export * from './remarkRedisCode'

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/parseParams.ts

@@ -0,0 +1,17 @@
+import { CodeButtonParams } from 'uiSrc/pages/workbench/components/enablement-area/interfaces'
+
+export const parseParams = (params?: string): CodeButtonParams | undefined => {
+  if (params?.match(/(^\[).+(]$)/g)) {
+    return params
+      ?.replace(/^\[|]$/g, '')
+      ?.split(';')
+      .reduce((prev: {}, next: string) => {
+        const [key, value] = next.split('=')
+        return {
+          ...prev,
+          [key]: value
+        }
+      }, {})
+  }
+  return undefined
+}