Fix missing management section titles (#117306)

* Fix missing management section titles * remove unused i18n keys
elastic · Nov 4, 2021 · 7629f06 · 7629f06
1 parent e3f2322
commit 7629f06
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 41 deletions.
diff --git a/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx b/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);
   };
 }
diff --git a/src/plugins/saved_objects_management/public/management_section/mount_section.tsx b/src/plugins/saved_objects_management/public/management_section/mount_section.tsx
@@ -99,6 +99,7 @@ export const mountManagementSection = async ({
   );
 
   return () => {
+    coreStart.chrome.docTitle.reset();
     ReactDOM.unmountComponentAtNode(element);
   };
 };
diff --git a/x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx b/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,12 +41,15 @@ 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>
       <RedirectToHomeIfUnauthorized applications={coreStart.application}>
@@ -64,6 +68,7 @@ export const mountSection = async ({
   );
 
   return () => {
+    coreStart.chrome.docTitle.reset();
     ReactDOM.unmountComponentAtNode(element);
   };
 };
diff --git a/x-pack/plugins/saved_objects_tagging/public/plugin.ts b/x-pack/plugins/saved_objects_tagging/public/plugin.ts
@@ -40,11 +40,13 @@ 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');
@@ -54,6 +56,7 @@ export class SavedObjectTaggingPlugin
           assignmentService: this.assignmentService!,
           core,
           mountParams,
+          title,
         });
       },
     });

