diff --git a/x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.test.tsx b/x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.test.tsx index 22db02bfe5c7d..92ea0597d6bf7 100644 --- a/x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.test.tsx +++ b/x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.test.tsx @@ -11,7 +11,10 @@ import { TestProvidersComponent } from '../../common/mocks/test_providers'; import { IndicatorsPage } from './indicators_page'; import { useIndicators } from './hooks/use_indicators'; import { useIndicatorsTotalCount } from './hooks/use_indicators_total_count'; -import { TABLE_TEST_ID as INDICATORS_TABLE_TEST_ID } from './components/indicators_table/indicators_table'; +import { + TABLE_TEST_ID as INDICATORS_TABLE_TEST_ID, + TABLE_TEST_ID, +} from './components/indicators_table/indicators_table'; import { EMPTY_PROMPT_TEST_ID } from '../../components/empty_page'; import { useIntegrationsPageLink } from '../../hooks/use_integrations_page_link'; import { useTIDocumentationLink } from '../../hooks/use_documentation_link'; @@ -50,43 +53,77 @@ describe('', () => { }); }); - it('should render empty page when no indicators are found', async () => { - ( - useIndicatorsTotalCount as jest.MockedFunction - ).mockReturnValue({ - count: 0, - isLoading: false, + describe('checking if the page should be visible (based on indicator count)', () => { + describe('when indicator count is being loaded', () => { + it('should render nothing at all', () => { + ( + useIndicatorsTotalCount as jest.MockedFunction + ).mockReturnValue({ + count: 0, + isLoading: true, + }); + ( + useIntegrationsPageLink as jest.MockedFunction + ).mockReturnValue(''); + ( + useTIDocumentationLink as jest.MockedFunction + ).mockReturnValue(''); + + const { queryByTestId } = render( + + + + ); + + expect(queryByTestId(EMPTY_PROMPT_TEST_ID)).not.toBeInTheDocument(); + expect(queryByTestId(TABLE_TEST_ID)).not.toBeInTheDocument(); + }); }); - ( - useIntegrationsPageLink as jest.MockedFunction - ).mockReturnValue(''); - (useTIDocumentationLink as jest.MockedFunction).mockReturnValue( - '' - ); - const { queryByTestId } = render( - - - - ); + describe('when indicator count is loaded and there are no indicators', () => { + it('should render empty page when no indicators are found', async () => { + ( + useIndicatorsTotalCount as jest.MockedFunction + ).mockReturnValue({ + count: 0, + isLoading: false, + }); + ( + useIntegrationsPageLink as jest.MockedFunction + ).mockReturnValue(''); + ( + useTIDocumentationLink as jest.MockedFunction + ).mockReturnValue(''); - expect(queryByTestId(EMPTY_PROMPT_TEST_ID)).toBeInTheDocument(); - }); + const { queryByTestId } = render( + + + + ); - it('should render indicators table when count is being loaded', async () => { - ( - useIndicatorsTotalCount as jest.MockedFunction - ).mockReturnValue({ - count: 0, - isLoading: true, + expect(queryByTestId(TABLE_TEST_ID)).not.toBeInTheDocument(); + expect(queryByTestId(EMPTY_PROMPT_TEST_ID)).toBeInTheDocument(); + }); }); + }); + + describe('when loading is done and we have some indicators', () => { + it('should render indicators table', async () => { + ( + useIndicatorsTotalCount as jest.MockedFunction + ).mockReturnValue({ + count: 7, + isLoading: false, + }); - const { queryByTestId } = render( - - - - ); + const { queryByTestId } = render( + + + + ); - expect(queryByTestId(INDICATORS_TABLE_TEST_ID)).toBeInTheDocument(); + expect(queryByTestId(INDICATORS_TABLE_TEST_ID)).toBeInTheDocument(); + expect(queryByTestId(EMPTY_PROMPT_TEST_ID)).not.toBeInTheDocument(); + }); }); }); diff --git a/x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.tsx b/x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.tsx index b3423ae6ad3e9..5da38b7dae1f3 100644 --- a/x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.tsx +++ b/x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.tsx @@ -18,7 +18,6 @@ import QueryBar from './components/query_bar'; export const IndicatorsPage: VFC = () => { const { count: indicatorsTotalCount, isLoading: isIndicatorsTotalCountLoading } = useIndicatorsTotalCount(); - const showEmptyPage = !isIndicatorsTotalCountLoading && indicatorsTotalCount === 0; const { timeRange, @@ -38,6 +37,15 @@ export const IndicatorsPage: VFC = () => { timeRange, }); + // This prevents indicators table flash when total count is loading. + // TODO: Improve this with custom loader component. It would require changes to security solutions' template wrapper - to allow + // 'template' overrides. + if (isIndicatorsTotalCountLoading) { + return null; + } + + const showEmptyPage = indicatorsTotalCount === 0; + return showEmptyPage ? ( ) : (