devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

fix: dom nesting bugs

Browse Source
This commit is contained in:
anik-ghosh-au7 2022-05-12 12:27:25 +05:30
parent de44c40de5
commit 0433d64737
1 changed files with 330 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
dashboard/src/components/Menu.tsx
View File

@ -1,4 +1,4 @@
import React, { ReactNode } from "react"; import React, { Fragment, ReactNode } from 'react';
import { import {
IconButton, IconButton,
Box, Box,
@ -23,7 +23,7 @@ import {
AccordionItem, AccordionItem,
AccordionIcon, AccordionIcon,
useMediaQuery, useMediaQuery,
} from "@chakra-ui/react"; } from '@chakra-ui/react';
import { import {
FiHome, FiHome,
FiUser, FiUser,
@ -34,21 +34,21 @@ import {
FiUsers, FiUsers,
FiChevronDown, FiChevronDown,
FiShieldOff, FiShieldOff,
} from "react-icons/fi"; } from 'react-icons/fi';
import { BiCustomize } from "react-icons/bi"; import { BiCustomize } from 'react-icons/bi';
import { AiOutlineKey } from "react-icons/ai"; import { AiOutlineKey } from 'react-icons/ai';
import { SiOpenaccess, SiJsonwebtokens } from "react-icons/si"; import { SiOpenaccess, SiJsonwebtokens } from 'react-icons/si';
import { MdSecurity } from "react-icons/md"; import { MdSecurity } from 'react-icons/md';
import { RiDatabase2Line } from "react-icons/ri"; import { RiDatabase2Line } from 'react-icons/ri';
import { BsCheck2Circle } from "react-icons/bs"; import { BsCheck2Circle } from 'react-icons/bs';
import { HiOutlineMail, HiOutlineOfficeBuilding } from "react-icons/hi"; import { HiOutlineMail, HiOutlineOfficeBuilding } from 'react-icons/hi';
import { IconType } from "react-icons"; import { IconType } from 'react-icons';
import { ReactText } from "react"; import { ReactText } from 'react';
import { useMutation, useQuery } from "urql"; import { useMutation, useQuery } from 'urql';
import { NavLink, useNavigate, useLocation } from "react-router-dom"; import { NavLink, useNavigate, useLocation } from 'react-router-dom';
import { useAuthContext } from "../contexts/AuthContext"; import { useAuthContext } from '../contexts/AuthContext';
import { AdminLogout } from "../graphql/mutation"; import { AdminLogout } from '../graphql/mutation';
import { MetaQuery } from "../graphql/queries"; import { MetaQuery } from '../graphql/queries';
interface SubRoutes { interface SubRoutes {
name: string; name: string;
@ -64,57 +64,57 @@ interface LinkItemProps {
} }
const LinkItems: Array<LinkItemProps> = [ const LinkItems: Array<LinkItemProps> = [
{ {
name: "Environment ", name: 'Environment ',
icon: FiSettings, icon: FiSettings,
route: "/", route: '/',
subRoutes: [ subRoutes: [
{ {
name: "OAuth Config", name: 'OAuth Config',
icon: AiOutlineKey, icon: AiOutlineKey,
route: "/oauth-setting", route: '/oauth-setting',
}, },
{ name: "Roles", icon: FiUser, route: "/roles" }, { name: 'Roles', icon: FiUser, route: '/roles' },
{ {
name: "JWT Secrets", name: 'JWT Secrets',
icon: SiJsonwebtokens, icon: SiJsonwebtokens,
route: "/jwt-config", route: '/jwt-config',
}, },
{ {
name: "Session Storage", name: 'Session Storage',
icon: RiDatabase2Line, icon: RiDatabase2Line,
route: "/session-storage", route: '/session-storage',
}, },
{ {
name: "Email Configurations", name: 'Email Configurations',
icon: HiOutlineMail, icon: HiOutlineMail,
route: "/email-config", route: '/email-config',
}, },
{ {
name: "Domain White Listing", name: 'Domain White Listing',
icon: BsCheck2Circle, icon: BsCheck2Circle,
route: "/whitelist-variables", route: '/whitelist-variables',
}, },
{ {
name: "Organization Info", name: 'Organization Info',
icon: HiOutlineOfficeBuilding, icon: HiOutlineOfficeBuilding,
route: "/organization-info", route: '/organization-info',
}, },
{ name: "Access Token", icon: SiOpenaccess, route: "/access-token" }, { name: 'Access Token', icon: SiOpenaccess, route: '/access-token' },
{ {
name: "UI Customization", name: 'UI Customization',
icon: BiCustomize, icon: BiCustomize,
route: "/ui-customization", route: '/ui-customization',
}, },
{ name: "Database", icon: RiDatabase2Line, route: "/db-cred" }, { name: 'Database', icon: RiDatabase2Line, route: '/db-cred' },
{ {
name: " Security", name: ' Security',
icon: MdSecurity, icon: MdSecurity,
route: "/admin-secret", route: '/admin-secret',
}, },
], ],
}, },
{ name: "Users", icon: FiUsers, route: "/users" }, { name: 'Users', icon: FiUsers, route: '/users' },
]; ];
interface SidebarProps extends BoxProps { interface SidebarProps extends BoxProps {
@ -124,14 +124,14 @@ interface SidebarProps extends BoxProps {
export const Sidebar = ({ onClose, ...rest }: SidebarProps) => { export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
const { pathname } = useLocation(); const { pathname } = useLocation();
const [{ fetching, data }] = useQuery({ query: MetaQuery }); const [{ fetching, data }] = useQuery({ query: MetaQuery });
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
return ( return (
<Box <Box
transition="3s ease" transition="3s ease"
bg={useColorModeValue("white", "gray.900")} bg={useColorModeValue('white', 'gray.900')}
borderRight="1px" borderRight="1px"
borderRightColor={useColorModeValue("gray.200", "gray.700")} borderRightColor={useColorModeValue('gray.200', 'gray.700')}
w={{ base: "full", md: 60 }} w={{ base: 'full', md: 60 }}
pos="fixed" pos="fixed"
h="full" h="full"
{...rest} {...rest}
@ -149,29 +149,31 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
</Text> </Text>
</Flex> </Flex>
</NavLink> </NavLink>
<CloseButton display={{ base: "flex", md: "none" }} onClick={onClose} /> <CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
</Flex> </Flex>
<Accordion defaultIndex={[0]} allowMultiple> <Accordion defaultIndex={[0]} allowMultiple>
<AccordionItem textAlign="center" border="none" w="100%"> <AccordionItem textAlign="center" border="none" w="100%">
{LinkItems.map((link) => {LinkItems.map((link) =>
link?.subRoutes ? ( link?.subRoutes ? (
<NavLink key={link.name} to={link.route}> <div key={link.name}>
<AccordionButton> <AccordionButton>
<Text fontSize="md"> <Text as="div" fontSize="md">
<NavItem <NavItem
icon={link.icon} icon={link.icon}
color={pathname === link.route ? "blue.500" : ""} color={pathname === link.route ? 'blue.500' : ''}
style={{outline: "unset"}} style={{ outline: 'unset' }}
height={12} height={12}
ml={-1} ml={-1}
mb={isNotSmallerScreen ? -1 : -4} mb={isNotSmallerScreen ? -1 : -4}
w={isNotSmallerScreen ? "100%" : "310%"} w={isNotSmallerScreen ? '100%' : '310%'}
> >
<Fragment>
{link.name} {link.name}
<Box display={{ base: "none", md: "flex" }} ml={12}> <Box display={{ base: 'none', md: 'flex' }} ml={12}>
<FiChevronDown /> <FiChevronDown />
</Box> </Box>
</Fragment>
</NavItem> </NavItem>
</Text> </Text>
</AccordionButton> </AccordionButton>
@ -182,32 +184,32 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
to={sublink.route} to={sublink.route}
onClick={onClose} onClick={onClose}
> >
{" "} {' '}
<Text fontSize="xs" ml={2}> <Text as="div" fontSize="xs" ml={2}>
<NavItem <NavItem
icon={sublink.icon} icon={sublink.icon}
color={pathname === sublink.route ? "blue.500" : ""} color={pathname === sublink.route ? 'blue.500' : ''}
height={8} height={8}
> >
{sublink.name} {sublink.name}
</NavItem>{" "} </NavItem>{' '}
</Text> </Text>
</NavLink> </NavLink>
))} ))}
</AccordionPanel> </AccordionPanel>
</NavLink> </div>
) : ( ) : (
<NavLink key={link.name} to={link.route}> <NavLink key={link.name} to={link.route}>
{" "} {' '}
<Text fontSize="md" w="100%" mt={-2}> <Text as="div" fontSize="md" w="100%" mt={-2}>
<NavItem <NavItem
icon={link.icon} icon={link.icon}
color={pathname === link.route ? "blue.500" : ""} color={pathname === link.route ? 'blue.500' : ''}
height={12} height={12}
onClick={onClose} onClick={onClose}
> >
{link.name} {link.name}
</NavItem>{" "} </NavItem>{' '}
</Text> </Text>
</NavLink> </NavLink>
) )
@ -216,9 +218,9 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
href="/playground" href="/playground"
target="_blank" target="_blank"
style={{ style={{
textDecoration: "none", textDecoration: 'none',
}} }}
_focus={{ _boxShadow: "none" }} _focus={{ _boxShadow: 'none' }}
> >
<NavItem icon={FiCode}>API Playground</NavItem> <NavItem icon={FiCode}>API Playground</NavItem>
</Link> </Link>
@ -227,7 +229,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
{data?.meta?.version && ( {data?.meta?.version && (
<Flex alignContent="center"> <Flex alignContent="center">
{" "} {' '}
<Text <Text
color="gray.400" color="gray.400"
fontSize="sm" fontSize="sm"
@ -246,7 +248,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
interface NavItemProps extends FlexProps { interface NavItemProps extends FlexProps {
icon: IconType; icon: IconType;
children: ReactText; children: ReactText | JSX.Element | JSX.Element[];
} }
export const NavItem = ({ icon, children, ...rest }: NavItemProps) => { export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
return ( return (
@ -258,8 +260,8 @@ export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
role="group" role="group"
cursor="pointer" cursor="pointer"
_hover={{ _hover={{
bg: "blue.500", bg: 'blue.500',
color: "white", color: 'white',
}} }}
{...rest} {...rest}
> >
@ -268,7 +270,7 @@ export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
mr="4" mr="4"
fontSize="16" fontSize="16"
_groupHover={{ _groupHover={{
color: "white", color: 'white',
}} }}
as={icon} as={icon}
/> />
@ -289,7 +291,7 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
const handleLogout = async () => { const handleLogout = async () => {
await logout(); await logout();
setIsLoggedIn(false); setIsLoggedIn(false);
navigate("/", { replace: true }); navigate('/', { replace: true });
}; };
return ( return (
@ -301,15 +303,15 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
right="0" right="0"
left="0" left="0"
alignItems="center" alignItems="center"
bg={useColorModeValue("white", "gray.900")} bg={useColorModeValue('white', 'gray.900')}
borderBottomWidth="1px" borderBottomWidth="1px"
borderBottomColor={useColorModeValue("gray.200", "gray.700")} borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
justifyContent={{ base: "space-between", md: "flex-end" }} justifyContent={{ base: 'space-between', md: 'flex-end' }}
zIndex={99} zIndex={99}
{...rest} {...rest}
> >
<IconButton <IconButton
display={{ base: "flex", md: "none" }} display={{ base: 'flex', md: 'none' }}
onClick={onOpen} onClick={onOpen}
variant="outline" variant="outline"
aria-label="open menu" aria-label="open menu"
@ -320,35 +322,35 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
src="https://authorizer.dev/images/logo.png" src="https://authorizer.dev/images/logo.png"
alt="logo" alt="logo"
height="36px" height="36px"
display={{ base: "flex", md: "none" }} display={{ base: 'flex', md: 'none' }}
/> />
<HStack spacing={{ base: "0", md: "6" }}> <HStack spacing={{ base: '0', md: '6' }}>
<Flex alignItems={"center"}> <Flex alignItems={'center'}>
<Menu> <Menu>
<MenuButton <MenuButton
py={2} py={2}
transition="all 0.3s" transition="all 0.3s"
_focus={{ boxShadow: "none" }} _focus={{ boxShadow: 'none' }}
> >
<HStack mr={5}> <HStack mr={5}>
<FiUser /> <FiUser />
<VStack <VStack
display={{ base: "none", md: "flex" }} display={{ base: 'none', md: 'flex' }}
alignItems="flex-start" alignItems="flex-start"
spacing="1px" spacing="1px"
ml="2" ml="2"
> >
<Text fontSize="sm">Admin</Text> <Text fontSize="sm">Admin</Text>
</VStack> </VStack>
<Box display={{ base: "none", md: "flex" }}> <Box display={{ base: 'none', md: 'flex' }}>
<FiChevronDown /> <FiChevronDown />
</Box> </Box>
</HStack> </HStack>
</MenuButton> </MenuButton>
<MenuList <MenuList
bg={useColorModeValue("white", "gray.900")} bg={useColorModeValue('white', 'gray.900')}
borderColor={useColorModeValue("gray.200", "gray.700")} borderColor={useColorModeValue('gray.200', 'gray.700')}
> >
<MenuItem onClick={handleLogout}>Sign out</MenuItem> <MenuItem onClick={handleLogout}>Sign out</MenuItem>
</MenuList> </MenuList>