diff --git a/...ck/plugins/security/public/management/role_mappings/role_mappings_management_app.test.tsx b/...ck/plugins/security/public/management/role_mappings/role_mappings_management_app.test.tsx
@@ -31,16 +31,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', () => {
@@ -60,10 +62,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":""}}}
@@ -72,17 +76,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":""}}}
@@ -91,19 +99,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":""}}}
@@ -112,6 +127,8 @@ describe('roleMappingsManagementApp', () => {
 
     unmount();
 
+    expect(docTitle.reset).toHaveBeenCalledTimes(1);
+
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
 

diff --git a/x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.tsx b/x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.tsx
@@ -24,23 +24,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 },
@@ -119,6 +120,7 @@ export const roleMappingsManagementApp = Object.freeze({
         );
 
         return () => {
+          coreStart.chrome.docTitle.reset();
           unmountComponentAtNode(element);
         };
       },

diff --git a/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx b/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx
@@ -27,14 +27,15 @@ async function mountApp(basePath: string, pathname: string) {
   const setBreadcrumbs = jest.fn();
 
   const featuresStart = featuresPluginMock.createStart();
+  const coreStart = coreMock.createStart();
 
   const unmount = await rolesManagementApp
     .create({
       license: licenseMock.create(),
       fatalErrors,
       getStartServices: jest
         .fn()
-        .mockResolvedValue([coreMock.createStart(), { data: {}, features: featuresStart }]),
+        .mockResolvedValue([coreStart, { data: {}, features: featuresStart }]),
     })
     .mount({
       basePath,
@@ -43,7 +44,7 @@ async function mountApp(basePath: string, pathname: string) {
       history: scopedHistoryMock.create({ pathname }),
     });
 
-  return { unmount, container, setBreadcrumbs };
+  return { unmount, container, setBreadcrumbs, docTitle: coreStart.chrome.docTitle };
 }
 
 describe('rolesManagementApp', () => {
@@ -67,10 +68,12 @@ describe('rolesManagementApp', () => {
   });
 
   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: 'Roles' }]);
+    expect(docTitle.change).toHaveBeenCalledWith('Roles');
+    expect(docTitle.reset).not.toHaveBeenCalled();
     expect(container).toMatchInlineSnapshot(`
       <div>
         Roles Page: {"notifications":{"toasts":{}},"rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/","search":"","hash":""}}}
@@ -79,14 +82,18 @@ describe('rolesManagementApp', () => {
 
     unmount();
 
+    expect(docTitle.reset).toHaveBeenCalledTimes(1);
+
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
 
   it('mount() works for the `create role` 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: 'Roles' }, { text: 'Create' }]);
+    expect(docTitle.change).toHaveBeenCalledWith('Roles');
+    expect(docTitle.reset).not.toHaveBeenCalled();
     expect(container).toMatchInlineSnapshot(`
       <div>
         Role Edit Page: {"action":"edit","rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"userAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"indicesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"fieldCache":{}},"privilegesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"notifications":{"toasts":{}},"fatalErrors":{},"license":{"features$":{"_isScalar":false}},"docLinks":{},"uiCapabilities":{"catalogue":{},"management":{},"navLinks":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/edit","search":"","hash":""}}}
@@ -95,19 +102,26 @@ describe('rolesManagementApp', () => {
 
     unmount();
 
+    expect(docTitle.reset).toHaveBeenCalledTimes(1);
+
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
 
   it('mount() works for the `edit role` page', async () => {
     const roleName = 'role@name';
 
-    const { setBreadcrumbs, container, unmount } = await mountApp('/', `/edit/${roleName}`);
+    const { setBreadcrumbs, container, unmount, docTitle } = await mountApp(
+      '/',
+      `/edit/${roleName}`
+    );
 
     expect(setBreadcrumbs).toHaveBeenCalledTimes(1);
     expect(setBreadcrumbs).toHaveBeenCalledWith([
       { href: `/`, text: 'Roles' },
       { href: `/edit/${encodeURIComponent(roleName)}`, text: roleName },
     ]);
+    expect(docTitle.change).toHaveBeenCalledWith('Roles');
+    expect(docTitle.reset).not.toHaveBeenCalled();
     expect(container).toMatchInlineSnapshot(`
       <div>
         Role Edit Page: {"action":"edit","roleName":"role@name","rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"userAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"indicesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"fieldCache":{}},"privilegesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"notifications":{"toasts":{}},"fatalErrors":{},"license":{"features$":{"_isScalar":false}},"docLinks":{},"uiCapabilities":{"catalogue":{},"management":{},"navLinks":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/edit/role@name","search":"","hash":""}}}
@@ -116,16 +130,23 @@ describe('rolesManagementApp', () => {
 
     unmount();
 
+    expect(docTitle.reset).toHaveBeenCalledTimes(1);
+
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
 
   it('mount() works for the `clone role` page', async () => {
     const roleName = 'someRoleName';
 
-    const { setBreadcrumbs, container, unmount } = await mountApp('/', `/clone/${roleName}`);
+    const { setBreadcrumbs, container, unmount, docTitle } = await mountApp(
+      '/',
+      `/clone/${roleName}`
+    );
 
     expect(setBreadcrumbs).toHaveBeenCalledTimes(1);
     expect(setBreadcrumbs).toHaveBeenCalledWith([{ href: `/`, text: 'Roles' }, { text: 'Create' }]);
+    expect(docTitle.change).toHaveBeenCalledWith('Roles');
+    expect(docTitle.reset).not.toHaveBeenCalled();
     expect(container).toMatchInlineSnapshot(`
       <div>
         Role Edit Page: {"action":"clone","roleName":"someRoleName","rolesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"userAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"indicesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"fieldCache":{}},"privilegesAPIClient":{"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}}},"http":{"basePath":{"basePath":"","serverBasePath":""},"anonymousPaths":{},"externalUrl":{}},"notifications":{"toasts":{}},"fatalErrors":{},"license":{"features$":{"_isScalar":false}},"docLinks":{},"uiCapabilities":{"catalogue":{},"management":{},"navLinks":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/clone/someRoleName","search":"","hash":""}}}
@@ -134,6 +155,8 @@ describe('rolesManagementApp', () => {
 
     unmount();
 
+    expect(docTitle.reset).toHaveBeenCalledTimes(1);
+
     expect(container).toMatchInlineSnapshot(`<div />`);
   });
 

diff --git a/x-pack/plugins/security/public/management/roles/roles_management_app.tsx b/x-pack/plugins/security/public/management/roles/roles_management_app.tsx
@@ -27,14 +27,17 @@ interface CreateParams {
 export const rolesManagementApp = Object.freeze({
   id: 'roles',
   create({ license, fatalErrors, getStartServices }: CreateParams) {
+    const title = i18n.translate('xpack.security.management.rolesTitle', {
+      defaultMessage: 'Roles',
+    });
     return {
       id: this.id,
       order: 20,
-      title: i18n.translate('xpack.security.management.rolesTitle', { defaultMessage: 'Roles' }),
+      title,
       async mount({ element, setBreadcrumbs, history }) {
         const rolesBreadcrumbs = [
           {
-            text: i18n.translate('xpack.security.roles.breadcrumb', { defaultMessage: 'Roles' }),
+            text: title,
             href: `/`,
           },
         ];
@@ -57,7 +60,16 @@ export const rolesManagementApp = Object.freeze({
           import('../users'),
         ]);
 
-        const { application, docLinks, http, i18n: i18nStart, notifications } = startServices;
+        const {
+          application,
+          docLinks,
+          http,
+          i18n: i18nStart,
+          notifications,
+          chrome,
+        } = startServices;
+
+        chrome.docTitle.change(title);
 
         const rolesAPIClient = new RolesAPIClient(http);
         const RolesGridPageWithBreadcrumbs = () => {
@@ -136,6 +148,7 @@ export const rolesManagementApp = Object.freeze({
         );
 
         return () => {
+          chrome.docTitle.reset();
           unmountComponentAtNode(element);
         };
       },