[App Search] Add a Sample Engine CTA panel to the engines table when 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 <42973632+kibanamachine@users.noreply.github.com>

Author: byronhulcher

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.test.tsx

@@ -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"]');
       });
 
@@ -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);
     });
   });

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx

@@ -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';
@@ -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';
@@ -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 />
+              </>
             }
           />
         ) : (

x-pack/plugins/enterprise_search/public/applications/app_search/components/sample_engine_creation_cta/i18n.ts

@@ -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',
+  }
+);

x-pack/plugins/enterprise_search/public/applications/app_search/components/sample_engine_creation_cta/index.ts

@@ -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';

x-pack/plugins/enterprise_search/public/applications/app_search/components/sample_engine_creation_cta/sample_engine_creation_cta.test.tsx

@@ -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);
+    });
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/sample_engine_creation_cta/sample_engine_creation_cta.tsx

@@ -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>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/sample_engine_creation_cta/sample_engine_creation_cta_logic.test.ts

@@ -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');
+    });
+  });
+});