Design edits (#8)

* Fixed page layout * Design edits - Altered some of the messaging - Moved around some spacers - Decreased size of elements in table
legrego · Jul 31, 2018 · 112d992 · 112d992
1 parent 08d9096
commit 112d992
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 97 deletions.
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/delete_role_button.js b/x-pack/plugins/security/public/views/management/edit_role/components/delete_role_button.js
@@ -7,7 +7,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import {
-  EuiButton,
+  EuiButtonEmpty,
   EuiOverlayMask,
   EuiConfirmModal,
 } from '@elastic/eui';
@@ -29,9 +29,9 @@ export class DeleteRoleButton extends Component {
 
     return (
       <Fragment>
-        <EuiButton color={'danger'} iconType={'trash'} onClick={this.showModal}>
-          Delete Role
-        </EuiButton>
+        <EuiButtonEmpty color={'danger'} onClick={this.showModal}>
+          Delete role
+        </EuiButtonEmpty>
         {this.maybeShowModal()}
       </Fragment>
     );

diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/edit_role_page.js b/x-pack/plugins/security/public/views/management/edit_role/components/edit_role_page.js
@@ -19,6 +19,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
+  EuiPageBody,
 } from '@elastic/eui';
 import { saveRole, deleteRole } from '../../../../objects';
 import { isReservedRole } from '../../../../lib/role';
@@ -53,22 +54,24 @@ export class EditRolePage extends Component {
 
   render() {
     return (
-      <EuiPage className="editRolePage">
-        <EuiForm {...this.state.formError}>
-          {this.getFormTitle()}
+      <EuiPage className="editRolePage" restrictWidth>
+        <EuiPageBody>
+          <EuiForm {...this.state.formError}>
+            {this.getFormTitle()}
 
-          <EuiSpacer />
+            <EuiSpacer />
 
-          {this.getRoleName()}
+            {this.getRoleName()}
 
-          {this.getElasticsearchPrivileges()}
+            {this.getElasticsearchPrivileges()}
 
-          {this.getKibanaPrivileges()}
+            {this.getKibanaPrivileges()}
 
-          <EuiSpacer />
+            <EuiSpacer />
 
-          {this.getFormButtons()}
-        </EuiForm>
+            {this.getFormButtons()}
+          </EuiForm>
+        </EuiPageBody>
       </EuiPage>
     );
   }

diff --git a/...blic/views/management/edit_role/components/privileges/kibana/privilege_callout_warning.js b/...blic/views/management/edit_role/components/privileges/kibana/privilege_callout_warning.js
@@ -3,30 +3,60 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiCallOut
 } from '@elastic/eui';
+import { NO_PRIVILEGE_VALUE } from '../../../lib/constants';
 
 export const PrivilegeCalloutWarning = ({ basePrivilege, isReservedRole }) => {
   if (basePrivilege === 'all') {
-    return (
-      <EuiCallOut color="warning" iconType="iInCircle" title={'Hey, this is important!'}>
-        <p>
-          Setting the minimum privilege to <strong>all</strong> grants full access to all spaces.<br />
-          {getCorrectiveActionText(basePrivilege, isReservedRole)}
-        </p>
-      </EuiCallOut>
-    );
+    if (isReservedRole) {
+      return (
+        <EuiCallOut color="warning" iconType="iInCircle" title={'Cannot customize a reserved role\'s space privileges'}>
+          <p>
+            This role always grants full access to all spaces.
+            To customize privileges for individual spaces, you must create a new role.
+          </p>
+        </EuiCallOut>
+      );
+    } else {
+      return (
+        <EuiCallOut color="warning" iconType="iInCircle" title={'Minimum privilege is too high to customize individual spaces'}>
+          <p>
+            Setting the minimum privilege to <strong>all</strong> grants full access to all spaces.
+            To customize privileges for individual spaces,
+            the minimum privilege must be either <strong>read</strong> or <strong>none</strong>.
+          </p>
+        </EuiCallOut>
+      );
+    }
   }
 
   if (basePrivilege === 'read') {
+    if (isReservedRole) {
+      return (
+        <EuiCallOut color="warning" iconType="iInCircle" title={'Cannot customize a reserved role\'s space privileges'}>
+          <p>
+            This role always grants read access to all spaces.
+            To customize privileges for individual spaces, you must create a new role.
+          </p>
+        </EuiCallOut>
+      );
+    } else {
+      return (
+        <EuiCallOut color="primary" iconType="iInCircle" title={'Lowest possible privilege is \'read\''} />
+      );
+    }
+  }
+
+  if (basePrivilege === NO_PRIVILEGE_VALUE && isReservedRole) {
     return (
-      <EuiCallOut color="primary" iconType="iInCircle" title={'Hey, this is important!'} size={'s'}>
+      <EuiCallOut color="warning" iconType="iInCircle" title={'Cannot customize a reserved role\'s space privileges'}>
         <p>
-          Setting the minimum privilege to <strong>read</strong> grants a minimum of read access to all spaces.<br />
-          {getCorrectiveActionText(basePrivilege, isReservedRole)}
+          This role never grants access to any spaces within Kibana.
+          To customize privileges for individual spaces, you must create a new role.
         </p>
       </EuiCallOut>
     );
@@ -35,37 +65,6 @@ export const PrivilegeCalloutWarning = ({ basePrivilege, isReservedRole }) => {
   return null;
 };
 
-function getCorrectiveActionText(basePrivilege, isReservedRole) {
-  if (basePrivilege === 'all') {
-    return isReservedRole
-      ? (
-        <Fragment>
-          To customize privileges for individual spaces, create a new role,
-        and set the minimum privilege to either <strong>read</strong> or <strong>none</strong>
-        </Fragment>
-      )
-      : (
-        <Fragment>
-          To customize privileges for individual spaces, set the minimum privilege to either <strong>read</strong> or <strong>none</strong>
-        </Fragment>
-      );
-  }
-  if (basePrivilege === 'read') {
-    return isReservedRole
-      ? (
-        <Fragment>
-          To restrict access to individual spaces, create a new role,
-          and set the minimum privilege to <strong>none</strong>
-        </Fragment>
-      )
-      : (
-        <Fragment>
-          To restrict access to individual spaces, set the minimum privilege to <strong>none</strong>
-        </Fragment>
-      );
-  }
-}
-
 PrivilegeCalloutWarning.propTypes = {
   basePrivilege: PropTypes.string.isRequired,
   isReservedRole: PropTypes.bool.isRequired,

diff --git a/...rity/public/views/management/edit_role/components/privileges/kibana/privilege_selector.js b/...rity/public/views/management/edit_role/components/privileges/kibana/privilege_selector.js
@@ -19,6 +19,7 @@ export class PrivilegeSelector extends Component {
     value: PropTypes.string,
     allowNone: PropTypes.bool,
     disabled: PropTypes.bool,
+    compressed: PropTypes.bool,
   };
 
   state = {}
@@ -29,6 +30,7 @@ export class PrivilegeSelector extends Component {
       value,
       disabled,
       allowNone,
+      compressed,
     } = this.props;
 
     const options = [];
@@ -48,6 +50,7 @@ export class PrivilegeSelector extends Component {
         value={value || ''}
         onChange={this.onChange}
         disabled={disabled}
+        compressed={compressed}
       />
     );
   }

diff --git a/...y/public/views/management/edit_role/components/privileges/kibana/privilege_space_table.js b/...y/public/views/management/edit_role/components/privileges/kibana/privilege_space_table.js
@@ -39,13 +39,14 @@ export class PrivilegeSpaceTable extends Component {
 
     return (
       <EuiInMemoryTable
+        hasActions
         columns={[{
           field: 'space',
           name: 'Space',
-          width: '60%',
+          width: '50%',
           render: (space) => (
-            <EuiFlexGroup responsive={false} alignItems={'center'}>
-              <EuiFlexItem grow={false}><SpaceAvatar space={space} /></EuiFlexItem>
+            <EuiFlexGroup gutterSize="s" responsive={false} alignItems={'center'}>
+              <EuiFlexItem grow={false}><SpaceAvatar space={space} size="s" /></EuiFlexItem>
               <EuiFlexItem><EuiText>{space.name}</EuiText></EuiFlexItem>
             </EuiFlexGroup>
           )
@@ -59,6 +60,7 @@ export class PrivilegeSpaceTable extends Component {
                 value={privilege}
                 disabled={isReservedRole(role)}
                 onChange={this.onSpacePermissionChange(record)}
+                compressed
               />
             );
           }

diff --git a/...lic/views/management/edit_role/components/privileges/kibana/space_aware_privilege_form.js b/...lic/views/management/edit_role/components/privileges/kibana/space_aware_privilege_form.js
@@ -16,7 +16,6 @@ import {
   EuiButton,
   EuiText,
   EuiTitle,
-  EuiHorizontalRule,
 } from '@elastic/eui';
 import { isReservedRole } from '../../../../../../lib/role';
 import { copyRole } from '../../../lib/copy_role';
@@ -64,13 +63,27 @@ export class SpaceAwarePrivilegeForm extends Component {
 
     const basePrivilege = assignedPrivileges[ALL_RESOURCE].length > 0 ? assignedPrivileges[ALL_RESOURCE][0] : NO_PRIVILEGE_VALUE;
 
+    const description = (<p>Specifies the lowest permission level for all spaces, unless a custom privilege is specified.</p>);
+
+    let helptext;
+    if (basePrivilege === NO_PRIVILEGE_VALUE) {
+      helptext = "No access";
+    } else if (basePrivilege === 'all') {
+      helptext = "View, edit, and share all objects and apps within all spaces";
+    } else if (basePrivilege === 'read') {
+      helptext = "View only mode";
+    }
+
     return (
       <Fragment>
         <EuiDescribedFormGroup
-          title={<p>Minimum privilege</p>}
-          description={<p>Specifies the lowest permission level for all spaces.</p>}
+          title={<h3>Minimum privilege</h3>}
+          description={description}
         >
-          <EuiFormRow hasEmptyLabelSpace>
+          <EuiFormRow
+            hasEmptyLabelSpace
+            helpText={helptext}
+          >
             <PrivilegeSelector
               availablePrivileges={availablePrivileges}
               value={basePrivilege}
@@ -82,16 +95,13 @@ export class SpaceAwarePrivilegeForm extends Component {
         </EuiDescribedFormGroup>
 
         <EuiSpacer />
+
         {this.renderSpacePrivileges(basePrivilege, availablePrivileges)}
       </Fragment>
     );
   }
 
   renderSpacePrivileges = (basePrivilege, availablePrivileges) => {
-    if (basePrivilege === 'all') {
-      return <PrivilegeCalloutWarning basePrivilege={basePrivilege} isReservedRole={isReservedRole(this.props.role)} />;
-    }
-
     const {
       role,
       spaces,
@@ -107,21 +117,24 @@ export class SpaceAwarePrivilegeForm extends Component {
       <Fragment>
         <EuiTitle size={'xs'}><h3>Space privileges</h3></EuiTitle>
         <EuiSpacer size={'s'} />
-        <EuiText size={'s'} color={'subdued'}>
+        <EuiText grow={false} size={'s'} color={'subdued'}>
           <p>
-            Customize permission levels on a per space basis.
-            If a space is not listed, its permissions will default to the minimum privilege specified above.
+            Customize permission levels per space.
+            If a space is not customized, its permissions will default to the minimum privilege specified above.
           </p>
+          {basePrivilege !== 'all' && this.props.editable && (
+            <p>You can bulk-create space privileges though they will be saved individually upon saving the role.</p>
+          )}
         </EuiText>
 
-        {
-          basePrivilege === 'read'
-          && (this.state.privilegeForms.length > 0 || Object.keys(this.state.spacePrivileges).length > 0)
-          && <PrivilegeCalloutWarning basePrivilege={basePrivilege} isReservedRole={isReservedRole(this.props.role)} />
+        {(basePrivilege !== NO_PRIVILEGE_VALUE || isReservedRole(this.props.role)) &&
+          <PrivilegeCalloutWarning basePrivilege={basePrivilege} isReservedRole={isReservedRole(this.props.role)} />
         }
 
-        <EuiFormRow fullWidth>
-          <div>
+        {basePrivilege === 'read' && this.props.editable && <EuiSpacer />}
+
+        {basePrivilege !== 'all' && (
+          <Fragment>
             <PrivilegeSpaceTable
               role={role}
               spaces={spaces}
@@ -130,20 +143,18 @@ export class SpaceAwarePrivilegeForm extends Component {
               onChange={this.onExistingSpacePrivilegesChange}
             />
 
+            {(Object.keys(this.state.spacePrivileges).length > 0) && <EuiSpacer />}
+
             {this.props.editable && (
               <Fragment>
                 {this.state.privilegeForms.map((form, index) => this.getSpaceForm(form, index, basePrivilege))}
                 {availableSpaces.length > 0 &&
-                  <Fragment>
-                    <EuiSpacer />
-                    <EuiButton size={'s'} iconType={'plusInCircle'} onClick={this.addSpacePrivilege}>Add space privilege</EuiButton>
-                  </Fragment>
+                  <EuiButton size={'s'} iconType={'plusInCircle'} onClick={this.addSpacePrivilege}>Add space privilege</EuiButton>
                 }
               </Fragment>
             )}
-          </div>
-
-        </EuiFormRow>
+          </Fragment>
+        )}
       </Fragment>
     );
   }
@@ -189,13 +200,8 @@ export class SpaceAwarePrivilegeForm extends Component {
 
     const availableSpaces = this.getAvailableSpaces(index);
 
-    const isFirst = index === 0;
-
-    const startingElement = isFirst ? <EuiSpacer /> : <EuiHorizontalRule />;
-
     return (
-      <Fragment>
-        {startingElement}
+      <Fragment key={index}>
         <PrivilegeSpaceForm
           key={index}
           availableSpaces={availableSpaces}
@@ -205,6 +211,7 @@ export class SpaceAwarePrivilegeForm extends Component {
           onChange={this.onPrivilegeSpacePermissionChange(index)}
           onDelete={this.onPrivilegeSpacePermissionDelete(index)}
         />
+        <EuiSpacer />
       </Fragment>
     );
   }

diff --git a/x-pack/plugins/security/public/views/management/edit_role/edit_role.less b/x-pack/plugins/security/public/views/management/edit_role/edit_role.less
@@ -1,10 +1,4 @@
 #editRoleReactRoot {
   background: #f5f5f5;
-  flex-grow: 1;
-}
-
-.editRolePage {
-  max-width: 1000px;
-  margin-left: auto;
-  margin-right: auto;
+  min-height: ~"calc(100vh - 70px)";
 }