From 9240f4bd07c57e5aed8baea155c836039d901a2e Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 16 Jun 2021 21:28:07 -0700
Subject: [PATCH] Convert Settings > Customize to new page template

---
 .../views/settings/components/customize.tsx   | 61 ++++++++++---------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/customize.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/customize.tsx
index 37f9e288f7f3df..c3d01a3410d707 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/customize.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/customize.tsx
@@ -11,9 +11,10 @@ import { useActions, useValues } from 'kea';
 
 import { EuiButton, EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
+import { WorkplaceSearchPageTemplate } from '../../../components/layout';
 import { ContentSection } from '../../../components/shared/content_section';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import {
+  NAV,
   CUSTOMIZE_HEADER_TITLE,
   CUSTOMIZE_HEADER_DESCRIPTION,
   CUSTOMIZE_NAME_LABEL,
@@ -31,32 +32,36 @@ export const Customize: React.FC = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <ViewContentHeader
-        title={CUSTOMIZE_HEADER_TITLE}
-        description={CUSTOMIZE_HEADER_DESCRIPTION}
-      />
-      <ContentSection>
-        <EuiFormRow label={CUSTOMIZE_NAME_LABEL} fullWidth isInvalid={false}>
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <EuiFieldText
-                isInvalid={false}
-                required
-                value={orgNameInputValue}
-                data-test-subj="OrgNameInput"
-                onChange={(e) => onOrgNameInputChange(e.target.value)}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem />
-          </EuiFlexGroup>
-        </EuiFormRow>
-        <EuiFormRow>
-          <EuiButton color="primary" data-test-subj="SaveOrgNameButton" type="submit">
-            {CUSTOMIZE_NAME_BUTTON}
-          </EuiButton>
-        </EuiFormRow>
-      </ContentSection>
-    </form>
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.SETTINGS]}
+      pageHeader={{
+        pageTitle: CUSTOMIZE_HEADER_TITLE,
+        description: CUSTOMIZE_HEADER_DESCRIPTION,
+      }}
+    >
+      <form onSubmit={handleSubmit}>
+        <ContentSection>
+          <EuiFormRow label={CUSTOMIZE_NAME_LABEL} fullWidth isInvalid={false}>
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiFieldText
+                  isInvalid={false}
+                  required
+                  value={orgNameInputValue}
+                  data-test-subj="OrgNameInput"
+                  onChange={(e) => onOrgNameInputChange(e.target.value)}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem />
+            </EuiFlexGroup>
+          </EuiFormRow>
+          <EuiFormRow>
+            <EuiButton color="primary" data-test-subj="SaveOrgNameButton" type="submit">
+              {CUSTOMIZE_NAME_BUTTON}
+            </EuiButton>
+          </EuiFormRow>
+        </ContentSection>
+      </form>
+    </WorkplaceSearchPageTemplate>
   );
 };