121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Dialog,
|
|
Select,
|
|
Span,
|
|
Stack,
|
|
Text,
|
|
createListCollection,
|
|
useDisclosure,
|
|
} from '@chakra-ui/react';
|
|
|
|
import { useLogin } from '@/scene/connection/useLogin';
|
|
import { useSessionService } from '@/service/session';
|
|
|
|
export const USERS_COLLECTION = createListCollection({
|
|
items: [
|
|
{ label: 'karadmin', value: 'adminA@666' },
|
|
{ label: 'karuser', value: 'userA@666' },
|
|
{ label: 'NO_USER', value: '' },
|
|
],
|
|
});
|
|
|
|
export const EnvDevelopment = () => {
|
|
const dialog = useDisclosure();
|
|
|
|
const { clearToken } = useSessionService();
|
|
const { connect, lastError } = useLogin();
|
|
|
|
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 = (key: string, value: string) => {
|
|
console.log(`SELECT: [${key}:${value}]`);
|
|
if (key === 'NO_USER') {
|
|
clearToken();
|
|
} else {
|
|
connect(key, value);
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
<Box
|
|
as="button"
|
|
zIndex="100000"
|
|
position="fixed"
|
|
top="0"
|
|
insetStart="0"
|
|
insetEnd="0"
|
|
h="2px"
|
|
bg="warning.400"
|
|
cursor="pointer"
|
|
data-test-id="devtools"
|
|
onClick={dialog.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>
|
|
|
|
<Dialog.Root open={dialog.open} onOpenChange={dialog.onClose}>
|
|
<Dialog.Positioner>
|
|
<Dialog.Backdrop />
|
|
<Dialog.Content>
|
|
<Dialog.Header>Development tools</Dialog.Header>
|
|
<Dialog.Body>
|
|
<Stack>
|
|
<Text>
|
|
User{' '}
|
|
<Span color="red" fontWeight="bold">
|
|
{lastError}
|
|
</Span>
|
|
</Text>
|
|
<Select.Root collection={USERS_COLLECTION}>
|
|
<Select.Trigger>
|
|
<Select.ValueText placeholder="Select test user" />
|
|
</Select.Trigger>
|
|
<Select.Content>
|
|
{USERS_COLLECTION.items.map((value) => (
|
|
<Select.Item
|
|
item={value}
|
|
key={value.value}
|
|
onClick={() => handleChange(value.label, value.value)}
|
|
>
|
|
{value.label}
|
|
</Select.Item>
|
|
))}
|
|
</Select.Content>
|
|
</Select.Root>
|
|
</Stack>
|
|
</Dialog.Body>
|
|
<Dialog.Footer>
|
|
<Button onClick={dialog.onClose}>Close</Button>
|
|
</Dialog.Footer>
|
|
</Dialog.Content>
|
|
</Dialog.Positioner>
|
|
</Dialog.Root>
|
|
</>
|
|
);
|
|
};
|