[role_mapping] Partial progress

Author: alexwizp

x-pack/plugins/security/public/management/management_urls.ts

@@ -11,12 +11,9 @@ export const EDIT_ROLES_PATH = `/edit`;
 export const CLONE_ROLES_PATH = `/clone`;
 export const USERS_PATH = `../users`;
 export const EDIT_USERS_PATH = `${USERS_PATH}/edit`;
-export const ROLE_MAPPINGS_PATH = `../role_mappings`;
-const CREATE_ROLE_MAPPING_PATH = `${ROLE_MAPPINGS_PATH}/edit`;
 
-export const getEditRoleHref = (roleName: string) => `/edit/${encodeURIComponent(roleName)}`;
-
-export const getCreateRoleMappingHref = () => `${CREATE_ROLE_MAPPING_PATH}`;
+export const getEditRoleHref = (roleName: string) =>
+  `../roles/edit/${encodeURIComponent(roleName)}`;
 
 export const getEditRoleMappingHref = (roleMappingName: string) =>
-  `${CREATE_ROLE_MAPPING_PATH}/${encodeURIComponent(roleMappingName)}`;
+  `${EDIT_ROLES_PATH}/${encodeURIComponent(roleMappingName)}`;

x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/edit_role_mapping_page.tsx

@@ -19,7 +19,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { NotificationsStart } from 'src/core/public';
+import { NotificationsStart, ScopedHistory } from 'src/core/public';
 import { RoleMapping } from '../../../../common/model';
 import { RuleEditorPanel } from './rule_editor_panel';
 import {
@@ -29,7 +29,6 @@ import {
   SectionLoading,
 } from '../components';
 import { RolesAPIClient } from '../../roles';
-import { ROLE_MAPPINGS_PATH } from '../../management_urls';
 import { validateRoleMappingForSave } from './services/role_mapping_validation';
 import { MappingInfoPanel } from './mapping_info_panel';
 import { DocumentationLinksService } from '../documentation_links';
@@ -55,6 +54,7 @@ interface Props {
   rolesAPIClient: PublicMethodsOf<RolesAPIClient>;
   notifications: NotificationsStart;
   docLinks: DocumentationLinksService;
+  history: ScopedHistory;
 }
 
 export class EditRoleMappingPage extends Component<Props, State> {
@@ -342,7 +342,5 @@ export class EditRoleMappingPage extends Component<Props, State> {
     }
   }
 
-  private backToRoleMappingsList = () => {
-    window.location.hash = ROLE_MAPPINGS_PATH;
-  };
+  private backToRoleMappingsList = () => this.props.history.push('/');
 }

x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/create_role_mapping_button/create_role_mapping_button.tsx

