Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-10 19:06:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: react18 cli integration (#2404)

Browse Source 
* fix: react18 cli integration

* fix: update unit tests snapshots
This commit is contained in:
Oprysk Viacheslav 2023-09-08 10:51:39 +03:00 committed by GitHub
parent 2eff85a261
commit 76edc15939
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 117 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
package-lock.json generated
View File

@ -25,7 +25,7 @@
"polished": "^4.1.3", "polished": "^4.1.3",
"prismjs": "^1.27.0", "prismjs": "^1.27.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react-tabs": "^3.2.2", "react-tabs": "^4.3.0",
"slugify": "~1.4.7", "slugify": "~1.4.7",
"stickyfill": "^1.1.1", "stickyfill": "^1.1.1",
"swagger2openapi": "^7.0.6", "swagger2openapi": "^7.0.6",
@ -49,7 +49,6 @@
"@types/prop-types": "^15.7.3", "@types/prop-types": "^15.7.3",
"@types/react": "^17.0.8", "@types/react": "^17.0.8",
"@types/react-dom": "^17.0.5", "@types/react-dom": "^17.0.5",
"@types/react-tabs": "^2.3.2",
"@types/styled-components": "^5.1.1", "@types/styled-components": "^5.1.1",
"@types/tapable": "^2.2.2", "@types/tapable": "^2.2.2",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
@ -3960,15 +3959,6 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"node_modules/@types/react-tabs": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@types/react-tabs/-/react-tabs-2.3.2.tgz",
"integrity": "sha512-QfMelaJSdMcp+CenKhATp12XFFqqUcLXILgwpX3dgWfVYNZPtsLXZDDCRsVn+kwmBOWB+DFPKpQorxbUhnXINw==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/retry": { "node_modules/@types/retry": {
"version": "0.12.1", "version": "0.12.1",
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
@ -15804,15 +15794,15 @@
} }
}, },
"node_modules/react-tabs": { "node_modules/react-tabs": {
"version": "3.2.2", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.2.2.tgz", "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
"integrity": "sha512-/o52eGKxFHRa+ssuTEgSM8qORnV4+k7ibW+aNQzKe+5gifeVz8nLxCrsI9xdRhfb0wCLdgIambIpb1qCxaMN+A==", "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
"dependencies": { "dependencies": {
"clsx": "^1.1.0", "clsx": "^1.1.0",
"prop-types": "^15.5.0" "prop-types": "^15.5.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.3.0 || ^17.0.0-0" "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
} }
}, },
"node_modules/react-test-renderer": { "node_modules/react-test-renderer": {
@ -22108,15 +22098,6 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"@types/react-tabs": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@types/react-tabs/-/react-tabs-2.3.2.tgz",
"integrity": "sha512-QfMelaJSdMcp+CenKhATp12XFFqqUcLXILgwpX3dgWfVYNZPtsLXZDDCRsVn+kwmBOWB+DFPKpQorxbUhnXINw==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/retry": { "@types/retry": {
"version": "0.12.1", "version": "0.12.1",
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
@ -30991,9 +30972,9 @@
} }
}, },
"react-tabs": { "react-tabs": {
"version": "3.2.2", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.2.2.tgz", "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
"integrity": "sha512-/o52eGKxFHRa+ssuTEgSM8qORnV4+k7ibW+aNQzKe+5gifeVz8nLxCrsI9xdRhfb0wCLdgIambIpb1qCxaMN+A==", "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
"requires": { "requires": {
"clsx": "^1.1.0", "clsx": "^1.1.0",
"prop-types": "^15.5.0" "prop-types": "^15.5.0"

3
package.json
View File

@ -78,7 +78,6 @@
"@types/prop-types": "^15.7.3", "@types/prop-types": "^15.7.3",
"@types/react": "^17.0.8", "@types/react": "^17.0.8",
"@types/react-dom": "^17.0.5", "@types/react-dom": "^17.0.5",
"@types/react-tabs": "^2.3.2",
"@types/styled-components": "^5.1.1", "@types/styled-components": "^5.1.1",
"@types/tapable": "^2.2.2", "@types/tapable": "^2.2.2",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
@ -157,7 +156,7 @@
"polished": "^4.1.3", "polished": "^4.1.3",
"prismjs": "^1.27.0", "prismjs": "^1.27.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react-tabs": "^3.2.2", "react-tabs": "^4.3.0",
"slugify": "~1.4.7", "slugify": "~1.4.7",
"stickyfill": "^1.1.1", "stickyfill": "^1.1.1",
"swagger2openapi": "^7.0.6", "swagger2openapi": "^7.0.6",

12
src/common-elements/panels.ts
View File

@ -1,14 +1,14 @@
import { SECTION_ATTR } from '../services/MenuStore'; import { SECTION_ATTR } from '../services/MenuStore';
import styled, { media } from '../styled-components'; import styled, { media } from '../styled-components';
export const MiddlePanel = styled.div<{ compact?: boolean }>` export const MiddlePanel = styled.div<{ $compact?: boolean }>`
width: calc(100% - ${props => props.theme.rightPanel.width}); width: calc(100% - ${props => props.theme.rightPanel.width});
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
${({ compact, theme }) => ${({ $compact, theme }) =>
media.lessThan('medium', true)` media.lessThan('medium', true)`
width: 100%; width: 100%;
padding: ${`${compact ? 0 : theme.spacing.sectionVertical}px ${ padding: ${`${$compact ? 0 : theme.spacing.sectionVertical}px ${
theme.spacing.sectionHorizontal theme.spacing.sectionHorizontal
}px`}; }px`};
`}; `};
@ -16,7 +16,7 @@ export const MiddlePanel = styled.div<{ compact?: boolean }>`
export const Section = styled.div.attrs(props => ({ export const Section = styled.div.attrs(props => ({
[SECTION_ATTR]: props.id, [SECTION_ATTR]: props.id,
}))<{ underlined?: boolean }>` }))<{ $underlined?: boolean }>`
padding: ${props => props.theme.spacing.sectionVertical}px 0; padding: ${props => props.theme.spacing.sectionVertical}px 0;
&:last-child { &:last-child {
@ -30,8 +30,8 @@ export const Section = styled.div.attrs(props => ({
${media.lessThan('medium', true)` ${media.lessThan('medium', true)`
padding: 0; padding: 0;
`} `}
${(props: any) => ${({ $underlined }) =>
(props.underlined && ($underlined &&
` `
position: relative; position: relative;

6
src/components/Callbacks/CallbackTitle.tsx
View File

@ -24,7 +24,7 @@ export const CallbackTitle = (props: CallbackTitleProps) => {
<CallbackTitleWrapper className={className} onClick={onClick || undefined}> <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
<OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled> <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
<ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} /> <ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
<CallbackName deprecated={deprecated}>{name}</CallbackName> <CallbackName $deprecated={deprecated}>{name}</CallbackName>
{deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null} {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
</CallbackTitleWrapper> </CallbackTitleWrapper>
); );
@ -45,8 +45,8 @@ const CallbackTitleWrapper = styled.button`
} }
`; `;
const CallbackName = styled.span<{ deprecated?: boolean }>` const CallbackName = styled.span<{ $deprecated?: boolean }>`
text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')}; text-decoration: ${props => (props.$deprecated ? 'line-through' : 'none')};
margin-right: 8px; margin-right: 8px;
`; `;

