119 lines
3.0 KiB
TypeScript
119 lines
3.0 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
import { ChakraProvider, Select } from '@chakra-ui/react';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Modal,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
Stack,
|
|
Text,
|
|
useDisclosure,
|
|
} from '@chakra-ui/react';
|
|
|
|
import { environment } from '@/environment';
|
|
import { App as SpaApp } from '@/scene/App';
|
|
import { USERS } from '@/service/session';
|
|
import theme from '@/theme';
|
|
import { hashLocalData } from '@/utils/sso';
|
|
|
|
const AppEnvHint = () => {
|
|
const modal = useDisclosure();
|
|
const [selectUserTest, setSelectUserTest] = useState<string>('NO_USER');
|
|
//const setUser = useRightsStore((store) => store.setUser);
|
|
const buildEnv =
|
|
process.env.NODE_ENV === 'development'
|
|
? 'Development'
|
|
: import.meta.env.VITE_DEV_ENV_NAME;
|
|
const envName: Array<string> = [];
|
|
!!buildEnv && envName.push(buildEnv);
|
|
if (!envName.length) {
|
|
return null;
|
|
}
|
|
const handleChange = (selectedOption) => {
|
|
console.log(`SELECT: [${selectedOption.target.value}]`);
|
|
setSelectUserTest(selectedOption.target.value);
|
|
};
|
|
const onClose = () => {
|
|
modal.onClose();
|
|
if (selectUserTest == 'NO_USER') {
|
|
window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
|
|
} else {
|
|
window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
zIndex="100000"
|
|
position="fixed"
|
|
top="0"
|
|
insetStart="0"
|
|
insetEnd="0"
|
|
h="2px"
|
|
bg="warning.400"
|
|
as="button"
|
|
cursor="pointer"
|
|
data-test-id="devtools"
|
|
onClick={modal.onOpen}
|
|
>
|
|
<Text
|
|
position="fixed"
|
|
top="0"
|
|
insetStart="4"
|
|
bg="warning.400"
|
|
color="warning.900"
|
|
fontSize="0.6rem"
|
|
fontWeight="bold"
|
|
px="10px"
|
|
marginLeft="25%"
|
|
borderBottomStartRadius="sm"
|
|
borderBottomEndRadius="sm"
|
|
textTransform="uppercase"
|
|
>
|
|
{envName.join(' : ')}
|
|
</Text>
|
|
</Box>
|
|
<Modal isOpen={modal.isOpen} onClose={modal.onClose}>
|
|
<ModalOverlay />
|
|
<ModalContent>
|
|
<ModalHeader>Outils développeurs</ModalHeader>
|
|
<ModalCloseButton />
|
|
<ModalBody>
|
|
<Stack>
|
|
<Text>Utilisateur</Text>
|
|
<Select placeholder="Select test user" onChange={handleChange}>
|
|
{Object.keys(USERS).map((key) => (
|
|
<option value={key} key={key}>
|
|
{key}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
</Stack>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button onClick={onClose}>Apply</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const App = () => {
|
|
return (
|
|
<ChakraProvider theme={theme}>
|
|
<AppEnvHint />
|
|
<SpaApp />
|
|
</ChakraProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|