[Enterprise Search] Design Pass: Role mappings (#96882) (#96962)

* Update shared button color and panel shading * Vertically align table cells to top * [App Search] Update panels to have backgrounds not borders * [Workplace Search] Update panels to have backgrounds not borders * re-align last cell to right Accidentally deleted it refactoring * Conditionally have border for App Search Requested to remove for empty state Co-authored-by: Scotty Bollinger <scotty.bollinger@elastic.co>
elastic · Apr 13, 2021 · c3f609f · c3f609f
1 parent 558acf5
commit c3f609f
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 22 deletions.
diff --git a/...nterprise_search/public/applications/app_search/components/role_mappings/role_mapping.tsx b/...nterprise_search/public/applications/app_search/components/role_mappings/role_mapping.tsx
@@ -166,7 +166,7 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
         <EuiSpacer />
         <EuiFlexGroup alignItems="stretch">
           <EuiFlexItem>
-            <EuiPanel hasBorder paddingSize="l">
+            <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
               <EuiTitle size="s">
                 <h3>{ROLE_TITLE}</h3>
               </EuiTitle>
@@ -189,7 +189,7 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
           </EuiFlexItem>
           {hasAdvancedRoles && (
             <EuiFlexItem>
-              <EuiPanel hasBorder paddingSize="l">
+              <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
                 <EuiTitle size="s">
                   <h3>{ENGINE_ACCESS_TITLE}</h3>
                 </EuiTitle>

diff --git a/...terprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx b/...terprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx
@@ -17,6 +17,7 @@ import {
   EuiPageContent,
   EuiPageContentBody,
   EuiPageHeader,
+  EuiPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -78,12 +79,14 @@ export const RoleMappings: React.FC = () => {
   const addMappingButton = <AddRoleMappingButton path={ROLE_MAPPING_NEW_PATH} />;
 
   const roleMappingEmptyState = (
-    <EuiEmptyPrompt
-      iconType="usersRolesApp"
-      title={<h2>{EMPTY_ROLE_MAPPINGS_TITLE}</h2>}
-      body={<p>{EMPTY_ROLE_MAPPINGS_BODY}</p>}
-      actions={addMappingButton}
-    />
+    <EuiPanel paddingSize="l" color="subdued" hasBorder={false}>
+      <EuiEmptyPrompt
+        iconType="usersRolesApp"
+        title={<h2>{EMPTY_ROLE_MAPPINGS_TITLE}</h2>}
+        body={<p>{EMPTY_ROLE_MAPPINGS_BODY}</p>}
+        actions={addMappingButton}
+      />
+    </EuiPanel>
   );
 
   const roleMappingsTable = (
@@ -127,7 +130,7 @@ export const RoleMappings: React.FC = () => {
         pageTitle={ROLE_MAPPINGS_TITLE}
         description={ROLE_MAPPINGS_DESCRIPTION}
       />
-      <EuiPageContent hasBorder>
+      <EuiPageContent hasShadow={false} hasBorder={roleMappings.length > 0}>
         <EuiPageContentBody>
           <FlashMessages />
           {roleMappings.length === 0 ? roleMappingEmptyState : roleMappingsTable}

diff --git a/...ins/enterprise_search/public/applications/shared/role_mapping/add_role_mapping_button.tsx b/...ins/enterprise_search/public/applications/shared/role_mapping/add_role_mapping_button.tsx
@@ -16,7 +16,7 @@ interface Props {
 }
 
 export const AddRoleMappingButton: React.FC<Props> = ({ path }) => (
-  <EuiButtonTo to={path} fill color="secondary">
+  <EuiButtonTo to={path} fill>
     {ADD_ROLE_MAPPING_BUTTON}
   </EuiButtonTo>
 );
diff --git a/.../plugins/enterprise_search/public/applications/shared/role_mapping/attribute_selector.tsx b/.../plugins/enterprise_search/public/applications/shared/role_mapping/attribute_selector.tsx
@@ -100,7 +100,7 @@ export const AttributeSelector: React.FC<Props> = ({
   handleAuthProviderChange = () => null,
 }) => {
   return (
-    <EuiPanel data-test-subj="AttributeSelector" hasBorder paddingSize="l">
+    <EuiPanel data-test-subj="AttributeSelector" hasShadow={false} color="subdued" paddingSize="l">
       <EuiTitle size="s">
         <h3>{ATTRIBUTE_SELECTOR_TITLE}</h3>
       </EuiTitle>

diff --git a/...lugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_table.scss b/...lugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_table.scss
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+.roleMappingsTable {
+  td {
+    vertical-align: top;
+  }
+}
diff --git a/...plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_table.tsx b/...plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_table.tsx
@@ -29,6 +29,8 @@ import { MANAGE_BUTTON_LABEL } from '../constants';
 import { EuiLinkTo } from '../react_router_helpers';
 import { RoleRules } from '../types';
 
+import './role_mappings_table.scss';
+
 import {
   ANY_AUTH_PROVIDER,
   ANY_AUTH_PROVIDER_OPTION_LABEL,
@@ -108,7 +110,7 @@ export const RoleMappingsTable: React.FC<Props> = ({
       </EuiFlexGroup>
       <EuiSpacer />
       {filteredResults.length > 0 ? (
-        <EuiTable>
+        <EuiTable className="roleMappingsTable">
           <EuiTableHeader>
             <EuiTableHeaderCell>{EXTERNAL_ATTRIBUTE_LABEL}</EuiTableHeaderCell>
             <EuiTableHeaderCell>{ATTRIBUTE_VALUE_LABEL}</EuiTableHeaderCell>
@@ -152,7 +154,7 @@ export const RoleMappingsTable: React.FC<Props> = ({
                       {authProvider.map(getAuthProviderDisplayValue).join(', ')}
                     </EuiTableRowCell>
                   )}
-                  <EuiTableRowCell>
+                  <EuiTableRowCell align="right">
                     {id && <EuiLinkTo to={getRoleMappingPath(id)}>{MANAGE_BUTTON_LABEL}</EuiLinkTo>}
                     {toolTip && <EuiIconTip position="left" content={toolTip.content} />}
                   </EuiTableRowCell>

diff --git a/...terprise_search/public/applications/workplace_search/views/role_mappings/role_mapping.tsx b/...terprise_search/public/applications/workplace_search/views/role_mappings/role_mapping.tsx
@@ -141,7 +141,7 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
         <EuiSpacer />
         <EuiFlexGroup alignItems="stretch">
           <EuiFlexItem>
-            <EuiPanel hasBorder paddingSize="l">
+            <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
               <EuiTitle size="s">
                 <h3>{ROLE_LABEL}</h3>
               </EuiTitle>
@@ -158,7 +158,7 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
             </EuiPanel>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiPanel hasBorder paddingSize="l">
+            <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
               <EuiTitle size="s">
                 <h3>{GROUP_ASSIGNMENT_TITLE}</h3>
               </EuiTitle>

diff --git a/...erprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx b/...erprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx
@@ -9,7 +9,7 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiEmptyPrompt } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
 
 import { FlashMessages } from '../../../shared/flash_messages';
 import { Loading } from '../../../shared/loading';
@@ -39,12 +39,14 @@ export const RoleMappings: React.FC = () => {
 
   const addMappingButton = <AddRoleMappingButton path={ROLE_MAPPING_NEW_PATH} />;
   const emptyPrompt = (
-    <EuiEmptyPrompt
-      iconType="usersRolesApp"
-      title={<h2>{EMPTY_ROLE_MAPPINGS_TITLE}</h2>}
-      body={<p>{EMPTY_ROLE_MAPPINGS_BODY}</p>}
-      actions={addMappingButton}
-    />
+    <EuiPanel paddingSize="l" color="subdued" hasBorder={false}>
+      <EuiEmptyPrompt
+        iconType="usersRolesApp"
+        title={<h2>{EMPTY_ROLE_MAPPINGS_TITLE}</h2>}
+        body={<p>{EMPTY_ROLE_MAPPINGS_BODY}</p>}
+        actions={addMappingButton}
+      />
+    </EuiPanel>
   );
   const roleMappingsTable = (
     <RoleMappingsTable