6
src/components/ContentItems/ContentItems.tsx
View File

@ -51,7 +51,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
return ( return (
<> <>
{content && ( {content && (
<Section id={item.id} underlined={item.type === 'operation'}> <Section id={item.id} $underlined={item.type === 'operation'}>
{content} {content}
</Section> </Section>
)} )}
@ -61,7 +61,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
} }
} }
const middlePanelWrap = component => <MiddlePanel compact={true}>{component}</MiddlePanel>; const middlePanelWrap = component => <MiddlePanel $compact={true}>{component}</MiddlePanel>;
@observer @observer
export class SectionItem extends React.Component<ContentItemProps> { export class SectionItem extends React.Component<ContentItemProps> {
@ -72,7 +72,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
return ( return (
<> <>
<Row> <Row>
<MiddlePanel compact={false}> <MiddlePanel $compact={false}>
<Header> <Header>
<ShareLink to={this.props.item.id} /> <ShareLink to={this.props.item.id} />
{name} {name}

6
src/components/Endpoint/Endpoint.tsx
View File

@ -49,8 +49,8 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
<OptionsContext.Consumer> <OptionsContext.Consumer>
{options => ( {options => (
<OperationEndpointWrap> <OperationEndpointWrap>
<EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}> <EndpointInfo onClick={this.toggle} $expanded={expanded} $inverted={inverted}>
<HttpVerb type={operation.httpVerb} compact={this.props.compact}> <HttpVerb type={operation.httpVerb} $compact={this.props.compact}>
{operation.httpVerb} {operation.httpVerb}
</HttpVerb> </HttpVerb>
<ServerRelativeURL>{operation.path}</ServerRelativeURL> <ServerRelativeURL>{operation.path}</ServerRelativeURL>
@ -62,7 +62,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
style={{ marginRight: '-25px' }} style={{ marginRight: '-25px' }}
/> />
</EndpointInfo> </EndpointInfo>
<ServersOverlay expanded={expanded} aria-hidden={!expanded}> <ServersOverlay $expanded={expanded} aria-hidden={!expanded}>
{operation.servers.map(server => { {operation.servers.map(server => {
const normalizedUrl = options.expandDefaultServerVariables const normalizedUrl = options.expandDefaultServerVariables
? expandDefaultServerVariables(server.url, server.variables) ? expandDefaultServerVariables(server.url, server.variables)

33
src/components/Endpoint/styled.elements.ts
View File

@ -14,61 +14,62 @@ export const ServerRelativeURL = styled.span`
text-overflow: ellipsis; text-overflow: ellipsis;
`; `;
export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>` export const EndpointInfo = styled.button<{ $expanded?: boolean; $inverted?: boolean }>`
outline: 0; outline: 0;
color: inherit; color: inherit;
width: 100%; width: 100%;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')}; padding: 10px 30px 10px ${props => (props.$inverted ? '10px' : '20px')};
border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')}; border-radius: ${props => (props.$inverted ? '0' : '4px 4px 0 0')};
background-color: ${props => background-color: ${props =>
props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor}; props.$inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
display: flex; display: flex;
white-space: nowrap; white-space: nowrap;
align-items: center; align-items: center;
border: ${props => (props.inverted ? '0' : '1px solid transparent')}; border: ${props => (props.$inverted ? '0' : '1px solid transparent')};
border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')}; border-bottom: ${props => (props.$inverted ? '1px solid #ccc' : '0')};
transition: border-color 0.25s ease; transition: border-color 0.25s ease;
${props => ${props =>
(props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''} (props.$expanded && !props.$inverted && `border-color: ${props.theme.colors.border.dark};`) ||
''}
.${ServerRelativeURL} { .${ServerRelativeURL} {
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}; color: ${props => (props.$inverted ? props.theme.colors.text.primary : '#ffffff')};
} }
&:focus { &:focus {
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25); box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
} }
`; `;
export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({ export const HttpVerb = styled.span.attrs((props: { type: string; $compact?: boolean }) => ({
className: `http-verb ${props.type}`, className: `http-verb ${props.type}`,
}))<{ type: string; compact?: boolean }>` }))<{ type: string; $compact?: boolean }>`
font-size: ${props => (props.compact ? '0.8em' : '0.929em')}; font-size: ${props => (props.$compact ? '0.8em' : '0.929em')};
line-height: ${props => (props.compact ? '18px' : '20px')}; line-height: ${props => (props.$compact ? '18px' : '20px')};
background-color: ${props => props.theme.colors.http[props.type] || '#999999'}; background-color: ${props => props.theme.colors.http[props.type] || '#999999'};
color: #ffffff; color: #ffffff;
padding: ${props => (props.compact ? '2px 8px' : '3px 10px')}; padding: ${props => (props.$compact ? '2px 8px' : '3px 10px')};
text-transform: uppercase; text-transform: uppercase;
font-family: ${props => props.theme.typography.headings.fontFamily}; font-family: ${props => props.theme.typography.headings.fontFamily};
margin: 0; margin: 0;
`; `;
export const ServersOverlay = styled.div<{ expanded: boolean }>` export const ServersOverlay = styled.div<{ $expanded: boolean }>`
position: absolute; position: absolute;
width: 100%; width: 100%;
z-index: 100; z-index: 100;
background: ${props => props.theme.rightPanel.servers.overlay.backgroundColor}; background: ${props => props.theme.rightPanel.servers.overlay.backgroundColor};
color: ${props => props.theme.rightPanel.servers.overlay.textColor}; color: ${props => props.theme.rightPanel.servers.overlay.textColor};
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33); box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
overflow: hidden; overflow: hidden;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
transition: all 0.25s ease; transition: all 0.25s ease;
visibility: hidden; visibility: hidden;
${props => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')} ${props => (props.$expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
`; `;
export const ServerItem = styled.div` export const ServerItem = styled.div`

6
src/components/ExternalDocumentation/ExternalDocumentation.tsx
View File

@ -4,9 +4,9 @@ import styled from '../../styled-components';
import { OpenAPIExternalDocumentation } from '../../types'; import { OpenAPIExternalDocumentation } from '../../types';
import { linksCss } from '../Markdown/styled.elements'; import { linksCss } from '../Markdown/styled.elements';
const LinkWrap = styled.div<{ compact?: boolean }>` const LinkWrap = styled.div<{ $compact?: boolean }>`
${linksCss}; ${linksCss};
${({ compact }) => (!compact ? 'margin: 1em 0' : '')} ${({ $compact }) => (!$compact ? 'margin: 1em 0' : '')}
`; `;
@observer @observer
@ -21,7 +21,7 @@ export class ExternalDocumentation extends React.Component<{
} }
return ( return (
<LinkWrap compact={this.props.compact}> <LinkWrap $compact={this.props.compact}>
<a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a> <a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a>
</LinkWrap> </LinkWrap>
); );

20
src/components/Markdown/SanitizedMdBlock.tsx
View File

@ -12,21 +12,25 @@ const StyledMarkdownSpan = styled(props => <StyledMarkdownBlock {...props} />)`
const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html); const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html);
export function SanitizedMarkdownHTML( export function SanitizedMarkdownHTML({
props: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string }, inline,
) { compact,
const Wrap = props.inline ? StyledMarkdownSpan : StyledMarkdownBlock; ...rest
}: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string }) {
const Wrap = inline ? StyledMarkdownSpan : StyledMarkdownBlock;
return ( return (
<OptionsConsumer> <OptionsConsumer>
{options => ( {options => (
<Wrap <Wrap
className={'redoc-markdown ' + (props.className || '')} className={'redoc-markdown ' + (rest.className || '')}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: sanitize(options.untrustedSpec, props.html), __html: sanitize(options.untrustedSpec, rest.html),
}} }}
data-role={props['data-role']} data-role={rest['data-role']}
{...props} {...rest}
$inline={inline}
$compact={compact}
/> />
)} )}
</OptionsConsumer> </OptionsConsumer>

12
src/components/Markdown/styled.elements.tsx
View File

@ -24,7 +24,7 @@ export const StyledMarkdownBlock = styled(
PrismDiv as StyledComponent< PrismDiv as StyledComponent<
'div', 'div',
ResolvedThemeInterface, ResolvedThemeInterface,
{ compact?: boolean; inline?: boolean } { $compact?: boolean; $inline?: boolean }
>, >,
)` )`
font-family: ${props => props.theme.typography.fontFamily}; font-family: ${props => props.theme.typography.fontFamily};
@ -37,8 +37,8 @@ export const StyledMarkdownBlock = styled(
} }
} }
${({ compact }) => ${({ $compact }) =>
compact && $compact &&
` `
p:first-child { p:first-child {
margin-top: 0; margin-top: 0;
@ -48,8 +48,8 @@ export const StyledMarkdownBlock = styled(
} }
`} `}
${({ inline }) => ${({ $inline }) =>
inline && $inline &&
` p { ` p {
display: inline-block; display: inline-block;
}`} }`}
@ -87,7 +87,7 @@ export const StyledMarkdownBlock = styled(
padding: ${props => props.theme.spacing.unit * 4}px; padding: ${props => props.theme.spacing.unit * 4}px;
overflow-x: auto; overflow-x: auto;
line-height: normal; line-height: normal;
border-radius: 0px; border-radius: 0;
border: 1px solid rgba(38, 50, 56, 0.1); border: 1px solid rgba(38, 50, 56, 0.1);
code { code {

4
src/components/SecurityRequirement/SecurityHeader.tsx
View File

@ -18,9 +18,9 @@ export function SecurityHeader(props: SecurityRequirementProps) {
const grouping = security.schemes.length > 1; const grouping = security.schemes.length > 1;
if (security.schemes.length === 0) if (security.schemes.length === 0)
return <SecurityRequirementOrWrap expanded={expanded}>None</SecurityRequirementOrWrap>; return <SecurityRequirementOrWrap $expanded={expanded}>None</SecurityRequirementOrWrap>;
return ( return (
<SecurityRequirementOrWrap expanded={expanded}> <SecurityRequirementOrWrap $expanded={expanded}>
{grouping && '('} {grouping && '('}
{security.schemes.map(scheme => { {security.schemes.map(scheme => {
return ( return (

4
src/components/SecurityRequirement/SecurityRequirement.tsx
View File

@ -37,12 +37,12 @@ export function SecurityRequirements(props: SecurityRequirementsProps) {
return ( return (
<> <>
<Wrap expanded={expanded}> <Wrap $expanded={expanded}>
<AuthHeaderColumn onClick={() => setExpanded(!expanded)}> <AuthHeaderColumn onClick={() => setExpanded(!expanded)}>
<AuthHeader>Authorizations:</AuthHeader> <AuthHeader>Authorizations:</AuthHeader>
<ShelfIcon size={'1.3em'} direction={expanded ? 'down' : 'right'} /> <ShelfIcon size={'1.3em'} direction={expanded ? 'down' : 'right'} />
</AuthHeaderColumn> </AuthHeaderColumn>
<SecuritiesColumn expanded={expanded}> <SecuritiesColumn $expanded={expanded}>
{securities.map((security, idx) => ( {securities.map((security, idx) => (
<SecurityHeader <SecurityHeader
key={idx} key={idx}

14
src/components/SecurityRequirement/styled.elements.ts
View File

@ -55,11 +55,11 @@ export const SecurityRequirementAndWrap = styled.span`
${linksCss}; ${linksCss};
`; `;
export const SecurityRequirementOrWrap = styled.span<{ expanded?: boolean }>` export const SecurityRequirementOrWrap = styled.span<{ $expanded?: boolean }>`
${p => !p.expanded && `white-space: nowrap;`} ${p => !p.$expanded && `white-space: nowrap;`}
&:after { &:after {
content: ' or '; content: ' or ';
${p => p.expanded && `content: ' or \\a';`} ${p => p.$expanded && `content: ' or \\a';`}
white-space: pre; white-space: pre;
} }
@ -76,13 +76,13 @@ export const AuthHeaderColumn = styled.div`
cursor: pointer; cursor: pointer;
`; `;
export const SecuritiesColumn = styled.div<{ expanded?: boolean }>` export const SecuritiesColumn = styled.div<{ $expanded?: boolean }>`
width: ${props => props.theme.schema.defaultDetailsWidth}; width: ${props => props.theme.schema.defaultDetailsWidth};
text-overflow: ellipsis; text-overflow: ellipsis;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
${p => ${p =>
p.expanded && p.$expanded &&
`background: ${p.theme.colors.gray['100']}; `background: ${p.theme.colors.gray['100']};
padding: 8px 9.6px; padding: 8px 9.6px;
margin: 20px 0; margin: 20px 0;
@ -98,11 +98,11 @@ export const AuthHeader = styled(UnderlinedHeader)`
margin: 0; margin: 0;
`; `;
export const Wrap = styled.div<{ expanded?: boolean }>` export const Wrap = styled.div<{ $expanded?: boolean }>`
width: 100%; width: 100%;
display: flex; display: flex;
margin: 1em 0; margin: 1em 0;
flex-direction: ${p => (p.expanded ? 'column' : 'row')}; flex-direction: ${p => (p.$expanded ? 'column' : 'row')};
${media.lessThan('small')` ${media.lessThan('small')`
flex-direction: column; flex-direction: column;
`} `}

8
src/components/SeeMore/SeeMore.tsx
View File

@ -32,7 +32,7 @@ export function SeeMore({ children, height }: SeeMoreProps): JSX.Element {
> >
{children} {children}
</Container> </Container>
<ButtonContainer dimmed={!showMore}> <ButtonContainer $dimmed={!showMore}>
{showLink && ( {showLink && (
<ButtonLinkStyled onClick={onClickMore}> <ButtonLinkStyled onClick={onClickMore}>
{showMore ? 'See less' : 'See more'} {showMore ? 'See less' : 'See more'}
@ -47,11 +47,11 @@ const Container = styled.div`
overflow-y: hidden; overflow-y: hidden;
`; `;
const ButtonContainer = styled.div<{ dimmed?: boolean }>` const ButtonContainer = styled.div<{ $dimmed?: boolean }>`
text-align: center; text-align: center;
line-height: 1.5em; line-height: 1.5em;
${({ dimmed }) => ${({ $dimmed }) =>
dimmed && $dimmed &&
`background-image: linear-gradient(to bottom, transparent,rgb(255 255 255)); `background-image: linear-gradient(to bottom, transparent,rgb(255 255 255));
position: relative; position: relative;
top: -0.5em; top: -0.5em;

9
src/components/SideMenu/MenuItem.tsx
View File

@ -54,7 +54,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
{item.type === 'operation' ? ( {item.type === 'operation' ? (
<OperationMenuItemContent {...this.props} item={item as OperationModel} /> <OperationMenuItemContent {...this.props} item={item as OperationModel} />
) : ( ) : (
<MenuItemLabel depth={item.depth} active={item.active} type={item.type} ref={this.ref}> <MenuItemLabel $depth={item.depth} $active={item.active} $type={item.type} ref={this.ref}>
{item.type === 'schema' && <OperationBadge type="schema">schema</OperationBadge>} {item.type === 'schema' && <OperationBadge type="schema">schema</OperationBadge>}
<MenuItemTitle width="calc(100% - 38px)" title={item.sidebarLabel}> <MenuItemTitle width="calc(100% - 38px)" title={item.sidebarLabel}>
{item.sidebarLabel} {item.sidebarLabel}
@ -95,7 +95,12 @@ export const OperationMenuItemContent = observer((props: OperationMenuItemConten
}, [props.item.active, ref]); }, [props.item.active, ref]);
return ( return (
<MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated} ref={ref}> <MenuItemLabel
$depth={item.depth}
$active={item.active}
$deprecated={item.deprecated}
ref={ref}
>
{item.isWebhook ? ( {item.isWebhook ? (
<OperationBadge type="hook"> <OperationBadge type="hook">
{showWebhookVerb ? item.httpVerb : l('webhook')} {showWebhookVerb ? item.httpVerb : l('webhook')}

2
src/components/SideMenu/MenuItems.tsx
View File

@ -25,7 +25,7 @@ export class MenuItems extends React.Component<MenuItemsProps> {
<MenuItemUl <MenuItemUl
className={className} className={className}
style={this.props.style} style={this.props.style}
expanded={expanded} $expanded={expanded}
{...(root ? { role: 'menu' } : {})} {...(root ? { role: 'menu' } : {})}
> >
{items.map((item, idx) => ( {items.map((item, idx) => (

36
src/components/SideMenu/styled.elements.ts
View File

@ -84,7 +84,7 @@ function menuItemActive(
} }
} }
export const MenuItemUl = styled.ul<{ expanded: boolean }>` export const MenuItemUl = styled.ul<{ $expanded: boolean }>`
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -96,7 +96,7 @@ export const MenuItemUl = styled.ul<{ expanded: boolean }>`
font-size: 0.929em; font-size: 0.929em;
} }
${props => (props.expanded ? '' : 'display: none;')}; ${props => (props.$expanded ? '' : 'display: none;')};
`; `;
export const MenuItemLi = styled.li<{ depth: number }>` export const MenuItemLi = styled.li<{ depth: number }>`
@ -122,40 +122,40 @@ export const menuItemDepth = {
}; };
export interface MenuItemLabelType { export interface MenuItemLabelType {
depth: number; $depth: number;
active: boolean; $active: boolean;
deprecated?: boolean; $deprecated?: boolean;
type?: string; $type?: string;
} }
export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
className: classnames('-depth' + props.depth, { className: classnames('-depth' + props.$depth, {
active: props.active, active: props.$active,
}), }),
}))<MenuItemLabelType>` }))<MenuItemLabelType>`
cursor: pointer; cursor: pointer;
color: ${props => color: ${props =>
props.active props.$active
? menuItemActive(props.depth, props, 'activeTextColor') ? menuItemActive(props.$depth, props, 'activeTextColor')
: props.theme.sidebar.textColor}; : props.theme.sidebar.textColor};
margin: 0; margin: 0;
padding: 12.5px ${props => props.theme.spacing.unit * 4}px; padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
${({ depth, type, theme }) => ${({ $depth, $type, theme }) =>
(type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''} ($type === 'section' && $depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-family: ${props => props.theme.typography.headings.fontFamily}; font-family: ${props => props.theme.typography.headings.fontFamily};
${props => menuItemDepth[props.depth]}; ${props => menuItemDepth[props.$depth]};
background-color: ${props => background-color: ${props =>
props.active props.$active
? menuItemActive(props.depth, props, 'activeBackgroundColor') ? menuItemActive(props.$depth, props, 'activeBackgroundColor')
: props.theme.sidebar.backgroundColor}; : props.theme.sidebar.backgroundColor};
${props => (props.deprecated && deprecatedCss) || ''}; ${props => (props.$deprecated && deprecatedCss) || ''};
&:hover { &:hover {
color: ${props => menuItemActive(props.depth, props, 'activeTextColor')}; color: ${props => menuItemActive(props.$depth, props, 'activeTextColor')};
background-color: ${props => menuItemActive(props.depth, props, 'activeBackgroundColor')}; background-color: ${props => menuItemActive(props.$depth, props, 'activeBackgroundColor')};
} }
${ShelfIcon} { ${ShelfIcon} {

2
src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap
View File

@ -56,7 +56,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = `
</div> </div>
<div> <div>
<div <div
class="sc-lcIPJg sc-hknOHE gBHqkN eigFbs" class="sc-lcIPJg sc-hknOHE gBHqkN jFBMaE"
> >
<p> <p>
test description test description

2
src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap
View File

@ -44,7 +44,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
<div> <div>
<div <div
class="sc-eeDRCY sc-eBMEME gTGgei hXXgcw" class="sc-eeDRCY sc-eBMEME gTGgei fbXBig"
/> />
</div> </div>
</div> </div>

24
src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap
View File

@ -1,23 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SecurityRequirement should render SecurityDefs 1`] = ` exports[`SecurityRequirement should render SecurityDefs 1`] = `
"<div id=\\"section/Authentication/petstore_auth\\" data-section-id=\\"section/Authentication/petstore_auth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">petstore_auth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>Get access to data while protecting your account credentials. "<div id=\\"section/Authentication/petstore_auth\\" data-section-id=\\"section/Authentication/petstore_auth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">petstore_auth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>Get access to data while protecting your account credentials.
OAuth2 is also a safer and more secure way to give you access.</p> OAuth2 is also a safer and more secure way to give you access.</p>
</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OAuth2</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei dNjZhe sc-fhzFiK hXtrri redoc-markdown\\"><p>modify pets in your account</p> </div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OAuth2</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru sc-fhzFiK hXtrri redoc-markdown\\"><p>modify pets in your account</p>
</div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei dNjZhe sc-fhzFiK hXtrri redoc-markdown\\"><p>read your pets</p> </div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru sc-fhzFiK hXtrri redoc-markdown\\"><p>read your pets</p>
</div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_PersonalAccessToken\\" data-section-id=\\"section/Authentication/GitLab_PersonalAccessToken\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_PersonalAccessToken</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab Personal Access Token description</p> </div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_PersonalAccessToken\\" data-section-id=\\"section/Authentication/GitLab_PersonalAccessToken\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_PersonalAccessToken</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>GitLab Personal Access Token description</p>
</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>API Key</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_OpenIdConnect\\" data-section-id=\\"section/Authentication/GitLab_OpenIdConnect\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_OpenIdConnect</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab OpenIdConnect description</p> </div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>API Key</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div></div></div></div><div id=\\"section/Authentication/GitLab_OpenIdConnect\\" data-section-id=\\"section/Authentication/GitLab_OpenIdConnect\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">GitLab_OpenIdConnect</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>GitLab OpenIdConnect description</p>
</div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OpenID Connect</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div></div></div></div><div id=\\"section/Authentication/basicAuth\\" data-section-id=\\"section/Authentication/basicAuth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">basicAuth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"></div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>HTTP</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div></div></div></div>" </div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>OpenID Connect</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div></div></div></div><div id=\\"section/Authentication/basicAuth\\" data-section-id=\\"section/Authentication/basicAuth\\" class=\\"sc-dcJsrY bBkGhy\\"><div class=\\"sc-kAyceB hBQWIZ\\"><div class=\\"sc-fqkvVR oJKYx\\"><h2 class=\\"sc-jXbUNg fWnwAh\\">basicAuth</h2><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"></div><div class=\\"sc-ejfMa-d a-DjBE\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Security Scheme Type: </b><span>HTTP</span></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div></div></div></div>"
`; `;
exports[`SecurityRequirement should render authDefinition 1`] = `"<div class=\\"sc-bDumWk iWBBny\\"><div class=\\"sc-sLsrZ hgeUJn\\"><h5 class=\\"sc-dAlyuH sc-fifgRP jbQuod kWJur\\">Authorizations:</h5><svg class=\\"sc-cwHptR iZRiKW\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dBmzty eoFcYg\\"><span class=\\"sc-kbousE cpXQuZ\\">(<span class=\\"sc-gfoqjT kbvnry\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-gfoqjT kbvnry\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-gfoqjT kbvnry\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kbousE cpXQuZ\\"><span class=\\"sc-gfoqjT kbvnry\\">OAuth2: <i>petstore_auth</i></span></span></div></div>,"`; exports[`SecurityRequirement should render authDefinition 1`] = `"<div class=\\"sc-bDumWk iWBBny\\"><div class=\\"sc-sLsrZ hgeUJn\\"><h5 class=\\"sc-dAlyuH sc-fifgRP jbQuod kWJur\\">Authorizations:</h5><svg class=\\"sc-cwHptR iZRiKW\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dBmzty eoFcYg\\"><span class=\\"sc-kbousE cpXQuZ\\">(<span class=\\"sc-gfoqjT kbvnry\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-gfoqjT kbvnry\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-gfoqjT kbvnry\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kbousE cpXQuZ\\"><span class=\\"sc-gfoqjT kbvnry\\">OAuth2: <i>petstore_auth</i></span></span></div></div>,"`;
exports[`SecurityRequirement should render authDefinition 2`] = ` exports[`SecurityRequirement should render authDefinition 2`] = `
"<div class=\\"sc-bDumWk gtsPcy\\"><div class=\\"sc-sLsrZ hgeUJn\\"><h5 class=\\"sc-dAlyuH sc-fifgRP jbQuod kWJur\\">Authorizations:</h5><svg class=\\"sc-cwHptR dSJqIk\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dBmzty llvZdI\\"><span class=\\"sc-kbousE dOwJQz\\">(<span class=\\"sc-gfoqjT kbvnry\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-gfoqjT kbvnry\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-gfoqjT kbvnry\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kbousE dOwJQz\\"><span class=\\"sc-gfoqjT kbvnry\\">OAuth2: <i>petstore_auth</i> (<code class=\\"sc-eyvILC bzHwfc\\">write:pets</code><code class=\\"sc-eyvILC bzHwfc\\">read:pets</code>) </span></span></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OAuth2: petstore_auth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>Get access to data while protecting your account credentials. "<div class=\\"sc-bDumWk gtsPcy\\"><div class=\\"sc-sLsrZ hgeUJn\\"><h5 class=\\"sc-dAlyuH sc-fifgRP jbQuod kWJur\\">Authorizations:</h5><svg class=\\"sc-cwHptR dSJqIk\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dBmzty llvZdI\\"><span class=\\"sc-kbousE dOwJQz\\">(<span class=\\"sc-gfoqjT kbvnry\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-gfoqjT kbvnry\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-gfoqjT kbvnry\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kbousE dOwJQz\\"><span class=\\"sc-gfoqjT kbvnry\\">OAuth2: <i>petstore_auth</i> (<code class=\\"sc-eyvILC bzHwfc\\">write:pets</code><code class=\\"sc-eyvILC bzHwfc\\">read:pets</code>) </span></span></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OAuth2: petstore_auth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>Get access to data while protecting your account credentials.
OAuth2 is also a safer and more secure way to give you access.</p> OAuth2 is also a safer and more secure way to give you access.</p>
</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div><b>Required scopes: </b><code>write:pets</code> <code>read:pets</code> </div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei dNjZhe sc-fhzFiK hXtrri redoc-markdown\\"><p>modify pets in your account</p> </div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-dkmUuB hFwAIA\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div><b>Required scopes: </b><code>write:pets</code> <code>read:pets</code> </div><div class=\\"sc-dkmUuB hFwAIA\\"><b> Scopes: </b></div><div class=\\"sc-iEXKAA blExNw container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru sc-fhzFiK hXtrri redoc-markdown\\"><p>modify pets in your account</p>
</div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei dNjZhe sc-fhzFiK hXtrri redoc-markdown\\"><p>read your pets</p> </div></li><li><code>read:pets</code> - <div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru sc-fhzFiK hXtrri redoc-markdown\\"><p>read your pets</p>
</div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> API Key: GitLab_PersonalAccessToken</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab Personal Access Token description</p> </div></li></ul></div><div class=\\"sc-EgOXT bNSpXO\\"></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> API Key: GitLab_PersonalAccessToken</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>GitLab Personal Access Token description</p>
</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OpenID Connect: GitLab_OpenIdConnect</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><p>GitLab OpenIdConnect description</p> </div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OpenID Connect: GitLab_OpenIdConnect</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><p>GitLab OpenIdConnect description</p>
</div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> HTTP: basicAuth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei hvaraW\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div>," </div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div><div class=\\"sc-ejfMa-d a-DjBE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> HTTP: basicAuth</h5><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"></div><div class=\\"sc-eeDRCY sc-eBMEME gTGgei fMmru\\"><div class=\\"sc-dkmUuB hFwAIA\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-dkmUuB hFwAIA\\"></div></div></div>,"
`; `;