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 ? (
) : (