Merge pull request #4137 from RedisInsight/fe/bugfix/RI-6352_Delimiter_must_be_string_Analysis

#RI-6352 - "Delimiter must be a string" error for db analysis

Author: mariasergeenko

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/LiveTimeRecommendations.tsx

@@ -12,7 +12,7 @@ import {
 } from '@elastic/eui'
 import { remove } from 'lodash'
 
-import { Pages } from 'uiSrc/constants'
+import { DEFAULT_DELIMITER, Pages } from 'uiSrc/constants'
 import { ANALYZE_CLUSTER_TOOLTIP_MESSAGE, ANALYZE_TOOLTIP_MESSAGE } from 'uiSrc/constants/recommendations'
 import {
   recommendationsSelector,
@@ -26,6 +26,7 @@ import { IRecommendation } from 'uiSrc/slices/interfaces/recommendations'
 import { appContextDbConfig, setRecommendationsShowHidden } from 'uiSrc/slices/app/context'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { createNewAnalysis } from 'uiSrc/slices/analytics/dbAnalysis'
+import { comboBoxToArray } from 'uiSrc/utils'
 
 import InfoIcon from 'uiSrc/assets/img/icons/help_illus.svg'
 
@@ -45,7 +46,7 @@ const LiveTimeRecommendations = () => {
   } = useSelector(recommendationsSelector)
   const {
     showHiddenRecommendations: isShowHidden,
-    treeViewDelimiter: delimiter = '',
+    treeViewDelimiter = [DEFAULT_DELIMITER],
   } = useSelector(appContextDbConfig)
 
   const { instanceId } = useParams<{ instanceId: string }>()
@@ -68,7 +69,7 @@ const LiveTimeRecommendations = () => {
   }, [])
 
   const handleClickDbAnalysisLink = () => {
-    dispatch(createNewAnalysis(instanceId, delimiter))
+    dispatch(createNewAnalysis(instanceId, comboBoxToArray(treeViewDelimiter)))
     history.push(Pages.databaseAnalysis(instanceId))
     sendEventTelemetry({
       event: TelemetryEvent.INSIGHTS_TIPS_DATABASE_ANALYSIS_CLICKED,

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/welcome-screen/WelcomeScreen.tsx

@@ -4,14 +4,15 @@ import { useHistory, useParams } from 'react-router-dom'
 import cx from 'classnames'
 import { EuiText, EuiButton } from '@elastic/eui'
 
-import { Pages } from 'uiSrc/constants'
+import { DEFAULT_DELIMITER, Pages } from 'uiSrc/constants'
 import { recommendationsSelector } from 'uiSrc/slices/recommendations/recommendations'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import WelcomeIcon from 'uiSrc/assets/img/icons/welcome.svg?react'
 import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { createNewAnalysis } from 'uiSrc/slices/analytics/dbAnalysis'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
+import { comboBoxToArray } from 'uiSrc/utils'
 import { ANALYZE_CLUSTER_TOOLTIP_MESSAGE, ANALYZE_TOOLTIP_MESSAGE } from 'uiSrc/constants/recommendations'
 import PopoverRunAnalyze from '../popover-run-analyze'
 
@@ -20,7 +21,7 @@ import styles from './styles.module.scss'
 const NoRecommendationsScreen = () => {
   const { provider, connectionType } = useSelector(connectedInstanceSelector)
   const { data: { recommendations } } = useSelector(recommendationsSelector)
-  const { treeViewDelimiter: delimiter = '' } = useSelector(appContextDbConfig)
+  const { treeViewDelimiter = [DEFAULT_DELIMITER] } = useSelector(appContextDbConfig)
 
   const [isShowInfo, setIsShowInfo] = useState(false)
 
@@ -29,7 +30,7 @@ const NoRecommendationsScreen = () => {
   const history = useHistory()
 
   const handleClickDbAnalysisLink = () => {
-    dispatch(createNewAnalysis(instanceId, delimiter))
+    dispatch(createNewAnalysis(instanceId, comboBoxToArray(treeViewDelimiter)))
     history.push(Pages.databaseAnalysis(instanceId))
     sendEventTelemetry({
       event: TelemetryEvent.INSIGHTS_TIPS_DATABASE_ANALYSIS_CLICKED,

redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx

@@ -20,10 +20,11 @@ import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import AnalyticsTabs from 'uiSrc/components/analytics-tabs'
-import { Nullable, getDbIndex } from 'uiSrc/utils'
+import { Nullable, comboBoxToArray, getDbIndex } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { ANALYZE_CLUSTER_TOOLTIP_MESSAGE, ANALYZE_TOOLTIP_MESSAGE } from 'uiSrc/constants/recommendations'
 import { FormatedDate } from 'uiSrc/components'
+import { DEFAULT_DELIMITER } from 'uiSrc/constants'
 import { ShortDatabaseAnalysis } from 'apiSrc/modules/database-analysis/models'
 import { AnalysisProgress } from 'apiSrc/modules/database-analysis/models/analysis-progress'
 
@@ -50,7 +51,7 @@ const Header = (props: Props) => {
   const { instanceId } = useParams<{ instanceId: string }>()
   const dispatch = useDispatch()
 
-  const { treeViewDelimiter: delimiter = '' } = useSelector(appContextDbConfig)
+  const { treeViewDelimiter = [DEFAULT_DELIMITER] } = useSelector(appContextDbConfig)
 
   const analysisOptions: EuiSuperSelectOption<any>[] = items.map((item) => {
     const { createdAt, id, db } = item
@@ -76,7 +77,7 @@ const Header = (props: Props) => {
         provider,
       }
     })
-    dispatch(createNewAnalysis(instanceId, delimiter))
+    dispatch(createNewAnalysis(instanceId, comboBoxToArray(treeViewDelimiter)))
   }
 
   return (

redisinsight/ui/src/slices/analytics/dbAnalysis.ts

@@ -199,7 +199,7 @@ export function fetchDBAnalysisReportsHistory(
 
 export function createNewAnalysis(
   instanceId: string,
-  delimiter: string,
+  delimiters: string[],
   onSuccessAction?: (data: DatabaseAnalysis) => void,
   onFailAction?: () => void,
 ) {
@@ -213,7 +213,7 @@ export function createNewAnalysis(
           ApiEndpoints.DATABASE_ANALYSIS,
         ),
         {
-          delimiter,
+          delimiter: delimiters?.[0],
         }
       )
 

redisinsight/ui/src/slices/tests/analytics/dbAnalysis.spec.ts

@@ -369,7 +369,7 @@ describe('db analysis slice', () => {
 
         // Act
         await store.dispatch<any>(
-          createNewAnalysis('instanceId', 'delimiter')
+          createNewAnalysis('instanceId', ['delimiter'])
         )
 
         // Assert
@@ -403,7 +403,7 @@ describe('db analysis slice', () => {
 
         // Act
         await store.dispatch<any>(
-          createNewAnalysis('instanceId', 'delimiter')
+          createNewAnalysis('instanceId', ['delimiter'])
         )
 
         // Assert

redisinsight/ui/src/slices/tests/app/context.spec.ts

@@ -449,7 +449,7 @@ describe('slices', () => {
       // Arrange
       const data = {
         slowLogDurationUnit: 'msec',
-        treeViewDelimiter: ':-',
+        treeViewDelimiter: [{ label: ':-' }],
         treeViewSort: SortOrder.DESC,
         showHiddenRecommendations: true,
       }
@@ -496,7 +496,7 @@ describe('slices', () => {
   describe('setBrowserTreeDelimiter', () => {
     it('should properly set browser tree delimiter', () => {
       // Arrange
-      const delimiter = '_'
+      const delimiter = [{ label: '_' }]
 
       const state = {
         ...initialState.dbConfig,