feat(ui): hide user menu on docker extension [EE-4115] (#7563)

app/react/components/PageHeader/HeaderTitle.tsx

@@ -1,19 +1,7 @@
 import { PropsWithChildren } from 'react';
-import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuLink as ReachMenuLink,
-} from '@reach/menu-button';
-import clsx from 'clsx';
-import { User, ChevronDown } from 'react-feather';
-import { UISrefProps, useSref } from '@uirouter/react';
-
-import { useUser } from '@/portainer/hooks/useUser';
-import { AutomationTestingProps } from '@/types';
 
 import { useHeaderContext } from './HeaderContainer';
-import styles from './HeaderTitle.module.css';
+import { UserMenu } from './UserMenu';
 
 interface Props {
   title: string;
@@ -21,7 +9,6 @@ interface Props {
 
 export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
   useHeaderContext();
-  const { user } = useUser();
 
   return (
     <div className="flex justify-between whitespace-normal pt-3">
@@ -31,75 +18,7 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
         </div>
         {children && <span>{children}</span>}
       </div>
-      <Menu>
-        <MenuButton
-          className={clsx(
-            'ml-auto flex items-center gap-1 self-start',
-            styles.menuButton
-          )}
-          data-cy="userMenu-button"
-          aria-label="User menu toggle"
-        >
-          <div
-            className={clsx(
-              'icon-badge text-lg !p-2 mr-1',
-              'bg-gray-4 text-gray-8',
-              'th-dark:bg-gray-warm-10 th-dark:text-gray-warm-7'
-            )}
-          >
-            <User className="feather" />
-          </div>
-          {user && <span>{user.Username}</span>}
-          <ChevronDown className={styles.arrowDown} />
-        </MenuButton>
-
-        <MenuList
-          className={styles.menuList}
-          aria-label="User Menu"
-          data-cy="userMenu"
-        >
-          {!window.ddExtension && (
-            <MenuLink
-              to="portainer.account"
-              label="My account"
-              data-cy="userMenu-myAccount"
-            />
-          )}
-
-          <MenuLink
-            to="portainer.logout"
-            label="Log out"
-            data-cy="userMenu-logOut"
-            params={{ performApiLogout: true }}
-          />
-        </MenuList>
-      </Menu>
+      {!window.ddExtension && <UserMenu />}
     </div>
   );
 }
-
-interface MenuLinkProps extends AutomationTestingProps, UISrefProps {
-  label: string;
-}
-
-function MenuLink({
-  to,
-  label,
-  params,
-  options,
-  'data-cy': dataCy,
-}: MenuLinkProps) {
-  const anchorProps = useSref(to, params, options);
-
-  return (
-    <ReachMenuLink
-      href={anchorProps.href}
-      onClick={anchorProps.onClick}
-      className={styles.menuLink}
-      aria-label={label}
-      data-cy={dataCy}
-    >
-      {label}
-    </ReachMenuLink>
-  );
-}

app/react/components/PageHeader/UserMenu.tsx

@@ -0,0 +1,88 @@
+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuLink as ReachMenuLink,
+} from '@reach/menu-button';
+import { UISrefProps, useSref } from '@uirouter/react';
+import clsx from 'clsx';
+import { User, ChevronDown } from 'react-feather';
+
+import { AutomationTestingProps } from '@/types';
+import { useUser } from '@/portainer/hooks/useUser';
+
+import styles from './HeaderTitle.module.css';
+
+export function UserMenu() {
+  const { user } = useUser();
+
+  return (
+    <Menu>
+      <MenuButton
+        className={clsx(
+          'ml-auto flex items-center gap-1 self-start',
+          styles.menuButton
+        )}
+        data-cy="userMenu-button"
+        aria-label="User menu toggle"
+      >
+        <div
+          className={clsx(
+            'icon-badge text-lg !p-2 mr-1',
+            'bg-gray-4 text-gray-8',
+            'th-dark:bg-gray-warm-10 th-dark:text-gray-warm-7'
+          )}
+        >
+          <User className="feather" />
+        </div>
+        {user && <span>{user.Username}</span>}
+        <ChevronDown className={styles.arrowDown} />
+      </MenuButton>
+
+      <MenuList
+        className={styles.menuList}
+        aria-label="User Menu"
+        data-cy="userMenu"
+      >
+        <MenuLink
+          to="portainer.account"
+          label="My account"
+          data-cy="userMenu-myAccount"
+        />
+
+        <MenuLink
+          to="portainer.logout"
+          label="Log out"
+          data-cy="userMenu-logOut"
+          params={{ performApiLogout: true }}
+        />
+      </MenuList>
+    </Menu>
+  );
+}
+
+interface MenuLinkProps extends AutomationTestingProps, UISrefProps {
+  label: string;
+}
+
+function MenuLink({
+  to,
+  label,
+  params,
+  options,
+  'data-cy': dataCy,
+}: MenuLinkProps) {
+  const anchorProps = useSref(to, params, options);
+
+  return (
+    <ReachMenuLink
+      href={anchorProps.href}
+      onClick={anchorProps.onClick}
+      className={styles.menuLink}
+      aria-label={label}
+      data-cy={dataCy}
+    >
+      {label}
+    </ReachMenuLink>
+  );
+}