From 4b1d526857bcc0390b75e2383dfcbf67c363a2fd Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 15 Jun 2021 10:36:44 -0700
Subject: [PATCH] Initial example: Convert RoleMappings views to new page
 template

Minor refactors:
+ remove unnecessary type union
+ fix un-i18n'ed product names
+ add full stop to documentation sentence
+ add semantic HTML tags around various page landmarks (header, section)
---
 .../role_mappings/role_mappings.test.tsx      |  8 ------
 .../role_mappings/role_mappings.tsx           | 26 ++++++++++---------
 .../public/applications/app_search/index.tsx  | 10 +++----
 .../shared/role_mapping/constants.ts          |  6 ++---
 .../role_mapping/role_mappings_heading.tsx    |  8 +++---
 .../public/applications/shared/types.ts       |  2 --
 .../applications/workplace_search/index.tsx   |  4 +--
 .../role_mappings/role_mappings.test.tsx      |  8 ------
 .../views/role_mappings/role_mappings.tsx     | 26 ++++++++++---------
 9 files changed, 39 insertions(+), 59 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx
index d7ce8053c71f02..308022ccb2e5a7 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../shared/loading';
 import { RoleMappingsTable, RoleMappingsHeading } from '../../../shared/role_mapping';
 import { wsRoleMapping } from '../../../shared/role_mapping/__mocks__/roles';
 
@@ -44,13 +43,6 @@ describe('RoleMappings', () => {
     expect(wrapper.find(RoleMappingsTable)).toHaveLength(1);
   });
 
