#RI-3479 - fix pr comments

rsergeenko · rsergeenko · commit bfb53d34e363 · 2022-09-28T18:02:20.000+04:00
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/EnablementArea.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/EnablementArea.tsx
@@ -28,10 +28,8 @@ export interface Props {
   loading: boolean
   openScript: (
     script: string,
-    execute?: ExecuteButtonMode,
-    params?: CodeButtonParams,
-    path?: string,
-    name?: string
+    execute?: { mode?: ExecuteButtonMode, params?: CodeButtonParams },
+    file?: { path?: string, name?: string }
   ) => void
   onOpenInternalPage: (page: IInternalPage) => void
   isCodeBtnDisabled?: boolean
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Code/Code.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Code/Code.spec.tsx
@@ -30,7 +30,7 @@ describe('Code', () => {
 
     const link = queryByTestId(`preselect-${label}`)
     fireEvent.click(link as Element)
-    expect(setScript).toBeCalledWith(MONACO_MANUAL, ExecuteButtonMode.Manual, undefined)
+    expect(setScript).toBeCalledWith(MONACO_MANUAL, {}, undefined)
   })
 
   it('should correctly set script with auto execute', () => {
@@ -39,12 +39,12 @@ describe('Code', () => {
 
     render(
       <EnablementAreaProvider value={{ ...defaultValue, setScript }}>
-        <Code {...instance(mockedProps)} label={label} execute={ExecuteButtonMode.Auto}>{MONACO_MANUAL}</Code>
+        <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, ExecuteButtonMode.Auto, undefined)
+    expect(setScript).toBeCalledWith(MONACO_MANUAL, { mode: ExecuteButtonMode.Auto }, undefined)
   })
 })
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Code/Code.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Code/Code.tsx
@@ -1,7 +1,7 @@
-import React, { useContext } from 'react'
 import { startCase } from 'lodash'
+import React, { useContext } from 'react'
 import { useLocation } from 'react-router-dom'
-import { parseParams, getFileInfo } from 'uiSrc/pages/workbench/components/enablement-area/EnablementArea/utils'
+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'
@@ -12,29 +12,34 @@ export interface Props {
   label: string
   children: string
   params?: string
-  execute?: ExecuteButtonMode
+  mode?: ExecuteButtonMode
 }
 
-const Code = ({ children, params, execute, ...rest }: Props) => {
+const Code = ({ children, params, mode, ...rest }: Props) => {
   const { search } = useLocation()
   const { setScript, isCodeBtnDisabled } = useContext(EnablementAreaContext)
 
-  const loadContent = (execute = ExecuteButtonMode.Manual, params?: CodeButtonParams) => {
+  const loadContent = (execute: { mode?: ExecuteButtonMode, params?: CodeButtonParams }) => {
     const pagePath = new URLSearchParams(search).get('item')
+    let file: { path: string, name: string } | undefined
+
     if (pagePath) {
       const pageInfo = getFileInfo(pagePath)
-      setScript(children, execute, params, `${pageInfo.location}/${pageInfo.name}`, startCase(rest.label))
-    } else {
-      setScript(children, execute, params)
+      file = {
+        path: `${pageInfo.location}/${pageInfo.name}`,
+        name: startCase(rest.label)
+      }
     }
+
+    setScript(children, execute, file)
   }
 
   return (
     <CodeButton
       className="mb-s mt-s"
       onClick={loadContent}
       params={parseParams(params)}
-      execute={execute}
+      mode={mode}
       disabled={isCodeBtnDisabled}
       {...rest}
     />
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/CodeButton/CodeButton.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/CodeButton/CodeButton.spec.tsx
@@ -42,12 +42,12 @@ describe('CodeButton', () => {
         {...instance(mockedProps)}
         label={label}
         onClick={onClick}
-        execute={ExecuteButtonMode.Auto}
+        mode={ExecuteButtonMode.Auto}
         params={{}}
       />
     )
     fireEvent.click(screen.getByTestId(`preselect-auto-${label}`))
 
-    expect(onClick).toBeCalledWith(ExecuteButtonMode.Auto, {})
+    expect(onClick).toBeCalledWith({ mode: ExecuteButtonMode.Auto, params: {} })
   })
 })
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/CodeButton/CodeButton.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/CodeButton/CodeButton.tsx
@@ -1,31 +1,32 @@
 import { EuiButton, EuiIcon } from '@elastic/eui'
+import cx from 'classnames'
 import React from 'react'
 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: (execute?: ExecuteButtonMode, params?: CodeButtonParams) => void
+  onClick: (execute: { mode?: ExecuteButtonMode, params?: CodeButtonParams }) => void
   label: string
   isLoading?: boolean
   disabled?: boolean
   className?: string
   params?: CodeButtonParams
-  execute?: ExecuteButtonMode
+  mode?: ExecuteButtonMode
 }
-const CodeButton = ({ onClick, label, isLoading, className, disabled, params, execute, ...rest }: Props) => {
-  const isAutoExecute = execute === ExecuteButtonMode.Auto
+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(execute, params)}
+      onClick={() => onClick({ mode, params })}
       fullWidth
       color="secondary"
-      className={[className, styles.button].join(' ')}
+      className={cx(className, styles.button)}
       textProps={{ className: styles.buttonText }}
       data-testid={`preselect-${isAutoExecute ? 'auto-' : ''}${label}`}
       disabled={disabled}
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/remarkRedisCode.ts b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/remarkRedisCode.ts
@@ -24,7 +24,7 @@ export const remarkRedisCode = (): (tree: Node) => void => (tree: any) => {
 
       codeNode.type = 'html'
       // Replace it with our custom component
-      codeNode.value = `<Code label="${meta}" params="${params}" execute="${execute}">{${JSON.stringify(value)}}</Code>`
+      codeNode.value = `<Code label="${meta}" params="${params}" mode="${execute}">{${JSON.stringify(value)}}</Code>`
     }
   })
 }
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/tests/remarkRedisCode.spec.ts b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/tests/remarkRedisCode.spec.ts
@@ -5,7 +5,7 @@ import { remarkRedisCode } from '../remarkRedisCode'
 jest.mock('unist-util-visit')
 
 const getValue = (meta: string, execute = ExecuteButtonMode.Manual, params?: string, value?: string) =>
