Better matrix layout

x-pack/plugins/security/public/views/management/edit_role/components/_index.scss

@@ -1,6 +1,7 @@
 @import './collapsible_panel/collapsible_panel';
 @import './privileges/kibana/space_aware_privilege_section/index';
 @import './privileges/kibana/feature_table/index';
+@import './spaces_popover_list/spaces_popover_list';
 
 .secPrivilegeFeatureIcon {
   flex-shrink: 0;

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/feature_table/feature_table.tsx

@@ -133,10 +133,9 @@ export class FeatureTable extends Component<Props, {}> {
           );
           tooltipElement = (
             <EuiIconTip
-              // TODO: Waiting on update from EUI
-              // iconProps={{
-              //   className: 'eui-alignTop',
-              // }}
+              iconProps={{
+                className: 'eui-alignTop',
+              }}
               type={'iInCircle'}
               color={'subdued'}
               content={tooltipContent}
@@ -207,15 +206,13 @@ export class FeatureTable extends Component<Props, {}> {
           return {
             id: `${featureId}_${priv}`,
             label: _.capitalize(priv),
-            // TODO: Waiting on update from EUI
             isDisabled: !enabledFeaturePrivileges.includes(priv),
           };
         });
 
         options.push({
           id: `${featureId}_${NO_PRIVILEGE_VALUE}`,
           label: 'None',
-          // TODO: Waiting on update from EUI
           isDisabled: !allowsNone,
         });
 

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/_privilege_matrix.scss

@@ -1,3 +1,12 @@
+/**
+ * 1. Allow table to scroll both directions
+ */
+
+.secPrivilegeMatrix__modal,
+.secPrivilegeMatrix__modal .euiModal__flex {
+  overflow: hidden; /* 1 */
+}
+
 .secPrivilegeMatrix__row--isBasePrivilege,
 .secPrivilegeMatrix__cell--isGlobalPrivilege,
 .secPrivilegeTable__row--isGlobalSpace, {

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_display.tsx

@@ -118,10 +118,10 @@ function getIconTip(iconType?: IconType, tooltipContent?: ReactNode) {
 
   return (
     <EuiIconTip
-      // TODO: Waiting on update from EUI
-      // iconProps={{
-      //   className: 'eui-alignTop',
-      // }}
+      iconProps={{
+        className: 'eui-alignTop',
+      }}
+      color="subdued"
       type={iconType}
       content={tooltipContent}
       size={'s'}

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_matrix.tsx

@@ -69,7 +69,7 @@ export class PrivilegeMatrix extends Component<Props, State> {
     if (this.state.showModal) {
       modal = (
         <EuiOverlayMask>
-          <EuiModal onClose={this.hideModal}>
+          <EuiModal className="secPrivilegeMatrix__modal" onClose={this.hideModal}>
             <EuiModalHeader>
               <EuiModalHeaderTitle>
                 <FormattedMessage
@@ -157,15 +157,15 @@ export class PrivilegeMatrix extends Component<Props, State> {
           id: 'xpack.security.management.editRole.spacePrivilegeMatrix.featureColumnTitle',
           defaultMessage: 'Feature',
         }),
+        width: '230px',
         render: (feature: Feature & { isBase: boolean }) => {
           return feature.isBase ? (
             <Fragment>
               <strong>{feature.name}</strong>
               <EuiIconTip
-                // TODO: Waiting on update from EUI
-                // iconProps={{
-                //   className: 'eui-alignTop',
-                // }}
+                iconProps={{
+                  className: 'eui-alignTop',
+                }}
                 type="questionInCircle"
                 content={intl.formatMessage({
                   id:
@@ -186,10 +186,20 @@ export class PrivilegeMatrix extends Component<Props, State> {
         },
       },
       ...spacesColumns.map(item => {
+        let columnWidth;
+        if (item.isGlobal) {
+          columnWidth = '100px';
+        } else if (item.spaces.length - SPACES_DISPLAY_COUNT) {
+          columnWidth = '90px';
+        } else {
+          columnWidth = '80px';
+        }
+
         return {
           // TODO: this is a hacky way to determine if we are looking at the global feature
           // used for cellProps below...
           field: item.isGlobal ? 'global' : 'feature',
+          width: columnWidth,
           name: (
             <div>
               {item.spaces.slice(0, SPACES_DISPLAY_COUNT).map((space: Space) => (

x-pack/plugins/security/public/views/management/edit_role/components/spaces_popover_list/_spaces_popover_list.scss

@@ -0,0 +1,3 @@
+.secSpacesPopoverList__buttonText {
+  font-size: $euiFontSizeXS;
+}

x-pack/plugins/security/public/views/management/edit_role/components/spaces_popover_list/spaces_popover_list.tsx

@@ -40,7 +40,7 @@ export class SpacesPopoverList extends Component<Props, State> {
   public render() {
     const button = (
       <EuiButtonEmpty size={'xs'} onClick={this.onButtonClick}>
-        {this.props.buttonText}
+        <span className="secSpacesPopoverList__buttonText">{this.props.buttonText}</span>
       </EuiButtonEmpty>
     );