From 1616f078215f6efbc32b7d09d3adaa00abec31e1 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 16 Jun 2021 20:56:13 -0700
Subject: [PATCH] Convert Security page to new page template

+ misc ux enhancement disabling header actions while data is still loading
---
 .../applications/workplace_search/index.tsx   |  4 +-
 .../views/security/security.test.tsx          | 18 +----
 .../views/security/security.tsx               | 66 +++++++------------
 3 files changed, 28 insertions(+), 60 deletions(-)

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 5c2c5f7b94a6c6..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
@@ -138,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/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>
   );
 };