Skip to content

Commit

Permalink
[TIP] Prevent IndicatorsTable flash (#137829)
Browse files Browse the repository at this point in the history
(cherry picked from commit 96d32ad)
  • Loading branch information
lgmys committed Aug 2, 2022
1 parent 8ef28b3 commit 0b2fc30
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 33 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 />
) : (
Expand Down

0 comments on commit 0b2fc30

Please sign in to comment.