[App Search] Add a Sample Engine CTA panel to the engines table when empty

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

@@ -14,6 +14,8 @@ import { shallow, ShallowWrapper } from 'enzyme';
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 
+import { SampleEngineCreationCta } from '../../sample_engine_creation_cta/sample_engine_creation_cta';
+
 import { EmptyState } from './';
 
 describe('EmptyState', () => {
@@ -59,5 +61,9 @@ describe('EmptyState', () => {
 
       expect(wrapper.find('[data-test-subj="NonAdminEmptyEnginesPrompt"]')).toHaveLength(1);
     });
+
+    it('contains a CTA to create a sample engine', () => {
+      expect(prompt.find(SampleEngineCreationCta)).toHaveLength(1);
+    });
   });
 });

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

@@ -9,15 +9,18 @@ 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 { FormattedMessage } from '@kbn/i18n/react';
 
 import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
 import { EuiButtonTo } from '../../../../shared/react_router_helpers';
 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 +58,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');
+    });
+  });
+});

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

@@ -0,0 +1,72 @@
+/*
+ * 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 { generatePath } from 'react-router-dom';
+
+import { kea, MakeLogicType } from 'kea';
+
+import { flashAPIErrors, setQueuedSuccessMessage } from '../../../shared/flash_messages';
+import { HttpLogic } from '../../../shared/http';
+import { KibanaLogic } from '../../../shared/kibana';
+import { ENGINE_PATH } from '../../routes';
+import { ENGINE_CREATION_SUCCESS_MESSAGE } from '../engine_creation/constants';
+
+interface SampleEngineCreationCtaActions {
+  createSampleEngine(): void;
+  onSampleEngineCreationSuccess(): void;
+  onSampleEngineCreationFailure(): void;
+  setIsLoading(isLoading: boolean): { isLoading: boolean };
+}
+
+interface SampleEngineCreationCtaValues {
+  isLoading: boolean;
+}
+
+export const SampleEngineCreationCtaLogic = kea<
+  MakeLogicType<SampleEngineCreationCtaValues, SampleEngineCreationCtaActions>
+>({
+  path: ['enterprise_search', 'app_search', 'sample_engine_cta_logic'],
+  actions: {
+    createSampleEngine: true,
+    onSampleEngineCreationSuccess: true,
+    onSampleEngineCreationFailure: true,
+  },
+  reducers: {
+    isLoading: [
+      false,
+      {
+        createSampleEngine: () => true,
+        onSampleEngineCreationSuccess: () => false,
+        onSampleEngineCreationFailure: () => false,
+      },
+    ],
+  },
+  listeners: ({ actions }) => ({
+    createSampleEngine: async () => {
+      const { http } = HttpLogic.values;
+
+      const body = JSON.stringify({ seed_sample_engine: true });
+
+      try {
+        await http.post('/api/app_search/onboarding_complete', {
+          body,
+        });
+        actions.onSampleEngineCreationSuccess();
+      } catch (e) {
+        actions.onSampleEngineCreationFailure();
+        flashAPIErrors(e);
+      }
+    },
+    onSampleEngineCreationSuccess: () => {
+      const { navigateToUrl } = KibanaLogic.values;
+      const enginePath = generatePath(ENGINE_PATH, { engineName: 'national-parks-demo' });
+
+      setQueuedSuccessMessage(ENGINE_CREATION_SUCCESS_MESSAGE);
+      navigateToUrl(enginePath);
+    },
+  }),
+});