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)
elastic · Jun 15, 2021 · 4b1d526 · 4b1d526
1 parent 1675342
commit 4b1d526
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 59 deletions.
diff --git a/...ise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx b/...ise_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/...terprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx b/...terprise_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
@@ -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
@@ -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/...ugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_heading.tsx b/...ugins/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,15 +25,15 @@ import {
 } from './constants';
 
 interface Props {
-  productName: ProductName;
+  productName: string;
   onClick(): void;
 }
 
 // TODO: Replace EuiLink href with acutal docs link when available
 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
@@ -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
@@ -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/...se_search/public/applications/workplace_search/views/role_mappings/role_mappings.test.tsx b/...se_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/...erprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx b/...erprise_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>
   );
 };