Engines Overview: simplify loading & empty state to use new page temp…

…late props

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/index.ts

@@ -6,6 +6,5 @@
  */
 
 export { EnginesOverviewHeader } from './header';
-export { LoadingState } from './loading_state';
 export { EmptyState } from './empty_state';
 export { EmptyMetaEnginesState } from './empty_meta_engines_state';

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

@@ -14,7 +14,6 @@ import { shallow, ShallowWrapper } from 'enzyme';
 
 import { rerender } from '../../../test_helpers';
 
-import { LoadingState, EmptyState } from './components';
 import { EnginesTable } from './components/tables/engines_table';
 import { MetaEnginesTable } from './components/tables/meta_engines_table';
 
@@ -61,135 +60,117 @@ describe('EnginesOverview', () => {
     setMockActions(actions);
   });
 
-  describe('non-happy-path states', () => {
-    it('isLoading', () => {
-      setMockValues({ ...values, dataLoading: true });
-      const wrapper = shallow(<EnginesOverview />);
+  const valuesWithEngines = {
+    ...values,
+    dataLoading: false,
+    engines: ['test-engine'],
+    enginesMeta: {
+      page: {
+        current: 1,
+        size: 10,
+        total_results: 100,
+      },
+    },
+  };
 
-      expect(wrapper.find(LoadingState)).toHaveLength(1);
-    });
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(valuesWithEngines);
+  });
 
-    it('isEmpty', () => {
-      setMockValues({ ...values, engines: [] });
-      const wrapper = shallow(<EnginesOverview />);
+  it('renders and calls the engines API', () => {
+    const wrapper = shallow(<EnginesOverview />);
 
-      expect(wrapper.find(EmptyState)).toHaveLength(1);
-    });
+    expect(wrapper.find(EnginesTable)).toHaveLength(1);
+    expect(actions.loadEngines).toHaveBeenCalled();
   });
 
