Add SampleEngineCreationCTA to engines EmptyState

elastic · Mar 23, 2021 · 7924d22 · 7924d22
1 parent d0877ef
commit 7924d22
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/..._search/public/applications/app_search/components/engines/components/empty_state.test.tsx b/..._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', () => {
@@ -42,5 +44,9 @@ describe('EmptyState', () => {
     it('sends a user to engine creation', () => {
       expect(button.prop('to')).toEqual('/engine_creation');
     });
+
+    it('contains a CTA to create a sample engine', () => {
+      expect(prompt.find(SampleEngineCreationCta)).toHaveLength(1);
+    });
   });
 });
diff --git a/...prise_search/public/applications/app_search/components/engines/components/empty_state.tsx b/...prise_search/public/applications/app_search/components/engines/components/empty_state.tsx
@@ -9,14 +9,16 @@ import React from 'react';
 
 import { useActions } from 'kea';
 
-import { EuiPageContent, EuiEmptyPrompt } from '@elastic/eui';
+import { EuiPageContent, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
 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 { ENGINE_CREATION_PATH } from '../../../routes';
 
+import { SampleEngineCreationCta } from '../../sample_engine_creation_cta/sample_engine_creation_cta';
+
 import { EnginesOverviewHeader } from './header';
 
 import './empty_state.scss';
@@ -50,22 +52,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',
-                })
-              }
-            >
-              <FormattedMessage
-                id="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',
+                  })
+                }
+              >
+                <FormattedMessage
+                  id="xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta"
+                  defaultMessage="Create an engine"
+                />
+              </EuiButtonTo>
+              <EuiSpacer size="xl" />
+              <SampleEngineCreationCta />
+            </>
           }
         />
       </EuiPageContent>