Merge pull request #1274 from RedisInsight/feature/RI-2664_params-redis-auto-btn

Feature/ri 2664 params redis auto btn

Author: AlenaSY

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

@@ -9,7 +9,8 @@ import { RunQueryMode, ResultsMode, ResultsSummary } from 'uiSrc/slices/interfac
 import {
   getWBQueryType,
   getVisualizationsByCommand,
-  Maybe
+  Maybe,
+  isGroupMode
 } from 'uiSrc/utils'
 import { appPluginsSelector } from 'uiSrc/slices/app/plugins'
 import { CommandExecutionResult, IPluginVisualization } from 'uiSrc/slices/interfaces'
@@ -32,7 +33,7 @@ export interface Props {
   mode?: RunQueryMode
   activeResultsMode?: ResultsMode
   resultsMode?: ResultsMode
-  emptyCommand: boolean
+  emptyCommand?: boolean
   summary?: ResultsSummary
   createdAt?: Date
   loading?: boolean
@@ -179,7 +180,7 @@ const QueryCard = (props: Props) => {
               ? <QueryCardCommonResult loading={loading} result={commonError} />
               : (
                 <>
-                  {resultsMode === ResultsMode.GroupMode && (
+                  {isGroupMode(resultsMode) && (
                     <QueryCardCliResultWrapper
                       loading={loading}
                       query={command}

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

@@ -5,7 +5,7 @@ import { isArray } from 'lodash'
 
 import { CommandExecutionResult } from 'uiSrc/slices/interfaces'
 import { ResultsMode } from 'uiSrc/slices/interfaces/workbench'
-import { formatToText, Maybe } from 'uiSrc/utils'
+import { formatToText, isGroupMode, Maybe } from 'uiSrc/utils'
 
 import QueryCardCliDefaultResult from '../QueryCardCliDefaultResult'
 import QueryCardCliGroupResult from '../QueryCardCliGroupResult'
@@ -34,7 +34,7 @@ const QueryCardCliResultWrapper = (props: Props) => {
               The result is too big to be saved. It will be deleted after the application is closed.
             </EuiText>
           )}
-          {resultsMode === ResultsMode.GroupMode && isArray(result[0]?.response)
+          {isGroupMode(resultsMode) && isArray(result[0]?.response)
             ? <QueryCardCliGroupResult result={result} isFullScreen={isFullScreen} />
             : (
               <QueryCardCliDefaultResult

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

@@ -16,7 +16,13 @@ import { useParams } from 'react-router-dom'
 import { findIndex } from 'lodash'
 
 import { Theme } from 'uiSrc/constants'
-import { getCommandNameFromQuery, getVisualizationsByCommand, truncateText, urlForAsset } from 'uiSrc/utils'
+import {
+  getCommandNameFromQuery,
+  getVisualizationsByCommand,
+  isGroupMode,
+  truncateText,
+  urlForAsset
+} from 'uiSrc/utils'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { appPluginsSelector } from 'uiSrc/slices/app/plugins'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -45,7 +51,7 @@ export interface Props {
   queryType: WBQueryType
   selectedValue: string
   loading?: boolean
-  emptyCommand: boolean
+  emptyCommand?: boolean
   toggleOpen: () => void
   toggleFullScreen: () => void
   setSelectedValue: (type: WBQueryType, value: string) => void
@@ -68,7 +74,7 @@ const QueryCardHeader = (props: Props) => {
     summary,
     activeMode,
     selectedValue,
-    emptyCommand,
+    emptyCommand = false,
     setSelectedValue,
     onQueryDelete,
     onQueryReRun,
@@ -92,7 +98,7 @@ const QueryCardHeader = (props: Props) => {
         databaseId: instanceId,
         command: getCommandNameFromQuery(query, COMMANDS_SPEC),
         rawMode: activeMode === RunQueryMode.Raw,
-        group: activeResultsMode === ResultsMode.GroupMode,
+        group: isGroupMode(activeResultsMode),
         ...additionalData
       }
     })

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

@@ -25,6 +25,7 @@ import {
   getRedisCompletionProvider,
   getRedisMonarchTokensProvider,
   getRedisSignatureHelpProvider,
+  isGroupMode,
   MonacoAction,
   Nullable,
   toModelDeltaDecoration
@@ -543,7 +544,7 @@ const Query = (props: Props) => {
                 color="secondary"
                 onClick={() => onChangeGroupMode()}
                 disabled={isLoading}
-                className={cx(styles.textBtn, { [styles.activeBtn]: resultsMode === ResultsMode.GroupMode })}
+                className={cx(styles.textBtn, { [styles.activeBtn]: isGroupMode(resultsMode) })}
                 data-testid="btn-change-group-mode"
               >
                 <EuiIcon type={GroupModeIcon} />

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

@@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
-import { getMultiCommands, removeMonacoComments, splitMonacoValuePerLines } from 'uiSrc/utils'
+import { getMultiCommands, isGroupMode, removeMonacoComments, splitMonacoValuePerLines } from 'uiSrc/utils'
 import { userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings'
 import { RunQueryMode, ResultsMode } from 'uiSrc/slices/interfaces/workbench'
 import { PIPELINE_COUNT_DEFAULT } from 'uiSrc/constants/api'
@@ -81,7 +81,7 @@ const QueryWrapper = (props: Props) => {
         multiple: multiCommands ? 'Multiple' : 'Single',
         pipeline: batchSize > 1,
         rawMode: state.activeMode === RunQueryMode.Raw,
-        group: state.resultsMode === ResultsMode.GroupMode
+        group: isGroupMode(state.resultsMode)
       }
     })()
 

redisinsight/ui/src/constants/index.ts

@@ -23,4 +23,5 @@ export * from './browser'
 export * from './durationUnits'
 export * from './streamViews'
 export * from './bulkActions'
+export * from './workbench'
 export { ApiEndpoints, BrowserStorageItem, ApiStatusCode, apiErrors }

redisinsight/ui/src/constants/workbench.ts

@@ -0,0 +1,11 @@
+import { ResultsMode, RunQueryMode } from 'uiSrc/slices/interfaces'
+
+export const CodeButtonResults = {
+  group: ResultsMode.GroupMode,
+  single: ResultsMode.Default
+}
+
+export const CodeButtonRunQueryMode = {
+  raw: RunQueryMode.Raw,
+  ascii: RunQueryMode.ASCII
+}

redisinsight/ui/src/mocks/handlers/index.ts

@@ -4,4 +4,5 @@ import content from './content'
 import app from './app'
 import analytics from './analytics'
 
+// @ts-ignore
 export const handlers: RestHandler<MockedRequest>[] = [].concat(instances, content, app, analytics)

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

@@ -23,7 +23,7 @@ export interface Props {
   setIsMinimized: (value: boolean) => void
   scriptEl: Nullable<monacoEditor.editor.IStandaloneCodeEditor>
   setScript: (script: string) => void
-  onSubmit: (query: string, commandId?: Nullable<string>, clearEditor?: boolean) => void
+  onSubmit: (query: string, commandId?: Nullable<string>, executeParams?: CodeButtonParams) => void
   isCodeBtnDisabled?: boolean
 }
 
@@ -60,7 +60,7 @@ const EnablementAreaWrapper = (props: Props) => {
     sendEventButtonClickedTelemetry(file)
 
     if (execute.mode === ExecuteButtonMode.Auto) {
-      onSubmit(script, null, false)
+      onSubmit(script, null, { ...execute.params, clearEditor: false })
       return
     }
 

redisinsight/ui/src/pages/workbench/components/enablement-area/interfaces.ts

@@ -1,5 +1,10 @@
+import { CodeButtonResults, CodeButtonRunQueryMode } from 'uiSrc/constants'
+
 export interface CodeButtonParams {
-  //
+  clearEditor?: boolean
+  pipeline?: string
+  results?: keyof typeof CodeButtonResults
+  mode?: keyof typeof CodeButtonRunQueryMode
 }
 
 export enum ExecuteButtonMode {