-  describe('happy-path states', () => {
-    const valuesWithEngines = {
-      ...values,
-      dataLoading: false,
-      engines: ['test-engine'],
-      enginesMeta: {
-        page: {
-          current: 1,
-          size: 10,
-          total_results: 100,
-        },
-      },
-    };
+  describe('when the user can manage/create engines', () => {
+    it('renders a create engine button which takes users to the create engine page', () => {
+      setMockValues({
+        ...valuesWithEngines,
+        myRole: { canManageEngines: true },
+      });
+      const wrapper = shallow(<EnginesOverview />);
 
-    beforeEach(() => {
-      jest.clearAllMocks();
-      setMockValues(valuesWithEngines);
+      expect(
+        wrapper.find('[data-test-subj="appSearchEnginesEngineCreationButton"]').prop('to')
+      ).toEqual('/engine_creation');
     });
+  });
 
-    it('renders and calls the engines API', () => {
+  describe('when the account has a platinum license', () => {
+    it('renders a 2nd meta engines table & makes a 2nd meta engines call', () => {
+      setMockValues({
+        ...valuesWithEngines,
+        hasPlatinumLicense: true,
+      });
       const wrapper = shallow(<EnginesOverview />);
 
-      expect(wrapper.find(EnginesTable)).toHaveLength(1);
-      expect(actions.loadEngines).toHaveBeenCalled();
+      expect(wrapper.find(MetaEnginesTable)).toHaveLength(1);
+      expect(actions.loadMetaEngines).toHaveBeenCalled();
     });
 
     describe('when the user can manage/create engines', () => {
-      it('renders a create engine button which takes users to the create engine page', () => {
+      it('renders a create engine button which takes users to the create meta engine page', () => {
         setMockValues({
           ...valuesWithEngines,
+          hasPlatinumLicense: true,
           myRole: { canManageEngines: true },
         });
         const wrapper = shallow(<EnginesOverview />);
 
         expect(
-          wrapper.find('[data-test-subj="appSearchEnginesEngineCreationButton"]').prop('to')
-        ).toEqual('/engine_creation');
+          wrapper.find('[data-test-subj="appSearchEnginesMetaEngineCreationButton"]').prop('to')
+        ).toEqual('/meta_engine_creation');
       });
     });
+  });
 
-    describe('when the account has a platinum license', () => {
-      it('renders a 2nd meta engines table & makes a 2nd meta engines call', () => {
-        setMockValues({
-          ...valuesWithEngines,
-          hasPlatinumLicense: true,
-        });
-        const wrapper = shallow(<EnginesOverview />);
+  describe('pagination', () => {
+    const getTablePagination = (wrapper: ShallowWrapper) =>
+      wrapper.find(EnginesTable).prop('pagination');
 
-        expect(wrapper.find(MetaEnginesTable)).toHaveLength(1);
-        expect(actions.loadMetaEngines).toHaveBeenCalled();
-      });
+    it('passes down page data from the API', () => {
+      const wrapper = shallow(<EnginesOverview />);
+      const pagination = getTablePagination(wrapper);
 
-      describe('when the user can manage/create engines', () => {
-        it('renders a create engine button which takes users to the create meta engine page', () => {
-          setMockValues({
-            ...valuesWithEngines,
-            hasPlatinumLicense: true,
-            myRole: { canManageEngines: true },
-          });
-          const wrapper = shallow(<EnginesOverview />);
-
-          expect(
-            wrapper.find('[data-test-subj="appSearchEnginesMetaEngineCreationButton"]').prop('to')
-          ).toEqual('/meta_engine_creation');
-        });
-      });
+      expect(pagination.totalItemCount).toEqual(100);
+      expect(pagination.pageIndex).toEqual(0);
     });
 
-    describe('pagination', () => {
-      const getTablePagination = (wrapper: ShallowWrapper) =>
-        wrapper.find(EnginesTable).prop('pagination');
-
-      it('passes down page data from the API', () => {
-        const wrapper = shallow(<EnginesOverview />);
-        const pagination = getTablePagination(wrapper);
+    it('re-polls the API on page change', () => {
+      const wrapper = shallow(<EnginesOverview />);
 
-        expect(pagination.totalItemCount).toEqual(100);
-        expect(pagination.pageIndex).toEqual(0);
+      setMockValues({
+        ...valuesWithEngines,
+        enginesMeta: {
+          page: {
+            ...valuesWithEngines.enginesMeta.page,
+            current: 51,
+          },
+        },
       });
+      rerender(wrapper);
 
-      it('re-polls the API on page change', () => {
-        const wrapper = shallow(<EnginesOverview />);
-
-        setMockValues({
-          ...valuesWithEngines,
-          enginesMeta: {
-            page: {
-              ...valuesWithEngines.enginesMeta.page,
-              current: 51,
-            },
-          },
-        });
-        rerender(wrapper);
+      expect(actions.loadEngines).toHaveBeenCalledTimes(2);
+      expect(getTablePagination(wrapper).pageIndex).toEqual(50);
+    });
 
-        expect(actions.loadEngines).toHaveBeenCalledTimes(2);
-        expect(getTablePagination(wrapper).pageIndex).toEqual(50);
+    it('calls onPagination handlers', () => {
+      setMockValues({
+        ...valuesWithEngines,
+        hasPlatinumLicense: true,
+        metaEngines: ['test-meta-engine'],
       });
+      const wrapper = shallow(<EnginesOverview />);
+      const pageEvent = { page: { index: 0 } };
 
-      it('calls onPagination handlers', () => {
-        setMockValues({
-          ...valuesWithEngines,
-          hasPlatinumLicense: true,
-          metaEngines: ['test-meta-engine'],
-        });
-        const wrapper = shallow(<EnginesOverview />);
-        const pageEvent = { page: { index: 0 } };
-
-        wrapper.find(EnginesTable).simulate('change', pageEvent);
-        expect(actions.onEnginesPagination).toHaveBeenCalledWith(1);
+      wrapper.find(EnginesTable).simulate('change', pageEvent);
+      expect(actions.onEnginesPagination).toHaveBeenCalledWith(1);
 
-        wrapper.find(MetaEnginesTable).simulate('change', pageEvent);
-        expect(actions.onMetaEnginesPagination).toHaveBeenCalledWith(1);
-      });
+      wrapper.find(MetaEnginesTable).simulate('change', pageEvent);
+      expect(actions.onMetaEnginesPagination).toHaveBeenCalledWith(1);
     });
   });
 });

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

@@ -28,12 +28,7 @@ import { EngineIcon, MetaEngineIcon } from '../../icons';
 import { ENGINE_CREATION_PATH, META_ENGINE_CREATION_PATH } from '../../routes';
 import { AppSearchPageTemplate } from '../layout';
 
-import {
-  EnginesOverviewHeader,
-  LoadingState,
-  EmptyState,
-  EmptyMetaEnginesState,
-} from './components';
+import { EnginesOverviewHeader, EmptyState, EmptyMetaEnginesState } from './components';
 import { EnginesTable } from './components/tables/engines_table';
 import { MetaEnginesTable } from './components/tables/meta_engines_table';
 import {
@@ -72,14 +67,14 @@ export const EnginesOverview: React.FC = () => {
     if (hasPlatinumLicense) loadMetaEngines();
   }, [hasPlatinumLicense, metaEnginesMeta.page.current]);
 
-  if (dataLoading) return <LoadingState />;
-  if (!engines.length) return <EmptyState />;
-
   return (
     <AppSearchPageTemplate
       pageViewTelemetry="engines_overview"
       pageChrome={[ENGINES_TITLE]}
       pageHeader={{ children: <EnginesOverviewHeader /> }}
+      isLoading={dataLoading}
+      isEmptyState={!engines.length}
+      emptyState={<EmptyState />}
     >
       <EnginesOverviewHeader />
       <EuiPanel hasBorder>