-  it('returns Loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
-    const wrapper = shallow(<RoleMappings />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders RoleMapping flyout', () => {
     setMockValues({ ...mockValues, roleMappingFlyoutOpen: true });
     const wrapper = shallow(<RoleMappings />);
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx
index 78d0a5cbc8638e..db0e6e6dead111 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx
@@ -9,11 +9,10 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { Loading } from '../../../shared/loading';
+import { APP_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { RoleMappingsTable, RoleMappingsHeading } from '../../../shared/role_mapping';
 import { ROLE_MAPPINGS_TITLE } from '../../../shared/role_mapping/constants';
+import { AppSearchPageTemplate } from '../layout';
 
 import { ROLE_MAPPINGS_ENGINE_ACCESS_HEADING } from './constants';
 import { RoleMapping } from './role_mapping';
@@ -38,11 +37,12 @@ export const RoleMappings: React.FC = () => {
     return resetState;
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const roleMappingsSection = (
-    <>
-      <RoleMappingsHeading productName="App Search" onClick={() => initializeRoleMapping()} />
+    <section>
+      <RoleMappingsHeading
+        productName={APP_SEARCH_PLUGIN.NAME}
+        onClick={() => initializeRoleMapping()}
+      />
       <RoleMappingsTable
         roleMappings={roleMappings}
         accessItemKey="engines"
@@ -51,15 +51,17 @@ export const RoleMappings: React.FC = () => {
         shouldShowAuthProvider={multipleAuthProvidersConfig}
         handleDeleteMapping={handleDeleteMapping}
       />
-    </>
+    </section>
   );
 
   return (
-    <>
-      <SetPageChrome trail={[ROLE_MAPPINGS_TITLE]} />
+    <AppSearchPageTemplate
+      pageChrome={[ROLE_MAPPINGS_TITLE]}
+      pageHeader={{ pageTitle: ROLE_MAPPINGS_TITLE }}
+      isLoading={dataLoading}
+    >
       {roleMappingFlyoutOpen && <RoleMapping />}
-      <FlashMessages />
       {roleMappingsSection}
-    </>
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
index 20f65ba2c346ca..caf0f805e8ca7e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
@@ -92,6 +92,11 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
           <Library />
         </Route>
       )}
+      {canViewRoleMappings && (
+        <Route path={ROLE_MAPPINGS_PATH}>
+          <RoleMappings />
+        </Route>
+      )}
       <Route>
         <Layout navigation={<AppSearchNav />} readOnlyMode={readOnlyMode}>
           <Switch>
@@ -110,11 +115,6 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
             <Route exact path={CREDENTIALS_PATH}>
               <Credentials />
             </Route>
-            {canViewRoleMappings && (
-              <Route path={ROLE_MAPPINGS_PATH}>
-                <RoleMappings />
-              </Route>
-            )}
             {canManageEngines && (
               <Route exact path={ENGINE_CREATION_PATH}>
                 <EngineCreation />
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts
index 47d481630510e2..e5312c6c0343f7 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts
@@ -7,8 +7,6 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { ProductName } from '../types';
-
 export const ANY_AUTH_PROVIDER = '*';
 
 export const ANY_AUTH_PROVIDER_OPTION_LABEL = i18n.translate(
@@ -184,7 +182,7 @@ export const ROLE_MAPPINGS_HEADING_TITLE = i18n.translate(
   { defaultMessage: 'Role mappings' }
 );
 
-export const ROLE_MAPPINGS_HEADING_DESCRIPTION = (productName: ProductName) =>
+export const ROLE_MAPPINGS_HEADING_DESCRIPTION = (productName: string) =>
   i18n.translate('xpack.enterpriseSearch.roleMapping.roleMappingsHeadingDescription', {
     defaultMessage:
       'Role mappings provide an interface to associate native or SAML-governed role attributes with {productName} permissions.',
@@ -193,7 +191,7 @@ export const ROLE_MAPPINGS_HEADING_DESCRIPTION = (productName: ProductName) =>
 
 export const ROLE_MAPPINGS_HEADING_DOCS_LINK = i18n.translate(
   'xpack.enterpriseSearch.roleMapping.roleMappingsHeadingDocsLink',
-  { defaultMessage: 'Learn more about role mappings' }
+  { defaultMessage: 'Learn more about role mappings.' }
 );
 
 export const ROLE_MAPPINGS_HEADING_BUTTON = i18n.translate(
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_heading.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_heading.tsx
index b2143c6ff44028..d36bdfda06d31c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_heading.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_heading.tsx
@@ -17,8 +17,6 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
-import { ProductName } from '../types';
-
 import {
   ROLE_MAPPINGS_HEADING_TITLE,
   ROLE_MAPPINGS_HEADING_DESCRIPTION,
@@ -27,7 +25,7 @@ import {
 } from './constants';
 
 interface Props {
-  productName: ProductName;
+  productName: string;
   onClick(): void;
 }
 
@@ -35,7 +33,7 @@ interface Props {
 const ROLE_MAPPINGS_DOCS_HREF = '#TODO';
 
 export const RoleMappingsHeading: React.FC<Props> = ({ productName, onClick }) => (
-  <>
+  <header>
     <EuiFlexGroup justifyContent="spaceBetween">
       <EuiFlexItem>
         <EuiTitle>
@@ -58,5 +56,5 @@ export const RoleMappingsHeading: React.FC<Props> = ({ productName, onClick }) =
       </EuiFlexItem>
     </EuiFlexGroup>
     <EuiSpacer />
-  </>
+  </header>
 );
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/types.ts b/x-pack/plugins/enterprise_search/public/applications/shared/types.ts
index f450ca556ebe25..2cdadc1c6b0d30 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/types.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/types.ts
@@ -35,5 +35,3 @@ export interface RoleMapping {
     content: string;
   };
 }
-
-export type ProductName = 'App Search' | 'Workplace Search';
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 7e911b31c516b7..dd263c3bd69f5d 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
@@ -141,9 +141,7 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
         </Layout>
       </Route>
       <Route path={ROLE_MAPPINGS_PATH}>
-        <Layout navigation={<WorkplaceSearchNav />} restrictWidth readOnlyMode={readOnlyMode}>
-          <RoleMappings />
-        </Layout>
+        <RoleMappings />
       </Route>
       <Route path={SECURITY_PATH}>
         <Layout navigation={<WorkplaceSearchNav />} restrictWidth readOnlyMode={readOnlyMode}>
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.test.tsx
index d7ce8053c71f02..308022ccb2e5a7 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.test.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../shared/loading';
 import { RoleMappingsTable, RoleMappingsHeading } from '../../../shared/role_mapping';
 import { wsRoleMapping } from '../../../shared/role_mapping/__mocks__/roles';
 
@@ -44,13 +43,6 @@ describe('RoleMappings', () => {
     expect(wrapper.find(RoleMappingsTable)).toHaveLength(1);
   });
 
-  it('returns Loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
-    const wrapper = shallow(<RoleMappings />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders RoleMapping flyout', () => {
     setMockValues({ ...mockValues, roleMappingFlyoutOpen: true });
     const wrapper = shallow(<RoleMappings />);
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx
index 46c426c3dad2a5..b153d012241939 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx
@@ -9,11 +9,10 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { Loading } from '../../../shared/loading';
+import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { RoleMappingsTable, RoleMappingsHeading } from '../../../shared/role_mapping';
 import { ROLE_MAPPINGS_TITLE } from '../../../shared/role_mapping/constants';
+import { WorkplaceSearchPageTemplate } from '../../components/layout';
 
 import { ROLE_MAPPINGS_TABLE_HEADER } from './constants';
 
@@ -36,11 +35,12 @@ export const RoleMappings: React.FC = () => {
     initializeRoleMappings();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const roleMappingsSection = (
-    <>
-      <RoleMappingsHeading productName="Workplace Search" onClick={() => initializeRoleMapping()} />
+    <section>
+      <RoleMappingsHeading
+        productName={WORKPLACE_SEARCH_PLUGIN.NAME}
+        onClick={() => initializeRoleMapping()}
+      />
       <RoleMappingsTable
         roleMappings={roleMappings}
         accessItemKey="groups"
@@ -49,15 +49,17 @@ export const RoleMappings: React.FC = () => {
         initializeRoleMapping={initializeRoleMapping}
         handleDeleteMapping={handleDeleteMapping}
       />
-    </>
+    </section>
   );
 
   return (
-    <>
-      <SetPageChrome trail={[ROLE_MAPPINGS_TITLE]} />
+    <WorkplaceSearchPageTemplate
+      pageChrome={[ROLE_MAPPINGS_TITLE]}
+      pageHeader={{ pageTitle: ROLE_MAPPINGS_TITLE }}
+      isLoading={dataLoading}
+    >
       {roleMappingFlyoutOpen && <RoleMapping />}
-      <FlashMessages />
       {roleMappingsSection}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };