[UX polish] Add empty state to Search UI view

- On a totally new engine, all pages except this one* had an empty state, so per Davey's recommendations I whipped up a new empty state for this page

* Overview has a custom 'empty' state, analytics does not have an empty state

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

@@ -0,0 +1,27 @@
+/*
+ * 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 { shallow } from 'enzyme';
+
+import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
+
+import { EmptyState } from './empty_state';
+
+describe('EmptyState', () => {
+  it('renders', () => {
+    const wrapper = shallow(<EmptyState />)
+      .find(EuiEmptyPrompt)
+      .dive();
+
+    expect(wrapper.find('h2').text()).toEqual('Add documents to generate a Search UI');
+    expect(wrapper.find(EuiButton).prop('href')).toEqual(
+      expect.stringContaining('/reference-ui-guide.html')
+    );
+  });
+});

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

@@ -0,0 +1,46 @@
+/*
+ * 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 { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { DOCS_PREFIX } from '../../../routes';
+
+export const EmptyState: React.FC = () => (
+  <EuiEmptyPrompt
+    iconType="search"
+    title={
+      <h2>
+        {i18n.translate('xpack.enterpriseSearch.appSearch.engine.searchUI.empty.title', {
+          defaultMessage: 'Add documents to generate a Search UI',
+        })}
+      </h2>
+    }
+    body={
+      <p>
+        {i18n.translate('xpack.enterpriseSearch.appSearch.engine.searchUI.empty.description', {
+          defaultMessage:
+            'A schema will be automatically created for you after you index some documents.',
+        })}
+      </p>
+    }
+    actions={
+      <EuiButton
+        size="s"
+        target="_blank"
+        iconType="popout"
+        href={`${DOCS_PREFIX}/reference-ui-guide.html`}
+      >
+        {i18n.translate('xpack.enterpriseSearch.appSearch.engine.searchUI.empty.buttonLabel', {
+          defaultMessage: 'Read the Search UI guide',
+        })}
+      </EuiButton>
+    }
+  />
+);

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

@@ -6,9 +6,9 @@
  */
 
 import '../../../__mocks__/shallow_useeffect.mock';
-import '../../__mocks__/engine_logic.mock';
 
-import { setMockActions } from '../../../__mocks__/kea_logic';
+import { setMockActions, setMockValues } from '../../../__mocks__/kea_logic';
+import { mockEngineValues } from '../../__mocks__/engine_logic.mock';
 
 import React from 'react';
 
@@ -27,6 +27,7 @@ describe('SearchUI', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     setMockActions(actions);
+    setMockValues(mockEngineValues);
   });
 
   it('renders', () => {

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

@@ -7,22 +7,24 @@
 
 import React, { useEffect } from 'react';
 
-import { useActions } from 'kea';
+import { useActions, useValues } from 'kea';
 
 import { EuiText, EuiFlexItem, EuiFlexGroup, EuiSpacer, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { DOCS_PREFIX } from '../../routes';
-import { getEngineBreadcrumbs } from '../engine';
+import { EngineLogic, getEngineBreadcrumbs } from '../engine';
 import { AppSearchPageTemplate } from '../layout';
 
+import { EmptyState } from './components/empty_state';
 import { SearchUIForm } from './components/search_ui_form';
 import { SearchUIGraphic } from './components/search_ui_graphic';
 import { SEARCH_UI_TITLE } from './i18n';
 import { SearchUILogic } from './search_ui_logic';
 
 export const SearchUI: React.FC = () => {
   const { loadFieldData } = useActions(SearchUILogic);
+  const { engine } = useValues(EngineLogic);
 
   useEffect(() => {
     loadFieldData();
@@ -32,6 +34,8 @@ export const SearchUI: React.FC = () => {
     <AppSearchPageTemplate
       pageChrome={getEngineBreadcrumbs([SEARCH_UI_TITLE])}
       pageHeader={{ pageTitle: SEARCH_UI_TITLE }}
+      isEmptyState={Object.keys(engine.schema || {}).length === 0}
+      emptyState={<EmptyState />}
     >
       <EuiFlexGroup alignItems="flexStart">
         <EuiFlexItem>