[Workplace Search] Convert Settings pages to new page template (#102445)

* Convert Settings > Customize to new page template * Convert Settings > oAuth application to new page template + DRY form wrappers, update test * Convert Settings > Connectors to new page template * Convert source config view to new page template * Convert Settings subnav to EuiSideNav format + update main WS nav * Update routers
elastic · Jun 17, 2021 · 0e14cef · 0e14cef
1 parent 1627240
commit 0e14cef
Show file tree

Hide file tree

Showing 14 changed files with 216 additions and 207 deletions.
diff --git a/...ins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx b/...ins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
@@ -9,6 +9,9 @@ jest.mock('../../../shared/layout', () => ({
   ...jest.requireActual('../../../shared/layout'),
   generateNavLink: jest.fn(({ to }) => ({ href: to })),
 }));
+jest.mock('../../views/settings/components/settings_sub_nav', () => ({
+  useSettingsSubNav: () => [],
+}));
 
 import React from 'react';
 

diff --git a/.../plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx b/.../plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
@@ -19,6 +19,7 @@ import {
   GROUPS_PATH,
   ORG_SETTINGS_PATH,
 } from '../../routes';
+import { useSettingsSubNav } from '../../views/settings/components/settings_sub_nav';
 
 export const useWorkplaceSearchNav = () => {
   const navItems: Array<EuiSideNavItemType<unknown>> = [
@@ -53,7 +54,7 @@ export const useWorkplaceSearchNav = () => {
       id: 'settings',
       name: NAV.SETTINGS,
       ...generateNavLink({ to: ORG_SETTINGS_PATH }),
-      items: [], // TODO: Settings subnav
+      items: useSettingsSubNav(),
     },
   ];
 

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
@@ -46,7 +46,6 @@ import { Overview } from './views/overview';
 import { RoleMappings } from './views/role_mappings';
 import { Security } from './views/security';
 import { SettingsRouter } from './views/settings';
-import { SettingsSubNav } from './views/settings/components/settings_sub_nav';
 import { SetupGuide } from './views/setup_guide';
 
 export const WorkplaceSearch: React.FC<InitialAppData> = (props) => {
@@ -141,13 +140,7 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
         <Security />
       </Route>
       <Route path={ORG_SETTINGS_PATH}>
-        <Layout
-          navigation={<WorkplaceSearchNav settingsSubNav={<SettingsSubNav />} />}
-          restrictWidth
-          readOnlyMode={readOnlyMode}
-        >
-          <SettingsRouter />
-        </Layout>
+        <SettingsRouter />
       </Route>
       <Route>
         <Layout navigation={<WorkplaceSearchNav />} restrictWidth readOnlyMode={readOnlyMode}>

diff --git a/...search/public/applications/workplace_search/views/settings/components/connectors.test.tsx b/...search/public/applications/workplace_search/views/settings/components/connectors.test.tsx
@@ -14,7 +14,6 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../../shared/loading';
 import { LicenseCallout } from '../../../components/shared/license_callout';
 
 import { Connectors } from './connectors';
@@ -33,16 +32,6 @@ describe('Connectors', () => {
     expect(wrapper.find('[data-test-subj="ConnectorRow"]')).toHaveLength(configuredSources.length);
   });
 
-  it('returns loading when loading', () => {
-    setMockValues({
-      connectors: configuredSources,
-      dataLoading: true,
-    });
-    const wrapper = shallow(<Connectors />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders LicenseCallout for restricted items', () => {
     const wrapper = shallow(<Connectors />);
 

diff --git a/...rise_search/public/applications/workplace_search/views/settings/components/connectors.tsx b/...rise_search/public/applications/workplace_search/views/settings/components/connectors.tsx
@@ -19,12 +19,12 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { Loading } from '../../../../shared/loading';
 import { EuiButtonEmptyTo } from '../../../../shared/react_router_helpers';
+import { WorkplaceSearchPageTemplate } from '../../../components/layout';
 import { LicenseCallout } from '../../../components/shared/license_callout';
 import { SourceIcon } from '../../../components/shared/source_icon';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import {
+  NAV,
   CONFIGURE_BUTTON,
   CONNECTORS_HEADER_TITLE,
   CONNECTORS_HEADER_DESCRIPTION,
@@ -46,8 +46,6 @@ export const Connectors: React.FC = () => {
     initializeConnectors();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const availableConnectors = reject(
     connectors,
     ({ serviceType }) => serviceType === CUSTOM_SERVICE_TYPE
@@ -125,12 +123,15 @@ export const Connectors: React.FC = () => {
   );
 
   return (
-    <>
-      <ViewContentHeader
-        title={CONNECTORS_HEADER_TITLE}
-        description={CONNECTORS_HEADER_DESCRIPTION}
-      />
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.SETTINGS, NAV.SETTINGS_SOURCE_PRIORITIZATION]}
+      pageHeader={{
+        pageTitle: CONNECTORS_HEADER_TITLE,
+        description: CONNECTORS_HEADER_DESCRIPTION,
+      }}
+      isLoading={dataLoading}
+    >
       {connectorsList}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };
diff --git a/...prise_search/public/applications/workplace_search/views/settings/components/customize.tsx b/...prise_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>
   );
 };
diff --git a/...public/applications/workplace_search/views/settings/components/oauth_application.test.tsx b/...public/applications/workplace_search/views/settings/components/oauth_application.test.tsx
@@ -16,8 +16,9 @@ import { shallow } from 'enzyme';
 
 import { EuiModal, EuiForm } from '@elastic/eui';
 
+import { getPageDescription } from '../../../../test_helpers';
+
 import { CredentialItem } from '../../../components/shared/credential_item';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import { OAUTH_DESCRIPTION, REDIRECT_INSECURE_ERROR_TEXT } from '../../../constants';
 
 import { OauthApplication } from './oauth_application';
@@ -77,7 +78,7 @@ describe('OauthApplication', () => {
   it('handles form submission', () => {
     const wrapper = shallow(<OauthApplication />);
     const preventDefault = jest.fn();
-    wrapper.find('form').simulate('submit', { preventDefault });
+    wrapper.find(EuiForm).simulate('submit', { preventDefault });
 
     expect(updateOauthApplication).toHaveBeenCalled();
   });
@@ -127,7 +128,7 @@ describe('OauthApplication', () => {
     });
     const wrapper = shallow(<OauthApplication />);
 
-    expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(OAUTH_DESCRIPTION);
+    expect(getPageDescription(wrapper)).toEqual(OAUTH_DESCRIPTION);
     expect(wrapper.find('[data-test-subj="RedirectURIsRow"]').prop('error')).toEqual(
       REDIRECT_INSECURE_ERROR_TEXT
     );