mirror of https://github.com/portainer/portainer
feat(ui): hide user menu on docker extension [EE-4115] (#7563)
parent
6174940ac2
commit
6536d36c24
|
@ -1,19 +1,7 @@
|
||||||
import { PropsWithChildren } from 'react';
|
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 { useHeaderContext } from './HeaderContainer';
|
||||||
import styles from './HeaderTitle.module.css';
|
import { UserMenu } from './UserMenu';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
@ -21,7 +9,6 @@ interface Props {
|
||||||
|
|
||||||
export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
|
export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
|
||||||
useHeaderContext();
|
useHeaderContext();
|
||||||
const { user } = useUser();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-between whitespace-normal pt-3">
|
<div className="flex justify-between whitespace-normal pt-3">
|
||||||
|
@ -31,75 +18,7 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
|
||||||
</div>
|
</div>
|
||||||
{children && <span>{children}</span>}
|
{children && <span>{children}</span>}
|
||||||
</div>
|
</div>
|
||||||
<Menu>
|
{!window.ddExtension && <UserMenu />}
|
||||||
<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>
|
|
||||||
</div>
|
</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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue