From 21c69291fa0afe5d43ecde8633f8aea74098c3ea Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Tue, 31 Jul 2018 16:51:27 -0400
Subject: [PATCH] Updating design of popover (#9)

and added manage button that needs to be hooked up
---
 .../nav_control/components/spaces_menu.js      | 18 ++++++++++++++----
 .../nav_control/components/spaces_menu.less    |  2 +-
 .../views/nav_control/nav_control_popover.js   |  3 ++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.js b/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.js
index 54b07704dab3e..506559a51808a 100644
--- a/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.js
+++ b/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.js
@@ -10,7 +10,7 @@ import {
   EuiContextMenuPanel,
   EuiContextMenuItem,
   EuiFieldSearch,
-  EuiHorizontalRule,
+  EuiButton,
 } from '@elastic/eui';
 import { SpaceAvatar } from '../../components/space_avatar';
 import { SPACE_SEARCH_COUNT_THRESHOLD } from '../../../../common/constants';
@@ -32,6 +32,8 @@ export class SpacesMenu extends Component {
       items = [this.renderSearchField(), this.renderSpacesListPanel(items, searchTerm)];
     }
 
+    items.push(this.renderManageButton());
+
     return (
       <EuiContextMenuPanel
         className="spacesMenu"
@@ -76,15 +78,23 @@ export class SpacesMenu extends Component {
 
   renderSearchField = () => {
     return (
-      <EuiContextMenuPanel key="spacesMenuSearchField">
+      <EuiContextMenuItem key="spacesMenuSearchField">
         <EuiFieldSearch
           className="spacesMenu__searchField"
           placeholder="Find a space"
           incremental={true}
           onSearch={this.onSearch}
+          compressed
         />
-        <EuiHorizontalRule />
-      </EuiContextMenuPanel>
+      </EuiContextMenuItem>
+    );
+  }
+
+  renderManageButton = () => {
+    return (
+      <EuiContextMenuItem>
+        <EuiButton size="s" style={{ width: `100%` }}>Manage spaces</EuiButton>
+      </EuiContextMenuItem>
     );
   }
 
diff --git a/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.less b/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.less
index a505b9d123666..3090613a0a86e 100644
--- a/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.less
+++ b/x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.less
@@ -1,4 +1,4 @@
 .spacesMenu__spacesList {
-  max-height: 300px;
+  max-height: 320px;
   overflow-y: auto;
 }
diff --git a/x-pack/plugins/spaces/public/views/nav_control/nav_control_popover.js b/x-pack/plugins/spaces/public/views/nav_control/nav_control_popover.js
index 4a78af04fdb89..f15d1df0bb190 100644
--- a/x-pack/plugins/spaces/public/views/nav_control/nav_control_popover.js
+++ b/x-pack/plugins/spaces/public/views/nav_control/nav_control_popover.js
@@ -66,9 +66,10 @@ export class NavControlPopover extends Component {
       <EuiPopover
         button={button}
         isOpen={this.state.isOpen}
-        panelPaddingSize={'none'}
         closePopover={this.closePortal}
         anchorPosition={'rightCenter'}
+        panelPaddingSize="none"
+        ownFocus
       >
         <SpacesMenu spaces={this.state.spaces} onSelectSpace={this.onSelectSpace} />
       </EuiPopover>