Hide popover when clicking the Manage Spaces button (#24166) (#24182)

Fixes #24135 

This PR closes the space selector popover after clicking the Manage Spaces button. Previously, the popover would stay open, which is confusing and annoying

x-pack/plugins/spaces/public/components/manage_spaces_button.tsx

@@ -14,6 +14,7 @@ interface Props {
   size?: 's' | 'l';
   style?: CSSProperties;
   userProfile: UserProfile;
+  onClick?: () => void;
 }
 
 export class ManageSpacesButton extends Component<Props, {}> {
@@ -36,6 +37,9 @@ export class ManageSpacesButton extends Component<Props, {}> {
   }
 
   private navigateToManageSpaces = () => {
+    if (this.props.onClick) {
+      this.props.onClick();
+    }
     window.location.replace(MANAGE_SPACES_URL);
   };
 }

x-pack/plugins/spaces/public/views/nav_control/__snapshots__/nav_control_popover.test.tsx.snap

@@ -47,6 +47,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
   repositionOnScroll={true}
 >
   <Component
+    onManageSpacesClick={[Function]}
     userProfile={
       Object {
         "hasCapability": [Function],

x-pack/plugins/spaces/public/views/nav_control/components/__snapshots__/spaces_description.test.tsx.snap

@@ -20,6 +20,7 @@ exports[`SpacesDescription renders without crashing 1`] = `
     key="manageSpacesButton"
   >
     <ManageSpacesButton
+      onClick={[MockFunction]}
       size="s"
       style={
         Object {

x-pack/plugins/spaces/public/views/nav_control/components/spaces_description.test.tsx

@@ -11,7 +11,12 @@ import { SpacesDescription } from './spaces_description';
 describe('SpacesDescription', () => {
   it('renders without crashing', () => {
     expect(
-      shallow(<SpacesDescription userProfile={{ hasCapability: () => true }} />)
+      shallow(
+        <SpacesDescription
+          userProfile={{ hasCapability: () => true }}
+          onManageSpacesClick={jest.fn()}
+        />
+      )
     ).toMatchSnapshot();
   });
 });

x-pack/plugins/spaces/public/views/nav_control/components/spaces_description.tsx

@@ -13,6 +13,7 @@ import './spaces_description.less';
 
 interface Props {
   userProfile: UserProfile;
+  onManageSpacesClick: () => void;
 }
 
 export const SpacesDescription: SFC<Props> = (props: Props) => {
@@ -27,7 +28,12 @@ export const SpacesDescription: SFC<Props> = (props: Props) => {
         <p>{SPACES_FEATURE_DESCRIPTION}</p>
       </EuiText>
       <div key="manageSpacesButton" className="spacesDescription__manageButtonWrapper">
-        <ManageSpacesButton size="s" style={{ width: `100%` }} userProfile={props.userProfile} />
+        <ManageSpacesButton
+          size="s"
+          style={{ width: `100%` }}
+          userProfile={props.userProfile}
+          onClick={props.onManageSpacesClick}
+        />
       </div>
     </EuiContextMenuPanel>
   );

x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.tsx

@@ -15,6 +15,7 @@ import './spaces_menu.less';
 interface Props {
   spaces: Space[];
   onSelectSpace: (space: Space) => void;
+  onManageSpacesClick: () => void;
   userProfile: UserProfile;
 }
 
@@ -139,6 +140,7 @@ export class SpacesMenu extends Component<Props, State> {
           size="s"
           style={{ width: `100%` }}
           userProfile={this.props.userProfile}
+          onClick={this.props.onManageSpacesClick}
         />
       </div>
     );

x-pack/plugins/spaces/public/views/nav_control/nav_control_popover.tsx

@@ -59,13 +59,19 @@ export class NavControlPopover extends Component<Props, State> {
 
     let element: React.ReactNode;
     if (this.state.spaces.length < 2) {
-      element = <SpacesDescription userProfile={this.props.userProfile} />;
+      element = (
+        <SpacesDescription
+          userProfile={this.props.userProfile}
+          onManageSpacesClick={this.toggleSpaceSelector}
+        />
+      );
     } else {
       element = (
         <SpacesMenu
           spaces={this.state.spaces}
           onSelectSpace={this.onSelectSpace}
           userProfile={this.props.userProfile}
+          onManageSpacesClick={this.toggleSpaceSelector}
         />
       );
     }