Navigate to profile without full page reload (#135543)

* Navigate to profile without full page reload

* Close popover after clicking account link

* update snapshots

x-pack/plugins/security/public/nav_control/nav_control_component.test.tsx

@@ -209,6 +209,7 @@ describe('SecurityNavControl', () => {
                   }
                 }
               />,
+              "onClick": [Function],
             },
             Object {
               "data-test-subj": "userMenuLink__link1",
@@ -326,6 +327,7 @@ describe('SecurityNavControl', () => {
                   }
                 }
               />,
+              "onClick": [Function],
             },
             Object {
               "data-test-subj": "logoutLink",

x-pack/plugins/security/public/nav_control/nav_control_component.tsx

@@ -45,7 +45,7 @@ export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
   userMenuLinks$,
 }) => {
   const userMenuLinks = useObservable(userMenuLinks$, []);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const userProfile = useUserProfile<{ avatar: UserAvatarData }>('avatar');
   const currentUser = useCurrentUser(); // User profiles do not exist for anonymous users so need to fetch current user as well
@@ -55,12 +55,12 @@ export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
   const button = (
     <EuiHeaderSectionItemButton
       aria-controls="headerUserMenu"
-      aria-expanded={isOpen}
+      aria-expanded={isPopoverOpen}
       aria-haspopup="true"
       aria-label={i18n.translate('xpack.security.navControlComponent.accountMenuAriaLabel', {
         defaultMessage: 'Account menu',
       })}
-      onClick={() => setIsOpen((value) => (currentUser.value ? !value : false))}
+      onClick={() => setIsPopoverOpen((value) => (currentUser.value ? !value : false))}
       data-test-subj="userMenuButton"
       style={{ lineHeight: 'normal' }}
     >
@@ -105,6 +105,9 @@ export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
       ),
       icon: <EuiIcon type={hasCustomProfileLinks ? 'controlsHorizontal' : 'user'} size="m" />,
       href: editProfileUrl,
+      onClick: () => {
+        setIsPopoverOpen(false);
+      },
       'data-test-subj': 'profileLink',
     };
 
@@ -138,10 +141,10 @@ export const SecurityNavControl: FunctionComponent<SecurityNavControlProps> = ({
       id="headerUserMenu"
       ownFocus
       button={button}
-      isOpen={isOpen}
+      isOpen={isPopoverOpen}
       anchorPosition="downRight"
       repositionOnScroll
-      closePopover={() => setIsOpen(false)}
+      closePopover={() => setIsPopoverOpen(false)}
       panelPaddingSize="none"
       buffer={0}
     >

x-pack/plugins/security/public/nav_control/nav_control_service.test.ts

@@ -75,41 +75,43 @@ describe('SecurityNavControlService', () => {
 
     expect(target).toMatchInlineSnapshot(`
       <div>
-        <div
-          class="euiPopover euiPopover--anchorDownRight"
-          id="headerUserMenu"
-        >
+        <div>
           <div
-            class="euiPopover__anchor"
+            class="euiPopover euiPopover--anchorDownRight"
+            id="headerUserMenu"
           >
-            <button
-              aria-controls="headerUserMenu"
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Account menu"
-              class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
-              data-test-subj="userMenuButton"
-              style="line-height: normal;"
-              type="button"
+            <div
+              class="euiPopover__anchor"
             >
-              <span
-                class="euiButtonContent euiButtonEmpty__content"
+              <button
+                aria-controls="headerUserMenu"
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Account menu"
+                class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
+                data-test-subj="userMenuButton"
+                style="line-height: normal;"
+                type="button"
               >
                 <span
-                  class="euiButtonEmpty__text"
+                  class="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
-                    class="euiHeaderSectionItemButton__content"
+                    class="euiButtonEmpty__text"
                   >
                     <span
-                      aria-label="Loading"
-                      class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
-                      role="progressbar"
-                    />
+                      class="euiHeaderSectionItemButton__content"
+                    >
+                      <span
+                        aria-label="Loading"
+                        class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
+                        role="progressbar"
+                      />
+                    </span>
                   </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>

x-pack/plugins/security/public/nav_control/nav_control_service.tsx

@@ -16,6 +16,7 @@ import { map, takeUntil } from 'rxjs/operators';
 import type { CoreStart, CoreTheme } from '@kbn/core/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 
 import type { SecurityLicense } from '../../common/licensing';
 import type { AuthenticationServiceSetup } from '../authentication';
@@ -166,7 +167,9 @@ export const Providers: FunctionComponent<ProvidersProps> = ({
     <AuthenticationProvider authc={authc}>
       <SecurityApiClientsProvider {...securityApiClients}>
         <I18nProvider>
-          <KibanaThemeProvider theme$={theme$}>{children}</KibanaThemeProvider>
+          <KibanaThemeProvider theme$={theme$}>
+            <RedirectAppLinks coreStart={services}>{children}</RedirectAppLinks>
+          </KibanaThemeProvider>
         </I18nProvider>
       </SecurityApiClientsProvider>
     </AuthenticationProvider>