1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
import {
Button,
Icon,
Menu,
MenuItem,
MenuSection,
MenuSeparator,
MenuTrigger,
Popover,
} from '@umami/react-zen';
import type { Key } from 'react';
import { useConfig, useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import {
BookText,
ExternalLink,
LifeBuoy,
LockKeyhole,
LogOut,
Settings,
UserCircle,
} from '@/components/icons';
import { DOCS_URL } from '@/lib/constants';
export function SettingsButton() {
const { formatMessage, labels } = useMessages();
const { user } = useLoginQuery();
const { router } = useNavigation();
const { cloudMode } = useConfig();
const handleAction = (id: Key) => {
const url = id.toString();
if (cloudMode) {
if (url === '/docs') {
window.open(DOCS_URL, '_blank');
} else {
window.location.href = url;
}
} else {
router.push(url);
}
};
return (
<MenuTrigger>
<Button data-test="button-profile" variant="quiet" autoFocus={false}>
<Icon>
<UserCircle />
</Icon>
</Button>
<Popover placement="bottom end">
<Menu autoFocus="last" onAction={handleAction}>
<MenuSection title={user.username}>
<MenuSeparator />
<MenuItem id="/settings" icon={<Settings />} label={formatMessage(labels.settings)} />
{!cloudMode && user.isAdmin && (
<MenuItem id="/admin" icon={<LockKeyhole />} label={formatMessage(labels.admin)} />
)}
{cloudMode && (
<>
<MenuItem
id="/docs"
icon={<BookText />}
label={formatMessage(labels.documentation)}
>
<Icon color="muted">
<ExternalLink />
</Icon>
</MenuItem>
<MenuItem
id="/settings/support"
icon={<LifeBuoy />}
label={formatMessage(labels.support)}
/>
</>
)}
<MenuSeparator />
<MenuItem id="/logout" icon={<LogOut />} label={formatMessage(labels.logout)} />
</MenuSection>
</Menu>
</Popover>
</MenuTrigger>
);
}
|