[7.12] disable Add to favorites button for Elastic templates (#101471) (#101647)

* disable Add to favorites button for Elastic templates (#101471)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* fix types error

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Angela Chuang 2021-06-14 11:27:14 +01:00 committed by GitHub
parent 57d707c27d
commit ec8c738bf3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 169 additions and 4 deletions

View file

@ -8,10 +8,21 @@
import React from 'react';
import { mount } from 'enzyme';
import { NewTimeline, NewTimelineProps } from './helpers';
import { AddToFavoritesButton, NewTimeline, NewTimelineProps } from './helpers';
import { useCreateTimelineButton } from './use_create_timeline';
jest.mock('../../../../common/hooks/use_selector');
import {
apolloClientObservable,
kibanaObservable,
TestProviders,
} from '../../../../common/mock/test_providers';
import { timelineActions } from '../../../../timelines/store/timeline';
import { TimelineStatus, TimelineType } from '../../../../../common/types/timeline';
import {
createSecuritySolutionStorageMock,
mockGlobalState,
SUB_PLUGINS_REDUCER,
} from '../../../../common/mock';
import { createStore } from '../../../../common/store';
jest.mock('./use_create_timeline');
@ -84,3 +95,146 @@ describe('NewTimeline', () => {
});
});
});
describe('Favorite Button', () => {
describe('Non Elastic prebuilt templates', () => {
test('should render favorite button', () => {
const wrapper = mount(
<TestProviders>
<AddToFavoritesButton timelineId="test" />
</TestProviders>
);
expect(wrapper.find('[data-test-subj="timeline-favorite-empty-star"]').exists()).toBeTruthy();
});
test('Favorite button should be enabled ', () => {
const wrapper = mount(
<TestProviders>
<AddToFavoritesButton timelineId="test" />
</TestProviders>
);
expect(
wrapper.find('[data-test-subj="timeline-favorite-empty-star"]').first().prop('disabled')
).toEqual(false);
});
test('Should update isFavorite after clicking on favorite button', async () => {
const spy = jest.spyOn(timelineActions, 'updateIsFavorite');
const wrapper = mount(
<TestProviders>
<AddToFavoritesButton timelineId="test" />
</TestProviders>
);
wrapper.simulate('click');
expect(spy).toHaveBeenCalled();
});
test('should disable favorite button with filled star', () => {
const { storage } = createSecuritySolutionStorageMock();
const store = createStore(
{
...mockGlobalState,
timeline: {
...mockGlobalState.timeline,
timelineById: {
test: {
...mockGlobalState.timeline.timelineById.test,
isFavorite: true,
},
},
},
},
SUB_PLUGINS_REDUCER,
apolloClientObservable,
kibanaObservable,
storage
);
const wrapper = mount(
<TestProviders store={store}>
<AddToFavoritesButton timelineId="test" />
</TestProviders>
);
expect(
wrapper.find('[data-test-subj="timeline-favorite-filled-star"]').exists()
).toBeTruthy();
});
});
describe('Elast prebuilt templates', () => {
test('should disable favorite button', () => {
const { storage } = createSecuritySolutionStorageMock();
const store = createStore(
{
...mockGlobalState,
timeline: {
...mockGlobalState.timeline,
timelineById: {
test: {
...mockGlobalState.timeline.timelineById.test,
status: TimelineStatus.immutable,
timelineType: TimelineType.template,
templateTimelineId: 'mock-template-timeline-id',
templateTimelineVersion: 1,
},
},
},
},
SUB_PLUGINS_REDUCER,
apolloClientObservable,
kibanaObservable,
storage
);
const wrapper = mount(
<TestProviders store={store}>
<AddToFavoritesButton timelineId="test" />
</TestProviders>
);
expect(
wrapper.find('[data-test-subj="timeline-favorite-empty-star"]').first().prop('disabled')
).toEqual(true);
});
});
describe('Custom templates', () => {
test('should enable favorite button', () => {
const { storage } = createSecuritySolutionStorageMock();
const store = createStore(
{
...mockGlobalState,
timeline: {
...mockGlobalState.timeline,
timelineById: {
test: {
...mockGlobalState.timeline.timelineById.test,
status: TimelineStatus.active,
timelineType: TimelineType.template,
templateTimelineId: 'mock-template-timeline-id',
templateTimelineVersion: 1,
},
},
},
},
SUB_PLUGINS_REDUCER,
apolloClientObservable,
kibanaObservable,
storage
);
const wrapper = mount(
<TestProviders store={store}>
<AddToFavoritesButton timelineId="test" />
</TestProviders>
);
expect(
wrapper.find('[data-test-subj="timeline-favorite-empty-star"]').first().prop('disabled')
).toEqual(false);
});
});
});

View file

@ -10,7 +10,11 @@ import React, { useCallback, useMemo } from 'react';
import styled from 'styled-components';
import { useDispatch } from 'react-redux';
import { TimelineTypeLiteral, TimelineType } from '../../../../../common/types/timeline';
import {
TimelineTypeLiteral,
TimelineType,
TimelineStatus,
} from '../../../../../common/types/timeline';
import { timelineActions, timelineSelectors } from '../../../../timelines/store/timeline';
import { useShallowEqualSelector } from '../../../../common/hooks/use_selector';
@ -39,6 +43,12 @@ const AddToFavoritesButtonComponent: React.FC<AddToFavoritesButtonProps> = ({ ti
(state) => (getTimeline(state, timelineId) ?? timelineDefaults).isFavorite
);
const status = useShallowEqualSelector(
(state) => (getTimeline(state, timelineId) ?? timelineDefaults).status
);
const disableFavoriteButton = status === TimelineStatus.immutable;
const handleClick = useCallback(
() => dispatch(timelineActions.updateIsFavorite({ id: timelineId, isFavorite: !isFavorite })),
[dispatch, timelineId, isFavorite]
@ -51,6 +61,7 @@ const AddToFavoritesButtonComponent: React.FC<AddToFavoritesButtonProps> = ({ ti
iconType={isFavorite ? 'starFilled' : 'starEmpty'}
onClick={handleClick}
data-test-subj={`timeline-favorite-${isFavorite ? 'filled' : 'empty'}-star`}
disabled={disableFavoriteButton}
>
{isFavorite ? i18n.REMOVE_FROM_FAVORITES : i18n.ADD_TO_FAVORITES}
</EuiButton>