Adds doc titles to security management sections (#91013)

Author: legrego

src/plugins/advanced_settings/public/management_app/mount_management_section.tsx

@@ -67,6 +67,8 @@ export async function mountManagementSection(
     chrome.setBadge(readOnlyBadge);
   }
 
+  chrome.docTitle.change(title);
+
   ReactDOM.render(
     <I18nProvider>
       <Router history={params.history}>
@@ -90,6 +92,7 @@ export async function mountManagementSection(
     params.element
   );
   return () => {
+    chrome.docTitle.reset();
     ReactDOM.unmountComponentAtNode(params.element);
   };
 }

src/plugins/saved_objects_management/public/management_section/mount_section.tsx

@@ -103,6 +103,7 @@ export const mountManagementSection = async ({
   );
 
   return () => {
+    coreStart.chrome.docTitle.reset();
     ReactDOM.unmountComponentAtNode(element);
   };
 };

x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx

@@ -21,6 +21,7 @@ interface MountSectionParams {
   assignmentService: ITagAssignmentService;
   core: CoreSetup<{}, SavedObjectTaggingPluginStart>;
   mountParams: ManagementAppMountParams;
+  title: string;
 }
 
 const RedirectToHomeIfUnauthorized: FC<{
@@ -40,11 +41,13 @@ export const mountSection = async ({
   assignmentService,
   core,
   mountParams,
+  title,
 }: MountSectionParams) => {
   const [coreStart] = await core.getStartServices();
   const { element, setBreadcrumbs } = mountParams;
   const capabilities = getTagsCapabilities(coreStart.application.capabilities);
   const assignableTypes = await assignmentService.getAssignableTypes();
+  coreStart.chrome.docTitle.change(title);
 
   ReactDOM.render(
     <I18nProvider>
@@ -64,6 +67,7 @@ export const mountSection = async ({
   );
 
   return () => {
+    coreStart.chrome.docTitle.reset();
     ReactDOM.unmountComponentAtNode(element);
   };
 };

x-pack/plugins/saved_objects_tagging/public/plugin.ts

@@ -39,11 +39,12 @@ export class SavedObjectTaggingPlugin
     { management, savedObjectsTaggingOss }: SetupDeps
   ) {
     const kibanaSection = management.sections.section.kibana;
+    const title = i18n.translate('xpack.savedObjectsTagging.management.sectionLabel', {
+      defaultMessage: 'Tags',
+    });
     kibanaSection.registerApp({
       id: tagManagementSectionId,
-      title: i18n.translate('xpack.savedObjectsTagging.management.sectionLabel', {
-        defaultMessage: 'Tags',
-      }),
+      title,
       order: 1.5,
       mount: async (mountParams) => {
         const { mountSection } = await import('./management');
@@ -53,6 +54,7 @@ export class SavedObjectTaggingPlugin
           assignmentService: this.assignmentService!,
           core,
           mountParams,
+          title,
         });
       },
     });

x-pack/plugins/security/public/management/api_keys/api_keys_management_app.test.tsx

@@ -28,11 +28,15 @@ describe('apiKeysManagementApp', () => {
 
   it('mount() works for the `grid` page', async () => {
     const { getStartServices } = coreMock.createSetup();
+
+    const startServices = await getStartServices();
+    const docTitle = startServices[0].chrome.docTitle;
+
     const container = document.createElement('div');
 
     const setBreadcrumbs = jest.fn();
     const unmount = await apiKeysManagementApp
-      .create({ getStartServices: getStartServices as any })
+      .create({ getStartServices: () => Promise.resolve(startServices) as any })
       .mount({
         basePath: '/some-base-path',
         element: container,
@@ -42,13 +46,16 @@ describe('apiKeysManagementApp', () => {
 
     expect(setBreadcrumbs).toHaveBeenCalledTimes(1);
     expect(setBreadcrumbs).toHaveBeenCalledWith([{ href: '/', text: 'API Keys' }]);
+    expect(docTitle.change).toHaveBeenCalledWith('API Keys');
+    expect(docTitle.reset).not.toHaveBeenCalled();
     expect(container).toMatchInlineSnapshot(`
       <div>
         Page: {"notifications":{"toasts":{}},"apiKeysAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}}}
       </div>
     `);
 
     unmount();
+    expect(docTitle.reset).toHaveBeenCalledTimes(1);
 
     expect(container).toMatchInlineSnapshot(`<div />`);
   });

x-pack/plugins/security/public/management/api_keys/api_keys_management_app.tsx

@@ -20,18 +20,17 @@ interface CreateParams {
 export const apiKeysManagementApp = Object.freeze({
   id: 'api_keys',
   create({ getStartServices }: CreateParams) {
+    const title = i18n.translate('xpack.security.management.apiKeysTitle', {
+      defaultMessage: 'API Keys',
+    });
     return {
       id: this.id,
       order: 30,
-      title: i18n.translate('xpack.security.management.apiKeysTitle', {
-        defaultMessage: 'API Keys',
-      }),
+      title,
       async mount({ element, setBreadcrumbs }) {
         setBreadcrumbs([
           {
-            text: i18n.translate('xpack.security.apiKeys.breadcrumb', {
-              defaultMessage: 'API Keys',
-            }),
+            text: title,
             href: `/`,
           },
         ]);
@@ -42,6 +41,8 @@ export const apiKeysManagementApp = Object.freeze({
           import('./api_keys_api_client'),
         ]);
 
+        core.chrome.docTitle.change(title);
+
         render(
           <KibanaContextProvider services={core}>
             <core.i18n.Context>
@@ -55,6 +56,7 @@ export const apiKeysManagementApp = Object.freeze({
         );
 
         return () => {
+          core.chrome.docTitle.reset();
           unmountComponentAtNode(element);
         };
       },

x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.test.tsx

@@ -30,16 +30,18 @@ async function mountApp(basePath: string, pathname: string) {
   const container = document.createElement('div');
   const setBreadcrumbs = jest.fn();
 
+  const startServices = await coreMock.createSetup().getStartServices();
+
   const unmount = await roleMappingsManagementApp
-    .create({ getStartServices: coreMock.createSetup().getStartServices as any })
+    .create({ getStartServices: () => Promise.resolve(startServices) as any })
     .mount({
       basePath,
       element: container,
       setBreadcrumbs,
       history: scopedHistoryMock.create({ pathname }),
     });
 
-  return { unmount, container, setBreadcrumbs };
+  return { unmount, container, setBreadcrumbs, docTitle: startServices[0].chrome.docTitle };
 }
 
 describe('roleMappingsManagementApp', () => {
@@ -59,10 +61,12 @@ describe('roleMappingsManagementApp', () => {
   });
 
   it('mount() works for the `grid` page', async () => {
-    const { setBreadcrumbs, container, unmount } = await mountApp('/', '/');
+    const { setBreadcrumbs, container, unmount, docTitle } = await mountApp('/', '/');
 
     expect(setBreadcrumbs).toHaveBeenCalledTimes(1);
     expect(setBreadcrumbs).toHaveBeenCalledWith([{ href: `/`, text: 'Role Mappings' }]);
+    expect(docTitle.change).toHaveBeenCalledWith('Role Mappings');
+    expect(docTitle.reset).not.toHaveBeenCalled();
     expect(container).toMatchInlineSnapshot(`
       <div>
         Role Mappings Page: {"notifications":{"toasts":{}},"rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"roleMappingsAPI":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"docLinks":{},"history":{"action":"PUSH","length":1,"location":{"pathname":"/","search":"","hash":""}}}
@@ -71,17 +75,21 @@ describe('roleMappingsManagementApp', () => {
 
     unmount();
 
+    expect(docTitle.reset).toHaveBeenCalledTimes(1);
+
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
 
   it('mount() works for the `create role mapping` page', async () => {
-    const { setBreadcrumbs, container, unmount } = await mountApp('/', '/edit');
+    const { setBreadcrumbs, container, unmount, docTitle } = await mountApp('/', '/edit');
 
     expect(setBreadcrumbs).toHaveBeenCalledTimes(1);
     expect(setBreadcrumbs).toHaveBeenCalledWith([
       { href: `/`, text: 'Role Mappings' },
       { text: 'Create' },
     ]);
+    expect(docTitle.change).toHaveBeenCalledWith('Role Mappings');
+    expect(docTitle.reset).not.toHaveBeenCalled();
     expect(container).toMatchInlineSnapshot(`
       <div>
         Role Mapping Edit Page: {"roleMappingsAPI":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"notifications":{"toasts":{}},"docLinks":{},"history":{"action":"PUSH","length":1,"location":{"pathname":"/edit","search":"","hash":""}}}
@@ -90,19 +98,26 @@ describe('roleMappingsManagementApp', () => {
 
     unmount();
 
+    expect(docTitle.reset).toHaveBeenCalledTimes(1);
+
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
 
   it('mount() works for the `edit role mapping` page', async () => {
     const roleMappingName = 'role@mapping';
 
-    const { setBreadcrumbs, container, unmount } = await mountApp('/', `/edit/${roleMappingName}`);
+    const { setBreadcrumbs, container, unmount, docTitle } = await mountApp(
+      '/',
+      `/edit/${roleMappingName}`
+    );
 
     expect(setBreadcrumbs).toHaveBeenCalledTimes(1);
     expect(setBreadcrumbs).toHaveBeenCalledWith([
       { href: `/`, text: 'Role Mappings' },
       { href: `/edit/${encodeURIComponent(roleMappingName)}`, text: roleMappingName },
     ]);
+    expect(docTitle.change).toHaveBeenCalledWith('Role Mappings');
+    expect(docTitle.reset).not.toHaveBeenCalled();
     expect(container).toMatchInlineSnapshot(`
       <div>
         Role Mapping Edit Page: {"name":"role@mapping","roleMappingsAPI":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"notifications":{"toasts":{}},"docLinks":{},"history":{"action":"PUSH","length":1,"location":{"pathname":"/edit/role@mapping","search":"","hash":""}}}
@@ -111,6 +126,8 @@ describe('roleMappingsManagementApp', () => {
 
     unmount();
 
+    expect(docTitle.reset).toHaveBeenCalledTimes(1);
+
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
 

x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.tsx

@@ -22,23 +22,24 @@ interface CreateParams {
 export const roleMappingsManagementApp = Object.freeze({
   id: 'role_mappings',
   create({ getStartServices }: CreateParams) {
+    const title = i18n.translate('xpack.security.management.roleMappingsTitle', {
+      defaultMessage: 'Role Mappings',
+    });
     return {
       id: this.id,
       order: 40,
-      title: i18n.translate('xpack.security.management.roleMappingsTitle', {
-        defaultMessage: 'Role Mappings',
-      }),
+      title,
       async mount({ element, setBreadcrumbs, history }) {
         const [coreStart] = await getStartServices();
         const roleMappingsBreadcrumbs = [
           {
-            text: i18n.translate('xpack.security.roleMapping.breadcrumb', {
-              defaultMessage: 'Role Mappings',
-            }),
+            text: title,
             href: `/`,
           },
         ];
 
+        coreStart.chrome.docTitle.change(title);
+
         const [
           [core],
           { RoleMappingsGridPage },
@@ -117,6 +118,7 @@ export const roleMappingsManagementApp = Object.freeze({
         );
 
         return () => {
+          coreStart.chrome.docTitle.reset();
           unmountComponentAtNode(element);
         };
       },