Merge pull request #3505 from RedisInsight/fe/bugfix/RI-5840_change_JMESPath_format

#RI-5840 - change format for JMESPath functions

Author: AmirAllayarovSofteq

redisinsight/ui/src/slices/interfaces/rdi.ts

@@ -1,4 +1,6 @@
+import { monaco as monacoEditor } from 'react-monaco-editor'
 import { Nullable } from 'uiSrc/utils'
+import { ICommand } from 'uiSrc/constants'
 import { Rdi as RdiInstanceResponse } from 'apiSrc/modules/rdi/models/rdi'
 
 // tabs for dry run job panel
@@ -151,7 +153,7 @@ export interface IStateRdiPipeline {
   schema: Nullable<object>
   strategies: IRdiPipelineStrategies
   changes: Record<string, FileChangeType>
-  jobFunctions: IStateJobFunction[]
+  jobFunctions: monacoEditor.languages.CompletionItem[]
   status: {
     loading: boolean
     error: string
@@ -188,19 +190,6 @@ export interface InitialStateRdiInstances {
   isPipelineLoaded: boolean
 }
 
-export interface IJobFunctionResponse {
-  function: string
-  description: string
-  example: string
-  comments: string
-}
-
-export interface IStateJobFunction {
-  label: string
-  detail: string
-  documentation: string
-}
-
 // Rdi test target connections
 export enum TestConnectionStatus {
   Fail = 'fail',
@@ -240,3 +229,7 @@ export interface IStateRdiTestConnections {
   error: string
   results: Nullable<TransformResult>
 }
+
+export type TJMESPathFunctions = {
+  [key: string]: Pick<ICommand, 'summary'> & Required<Pick<ICommand, 'arguments'>>
+}

redisinsight/ui/src/slices/rdi/pipeline.ts

@@ -8,10 +8,18 @@ import {
   FileChangeType,
   IPipelineJSON,
   IRdiPipelineStrategy,
-  IJobFunctionResponse,
+  TJMESPathFunctions,
   IPipelineStatus,
 } from 'uiSrc/slices/interfaces/rdi'
-import { getApiErrorMessage, getAxiosError, getRdiUrl, isStatusSuccessful, Nullable, pipelineToYaml } from 'uiSrc/utils'
+import {
+  getApiErrorMessage,
+  getAxiosError,
+  getRdiUrl,
+  isStatusSuccessful,
+  Nullable,
+  parseJMESPathFunctions,
+  pipelineToYaml,
+} from 'uiSrc/utils'
 import { EnhancedAxiosError } from 'uiSrc/slices/interfaces'
 import { INFINITE_MESSAGES } from 'uiSrc/components/notifications/components'
 import { ApiEndpoints } from 'uiSrc/constants'
@@ -110,11 +118,8 @@ const rdiPipelineSlice = createSlice({
         data: null
       }
     },
-    setJobFunctions: (state, { payload }: PayloadAction<IJobFunctionResponse[]>) => {
-      state.jobFunctions = payload.map(
-        ({ function: label, description: documentation, example: detail }) =>
-          ({ label, documentation, detail })
-      )
+    setJobFunctions: (state, { payload }: PayloadAction<TJMESPathFunctions>) => {
+      state.jobFunctions = parseJMESPathFunctions(payload)
     },
   },
 })
@@ -289,7 +294,7 @@ export function fetchRdiPipelineJobFunctions(
 ) {
   return async (dispatch: AppDispatch) => {
     try {
-      const { data, status } = await apiService.get<IJobFunctionResponse[]>(
+      const { data, status } = await apiService.get<TJMESPathFunctions>(
         getRdiUrl(rdiInstanceId, ApiEndpoints.RDI_PIPELINE_JOB_FUNCTIONS),
       )
 

redisinsight/ui/src/slices/tests/rdi/pipeline.spec.ts

@@ -37,6 +37,7 @@ import { apiService } from 'uiSrc/services'
 import { addErrorNotification, addInfiniteNotification } from 'uiSrc/slices/app/notifications'
 import { INFINITE_MESSAGES } from 'uiSrc/components/notifications/components'
 import { FileChangeType } from 'uiSrc/slices/interfaces'
+import { parseJMESPathFunctions } from 'uiSrc/utils'
 
 let store: typeof mockedStore
 
@@ -357,21 +358,24 @@ describe('rdi pipe slice', () => {
 
   describe('setJobFunctions', () => {
     it('should set job functions as monaco compilation items', () => {
-      const functionValue = 'function'
-      const descriptionValue = 'description'
-      const exampleValue = 'example'
-      const commentsValue = 'comments'
-      const mockData = [{
-        function: functionValue,
-        description: descriptionValue,
-        example: exampleValue,
-        comments: commentsValue,
+      const summaryValue = 'summary'
+      const argumentsValue = [{
+        name: 'encoded',
+        type: 'string',
+        display_text: 'base64 encoded string',
+        optional: false
       }]
+      const mockData = {
+        function: {
+          summary: summaryValue,
+          arguments: argumentsValue,
+        }
+      }
 
       // Arrange
       const state = {
         ...initialState,
-        jobFunctions: [{ label: functionValue, detail: exampleValue, documentation: descriptionValue }]
+        jobFunctions: parseJMESPathFunctions(mockData)
       }
 
       // Act
@@ -603,7 +607,7 @@ describe('rdi pipe slice', () => {
 
     describe('fetchRdiPipelineJobFunctions', () => {
       it('succeed to fetch data', async () => {
-        const data = [{ function: 'func', comments: '123', description: 'desc', example: 'ex' }]
+        const data = { function: { summary: 'summary', arguments: [] } }
         const responsePayload = { data, status: 200 }
 
         apiService.get = jest.fn().mockResolvedValue(responsePayload)

redisinsight/ui/src/utils/monaco/monacoUtils.ts

@@ -1,8 +1,15 @@
 import { monaco as monacoEditor } from 'react-monaco-editor'
 import { first, isEmpty, isUndefined, reject, without } from 'lodash'
 import { decode } from 'html-entities'
-import { ICommands } from 'uiSrc/constants'
-import { IMonacoCommand, IMonacoQuery } from 'uiSrc/utils'
+import { ICommands, ICommand } from 'uiSrc/constants'
+import {
+  generateArgsForInsertText,
+  generateArgsNames,
+  getCommandMarkdown,
+  IMonacoCommand,
+  IMonacoQuery
+} from 'uiSrc/utils'
+import { TJMESPathFunctions } from 'uiSrc/slices/interfaces'
 import { Nullable } from '../types'
 import { getCommandRepeat, isRepeatCountCorrect } from '../commands'
 
@@ -234,3 +241,25 @@ export const getCommandsFromQuery = (query: string, commandsArray: string[] = []
   const listOfCommands = [commandLine, multiCommands].filter(Boolean)
   return listOfCommands.length ? listOfCommands.join(';') : null
 }
+
+export const parseJMESPathFunctions = (functions: TJMESPathFunctions) => Object.entries(functions)
+  .map(([labelInit, func]) => {
+    const { arguments: args } = func
+    const label = labelInit.toUpperCase()
+    const range = { startLineNumber: 0, endLineNumber: 0, startColumn: 0, endColumn: 0 }
+    const detail = `${label}(${generateArgsNames('', args).join(', ')})`
+    const argsNames = generateArgsNames('', args, false, true)
+    const insertText = `${label}(${generateArgsForInsertText(argsNames, ', ')})`
+
+    return {
+      label,
+      detail,
+      range,
+      documentation: {
+        value: getCommandMarkdown(func as ICommand)
+      },
+      insertText,
+      kind: monacoEditor.languages.CompletionItemKind.Function,
+      insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    }
+  })