[Enterprise Search] Search indices empty states (elastic#131337)

* Bind Search Indices empty state with Mock data
* Add Logic tests
* Change title on empty state to match with designs
* Hide title correctly on empty state
* Review changes


Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { searchIndices } from './search_indices.mock';
+export { searchEngines } from './search_engines.mock';

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_engines.mock.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 { Engine } from '../../app_search/components/engine/types';
+
+// TODO populate them
+export const searchEngines = [
+  { name: 'My First Search Engine' },
+  { name: 'Another Search Engine' },
+  { name: 'Dharma Initiative Research' },
+  { name: 'Flight 815 Customer Feedback' },
+  { name: 'The Swan Station Manuals' },
+  { name: 'The Hydra Station Manuals' },
+] as Engine[];

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/search_indices.test.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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__/shallow_useeffect.mock';
+import { setMockValues, setMockActions } from '../../../__mocks__/kea_logic';
+import { searchIndices, searchEngines } from '../../__mocks__';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiBasicTable } from '@elastic/eui';
+
+import { AddContentEmptyPrompt } from '../../../shared/add_content_empty_prompt';
+import { ElasticsearchResources } from '../../../shared/elasticsearch_resources';
+import { GettingStartedSteps } from '../../../shared/getting_started_steps';
+
+import { SearchIndices } from './search_indices';
+
+const mockActions = {
+  initPage: jest.fn(),
+};
+
+describe('SearchIndices', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('Empty state', () => {
+    it('renders when both Search Indices and Search Engines empty', () => {
+      setMockValues({
+        searchIndices: [],
+        searchEngines: [],
+      });
+      setMockActions(mockActions);
+      const wrapper = shallow(<SearchIndices />);
+
+      expect(wrapper.find(AddContentEmptyPrompt)).toHaveLength(1);
+      expect(wrapper.find(EuiBasicTable)).toHaveLength(0);
+
+      expect(wrapper.find(GettingStartedSteps)).toHaveLength(1);
+      expect(wrapper.find(ElasticsearchResources)).toHaveLength(1);
+    });
+
+    it('renders complete empty state when only Search Indices empty', () => {
+      setMockValues({
+        searchIndices: [],
+        searchEngines,
+      });
+      setMockActions(mockActions);
+      const wrapper = shallow(<SearchIndices />);
+
+      expect(wrapper.find(AddContentEmptyPrompt)).toHaveLength(1);
+      expect(wrapper.find(EuiBasicTable)).toHaveLength(0);
+
+      expect(wrapper.find(GettingStartedSteps)).toHaveLength(1);
+      expect(wrapper.find(ElasticsearchResources)).toHaveLength(1);
+    });
+
+    it('renders when only Search Engines empty', () => {
+      setMockValues({
+        searchIndices,
+        searchEngines: [],
+      });
+      setMockActions(mockActions);
+      const wrapper = shallow(<SearchIndices />);
+
+      expect(wrapper.find(AddContentEmptyPrompt)).toHaveLength(0);
+      expect(wrapper.find(EuiBasicTable)).toHaveLength(1);
+
+      expect(wrapper.find(GettingStartedSteps)).toHaveLength(1);
+      expect(wrapper.find(ElasticsearchResources)).toHaveLength(1);
+    });
+  });
+
+  it('renders with Data', () => {
+    setMockValues({
+      searchIndices,
+      searchEngines,
+    });
+    setMockActions(mockActions);
+
+    const wrapper = shallow(<SearchIndices />);
+
+    expect(wrapper.find(AddContentEmptyPrompt)).toHaveLength(0);
+    expect(wrapper.find(EuiBasicTable)).toHaveLength(1);
+
+    expect(wrapper.find(GettingStartedSteps)).toHaveLength(0);
+    expect(wrapper.find(ElasticsearchResources)).toHaveLength(0);
+
+    expect(mockActions.initPage).toHaveBeenCalledTimes(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/search_indices.tsx

@@ -5,21 +5,34 @@
  * 2.0.
  */
 
-import { searchIndices } from '../../__mocks__';
-
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { generatePath } from 'react-router-dom';
 
-import { EuiBasicTable, EuiButton, HorizontalAlignment } from '@elastic/eui';
+import { useValues, useActions } from 'kea';
+
+import {
+  EuiBasicTable,
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+  HorizontalAlignment,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { AddContentEmptyPrompt } from '../../../shared/add_content_empty_prompt';
+import { ElasticsearchResources } from '../../../shared/elasticsearch_resources';
+import { GettingStartedSteps } from '../../../shared/getting_started_steps';
 import { EuiLinkTo, EuiButtonIconTo } from '../../../shared/react_router_helpers';
 
 import { SEARCH_INDEX_OVERVIEW_PATH, NEW_INDEX_PATH } from '../../routes';
 import { SearchIndex } from '../../types';
 import { EnterpriseSearchContentPageTemplate } from '../layout/page_template';
 
+import { SearchIndicesLogic } from './search_indices_logic';
+
 export const baseBreadcrumbs = [
   i18n.translate('xpack.enterpriseSearch.content.searchIndices.content.breadcrumb', {
     defaultMessage: 'Content',
@@ -30,6 +43,22 @@ export const baseBreadcrumbs = [
 ];
 
 export const SearchIndices: React.FC = () => {
+  const { initPage, searchEnginesLoadSuccess, searchIndicesLoadSuccess } =
+    useActions(SearchIndicesLogic);
+  const { searchIndices, searchEngines } = useValues(SearchIndicesLogic);
+
+  useEffect(() => {
+    initPage();
+  }, []);
+
+  // TODO This is for easy testing until we have the backend, please remove this before the release
+  // @ts-ignore
+  window.contentActions = {
+    initPage,
+    searchIndicesLoadSuccess,
+    searchEnginesLoadSuccess,
+  };
+
   // TODO: Replace with a real list of indices
   const columns = [
     {
@@ -114,22 +143,72 @@ export const SearchIndices: React.FC = () => {
     </EuiLinkTo>
   );
 
-  return (
-    <EnterpriseSearchContentPageTemplate
-      pageChrome={baseBreadcrumbs}
-      pageViewTelemetry="Search indices"
-      isLoading={false}
-      pageHeader={{
-        pageTitle: i18n.translate(
-          'xpack.enterpriseSearch.content.searchIndices.searchIndices.pageTitle',
+  const engineSteps = (
+    <>
+      <EuiTitle>
+        <h2>
+          {i18n.translate('xpack.enterpriseSearch.content.searchIndices.searchIndices.stepsTitle', {
+            defaultMessage: 'Build beautiful search experiences with Enterprise Search',
+          })}
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="l" />
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <GettingStartedSteps step={searchIndices.length === 0 ? 'first' : 'second'} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <ElasticsearchResources />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+
+  const pageTitle =
+    searchIndices.length !== 0
+      ? i18n.translate('xpack.enterpriseSearch.content.searchIndices.searchIndices.pageTitle', {
+          defaultMessage: 'Content',
+        })
+      : i18n.translate(
+          'xpack.enterpriseSearch.content.searchIndices.searchIndices.emptyPageTitle',
           {
-            defaultMessage: 'Search indices',
+            defaultMessage: 'Welcome to Enterprise Search',
           }
-        ),
-        rightSideItems: [createNewIndexButton],
-      }}
-    >
-      <EuiBasicTable items={searchIndices} columns={columns} />
-    </EnterpriseSearchContentPageTemplate>
+        );
+
+  return (
+    <>
+      <EnterpriseSearchContentPageTemplate
+        pageChrome={baseBreadcrumbs}
+        pageViewTelemetry="Search indices"
+        isLoading={false}
+        pageHeader={{
+          pageTitle,
+          rightSideItems: [createNewIndexButton],
+        }}
+      >
+        {searchIndices.length !== 0 ? (
+          <>
+            <EuiTitle>
+              <h2>
+                {i18n.translate(
+                  'xpack.enterpriseSearch.content.searchIndices.searchIndices.tableTitle',
+                  {
+                    defaultMessage: 'Search Indices',
+                  }
+                )}
+              </h2>
+            </EuiTitle>
+            <EuiSpacer size="l" />
+            <EuiBasicTable items={searchIndices} columns={columns} />
+          </>
+        ) : (
+          <AddContentEmptyPrompt />
+        )}
+        <EuiSpacer size="xxl" />
+        {(searchEngines.length === 0 || searchIndices.length === 0) && engineSteps}
+      </EnterpriseSearchContentPageTemplate>
+      )
+    </>
   );
 };

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/search_indices_logic.test.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 } from '../../../__mocks__/kea_logic';
+import { searchIndices, searchEngines } from '../../__mocks__';
+
+import { SearchIndicesLogic } from './search_indices_logic';
+
+describe('SearchIndicesLogic', () => {
+  const { mount } = new LogicMounter(SearchIndicesLogic);
+
+  const DEFAULT_VALUES = {
+    searchEngines: [],
+    searchIndices: [],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mount();
+  });
+
+  it('has expected default values', () => {
+    expect(SearchIndicesLogic.values).toEqual(DEFAULT_VALUES);
+  });
+
+  describe('actions', () => {
+    describe('searchIndicesLoadSuccess', () => {
+      it('should set searchIndices', () => {
+        SearchIndicesLogic.actions.searchIndicesLoadSuccess(searchIndices);
+        expect(SearchIndicesLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          searchIndices,
+        });
+      });
+    });
+    describe('searchEnginesLoadSuccess', () => {
+      it('should set searchEngines', () => {
+        SearchIndicesLogic.actions.searchEnginesLoadSuccess(searchEngines);
+        expect(SearchIndicesLogic.values).toEqual({
+          ...DEFAULT_VALUES,
+          searchEngines,
+        });
+      });
+    });
+  });
+
+  describe.skip('listeners', () => {
+    describe('loadSearchEngines', () => {});
+    describe('loadSearchIndices', () => {});
+  });
+});