From 1627240ff8b8f82e41de5169b5d4dedbb88447c1 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Thu, 17 Jun 2021 09:28:14 -0700
Subject: [PATCH] [Workplace Search] Convert Overview & Security pages to new
 page template (#102444)

* Convert WS Overview page to new page template

* Misc Overview refactors

- Fix extra spacing caused by hidden onboarding steps

- Default page title to "Organization overview" instead of to onboarding title which flashes during loading

- Prefer shallow over mount (will matter later, when WorkplaceSearchPageTemplate nav includes more kea logic)

* Convert Security page to new page template

+ misc ux enhancement disabling header actions while data is still loading
---
 .../workplace_search/index.test.tsx           |  2 +-
 .../applications/workplace_search/index.tsx   | 12 +---
 .../views/overview/overview.test.tsx          | 61 +++++++----------
 .../views/overview/overview.tsx               | 38 ++++++-----
 .../views/security/security.test.tsx          | 18 +----
 .../views/security/security.tsx               | 66 +++++++------------
 6 files changed, 74 insertions(+), 123 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.test.tsx
index fb0ea822206400..28169afd4bdebc 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.test.tsx
@@ -88,7 +88,7 @@ describe('WorkplaceSearchConfigured', () => {
 
     const wrapper = shallow(<WorkplaceSearchConfigured />);
 
-    expect(wrapper.find(ErrorState)).toHaveLength(2);
+    expect(wrapper.find(ErrorState)).toHaveLength(1);
   });
 
   it('passes readOnlyMode state', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
index dd263c3bd69f5d..6961f45bae757a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
@@ -96,13 +96,7 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
         <SourceAdded />
       </Route>
       <Route exact path="/">
-        {errorConnecting ? (
-          <ErrorState />
-        ) : (
-          <Layout navigation={<WorkplaceSearchNav />} restrictWidth readOnlyMode={readOnlyMode}>
-            <Overview />
-          </Layout>
-        )}
+        <Overview />
       </Route>
       <Route path={PERSONAL_SOURCES_PATH}>
         <PersonalDashboardLayout
@@ -144,9 +138,7 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
         <RoleMappings />
       </Route>
       <Route path={SECURITY_PATH}>
-        <Layout navigation={<WorkplaceSearchNav />} restrictWidth readOnlyMode={readOnlyMode}>
-          <Security />
-        </Layout>
+        <Security />
       </Route>
       <Route path={ORG_SETTINGS_PATH}>
         <Layout
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx
index f4fa1dab89810e..cf23470e8155eb 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx
@@ -5,15 +5,13 @@
  * 2.0.
  */
 
+import '../../../__mocks__/shallow_useeffect.mock';
 import './__mocks__/overview_logic.mock';
 import { mockActions, setMockValues } from './__mocks__';
 
 import React from 'react';
 
-import { shallow, mount } from 'enzyme';
-
-import { Loading } from '../../../shared/loading';
-import { ViewContentHeader } from '../../components/shared/view_content_header';
+import { shallow } from 'enzyme';
 
 import { OnboardingSteps } from './onboarding_steps';
 import { OrganizationStats } from './organization_stats';
@@ -21,45 +19,34 @@ import { Overview } from './overview';
 import { RecentActivity } from './recent_activity';
 
 describe('Overview', () => {
-  describe('non-happy-path states', () => {
-    it('isLoading', () => {
-      const wrapper = shallow(<Overview />);
+  it('calls initialize function', async () => {
+    shallow(<Overview />);
 
-      expect(wrapper.find(Loading)).toHaveLength(1);
-    });
+    expect(mockActions.initializeOverview).toHaveBeenCalled();
   });
 
-  describe('happy-path states', () => {
-    it('calls initialize function', async () => {
-      mount(<Overview />);
-
-      expect(mockActions.initializeOverview).toHaveBeenCalled();
-    });
+  it('renders onboarding state', () => {
+    setMockValues({ dataLoading: false });
+    const wrapper = shallow(<Overview />);
 
-    it('renders onboarding state', () => {
-      setMockValues({ dataLoading: false });
-      const wrapper = shallow(<Overview />);
+    expect(wrapper.find(OnboardingSteps)).toHaveLength(1);
+    expect(wrapper.find(OrganizationStats)).toHaveLength(1);
+    expect(wrapper.find(RecentActivity)).toHaveLength(1);
+  });
 
-      expect(wrapper.find(ViewContentHeader)).toHaveLength(1);
-      expect(wrapper.find(OnboardingSteps)).toHaveLength(1);
-      expect(wrapper.find(OrganizationStats)).toHaveLength(1);
-      expect(wrapper.find(RecentActivity)).toHaveLength(1);
+  it('renders when onboarding complete', () => {
+    setMockValues({
+      dataLoading: false,
+      hasUsers: true,
+      hasOrgSources: true,
+      isOldAccount: true,
+      organization: {
+        name: 'foo',
+        defaultOrgName: 'bar',
+      },
     });
+    const wrapper = shallow(<Overview />);
 
-    it('renders when onboarding complete', () => {
-      setMockValues({
-        dataLoading: false,
-        hasUsers: true,
-        hasOrgSources: true,
-        isOldAccount: true,
-        organization: {
-          name: 'foo',
-          defaultOrgName: 'bar',
-        },
-      });
-      const wrapper = shallow(<Overview />);
-
-      expect(wrapper.find(OnboardingSteps)).toHaveLength(0);
-    });
+    expect(wrapper.find(OnboardingSteps)).toHaveLength(0);
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx
index 9242bd8b6fbddf..0049c5b732d3d0 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx
@@ -12,11 +12,8 @@ import { useActions, useValues } from 'kea';
 import { EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { Loading } from '../../../shared/loading';
-import { SendWorkplaceSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
 import { AppLogic } from '../../app_logic';
-import { ViewContentHeader } from '../../components/shared/view_content_header';
+import { WorkplaceSearchPageTemplate } from '../../components/layout';
 
 import { OnboardingSteps } from './onboarding_steps';
 import { OrganizationStats } from './organization_stats';
@@ -54,26 +51,31 @@ export const Overview: React.FC = () => {
     initializeOverview();
   }, [initializeOverview]);
 
-  if (dataLoading) {
-    return <Loading />;
-  }
-
   const hideOnboarding = hasUsers && hasOrgSources && isOldAccount && orgName !== defaultOrgName;
 
-  const headerTitle = hideOnboarding ? HEADER_TITLE : ONBOARDING_HEADER_TITLE;
-  const headerDescription = hideOnboarding ? HEADER_DESCRIPTION : ONBOARDING_HEADER_DESCRIPTION;
+  const headerTitle = dataLoading || hideOnboarding ? HEADER_TITLE : ONBOARDING_HEADER_TITLE;
+  const headerDescription =
+    dataLoading || hideOnboarding ? HEADER_DESCRIPTION : ONBOARDING_HEADER_DESCRIPTION;
 
   return (
-    <>
-      <SetPageChrome />
-      <SendTelemetry action="viewed" metric="overview" />
-
-      <ViewContentHeader title={headerTitle} description={headerDescription} />
-      {!hideOnboarding && <OnboardingSteps />}
-      <EuiSpacer size="xl" />
+    <WorkplaceSearchPageTemplate
+      pageChrome={[]}
+      pageHeader={{
+        pageTitle: headerTitle,
+        description: headerDescription,
+      }}
+      pageViewTelemetry="overview"
+      isLoading={dataLoading}
+    >
+      {!hideOnboarding && (
+        <>
+          <OnboardingSteps />
+          <EuiSpacer size="xl" />
+        </>
+      )}
       <OrganizationStats />
       <EuiSpacer size="xl" />
       <RecentActivity />
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.test.tsx
index c9720eb6c1c042..2871299df0cd02 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.test.tsx
@@ -14,11 +14,8 @@ import { shallow } from 'enzyme';
 
 import { EuiSwitch, EuiConfirmModal } from '@elastic/eui';
 
-import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-
-import { Loading } from '../../../shared/loading';
 import { UnsavedChangesPrompt } from '../../../shared/unsaved_changes_prompt';
-import { ViewContentHeader } from '../../components/shared/view_content_header';
+import { getPageHeaderActions } from '../../../test_helpers';
 
 import { Security } from './security';
 
@@ -59,9 +56,7 @@ describe('Security', () => {
     setMockValues({ ...mockValues, hasPlatinumLicense: false });
     const wrapper = shallow(<Security />);
 
-    expect(wrapper.find(SetPageChrome)).toHaveLength(1);
     expect(wrapper.find(UnsavedChangesPrompt)).toHaveLength(1);
-    expect(wrapper.find(ViewContentHeader)).toHaveLength(1);
     expect(wrapper.find(EuiSwitch).prop('disabled')).toEqual(true);
   });
 
@@ -71,13 +66,6 @@ describe('Security', () => {
     expect(wrapper.find(EuiSwitch).prop('disabled')).toEqual(false);
   });
 
-  it('returns Loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
-    const wrapper = shallow(<Security />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('handles switch click', () => {
     const wrapper = shallow(<Security />);
 
@@ -92,8 +80,8 @@ describe('Security', () => {
     setMockValues({ ...mockValues, unsavedChanges: true });
     const wrapper = shallow(<Security />);
 
-    const header = wrapper.find(ViewContentHeader).dive();
-    header.find('[data-test-subj="SaveSettingsButton"]').prop('onClick')!({} as any);
+    const headerActions = getPageHeaderActions(wrapper);
+    headerActions.find('[data-test-subj="SaveSettingsButton"]').prop('onClick')!({} as any);
     const modal = wrapper.find(EuiConfirmModal);
     modal.prop('onConfirm')!({} as any);
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.tsx
index b746344b3806bb..6cf1831dc07e7e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.tsx
@@ -22,13 +22,10 @@ import {
   EuiConfirmModal,
 } from '@elastic/eui';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { LicensingLogic } from '../../../shared/licensing';
-import { Loading } from '../../../shared/loading';
 import { UnsavedChangesPrompt } from '../../../shared/unsaved_changes_prompt';
+import { WorkplaceSearchPageTemplate } from '../../components/layout';
 import { LicenseCallout } from '../../components/shared/license_callout';
-import { ViewContentHeader } from '../../components/shared/view_content_header';
 import {
   SECURITY_UNSAVED_CHANGES_MESSAGE,
   RESET_BUTTON,
@@ -72,44 +69,24 @@ export const Security: React.FC = () => {
     initializeSourceRestrictions();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const savePrivateSources = () => {
     saveSourceRestrictions();
     hideConfirmModal();
   };
 
-  const headerActions = (
-    <EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="m">
-      <EuiFlexItem grow={false}>
-        <EuiButtonEmpty disabled={!unsavedChanges} onClick={resetState}>
-          {RESET_BUTTON}
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiButton
-          disabled={!hasPlatinumLicense || !unsavedChanges}
-          onClick={showConfirmModal}
-          fill
-          data-test-subj="SaveSettingsButton"
-        >
-          {SAVE_SETTINGS_BUTTON}
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-
-  const header = (
-    <>
-      <ViewContentHeader
-        title={PRIVATE_SOURCES}
-        alignItems="flexStart"
-        description={PRIVATE_SOURCES_DESCRIPTION}
-        action={headerActions}
-      />
-      <EuiSpacer />
-    </>
-  );
+  const headerActions = [
+    <EuiButtonEmpty disabled={!unsavedChanges || dataLoading} onClick={resetState}>
+      {RESET_BUTTON}
+    </EuiButtonEmpty>,
+    <EuiButton
+      disabled={!hasPlatinumLicense || !unsavedChanges || dataLoading}
+      onClick={showConfirmModal}
+      fill
+      data-test-subj="SaveSettingsButton"
+    >
+      {SAVE_SETTINGS_BUTTON}
+    </EuiButton>,
+  ];
 
   const allSourcesToggle = (
     <EuiPanel
@@ -180,20 +157,25 @@ export const Security: React.FC = () => {
   );
 
   return (
-    <>
-      <SetPageChrome trail={[NAV.SECURITY]} />
-      <FlashMessages />
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.SECURITY]}
+      pageHeader={{
+        pageTitle: PRIVATE_SOURCES,
+        description: PRIVATE_SOURCES_DESCRIPTION,
+        rightSideItems: headerActions,
+      }}
+      isLoading={dataLoading}
+    >
       <UnsavedChangesPrompt
         hasUnsavedChanges={unsavedChanges}
         messageText={SECURITY_UNSAVED_CHANGES_MESSAGE}
       />
-      {header}
       <EuiPanel color="subdued" hasBorder={false}>
         {allSourcesToggle}
         {!hasPlatinumLicense && platinumLicenseCallout}
         {sourceTables}
       </EuiPanel>
       {confirmModalVisible && confirmModal}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };