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.

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

[Guided onboarding] Implement quit guide functionality #142542

Merged
Prev Previous commit
Next Next commit
add tests
alisonelizabeth committed Oct 4, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 0577a89a80694e53b280d94dea73156c0057fc22
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import { act } from 'react-dom/test-utils';
import React from 'react';

import { applicationServiceMock } from '@kbn/core-application-browser-mocks';
import { httpServiceMock } from '@kbn/core/public/mocks';
import { httpServiceMock, notificationServiceMock } from '@kbn/core/public/mocks';
import { HttpSetup } from '@kbn/core/public';

import { guidesConfig } from '../constants/guides_config';
@@ -20,6 +20,7 @@ import { GuidePanel } from './guide_panel';
import { registerTestBed, TestBed } from '@kbn/test-jest-helpers';

const applicationMock = applicationServiceMock.createStartContract();
const notificationsMock = notificationServiceMock.createSetupContract();

const mockActiveSearchGuideState: GuideState = {
guideId: 'search',
@@ -42,7 +43,9 @@ const mockActiveSearchGuideState: GuideState = {
};

const getGuidePanel = () => () => {
return <GuidePanel application={applicationMock} api={apiService} />;
return (
<GuidePanel application={applicationMock} api={apiService} notifications={notificationsMock} />
);
};

describe('Guided setup', () => {
@@ -55,6 +58,7 @@ describe('Guided setup', () => {
httpClient.get.mockResolvedValue({
state: [],
});
httpClient.delete.mockResolvedValue({});
apiService.setup(httpClient);

await act(async () => {
@@ -228,5 +232,54 @@ describe('Guided setup', () => {
expect(find('activeStepButtonLabel').text()).toEqual('Continue');
});
});

describe('Quit guide modal', () => {
beforeEach(async () => {
const { component, find, exists } = testBed;

await act(async () => {
// Enable the "search" guide
await apiService.updateGuideState(mockActiveSearchGuideState, true);
});

component.update();

await act(async () => {
find('quitGuideButton').simulate('click');
});

component.update();

expect(exists('quitGuideModal')).toBe(true);
});

test('quit a guide', async () => {
const { component, find, exists } = testBed;

await act(async () => {
find('confirmQuitGuideButton').simulate('click');
});

component.update();

expect(exists('quitGuideModal')).toBe(false);
// For now, the guide button is disabled once a user quits a guide
// This behavior will change once https://github.com/elastic/kibana/issues/141129 is implemented
expect(exists('disabledGuideButton')).toBe(true);
});

test('cancels out of the quit guide confirmation modal', async () => {
const { component, find, exists } = testBed;

await act(async () => {
find('cancelQuitGuideButton').simulate('click');
});

component.update();

expect(exists('quitGuideModal')).toBe(false);
expect(exists('guideButton')).toBe(true);
});
});
});
});
Original file line number Diff line number Diff line change
@@ -284,7 +284,7 @@ export const GuidePanel = ({ api, application, notifications }: GuidePanelProps)
<EuiFlyoutFooter css={styles.flyoutOverrides.flyoutFooter}>
<EuiFlexGroup direction="column" alignItems="center" gutterSize="xs">
<EuiFlexItem>
<EuiButtonEmpty onClick={openQuitGuideModal}>
<EuiButtonEmpty onClick={openQuitGuideModal} data-test-subj="quitGuideButton">
{i18n.translate('guidedOnboarding.dropdownPanel.footer.exitGuideButtonLabel', {
defaultMessage: 'Quit setup guide',
})}
Original file line number Diff line number Diff line change
@@ -38,9 +38,9 @@ export const QuitGuideModal = ({
const deleteGuide = async () => {
setIsDeleting(true);
const { error } = await apiService.deleteGuide(currentGuide);
setIsDeleting(false);

if (error) {
setIsDeleting(false);
notifications.toasts.addError(error, {
title: i18n.translate('guidedOnboarding.quitGuideModal.errorToastTitle', {
defaultMessage: 'There was an error quitting the guide. Please try again.',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want them to try again right away or should they wait a moment?

Copy link
Contributor Author

@alisonelizabeth alisonelizabeth Oct 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm... good question. I suppose it depends on the actual error. Do we have general guidelines around error messages when an API request fails?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The error message guidance that we've provided the platform (cloud) team in the past is that we want to A. tell them what happened, B. tell them what they can do about it, and C. only use please when we are asking for their patience. This message meets those guidelines, but it's just a matter of timing.

@@ -51,7 +51,12 @@ export const QuitGuideModal = ({
};

return (
<EuiModal maxWidth={448} aria-label="quitGuideModal" onClose={closeModal}>
<EuiModal
maxWidth={448}
aria-label="quitGuideModal"
onClose={closeModal}
data-test-subj="quitGuideModal"
>
<EuiModalBody>
<EuiSpacer size="m" />
<EuiTitle size="m">
@@ -71,12 +76,18 @@ export const QuitGuideModal = ({
</EuiText>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={closeModal}>
<EuiButtonEmpty onClick={closeModal} data-test-subj="cancelQuitGuideButton">
{i18n.translate('guidedOnboarding.quitGuideModal.cancelButtonLabel', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
<EuiButton color="warning" isLoading={isDeleting} onClick={deleteGuide} fill>
<EuiButton
color="warning"
isLoading={isDeleting}
onClick={deleteGuide}
fill
data-test-subj="confirmQuitGuideButton"
>
{i18n.translate('guidedOnboarding.quitGuideModal.quitButtonLabel', {
defaultMessage: 'Quit guide',
})}
8 changes: 8 additions & 0 deletions src/plugins/guided_onboarding/public/services/api.test.ts
Original file line number Diff line number Diff line change
@@ -84,6 +84,14 @@ describe('GuidedOnboarding ApiService', () => {
});
});

describe('deleteGuide', () => {
it('sends a request to the delete API', async () => {
await apiService.deleteGuide(searchGuide);
expect(httpClient.delete).toHaveBeenCalledTimes(1);
expect(httpClient.delete).toHaveBeenCalledWith(`${API_BASE_PATH}/state/${searchGuide}`);
});
});

describe('updateGuideState', () => {
it('sends a request to the put API', async () => {
const updatedState: GuideState = {