-
-
Notifications
You must be signed in to change notification settings - Fork 177
/
AppBar.tsx
120 lines (110 loc) · 3.25 KB
/
AppBar.tsx
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { forwardRef, useContext, useState } from "react";
import { AppBar, AppBarClasses, LogoutClasses, UserMenu, useTranslate, useStore } from "react-admin";
import { type AppBarProps } from "react-admin";
import {Button, ListItemIcon, ListItemText, Menu, MenuItem, Typography} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExitIcon from "@mui/icons-material/PowerSettingsNew";
import { signOut, useSession } from "next-auth/react";
import DocContext from "../../components/admin/DocContext";
import HydraLogo from "../../components/admin/HydraLogo";
import OpenApiLogo from "../../components/admin/OpenApiLogo";
import Logo from "../../components/admin/Logo";
import {OIDC_SERVER_URL} from "../../config/keycloak";
const DocTypeMenuButton = () => {
const [anchorEl, setAnchorEl] = useState(null);
const [, setStoreDocType] = useStore("docType", "hydra");
const { docType, setDocType } = useContext(DocContext);
const open = Boolean(anchorEl);
// @ts-ignore
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const changeDocType = (docType: string) => () => {
setStoreDocType(docType);
setDocType(docType);
handleClose();
};
return (
<>
<Button
color="inherit"
aria-controls={open ? "doc-type-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}>
{docType === "hydra" ? (
<>
<HydraLogo/> Hydra
</>
) : (
<>
<OpenApiLogo/> OpenAPI
</>
)}
<ExpandMoreIcon fontSize="small"/>
</Button>
<Menu
id="doc-type-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "basic-button",
}}>
<MenuItem onClick={changeDocType("hydra")}>Hydra</MenuItem>
<MenuItem onClick={changeDocType("openapi")}>OpenAPI</MenuItem>
</Menu>
</>
);
};
const Logout = forwardRef((props, ref) => {
const { data: session } = useSession();
const translate = useTranslate();
if (!session) {
return;
}
const handleClick = () => signOut({
// @ts-ignore
callbackUrl: `${OIDC_SERVER_URL}/protocol/openid-connect/logout?id_token_hint=${session.idToken}&post_logout_redirect_uri=${window.location.origin}`,
});
return (
<MenuItem
className="logout"
onClick={handleClick}
ref={ref}
component="li"
{...props}
>
<ListItemIcon className={LogoutClasses.icon}>
<ExitIcon fontSize="small" />
</ListItemIcon>
<ListItemText>
{translate('ra.auth.logout', { _: 'Logout' })}
</ListItemText>
</MenuItem>
);
});
const CustomAppBar = ({ ...props }: AppBarProps) => {
return (
<AppBar userMenu={
<UserMenu>
<Logout/>
</UserMenu>
} {...props}>
<Typography
variant="h6"
color="inherit"
className={`${AppBarClasses.title} w-[200px]`}
id="react-admin-title"
/>
<div className="flex-1">
<Logo/>
</div>
<DocTypeMenuButton/>
</AppBar>
);
};
export default CustomAppBar;