@@ -7,15 +7,21 @@
 import React from 'react';
 import { EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { getCreateRoleMappingHref } from '../../../management_urls';
+import { withRouter } from 'react-router-dom';
+import { EDIT_ROLES_PATH } from '../../../management_urls';
+import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public';
 
-export const CreateRoleMappingButton = () => {
+export const CreateRoleMappingButton = withRouter(({ history }) => {
   return (
-    <EuiButton data-test-subj="createRoleMappingButton" href={getCreateRoleMappingHref()} fill>
+    <EuiButton
+      data-test-subj="createRoleMappingButton"
+      {...reactRouterNavigate(history, EDIT_ROLES_PATH)}
+      fill
+    >
       <FormattedMessage
         id="xpack.security.management.roleMappings.createRoleMappingButton"
         defaultMessage="Create role mapping"
       />
     </EuiButton>
   );
-};
+});

x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx

@@ -24,7 +24,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { NotificationsStart } from 'src/core/public';
+import { NotificationsStart, ScopedHistory } from 'src/core/public';
 import { RoleMapping, Role } from '../../../../common/model';
 import { EmptyPrompt } from './empty_prompt';
 import {
@@ -33,18 +33,20 @@ import {
   PermissionDenied,
   SectionLoading,
 } from '../components';
-import { getCreateRoleMappingHref, getEditRoleMappingHref } from '../../management_urls';
+import { EDIT_ROLES_PATH, getEditRoleMappingHref } from '../../management_urls';
 import { DocumentationLinksService } from '../documentation_links';
 import { RoleMappingsAPIClient } from '../role_mappings_api_client';
 import { RoleTableDisplay } from '../../role_table_display';
 import { RolesAPIClient } from '../../roles';
 import { EnabledBadge, DisabledBadge } from '../../badges';
+import { reactRouterNavigate } from '../../../../../../../src/plugins/kibana_react/public';
 
 interface Props {
   rolesAPIClient: PublicMethodsOf<RolesAPIClient>;
   roleMappingsAPI: PublicMethodsOf<RoleMappingsAPIClient>;
   notifications: NotificationsStart;
   docLinks: DocumentationLinksService;
+  history: ScopedHistory;
 }
 
 interface State {
@@ -160,7 +162,10 @@ export class RoleMappingsGridPage extends Component<Props, State> {
             </EuiText>
           </EuiPageContentHeaderSection>
           <EuiPageContentHeaderSection>
-            <EuiButton data-test-subj="createRoleMappingButton" href={getCreateRoleMappingHref()}>
+            <EuiButton
+              data-test-subj="createRoleMappingButton"
+              {...reactRouterNavigate(this.props.history, EDIT_ROLES_PATH)}
+            >
               <FormattedMessage
                 id="xpack.security.management.roleMappings.createRoleMappingButtonLabel"
                 defaultMessage="Create role mapping"
@@ -294,7 +299,7 @@ export class RoleMappingsGridPage extends Component<Props, State> {
         render: (roleMappingName: string) => {
           return (
             <EuiLink
-              href={getEditRoleMappingHref(roleMappingName)}
+              {...reactRouterNavigate(this.props.history, getEditRoleMappingHref(roleMappingName))}
               data-test-subj="roleMappingName"
             >
               {roleMappingName}
@@ -327,7 +332,7 @@ export class RoleMappingsGridPage extends Component<Props, State> {
             const role: Role | string =
               this.state.roles?.find(r => r.name === rolename) ?? rolename;
 
-            return <RoleTableDisplay role={role} key={rolename} />;
+            return <RoleTableDisplay role={role} key={rolename} history={this.props.history} />;
           });
           return <div data-test-subj="roleMappingRoles">{roleLinks}</div>;
         },
@@ -371,7 +376,10 @@ export class RoleMappingsGridPage extends Component<Props, State> {
                     iconType="pencil"
                     color="primary"
                     data-test-subj={`editRoleMappingButton-${record.name}`}
-                    href={getEditRoleMappingHref(record.name)}
+                    {...reactRouterNavigate(
+                      this.props.history,
+                      getEditRoleMappingHref(record.name)
+                    )}
                   />
                 </EuiToolTip>
               );

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

@@ -26,13 +26,13 @@ export const roleMappingsManagementApp = Object.freeze({
       title: i18n.translate('xpack.security.management.roleMappingsTitle', {
         defaultMessage: 'Role Mappings',
       }),
-      async mount({ basePath, element, setBreadcrumbs, history }) {
+      async mount({ element, setBreadcrumbs, history }) {
         const roleMappingsBreadcrumbs = [
           {
             text: i18n.translate('xpack.security.roleMapping.breadcrumb', {
               defaultMessage: 'Role Mappings',
             }),
-            href: `#${basePath}`,
+            href: `/`,
           },
         ];
 
@@ -60,6 +60,7 @@ export const roleMappingsManagementApp = Object.freeze({
               rolesAPIClient={new RolesAPIClient(http)}
               roleMappingsAPI={roleMappingsAPIClient}
               docLinks={dockLinksService}
+              history={history}
             />
           );
         };
@@ -85,6 +86,7 @@ export const roleMappingsManagementApp = Object.freeze({
               rolesAPIClient={new RolesAPIClient(http)}
               notifications={notifications}
               docLinks={dockLinksService}
+              history={history}
             />
           );
         };

x-pack/plugins/security/public/management/role_table_display/role_table_display.tsx

@@ -6,14 +6,17 @@
 
 import React from 'react';
 import { EuiLink, EuiToolTip, EuiIcon } from '@elastic/eui';
+import { ScopedHistory } from 'kibana/public';
 import { Role, isRoleDeprecated, getExtendedRoleDeprecationNotice } from '../../../common/model';
 import { getEditRoleHref } from '../management_urls';
+import { reactRouterNavigate } from '../../../../../../src/plugins/kibana_react/public';
 
 interface Props {
   role: Role | string;
+  history: ScopedHistory;
 }
 
-export const RoleTableDisplay = ({ role }: Props) => {
+export const RoleTableDisplay = ({ role, history }: Props) => {
   let content;
   let href;
   if (typeof role === 'string') {
@@ -35,5 +38,6 @@ export const RoleTableDisplay = ({ role }: Props) => {
     content = <div>{role.name}</div>;
     href = getEditRoleHref(role.name);
   }
-  return <EuiLink href={href}>{content}</EuiLink>;
+
+  return <EuiLink {...reactRouterNavigate(history, href)}>{content}</EuiLink>;
 };