karusic/front2/src/App.tsx

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;