Merge pull request #3437 from RedisInsight/fe/feature/RI-5530_add_sql_editor_btn

#RI-5530 - add sql editor btn

Author: AmirAllayarovSofteq

redisinsight/__mocks__/monacoMock.js

@@ -16,10 +16,19 @@ const editor = {
   updateOptions: jest.fn(),
   setSelection: jest.fn(),
   createDecorationsCollection: jest.fn(),
+  getValue: jest.fn().mockReturnValue(''),
+  getModel: jest.fn().mockReturnValue({}),
+  getPosition: jest.fn(),
+  trigger: jest.fn(),
 }
 
 const monacoEditor = {
-  Range: jest.fn().mockImplementation(() => ({})),
+  Range: jest.fn().mockImplementation((startLineNumber, startColumn, endLineNumber, endColumn) => ({
+    startLineNumber,
+    startColumn,
+    endLineNumber,
+    endColumn,
+  })),
   languages: {
     getLanguages: jest.fn(),
     register: jest.fn(),
@@ -71,5 +80,6 @@ export const monaco = {
     colorize: jest.fn().mockImplementation((data) => Promise.resolve(data)),
     defineTheme: jest.fn(),
     setTheme: jest.fn()
-  }
+  },
+  Range: monacoEditor.Range
 }

redisinsight/ui/src/components/monaco-editor/MonacoEditor.tsx

@@ -31,6 +31,10 @@ export interface CommonProps {
   dedicatedEditorKeywords?: string[]
   dedicatedEditorFunctions?: monacoEditor.languages.CompletionItem[]
   onChangeLanguage?: (langId: DSL) => void
+  shouldOpenDedicatedEditor?: boolean
+  onOpenDedicatedEditor?: () => void
+  onSubmitDedicatedEditor?: (langId: DSL) => void
+  onCloseDedicatedEditor?: (langId: DSL) => void
   'data-testid'?: string
 }
 
@@ -60,6 +64,10 @@ const MonacoEditor = (props: Props) => {
     dedicatedEditorLanguages = [],
     dedicatedEditorKeywords = [],
     dedicatedEditorFunctions = [],
+    shouldOpenDedicatedEditor,
+    onOpenDedicatedEditor,
+    onSubmitDedicatedEditor,
+    onCloseDedicatedEditor,
     'data-testid': dataTestId = 'monaco-editor'
   } = props
 
@@ -82,6 +90,13 @@ const MonacoEditor = (props: Props) => {
     monacoObjects.current?.editor.updateOptions({ readOnly: !isEditing && (disabled || readOnly) })
   }, [disabled, readOnly, isEditing])
 
