diff --git a/redisinsight/ui/src/components/query-card/QueryCard.tsx b/redisinsight/ui/src/components/query-card/QueryCard.tsx index 46007691cb..aa320689c5 100644 --- a/redisinsight/ui/src/components/query-card/QueryCard.tsx +++ b/redisinsight/ui/src/components/query-card/QueryCard.tsx @@ -81,7 +81,7 @@ const QueryCard = (props: Props) => { const [viewTypeSelected, setViewTypeSelected] = useState(queryType) const [summaryText, setSummaryText] = useState('') const [selectedViewValue, setSelectedViewValue] = useState( - getDefaultPlugin(visualizations, command) || queryType + getDefaultPlugin(visualizations, command || '') || queryType ) const dispatch = useDispatch() diff --git a/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.spec.tsx b/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.spec.tsx index a36a484c87..33a8833808 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.spec.tsx +++ b/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()).toBeTruthy() }) + + it(`should show ${EMPTY_COMMAND} if command=null and summary=`, () => { + const { queryByTestId } = render( + + ) + + expect(queryByTestId('query-card-tooltip-anchor')).toHaveTextContent(EMPTY_COMMAND) + }) }) diff --git a/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.tsx b/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.tsx index 76c39f325a..fa532584fa 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardTooltip/QueryCardTooltip.tsx +++ b/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 + summary?: Nullable 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" > - {summary || query} + {summary || query || EMPTY_COMMAND} ) } diff --git a/redisinsight/ui/src/utils/plugins.ts b/redisinsight/ui/src/utils/plugins.ts index bc6d7f651e..ba85b043a9 100644 --- a/redisinsight/ui/src/utils/plugins.ts +++ b/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()