[TIP] Prevent IndicatorsTable flash (#137829) (#137850)

(cherry picked from commit 96d32ad) Co-authored-by: Luke Gmys <[email protected]>
elastic · Aug 2, 2022 · 8b1aae6 · 8b1aae6
1 parent 00145be
commit 8b1aae6
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 33 deletions.
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
@@ -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('<IndicatorsPage />', () => {
     });
   });
 
-  it('should render empty page when no indicators are found', async () => {
-    (
-      useIndicatorsTotalCount as jest.MockedFunction<typeof useIndicatorsTotalCount>
-    ).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<typeof useIndicatorsTotalCount>
+        ).mockReturnValue({
+          count: 0,
+          isLoading: true,
+        });
+        (
+          useIntegrationsPageLink as jest.MockedFunction<typeof useIntegrationsPageLink>
+        ).mockReturnValue('');
+        (
+          useTIDocumentationLink as jest.MockedFunction<typeof useTIDocumentationLink>
+        ).mockReturnValue('');
+
+        const { queryByTestId } = render(
+          <TestProvidersComponent>
+            <IndicatorsPage />
+          </TestProvidersComponent>
+        );
+
+        expect(queryByTestId(EMPTY_PROMPT_TEST_ID)).not.toBeInTheDocument();
+        expect(queryByTestId(TABLE_TEST_ID)).not.toBeInTheDocument();
+      });
     });
-    (
-      useIntegrationsPageLink as jest.MockedFunction<typeof useIntegrationsPageLink>
-    ).mockReturnValue('');
-    (useTIDocumentationLink as jest.MockedFunction<typeof useTIDocumentationLink>).mockReturnValue(
-      ''
-    );
 
-    const { queryByTestId } = render(
-      <TestProvidersComponent>
-        <IndicatorsPage />
-      </TestProvidersComponent>
-    );
+    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<typeof useIndicatorsTotalCount>
+        ).mockReturnValue({
+          count: 0,
+          isLoading: false,
+        });
+        (
+          useIntegrationsPageLink as jest.MockedFunction<typeof useIntegrationsPageLink>
+        ).mockReturnValue('');
+        (
+          useTIDocumentationLink as jest.MockedFunction<typeof useTIDocumentationLink>
+        ).mockReturnValue('');
 
-    expect(queryByTestId(EMPTY_PROMPT_TEST_ID)).toBeInTheDocument();
-  });
+        const { queryByTestId } = render(
+          <TestProvidersComponent>
+            <IndicatorsPage />
+          </TestProvidersComponent>
+        );
 
-  it('should render indicators table when count is being loaded', async () => {
-    (
-      useIndicatorsTotalCount as jest.MockedFunction<typeof useIndicatorsTotalCount>
-    ).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<typeof useIndicatorsTotalCount>
+      ).mockReturnValue({
+        count: 7,
+        isLoading: false,
+      });
 
-    const { queryByTestId } = render(
-      <TestProvidersComponent>
-        <IndicatorsPage />
-      </TestProvidersComponent>
-    );
+      const { queryByTestId } = render(
+        <TestProvidersComponent>
+          <IndicatorsPage />
+        </TestProvidersComponent>
+      );
 
-    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
@@ -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 ? (
     <EmptyPage />
   ) : (