Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Aug 2, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 69 additions & 32 deletions x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.test.tsx
View file
Open in desktop
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();
});
});
});
10 changes: 9 additions & 1 deletion x-pack/plugins/threat_intelligence/public/modules/indicators/indicators_page.tsx
View file
Open in desktop
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