From 731a99ef980e7bbe0c7b06b77a827813742dd803 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 21 Jun 2021 12:39:52 -0700
Subject: [PATCH 1/5] Convert Search UI view to use new page template

+ update tests TODO
---
 .../components/search_ui/search_ui.test.tsx   |   8 +-
 .../components/search_ui/search_ui.tsx        | 112 ++++++++----------
 2 files changed, 56 insertions(+), 64 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.test.tsx
index edec376dd3edd1..d1cb1815512e90 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.test.tsx
@@ -14,6 +14,9 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
+import { SearchUIForm } from './components/search_ui_form';
+import { SearchUIGraphic } from './components/search_ui_graphic';
+
 import { SearchUI } from './';
 
 describe('SearchUI', () => {
@@ -27,8 +30,9 @@ describe('SearchUI', () => {
   });
 
   it('renders', () => {
-    shallow(<SearchUI />);
-    // TODO: Check for form
+    const wrapper = shallow(<SearchUI />);
+    expect(wrapper.find(SearchUIForm).exists()).toBe(true);
+    expect(wrapper.find(SearchUIGraphic).exists()).toBe(true);
   });
 
   it('initializes data on mount', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx
index e75bc36177151f..c7564629e9353d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx
@@ -9,22 +9,12 @@ import React, { useEffect } from 'react';
 
 import { useActions } from 'kea';
 
-import {
-  EuiPageHeader,
-  EuiPageContentBody,
-  EuiText,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiSpacer,
-  EuiLink,
-} from '@elastic/eui';
+import { EuiText, EuiFlexItem, EuiFlexGroup, EuiSpacer, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-
 import { DOCS_PREFIX } from '../../routes';
 import { getEngineBreadcrumbs } from '../engine';
+import { AppSearchPageTemplate } from '../layout';
 
 import { SearchUIForm } from './components/search_ui_form';
 import { SearchUIGraphic } from './components/search_ui_graphic';
@@ -39,55 +29,53 @@ export const SearchUI: React.FC = () => {
   }, []);
 
   return (
-    <>
-      <SetPageChrome trail={getEngineBreadcrumbs([SEARCH_UI_TITLE])} />
-      <EuiPageHeader pageTitle={SEARCH_UI_TITLE} />
-      <FlashMessages />
-      <EuiPageContentBody>
-        <EuiFlexGroup alignItems="flexStart">
-          <EuiFlexItem>
-            <EuiText size="s" color="subdued">
-              <p>
-                <FormattedMessage
-                  id="xpack.enterpriseSearch.appSearch.engine.searchUI.bodyDescription"
-                  defaultMessage="Search UI is a free and open library for building search experiences with React. {link}."
-                  values={{
-                    link: (
-                      <EuiLink target="_blank" href="https://github.com/elastic/search-ui">
-                        <FormattedMessage
-                          id="xpack.enterpriseSearch.appSearch.engine.searchUI.repositoryLinkText"
-                          defaultMessage="Learn more"
-                        />
-                      </EuiLink>
-                    ),
-                  }}
-                />
-              </p>
-              <p>
-                <FormattedMessage
-                  id="xpack.enterpriseSearch.appSearch.engine.searchUI.lowerBodyDescription"
-                  defaultMessage="Use the fields below to generate a sample search experience built with Search UI. Use the sample to preview search results, or build upon it to create your own custom search experience. {link}."
-                  values={{
-                    link: (
-                      <EuiLink target="_blank" href={`${DOCS_PREFIX}/reference-ui-guide.html`}>
-                        <FormattedMessage
-                          id="xpack.enterpriseSearch.appSearch.engine.searchUI.guideLinkText"
-                          defaultMessage="Learn more"
-                        />
-                      </EuiLink>
-                    ),
-                  }}
-                />
-              </p>
-            </EuiText>
-            <EuiSpacer />
-            <SearchUIForm />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <SearchUIGraphic />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageContentBody>
-    </>
+    <AppSearchPageTemplate
+      pageChrome={getEngineBreadcrumbs([SEARCH_UI_TITLE])}
+      pageHeader={{ pageTitle: SEARCH_UI_TITLE }}
+    >
+      <EuiFlexGroup alignItems="flexStart">
+        <EuiFlexItem>
+          <EuiText size="s" color="subdued">
+            <p>
+              <FormattedMessage
+                id="xpack.enterpriseSearch.appSearch.engine.searchUI.bodyDescription"
+                defaultMessage="Search UI is a free and open library for building search experiences with React. {link}."
+                values={{
+                  link: (
+                    <EuiLink target="_blank" href="https://github.com/elastic/search-ui">
+                      <FormattedMessage
+                        id="xpack.enterpriseSearch.appSearch.engine.searchUI.repositoryLinkText"
+                        defaultMessage="Learn more"
+                      />
+                    </EuiLink>
+                  ),
+                }}
+              />
+            </p>
+            <p>
+              <FormattedMessage
+                id="xpack.enterpriseSearch.appSearch.engine.searchUI.lowerBodyDescription"
+                defaultMessage="Use the fields below to generate a sample search experience built with Search UI. Use the sample to preview search results, or build upon it to create your own custom search experience. {link}."
+                values={{
+                  link: (
+                    <EuiLink target="_blank" href={`${DOCS_PREFIX}/reference-ui-guide.html`}>
+                      <FormattedMessage
+                        id="xpack.enterpriseSearch.appSearch.engine.searchUI.guideLinkText"
+                        defaultMessage="Learn more"
+                      />
+                    </EuiLink>
+                  ),
+                }}
+              />
+            </p>
+          </EuiText>
+          <EuiSpacer />
+          <SearchUIForm />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <SearchUIGraphic />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </AppSearchPageTemplate>
   );
 };

From 26f86ab929c4b3bc1f713fedd5506e752c9c12af Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 21 Jun 2021 12:56:32 -0700
Subject: [PATCH 2/5] [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
---
 .../search_ui/components/empty_state.test.tsx | 27 +++++++++++
 .../search_ui/components/empty_state.tsx      | 46 +++++++++++++++++++
 .../components/search_ui/search_ui.test.tsx   |  5 +-
 .../components/search_ui/search_ui.tsx        |  8 +++-
 4 files changed, 82 insertions(+), 4 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/empty_state.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/empty_state.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/empty_state.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/empty_state.test.tsx
new file mode 100644
index 00000000000000..39f0cb376b325c
--- /dev/null
+++ b/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')
+    );
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/empty_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/components/empty_state.tsx
new file mode 100644
index 00000000000000..b7665a58de300b
--- /dev/null
+++ b/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>
+    }
+  />
+);
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.test.tsx
index d1cb1815512e90..f9f0dd611b9539 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.test.tsx
+++ b/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', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx
index c7564629e9353d..85612a12ce06cb 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx
@@ -7,15 +7,16 @@
 
 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';
