Design Edits (#13)

Here are the design edits (I felt comfortable making). I also had to add some `// TODO`’s for TS and/or EUI fixes. There are still some issues with the UI that I'll document in here. ---- ## 1. I cleaned up the "No access" screen but should get a review from writers <img src="https://d.pr/free/i/tc7Xqj+" /> ## 2. The feature list needs to be updated to use button groups. It should only display the buttons on "Custom" and each feature should always show all privileges, disabling the ones that aren't available. Only remove the button group if the feature's privilege cannot be changed at all and show a lock icon with a tooltip. _Forget about the bolding of **All** for now__ <img width="2036" alt="screen shot 2019-01-08 at 14 39 14 pm" src="https://user-images.githubusercontent.com/549577/50920616-d90db880-1413-11e9-93cf-5575887f7024.png"> ## 3. The "base" privilege selection should also allow a "None" option which behaves similar to the "Read" and "All". <img src="https://d.pr/free/i/0fLOpU+" /> **Bug:** <img src="https://d.pr/free/i/WR9QW9+" /> ## 4. I don't understand the ML tooltip This could use more information or better instruction. <img src="https://d.pr/free/i/fT8xng+" /> ## 5. Anywhere a permission is superceded by the Global permissions, it should show a lock with a tooltip <img src="https://d.pr/free/i/0f8z04+" /> <img src="https://d.pr/free/i/Cv5fV8+" /> <img src="https://d.pr/free/i/lXoDvg+" /> *Question* <img src="https://d.pr/free/i/mAjYlc+" /> ## 6. Let's lock the privilege select select dropdown if super-ceded by global <img src="https://d.pr/free/i/Q6HgYm+" /> ## 7. Functionality around the`+7 more` text **In the regular table**, lets just allow the row to expand to show the entire list. <img src="https://d.pr/free/i/mD3Nh2+" /> **In the Matrix**, let's make the text a popover link to show the full list (including those visible in the header) <img src="https://d.pr/free/i/bGJvag+" /> **For Global (in matrix and regular table)**, let's do the same thing as above but make the `(all spaces)` a popover link that lists all spaces available in the whole Kibana instance. <img src="https://d.pr/free/i/mQ6icn+" /> ---- 😌 Sorry, that was probably long-winded, but I think should cover it. Feel free, if you want, to commit directly to my forked branch before you merge in.
cchaos · Jan 9, 2019 · 349c7c3 · 349c7c3
1 parent 2d18c4b
commit 349c7c3
Show file tree

Hide file tree

Showing 27 changed files with 289 additions and 217 deletions.
diff --git a/x-pack/plugins/security/public/components/_index.scss b/x-pack/plugins/security/public/components/_index.scss
@@ -0,0 +1 @@
+@import './management/users/index';
diff --git a/x-pack/plugins/security/public/components/management/users/_index.scss b/x-pack/plugins/security/public/components/management/users/_index.scss
@@ -0,0 +1 @@
+@import './users';
diff --git a/x-pack/plugins/security/public/components/management/users/_users.scss b/x-pack/plugins/security/public/components/management/users/_users.scss
@@ -0,0 +1,16 @@
+// HACK -- Fix for background color full-height of browser
+.secUsersEditPage,
+.secUsersListingPage {
+  min-height: calc(100vh - 70px);
+}
+
+.secUsersListingPage__content {
+  flex-grow: 0;
+}
+
+.secUsersEditPage__content {
+  max-width: $secFormWidth;
+  margin-left: auto;
+  margin-right: auto;
+  flex-grow: 0;
+}
diff --git a/x-pack/plugins/security/public/components/management/users/edit_user.js b/x-pack/plugins/security/public/components/management/users/edit_user.js
@@ -386,9 +386,9 @@ class EditUserUI extends Component {
     }
 
     return (
-      <EuiPage className="mgtUsersEditPage">
+      <EuiPage className="secUsersEditPage">
         <EuiPageBody>
-          <EuiPageContent className="mgtUsersEditPage__content">
+          <EuiPageContent className="secUsersEditPage__content">
             <EuiPageContentHeader>
               <EuiPageContentHeaderSection>
                 <EuiTitle>

diff --git a/x-pack/plugins/security/public/components/management/users/users.js b/x-pack/plugins/security/public/components/management/users/users.js
@@ -93,7 +93,7 @@ class UsersUI extends Component {
     const { apiClient, intl } = this.props;
     if (permissionDenied) {
       return (
-        <EuiPage className="mgtUsersListingPage">
+        <EuiPage className="secUsersListingPage">
           <EuiPageBody>
             <EuiPageContent horizontalPosition="center">
               <EuiEmptyPrompt
@@ -222,9 +222,9 @@ class UsersUI extends Component {
         return normalized.indexOf(normalizedQuery) !== -1;
       }) : users;
     return (
-      <EuiPage className="mgtUsersListingPage">
+      <EuiPage className="secUsersListingPage">
         <EuiPageBody>
-          <EuiPageContent className="mgtUsersListingPage__content">
+          <EuiPageContent className="secUsersListingPage__content">
             <EuiPageContentHeader>
               <EuiPageContentHeaderSection>
                 <EuiTitle>

diff --git a/x-pack/plugins/security/public/index.scss b/x-pack/plugins/security/public/index.scss
@@ -1,10 +1,17 @@
 @import 'ui/public/styles/styling_constants';
 
-// Logged out styles
-@import './views/logged_out/index';
+// Prefix all styles with "kbn" to avoid conflicts.
+// Examples
+//   secChart
+//   secChart__legend
+//   secChart__legend--small
+//   secChart__legend-isLoading
 
-// Login styles
-@import './views/login/index';
+$secFormWidth: 460px;
+
+// Public components
+@import './components/index';
+
+// Public views
+@import './views/index';
 
-// Management styles
-@import './views/management/index';
diff --git a/x-pack/plugins/security/public/views/_index.scss b/x-pack/plugins/security/public/views/_index.scss
@@ -0,0 +1,8 @@
+// Public views
+@import './logged_out/index';
+
+// Login styles
+@import './login/index';
+
+// Management styles
+@import './management/index';
diff --git a/x-pack/plugins/security/public/views/management/_index.scss b/x-pack/plugins/security/public/views/management/_index.scss
@@ -0,0 +1,2 @@
+@import './change_password_form/index';
+@import './edit_role/index';
diff --git a/.../plugins/security/public/views/management/change_password_form/_change_password_form.scss b/.../plugins/security/public/views/management/change_password_form/_change_password_form.scss
@@ -0,0 +1,17 @@
+.secChangePasswordForm__panel {
+  max-width: $secFormWidth;
+}
+
+.secChangePasswordForm__subLabel {
+  margin-bottom: $euiSizeS;
+}
+
+.secChangePasswordForm__footer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .kuiButton + .kuiButton {
+    margin-left: $euiSizeS;
+  }
+}
diff --git a/x-pack/plugins/security/public/views/management/change_password_form/_index.scss b/x-pack/plugins/security/public/views/management/change_password_form/_index.scss
@@ -0,0 +1 @@
+@import './change_password_form';
diff --git a/...k/plugins/security/public/views/management/change_password_form/change_password_form.html b/...k/plugins/security/public/views/management/change_password_form/change_password_form.html
@@ -21,13 +21,13 @@
     <!-- Changing password -->
     <div
       ng-show="changePasswordController.isFormVisible"
-      class="kuiFormPanel mgtForm__panel"
+      class="kuiFormPanel secChangePasswordForm__panel"
     >
       <!-- Current password -->
       <div class="kuiFormSection" ng-if="requireCurrentPassword">
         <label
           for="password"
-          class="kuiFormSubLabel mgtForm__subLabel"
+          class="kuiFormSubLabel secChangePasswordForm__subLabel"
           i18n-id="xpack.security.management.changePasswordForm.currentPasswordLabel"
           i18n-default-message="Current password"
         ></label>
@@ -54,7 +54,7 @@
       <div class="kuiFormSection">
         <label
           for="newPassword"
-          class="kuiFormSubLabel mgtForm__subLabel"
+          class="kuiFormSubLabel secChangePasswordForm__subLabel"
           i18n-id="xpack.security.management.changePasswordForm.newPasswordLabel"
           i18n-default-message="New password"
         ></label>
@@ -82,9 +82,9 @@
       <div class="kuiFormSection">
         <label
           for="confirmPassword"
-          class="kuiFormSubLabel mgtForm__subLabel"
+          class="kuiFormSubLabel secChangePasswordForm__subLabel"
           i18n-id="xpack.security.management.changePasswordForm.confirmPasswordLabel"
-          i18n-default-message="Confirm password"  
+          i18n-default-message="Confirm password"
         ></label>
         <input
           type="password"
@@ -112,12 +112,12 @@
           <span
             i18n-id="xpack.security.management.changePasswordForm.updateAndRestartKibanaDescription"
             i18n-default-message="After you change the password for the kibana user, you must update the kibana.yml file and restart Kibana"
-          ></span>          
+          ></span>
         </div>
       </div>
 
       <!-- Form actions -->
-      <div class="kuiFormFooter mgtForm__footer">
+      <div class="kuiFormFooter secChangePasswordForm__footer">
         <button
           type="button"
           data-test-subj="saveChangesButton"

diff --git a/x-pack/plugins/security/public/views/management/edit_role/_index.scss b/x-pack/plugins/security/public/views/management/edit_role/_index.scss
@@ -0,0 +1 @@
+@import './components/index';
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/_index.scss b/x-pack/plugins/security/public/views/management/edit_role/components/_index.scss
@@ -0,0 +1,7 @@
+@import './collapsible_panel/collapsible_panel';
+@import './privileges/kibana/space_aware_privilege_section/index';
+
+.secPrivilegeFeatureIcon {
+  flex-shrink: 0;
+  margin-right: $euiSizeS;
+}
diff --git a/...y/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.tsx b/...y/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.tsx
@@ -169,7 +169,7 @@ class ElasticsearchPrivilegesUI extends Component<Props, {}> {
         <EuiHorizontalRule />
 
         {this.props.editable && (
-          <EuiButton size={'s'} iconType={'plusInCircle'} onClick={this.addIndexPrivilege}>
+          <EuiButton iconType={'plusInCircleFilled'} onClick={this.addIndexPrivilege}>
             <FormattedMessage
               id="xpack.security.management.editRoles.elasticSearchPrivileges.addIndexPrivilegesButtonLabel"
               defaultMessage="Add index privilege"

diff --git a/...c/views/management/edit_role/components/privileges/kibana/feature_table/feature_table.tsx b/...c/views/management/edit_role/components/privileges/kibana/feature_table/feature_table.tsx
@@ -6,15 +6,14 @@
 
 import {
   EuiIcon,
+  // @ts-ignore
   EuiIconTip,
   // @ts-ignore
   EuiInMemoryTable,
   // @ts-ignore
   EuiSuperSelect,
   EuiText,
-  EuiTextProps,
 } from '@elastic/eui';
-import { EuiIconProps } from '@elastic/eui/src/components/icon/icon';
 import { InjectedIntl } from '@kbn/i18n/react';
 import _ from 'lodash';
 import React, { Component } from 'react';
@@ -74,7 +73,7 @@ export class FeatureTable extends Component<Props, {}> {
       role,
     }));
 
-    return <EuiInMemoryTable columns={this.getColumns()} items={items} />;
+    return <EuiInMemoryTable responsive={false} columns={this.getColumns()} items={items} />;
   }
 
   public onChange = (featureId: string) => (privilege: string) => {
@@ -120,22 +119,23 @@ export class FeatureTable extends Component<Props, {}> {
             </EuiText>
           );
           tooltipElement = (
-            <EuiIconTip type={'iInCircle'} color={'primary'} content={tooltipContent} />
+            <EuiIconTip
+              // TODO: Waiting on update from EUI
+              // iconProps={{
+              //   className: 'eui-alignTop',
+              // }}
+              type={'iInCircle'}
+              color={'subdued'}
+              content={tooltipContent}
+            />
           );
         }
 
-        const textProps: EuiTextProps = {};
-        const iconProps: EuiIconProps = {};
-        if (!feature.hasAnyPrivilegeAssigned) {
-          textProps.color = 'subdued';
-          iconProps.color = 'subdued';
-        }
-
         return (
-          <EuiText {...textProps}>
-            <EuiIcon {...iconProps} type={feature.icon} />
-            &ensp; {feature.name} {tooltipElement}
-          </EuiText>
+          <span>
+            <EuiIcon size="m" type={feature.icon} className="secPrivilegeFeatureIcon" />
+            {feature.name} {tooltipElement}
+          </span>
         );
       },
     },

diff --git a/...nagement/edit_role/components/privileges/kibana/space_aware_privilege_section/_index.scss b/...nagement/edit_role/components/privileges/kibana/space_aware_privilege_section/_index.scss
@@ -0,0 +1 @@
+@import './privilege_matrix';
diff --git a/...it_role/components/privileges/kibana/space_aware_privilege_section/_privilege_matrix.scss b/...it_role/components/privileges/kibana/space_aware_privilege_section/_privilege_matrix.scss
@@ -0,0 +1,5 @@
+.secPrivilegeMatrix__row--isBasePrivilege,
+.secPrivilegeMatrix__cell--isGlobalPrivilege,
+.secPrivilegeTable__row--isGlobalSpace, {
+  background-color: $euiColorLightestShade;
+}
diff --git a/...dit_role/components/privileges/kibana/space_aware_privilege_section/privilege_display.tsx b/...dit_role/components/privileges/kibana/space_aware_privilege_section/privilege_display.tsx
@@ -36,7 +36,7 @@ export const SupercededPrivilegeDisplay: SFC<SupercededProps> = (props: Superced
   return (
     <PrivilegeDisplay
       {...rest}
-      iconType={'questionInCircle'}
+      iconType={'lock'}
       tooltipContent={
         <FormattedMessage
           id="foo"
@@ -62,11 +62,7 @@ function getDisplayValue(privilege: string | string[], styleMissingPrivilege?: b
     privileges.length === 0 || (privileges.length === 1 && privileges.includes(NO_PRIVILEGE_VALUE));
 
   if (isPrivilegeMissing && styleMissingPrivilege) {
-    displayValue = (
-      <EuiText>
-        <EuiIcon size={'s'} type={'minusInCircle'} /> none
-      </EuiText>
-    );
+    displayValue = <EuiIcon color="subdued" type={'minusInCircle'} />;
   } else {
     displayValue = privileges.map(p => _.capitalize(p)).join(', ');
   }
@@ -79,7 +75,17 @@ function getIconTip(iconType?: IconType, tooltipContent?: ReactNode) {
     return null;
   }
 
-  return <EuiIconTip type={iconType} content={tooltipContent} size={'s'} />;
+  return (
+    <EuiIconTip
+      // TODO: Waiting on update from EUI
+      // iconProps={{
+      //   className: 'eui-alignTop',
+      // }}
+      type={iconType}
+      content={tooltipContent}
+      size={'s'}
+    />
+  );
 }
 
 function coerceToArray(privilege: string | string[]): string[] {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import './change_password_form/index';
		@import './edit_role/index';