-  `<Code label="${meta}" params="${params}" execute="${execute}">{${JSON.stringify(value)}}</Code>`
+  `<Code label="${meta}" params="${params}" mode="${execute}">{${JSON.stringify(value)}}</Code>`
 
 describe('remarkRedisCode', () => {
   it('should not modify codeNode if lang not redis', () => {
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementAreaWrapper.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementAreaWrapper.tsx
@@ -11,10 +11,10 @@ import { fetchTutorials, workbenchTutorialsSelector } from 'uiSrc/slices/workben
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import { Nullable, } from 'uiSrc/utils'
+import { IInternalPage } from '../../contexts/enablementAreaContext'
 
 import EnablementArea from './EnablementArea'
 import EnablementAreaCollapse from './EnablementAreaCollapse/EnablementAreaCollapse'
-import { IInternalPage } from '../../contexts/enablementAreaContext'
 
 import styles from './styles.module.scss'
 
@@ -42,7 +42,7 @@ const EnablementAreaWrapper = (props: Props) => {
     dispatch(fetchTutorials())
   }, [])
 
-  const sendEventButtonClickedTelemetry = (data: Record<string, any>) => {
+  const sendEventButtonClickedTelemetry = (data?: Record<string, any>) => {
     sendEventTelemetry({
       event: TelemetryEvent.WORKBENCH_ENABLEMENT_AREA_COMMAND_CLICKED,
       eventData: {
@@ -54,15 +54,12 @@ const EnablementAreaWrapper = (props: Props) => {
 
   const openScript = (
     script: string,
-    execute = ExecuteButtonMode.Manual,
-    // for future implementation
-    _params?: CodeButtonParams,
-    path?: string,
-    name?: string
+    execute: { mode?: ExecuteButtonMode, params?: CodeButtonParams } = { mode: ExecuteButtonMode.Manual },
+    file?: { path?: string, name?: string }
   ) => {
-    sendEventButtonClickedTelemetry({ path, name })
+    sendEventButtonClickedTelemetry(file)
 
-    if (execute === ExecuteButtonMode.Auto) {
+    if (execute.mode === ExecuteButtonMode.Auto) {
       onSubmit(script, null, false)
       return
     }
diff --git a/redisinsight/ui/src/pages/workbench/contexts/enablementAreaContext.tsx b/redisinsight/ui/src/pages/workbench/contexts/enablementAreaContext.tsx
@@ -4,10 +4,8 @@ import { CodeButtonParams, ExecuteButtonMode } from 'uiSrc/pages/workbench/compo
 interface IContext {
   setScript: (
     script: string,
-    execute?: ExecuteButtonMode,
-    params?: CodeButtonParams,
-    path?: string,
-    name?: string
+    execute?: { mode?: ExecuteButtonMode, params?: CodeButtonParams },
+    file?: { path?: string, name?: string }
   ) => void
   openPage: (page: IInternalPage) => void
   isCodeBtnDisabled?: boolean

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export const remarkRedisCode = (): (tree: Node) => void => (tree: any) => {`
`24`	`24`
`25`	`25`	`codeNode.type = 'html'`
`26`	`26`	`// Replace it with our custom component`
`27`		- codeNode.value = `<Code label="${meta}" params="${params}" execute="${execute}">{${JSON.stringify(value)}}</Code>`
	`27`	+ codeNode.value = `<Code label="${meta}" params="${params}" mode="${execute}">{${JSON.stringify(value)}}</Code>`
`28`	`28`	`}`
`29`	`29`	`})`
`30`	`30`	`}`