@@ -23,6 +24,7 @@ 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>

From 343aaf9cd940f7bc5eb76422447168ed126fc08e Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 21 Jun 2021 12:57:27 -0700
Subject: [PATCH 3/5] Update router

---
 .../app_search/components/engine/engine_router.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
index 6510e99a000fc5..8c6aba5e8b5713 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
@@ -94,6 +94,11 @@ export const EngineRouter: React.FC = () => {
       <Route exact path={ENGINE_PATH}>
         <EngineOverview />
       </Route>
+      {canManageEngineSearchUi && (
+        <Route path={ENGINE_SEARCH_UI_PATH}>
+          <SearchUI />
+        </Route>
+      )}
       {/* TODO: Remove layout once page template migration is over */}
       <Layout navigation={<AppSearchNav />}>
         {canViewEngineAnalytics && (
@@ -141,11 +146,6 @@ export const EngineRouter: React.FC = () => {
             <ApiLogs />
           </Route>
         )}
-        {canManageEngineSearchUi && (
-          <Route path={ENGINE_SEARCH_UI_PATH}>
-            <SearchUI />
-          </Route>
-        )}
         {canViewMetaEngineSourceEngines && (
           <Route path={META_ENGINE_SOURCE_ENGINES_PATH}>
             <SourceEngines />

From fb04e853550dca8a3b5ea794f96051aa40c6ad9a Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Mon, 21 Jun 2021 14:39:11 -0700
Subject: [PATCH 4/5] Fix bad merge conflict resolution

---
 .../applications/app_search/components/engine/engine_router.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
index fb8961959dff0e..218f8b3ee26161 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx
@@ -103,7 +103,7 @@ export const EngineRouter: React.FC = () => {
         <Route path={ENGINE_DOCUMENTS_PATH}>
           <Documents />
         </Route>
-      })
+      )}
       {canManageEngineSearchUi && (
         <Route path={ENGINE_SEARCH_UI_PATH}>
           <SearchUI />

From 82553324e576cfe2f54f115be568d9a00532f863 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 21 Jun 2021 15:39:14 -0700
Subject: [PATCH 5/5] [Polish] Copy feedback proposed by Davey

- see https://github.com/elastic/kibana/pull/101958/commits/cbc3706223eb47be3d854a1cf4e3c7275d88ca39
---
 .../app_search/components/search_ui/search_ui.tsx             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx
index 85612a12ce06cb..0ac59a33068baf 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/search_ui/search_ui.tsx
@@ -49,7 +49,7 @@ export const SearchUI: React.FC = () => {
                     <EuiLink target="_blank" href="https://github.com/elastic/search-ui">
                       <FormattedMessage
                         id="xpack.enterpriseSearch.appSearch.engine.searchUI.repositoryLinkText"
-                        defaultMessage="Learn more"
+                        defaultMessage="View the Github repo"
                       />
                     </EuiLink>
                   ),
@@ -65,7 +65,7 @@ export const SearchUI: React.FC = () => {
                     <EuiLink target="_blank" href={`${DOCS_PREFIX}/reference-ui-guide.html`}>
                       <FormattedMessage
                         id="xpack.enterpriseSearch.appSearch.engine.searchUI.guideLinkText"
-                        defaultMessage="Learn more"
+                        defaultMessage="Learn more about Search UI"
                       />
                     </EuiLink>
                   ),