Merge branch 'feature/RI-4616-rdi-support' into fe/feature/RI-5770_Enchance_autocomplite_sqlite

Author: vlad-dargel

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/home/RdiPage.spec.tsx

@@ -206,6 +206,28 @@ describe('RdiPage', () => {
     )
   })
 
+  it('should not pass password when password did not changed', async () => {
+    render(<RdiPage />)
+
+    fireEvent.click(screen.getByTestId('edit-instance-1'))
+    await screen.findByTestId('connection-form')
+
+    await act(() => {
+      fireEvent.change(screen.getByTestId('connection-form-name-input'), { target: { value: 'name' } })
+
+      // submit form
+      fireEvent.click(screen.getByTestId('connection-form-add-button'))
+    })
+
+    expect(editInstanceAction).toBeCalledWith(
+      '1',
+      {
+        name: 'name',
+      },
+      expect.any(Function)
+    )
+  })
+
   it('should call create instance when editInstance is not provided', async () => {
     render(<RdiPage />)
 

redisinsight/ui/src/pages/rdi/home/RdiPage.tsx

@@ -17,7 +17,7 @@ import {
   sendPageViewTelemetry
 } from 'uiSrc/telemetry'
 import HomePageTemplate from 'uiSrc/templates/home-page-template'
-import { getFormUpdates, setTitle } from 'uiSrc/utils'
+import { setTitle } from 'uiSrc/utils'
 import EmptyMessage from './empty-message/EmptyMessage'
 import ConnectionForm from './connection-form/ConnectionForm'
 import RdiHeader from './header/RdiHeader'
@@ -60,8 +60,7 @@ const RdiPage = () => {
     }
 
     if (editInstance) {
-      const payload = getFormUpdates(instance, editInstance)
-      dispatch(editInstanceAction(editInstance.id, payload, onSuccess))
+      dispatch(editInstanceAction(editInstance.id, instance, onSuccess))
     } else {
       dispatch(createInstanceAction({ ...instance }, onSuccess))
     }

redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx

@@ -12,10 +12,12 @@ import {
 } from '@elastic/eui'
 import { Field, FieldInputProps, FieldMetaProps, Form, Formik, FormikErrors, FormikHelpers } from 'formik'
 import React, { useEffect, useState } from 'react'
-
 import cx from 'classnames'
+import { isNull } from 'lodash'
+
 import { SECURITY_FIELD } from 'uiSrc/constants'
 import { RdiInstance } from 'uiSrc/slices/interfaces'
+import { getFormUpdates, Nullable } from 'uiSrc/utils'
 import ValidationTooltip from './components/ValidationTooltip'
 
 import styles from './styles.module.scss'
@@ -24,7 +26,7 @@ export interface ConnectionFormValues {
   name: string
   url: string
   username: string
-  password: string
+  password: Nullable<string>
 }
 
 export interface Props {
@@ -38,7 +40,7 @@ const getInitialValues = (values: RdiInstance | null): ConnectionFormValues => (
   name: values?.name || '',
   url: values?.url || '',
   username: values?.username || '',
-  password: !values ? '' : SECURITY_FIELD
+  password: values ? null : ''
 })
 
 const UrlTooltip = () => (
@@ -89,20 +91,26 @@ const ConnectionForm = (props: Props) => {
     if (!values.username) {
       errors.username = 'Username'
     }
-    if (!values.password) {
+    // password is security field we did not received it from BE
+    if (!values.password && !isNull(values.password)) {
       errors.password = 'Password'
     }
 
     return errors
   }
 
+  const handleSubmit = (values: ConnectionFormValues) => {
+    const updates = getFormUpdates(values, editInstance || {})
+    onSubmit(updates)
+  }
+
   return (
     <Formik
       enableReinitialize
       initialValues={initialFormValues}
       validateOnMount
       validate={validate}
-      onSubmit={onSubmit}
+      onSubmit={handleSubmit}
     >
       {({ isValid, errors }) => (
         <Form className={styles.form}>
@@ -169,8 +177,9 @@ const ConnectionForm = (props: Props) => {
                       placeholder="Enter Password"
                       maxLength={500}
                       {...field}
+                      value={isNull(field.value) ? SECURITY_FIELD : field.value}
                       onFocus={() => {
-                        if (field.value === SECURITY_FIELD && !meta.touched) {
+                        if (isNull(field.value) && !meta.touched) {
                           form.setFieldValue('password', '')
                         }
                       }}

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"