+  useEffect(() => {
+    if (shouldOpenDedicatedEditor) {
+      setIsDedicatedEditorOpen(true)
+      onOpenDedicatedEditor?.()
+    }
+  }, [shouldOpenDedicatedEditor])
+
   const editorDidMount = (
     editor: monacoEditor.editor.IStandaloneCodeEditor,
     monaco: typeof monacoEditor,
@@ -130,6 +145,7 @@ const MonacoEditor = (props: Props) => {
     const { editor } = monacoObjects?.current
 
     setIsDedicatedEditorOpen(true)
+    onOpenDedicatedEditor?.()
     editor.updateOptions({ readOnly: true })
   }
 
@@ -140,13 +156,12 @@ const MonacoEditor = (props: Props) => {
     editor.focus()
   }
 
-  const updateArgFromDedicatedEditor = (value: string = '') => {
+  const updateArgFromDedicatedEditor = (value: string, selectedLang: DSL) => {
     if (!monacoObjects.current) return
     const { editor } = monacoObjects?.current
 
     const model = editor.getModel()
     if (!model) return
-
     const position = editor.getPosition()
 
     editor.updateOptions({ readOnly: false })
@@ -163,15 +178,17 @@ const MonacoEditor = (props: Props) => {
     ])
     setIsDedicatedEditorOpen(false)
     triggerUpdateCursorPosition(editor)
+    onSubmitDedicatedEditor?.(selectedLang)
   }
 
-  const onCancelDedicatedEditor = () => {
+  const onCancelDedicatedEditor = (selectedLang: DSL) => {
     setIsDedicatedEditorOpen(false)
     if (!monacoObjects.current) return
     const { editor } = monacoObjects?.current
 
     editor.updateOptions({ readOnly: false })
     triggerUpdateCursorPosition(editor)
+    onCloseDedicatedEditor?.(selectedLang)
   }
 
   if (monacoEditor?.editor) {

redisinsight/ui/src/components/monaco-editor/components/dedicated-editor/DedicatedEditor.tsx

@@ -24,8 +24,8 @@ export interface Props {
   langId?: DSL
   langs?: DSL[]
   onChangeLanguage?: (langId: DSL) => void
-  onSubmit: (query?: string) => void
-  onCancel: () => void
+  onSubmit: (query: string, langId: DSL) => void
+  onCancel: (langId: DSL) => void
   initialHeight: number
   customOptions?: monacoEditor.editor.IStandaloneEditorConstructionOptions
   keywords?: string[]
@@ -109,7 +109,7 @@ const DedicatedEditor = (props: Props) => {
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Escape') {
-      onCancel()
+      onCancel(selectedLang.id as DSL)
     }
   }
 
@@ -119,7 +119,7 @@ const DedicatedEditor = (props: Props) => {
       .split('\n')
       .map((line: string, i: number) => ((i > 0 && !notCommandRegEx.test(line)) ? `\t${line}` : line))
       .join('\n')
-    onSubmit(val || '')
+    onSubmit(val || '', selectedLang.id as DSL)
   }
 
   const editorDidMount = (
@@ -258,7 +258,7 @@ const DedicatedEditor = (props: Props) => {
                     color="primary"
                     aria-label="Cancel editing"
                     className={styles.declineBtn}
-                    onClick={onCancel}
+                    onClick={() => onCancel(selectedLang.id as DSL)}
                     data-testid="cancel-btn"
                   />
                   <EuiButtonIcon

redisinsight/ui/src/components/query/Query/Query.tsx

@@ -466,7 +466,7 @@ const Query = (props: Props) => {
       >
         <div className={styles.input} data-testid="query-input-container" ref={input}>
           <MonacoEditor
-            language={MonacoLanguage.Redis}
+            language={MonacoLanguage.Redis as string}
             theme={theme === Theme.Dark ? 'dark' : 'light'}
             value={query}
             options={options}

redisinsight/ui/src/constants/keyboardShortcuts.tsx

@@ -62,6 +62,12 @@ const COMMON_SHORTCUTS = {
       description: 'Use Non-Redis Editor',
       keys: ['Shift', 'Space'],
     }
+  },
+  rdi: {
+    openDedicatedEditor: {
+      description: 'Open a dedicated SQL or JMESPath editor:',
+      keys: ['Shift', 'Space']
+    }
   }
 }
 
@@ -125,6 +131,12 @@ const MAC_SHORTCUTS = {
       description: 'Use Non-Redis Editor',
       keys: [(<span className="shiftSymbol">⇧</span>), 'Space'],
     }
+  },
+  rdi: {
+    openDedicatedEditor: {
+      description: 'Open a dedicated SQL or JMESPath editor',
+      keys: [(<span className="shiftSymbol">⇧</span>), 'Space']
+    }
   }
 }
 

redisinsight/ui/src/pages/rdi/pipeline-management/components/fetch-pipeline-popover/FetchPipelinePopover.tsx

@@ -76,7 +76,7 @@ const FetchPipelinePopover = () => {
           aria-labelledby="Upload pipeline button"
           data-testid="upload-pipeline-btn"
         >
-          Upload from server
+          Download from server
         </EuiButtonEmpty>
       )}
       onButtonClick={handleRefreshWarning}

redisinsight/ui/src/pages/rdi/pipeline-management/components/source-pipeline-dialog/SourcePipelineModal.tsx

@@ -103,7 +103,7 @@ const SourcePipelineDialog = () => {
               data-testid="server-source-pipeline-dialog"
             >
               <EuiIcon type={UploadIcon} size="xl" className={styles.icon} />
-              <EuiText className={styles.text}>Upload from server</EuiText>
+              <EuiText className={styles.text}>Download from server</EuiText>
             </div>
             <div
               role="button"

redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.spec.tsx

@@ -9,10 +9,11 @@ import {
   setChangedFile,
   deleteChangedFile,
 } from 'uiSrc/slices/rdi/pipeline'
-import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import { act, cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 
 import { MOCK_RDI_PIPELINE_DATA } from 'uiSrc/mocks/data/rdi'
 import { FileChangeType } from 'uiSrc/slices/interfaces'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import Job, { Props } from './Job'
 
 const mockedProps = mock<Props>()
@@ -135,6 +136,73 @@ describe('Job', () => {
     expect(store.getActions()).toEqual(expectedActions)
   })
 
+  it('should open dedicated editor', () => {
+    render(<Job {...instance(mockedProps)} deployedJobValue="value" name="jobName" />)
+
+    expect(screen.queryByTestId('draggable-area')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByTestId('open-dedicated-editor-btn'))
+
+    expect(screen.getByTestId('draggable-area')).toBeInTheDocument()
+  })
+
+  it('should call proper telemetry events on open dedicated editor', () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+    render(<Job {...instance(mockedProps)} value="value" rdiInstanceId="id" />)
+
+    fireEvent.click(screen.getByTestId('open-dedicated-editor-btn'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.RDI_DEDICATED_EDITOR_OPENED,
+      eventData: {
+        rdiInstanceId: 'id'
+      }
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
+
+  it('should call proper telemetry events on cancel dedicated editor', () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+    render(<Job {...instance(mockedProps)} value="value" rdiInstanceId="id" />)
+
+    fireEvent.click(screen.getByTestId('open-dedicated-editor-btn'))
+    fireEvent.click(screen.getByTestId('cancel-btn'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.RDI_DEDICATED_EDITOR_CANCELLED,
+      eventData: {
+        rdiInstanceId: 'id',
+        selectedLanguageSyntax: 'sql',
+      }
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
+
+  it('should call proper telemetry events on submit dedicated editor', async () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+    render(<Job {...instance(mockedProps)} value="value" rdiInstanceId="id" />)
+
+    fireEvent.click(screen.getByTestId('open-dedicated-editor-btn'))
+    await act(() => {
+      fireEvent.click(screen.getByTestId('apply-btn'))
+    })
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.RDI_DEDICATED_EDITOR_SAVED,
+      eventData: {
+        rdiInstanceId: 'id',
+        selectedLanguageSyntax: 'sql',
+      }
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
+
   it('should render loading spinner', () => {
     const rdiPipelineSelectorMock = jest.fn().mockReturnValue({
       loading: true,