fix: Handle emtpy object in security array

This commit is contained in:
Valdir Mendes 2021-07-07 16:22:26 -03:00
parent bb67e29bbf
commit 60680d9322

View File

@ -8,8 +8,8 @@ import { SecurityRequirementModel } from '../../services/models/SecurityRequirem
import { linksCss } from '../Markdown/styled.elements'; import { linksCss } from '../Markdown/styled.elements';
const ScopeName = styled.code` const ScopeName = styled.code`
font-size: ${props => props.theme.typography.code.fontSize}; font-size: ${(props) => props.theme.typography.code.fontSize};
font-family: ${props => props.theme.typography.code.fontFamily}; font-family: ${(props) => props.theme.typography.code.fontFamily};
border: 1px solid ${({ theme }) => theme.colors.border.dark}; border: 1px solid ${({ theme }) => theme.colors.border.dark};
margin: 0 3px; margin: 0 3px;
padding: 0.2em; padding: 0.2em;
@ -67,18 +67,22 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
const security = this.props.security; const security = this.props.security;
return ( return (
<SecurityRequirementOrWrap> <SecurityRequirementOrWrap>
{security.schemes.map(scheme => { {security.schemes.length ? (
return ( security.schemes.map((scheme) => {
<SecurityRequirementAndWrap key={scheme.id}> return (
<Link to={scheme.sectionId}>{scheme.id}</Link> <SecurityRequirementAndWrap key={scheme.id}>
{scheme.scopes.length > 0 && ' ('} <Link to={scheme.sectionId}>{scheme.id}</Link>
{scheme.scopes.map(scope => ( {scheme.scopes.length > 0 && ' ('}
<ScopeName key={scope}>{scope}</ScopeName> {scheme.scopes.map((scope) => (
))} <ScopeName key={scope}>{scope}</ScopeName>
{scheme.scopes.length > 0 && ') '} ))}
</SecurityRequirementAndWrap> {scheme.scopes.length > 0 && ') '}
); </SecurityRequirementAndWrap>
})} );
})
) : (
<SecurityRequirementAndWrap>Anonymous</SecurityRequirementAndWrap>
)}
</SecurityRequirementOrWrap> </SecurityRequirementOrWrap>
); );
} }
@ -89,7 +93,7 @@ const AuthHeaderColumn = styled.div`
`; `;
const SecuritiesColumn = styled.div` const SecuritiesColumn = styled.div`
width: ${props => props.theme.schema.defaultDetailsWidth}; width: ${(props) => props.theme.schema.defaultDetailsWidth};
${media.lessThan('small')` ${media.lessThan('small')`
margin-top: 10px; margin-top: 10px;
`} `}