Skip to content

Commit

Permalink
[App Search] Add a Sample Engine CTA panel to the engines table when …
Browse files Browse the repository at this point in the history
…empty (#94647)

* Added new onboarding complete route for App Search

* Allow responses without JSON bodies in Enterprise Search

* New SampleEngineCreationCtaLogic

* New SampleEngineCreationCta component

* Add SampleEngineCreationCTA to engines EmptyState

* Improve SampleEngineCreationCta

* Fix spelling error in Enterprise Search request handler test

* Improve SampleEngineCreationCtaLogic

* Fix types

* Fix tests after origin/master merge

* Turns out I 'fixed' my tests by removing this test

Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
byronhulcher and kibanamachine authored Mar 30, 2021
1 parent 5b69278 commit e91d0d4
Show file tree
Hide file tree
Showing 13 changed files with 451 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,37 @@ import { shallow, ShallowWrapper } from 'enzyme';

import { EuiEmptyPrompt } from '@elastic/eui';

import { SampleEngineCreationCta } from '../../sample_engine_creation_cta';

import { EmptyState } from './';

describe('EmptyState', () => {
describe('when the user can manage/create engines', () => {
let wrapper: ShallowWrapper;
let prompt: ShallowWrapper;

beforeAll(() => {
setMockValues({ myRole: { canManageEngines: true } });
wrapper = shallow(<EmptyState />);
prompt = wrapper.find(EuiEmptyPrompt).dive();
});

afterAll(() => {
jest.clearAllMocks();
});

it('renders a prompt to create an engine', () => {
expect(wrapper.find('[data-test-subj="AdminEmptyEnginesPrompt"]')).toHaveLength(1);
});

it('contains a sample engine CTA', () => {
expect(prompt.find(SampleEngineCreationCta)).toHaveLength(1);
});

describe('create engine button', () => {
let prompt: ShallowWrapper;
let button: ShallowWrapper;

beforeAll(() => {
prompt = wrapper.find(EuiEmptyPrompt).dive();
button = prompt.find('[data-test-subj="EmptyStateCreateFirstEngineCta"]');
});

Expand All @@ -50,13 +60,18 @@ describe('EmptyState', () => {
});

describe('when the user cannot manage/create engines', () => {
let wrapper: ShallowWrapper;

beforeAll(() => {
setMockValues({ myRole: { canManageEngines: false } });
wrapper = shallow(<EmptyState />);
});

it('renders a prompt to contact the App Search admin', () => {
const wrapper = shallow(<EmptyState />);
afterAll(() => {
jest.clearAllMocks();
});

it('renders a prompt to contact the App Search admin', () => {
expect(wrapper.find('[data-test-subj="NonAdminEmptyEnginesPrompt"]')).toHaveLength(1);
});
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import React from 'react';

import { useValues, useActions } from 'kea';

import { EuiPageContent, EuiEmptyPrompt } from '@elastic/eui';
import { EuiPageContent, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
Expand All @@ -18,6 +18,8 @@ import { TelemetryLogic } from '../../../../shared/telemetry';
import { AppLogic } from '../../../app_logic';
import { ENGINE_CREATION_PATH } from '../../../routes';

import { SampleEngineCreationCta } from '../../sample_engine_creation_cta/sample_engine_creation_cta';

import { EnginesOverviewHeader } from './header';

import './empty_state.scss';
Expand Down Expand Up @@ -55,22 +57,26 @@ export const EmptyState: React.FC = () => {
</p>
}
actions={
<EuiButtonTo
data-test-subj="EmptyStateCreateFirstEngineCta"
fill
to={ENGINE_CREATION_PATH}
onClick={() =>
sendAppSearchTelemetry({
action: 'clicked',
metric: 'create_first_engine_button',
})
}
>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta',
{ defaultMessage: 'Create an engine' }
)}
</EuiButtonTo>
<>
<EuiButtonTo
data-test-subj="EmptyStateCreateFirstEngineCta"
fill
to={ENGINE_CREATION_PATH}
onClick={() =>
sendAppSearchTelemetry({
action: 'clicked',
metric: 'create_first_engine_button',
})
}
>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta',
{ defaultMessage: 'Create an engine' }
)}
</EuiButtonTo>
<EuiSpacer size="xl" />
<SampleEngineCreationCta />
</>
}
/>
) : (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import { i18n } from '@kbn/i18n';

export const SAMPLE_ENGINE_CREATION_CTA_TITLE = i18n.translate(
'xpack.enterpriseSearch.appSearch.sampleEngineCreationCta.title',
{
defaultMessage: 'Just kicking the tires?',
}
);

export const SAMPLE_ENGINE_CREATION_CTA_DESCRIPTION = i18n.translate(
'xpack.enterpriseSearch.appSearch.sampleEngineCreationCta.description',
{
defaultMessage: 'Test an engine with sample data.',
}
);

export const SAMPLE_ENGINE_CREATION_CTA_BUTTON_LABEL = i18n.translate(
'xpack.enterpriseSearch.appSearch.sampleEngineCreationCta.buttonLabel',
{
defaultMessage: 'Try a sample engine',
}
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

export { SampleEngineCreationCta } from './sample_engine_creation_cta';
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import '../../../__mocks__/enterprise_search_url.mock';
import { setMockActions, setMockValues } from '../../../__mocks__';

import React from 'react';

import { shallow } from 'enzyme';

import { EuiButton } from '@elastic/eui';

import { SampleEngineCreationCta } from './sample_engine_creation_cta';

describe('SampleEngineCTA', () => {
describe('CTA button', () => {
const MOCK_VALUES = {
isLoading: false,
};

const MOCK_ACTIONS = {
createSampleEngine: jest.fn(),
};

beforeEach(() => {
jest.clearAllMocks();
setMockActions(MOCK_ACTIONS);
setMockValues(MOCK_VALUES);
});

it('calls createSampleEngine on click', () => {
const wrapper = shallow(<SampleEngineCreationCta />);
const ctaButton = wrapper.find(EuiButton);

expect(ctaButton.props().onClick).toEqual(MOCK_ACTIONS.createSampleEngine);
});

it('is enabled by default', () => {
const wrapper = shallow(<SampleEngineCreationCta />);
const ctaButton = wrapper.find(EuiButton);

expect(ctaButton.props().isLoading).toEqual(false);
});

it('is disabled while loading', () => {
setMockValues({ ...MOCK_VALUES, isLoading: true });
const wrapper = shallow(<SampleEngineCreationCta />);
const ctaButton = wrapper.find(EuiButton);

expect(ctaButton.props().isLoading).toEqual(true);
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';

import { useActions, useValues } from 'kea';

import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText, EuiButton } from '@elastic/eui';

import {
SAMPLE_ENGINE_CREATION_CTA_TITLE,
SAMPLE_ENGINE_CREATION_CTA_DESCRIPTION,
SAMPLE_ENGINE_CREATION_CTA_BUTTON_LABEL,
} from './i18n';
import { SampleEngineCreationCtaLogic } from './sample_engine_creation_cta_logic';

export const SampleEngineCreationCta: React.FC = () => {
const { isLoading } = useValues(SampleEngineCreationCtaLogic);
const { createSampleEngine } = useActions(SampleEngineCreationCtaLogic);

return (
<EuiPanel>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiTitle size="s">
<h3>{SAMPLE_ENGINE_CREATION_CTA_TITLE}</h3>
</EuiTitle>
<EuiText size="s">
<p>{SAMPLE_ENGINE_CREATION_CTA_DESCRIPTION}</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton onClick={createSampleEngine} isLoading={isLoading}>
{SAMPLE_ENGINE_CREATION_CTA_BUTTON_LABEL}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import {
LogicMounter,
mockHttpValues,
mockKibanaValues,
mockFlashMessageHelpers,
} from '../../../__mocks__';

import { nextTick } from '@kbn/test/jest';

import { SampleEngineCreationCtaLogic } from './sample_engine_creation_cta_logic';

describe('SampleEngineCreationCtaLogic', () => {
const { mount } = new LogicMounter(SampleEngineCreationCtaLogic);
const { http } = mockHttpValues;
const { navigateToUrl } = mockKibanaValues;
const { setQueuedSuccessMessage, flashAPIErrors } = mockFlashMessageHelpers;

const DEFAULT_VALUES = {
isLoading: false,
};

beforeEach(() => {
jest.clearAllMocks();
mount();
});

it('has expected default values', () => {
expect(SampleEngineCreationCtaLogic.values).toEqual(DEFAULT_VALUES);
});

describe('actions', () => {
it('onSampleEngineCreationFailure sets isLoading to false', () => {
mount({ isLoading: true });

SampleEngineCreationCtaLogic.actions.onSampleEngineCreationFailure();

expect(SampleEngineCreationCtaLogic.values.isLoading).toEqual(false);
});
});

describe('listeners', () => {
describe('createSampleEngine', () => {
it('POSTS to /api/app_search/engines', () => {
const body = JSON.stringify({
seed_sample_engine: true,
});
SampleEngineCreationCtaLogic.actions.createSampleEngine();

expect(http.post).toHaveBeenCalledWith('/api/app_search/onboarding_complete', { body });
});

it('calls onSampleEngineCreationSuccess on valid submission', async () => {
jest.spyOn(SampleEngineCreationCtaLogic.actions, 'onSampleEngineCreationSuccess');
http.post.mockReturnValueOnce(Promise.resolve({}));

SampleEngineCreationCtaLogic.actions.createSampleEngine();
await nextTick();

expect(
SampleEngineCreationCtaLogic.actions.onSampleEngineCreationSuccess
).toHaveBeenCalledTimes(1);
});

it('calls onSampleEngineCreationFailure and flashAPIErrors on API Error', async () => {
jest.spyOn(SampleEngineCreationCtaLogic.actions, 'onSampleEngineCreationFailure');
http.post.mockReturnValueOnce(Promise.reject());

SampleEngineCreationCtaLogic.actions.createSampleEngine();
await nextTick();

expect(flashAPIErrors).toHaveBeenCalledTimes(1);
expect(
SampleEngineCreationCtaLogic.actions.onSampleEngineCreationFailure
).toHaveBeenCalledTimes(1);
});
});

it('onSampleEngineCreationSuccess should set a success message and navigate the user to the engine page', () => {
SampleEngineCreationCtaLogic.actions.onSampleEngineCreationSuccess();

expect(setQueuedSuccessMessage).toHaveBeenCalledWith('Successfully created engine.');
expect(navigateToUrl).toHaveBeenCalledWith('/engines/national-parks-demo');
});
});
});
Loading

0 comments on commit e91d0d4

Please sign in to comment.