Merge pull request #1197 from RedisInsight/fe/bugfix/RI-3371_user_cannot_open_Workbench

#RI-3371 - User cannot open Workbench

Author: AlenaSY

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

@@ -81,7 +81,7 @@ const QueryCard = (props: Props) => {
   const [viewTypeSelected, setViewTypeSelected] = useState<WBQueryType>(queryType)
   const [summaryText, setSummaryText] = useState<string>('')
   const [selectedViewValue, setSelectedViewValue] = useState<string>(
-    getDefaultPlugin(visualizations, command) || queryType
+    getDefaultPlugin(visualizations, command || '') || queryType
   )
 
   const dispatch = useDispatch()

redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
+import { EMPTY_COMMAND } from 'uiSrc/constants'
 import { render } from 'uiSrc/utils/test-utils'
 import QueryCardTooltip, { Props } from './QueryCardTooltip'
 
@@ -9,4 +10,12 @@ describe('QueryCardTooltip', () => {
   it('should render', () => {
     expect(render(<QueryCardTooltip {...instance(mockedProps)} />)).toBeTruthy()
   })
+
+  it(`should show ${EMPTY_COMMAND} if command=null and summary=`, () => {
+    const { queryByTestId } = render(
+      <QueryCardTooltip {...instance(mockedProps)} query={null} summary={null} />
+    )
+
+    expect(queryByTestId('query-card-tooltip-anchor')).toHaveTextContent(EMPTY_COMMAND)
+  })
 })

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

@@ -3,12 +3,13 @@ import { EuiToolTip } from '@elastic/eui'
 import { take } from 'lodash'
 import cx from 'classnames'
 
-import { truncateText } from 'uiSrc/utils'
+import { Nullable, truncateText } from 'uiSrc/utils'
+import { EMPTY_COMMAND } from 'uiSrc/constants'
 import styles from './styles.module.scss'
 
 export interface Props {
-  query: string
-  summary?: string
+  query: Nullable<string>
+  summary?: Nullable<string>
   maxLinesNumber?: number
 }
 
@@ -19,10 +20,9 @@ interface IQueryLine {
 }
 
 const QueryCardTooltip = (props: Props) => {
-  const { query = '', maxLinesNumber = 20, summary } = props
+  const { query = '', maxLinesNumber = 20, summary = '' } = props
 
-  let queryLines: IQueryLine[] = query
-    .split('\n')
+  let queryLines: IQueryLine[] = (query || EMPTY_COMMAND).split('\n')
     .map((query: string, i) => ({
       value: truncateText(query, 497, '...'),
       index: i
@@ -56,7 +56,7 @@ const QueryCardTooltip = (props: Props) => {
       content={<>{contentItems}</>}
       position="bottom"
     >
-      <span>{summary || query}</span>
+      <span data-testid="query-card-tooltip-anchor">{summary || query || EMPTY_COMMAND}</span>
     </EuiToolTip>
   )
 }

redisinsight/ui/src/utils/plugins.ts

@@ -1,10 +1,10 @@
 import { IPluginVisualization } from 'uiSrc/slices/interfaces'
 import { getBaseApiUrl } from 'uiSrc/utils/common'
 
-export const getVisualizationsByCommand = (query: string, visualizations: IPluginVisualization[]) =>
+export const getVisualizationsByCommand = (query: string = '', visualizations: IPluginVisualization[]) =>
   visualizations.filter((visualization: IPluginVisualization) =>
     visualization.matchCommands.some((matchCommand) =>
-      query.startsWith(matchCommand) || (new RegExp(`^${matchCommand}`, 'i')).test(query)))
+      query?.startsWith(matchCommand) || (new RegExp(`^${matchCommand}`, 'i')).test(query)))
 
 export const urlForAsset = (basePluginUrl: string, path: string) => {
   const baseApiUrl = getBaseApiUrl()