From 5c3fef5bc5601a2170051e2d38cec7eddd1fcf31 Mon Sep 17 00:00:00 2001 From: Oprysk Viacheslav Date: Fri, 8 Sep 2023 10:51:39 +0300 Subject: [PATCH] fix: react18 cli integration (#2404) * fix: react18 cli integration * fix: update unit tests snapshots --- package-lock.json | 35 +++++------------- package.json | 3 +- src/common-elements/panels.ts | 12 +++---- src/components/Callbacks/CallbackTitle.tsx | 6 ++-- src/components/ContentItems/ContentItems.tsx | 6 ++-- src/components/Endpoint/Endpoint.tsx | 6 ++-- src/components/Endpoint/styled.elements.ts | 33 ++++++++--------- .../ExternalDocumentation.tsx | 6 ++-- src/components/Markdown/SanitizedMdBlock.tsx | 20 ++++++----- src/components/Markdown/styled.elements.tsx | 12 +++---- .../SecurityRequirement/SecurityHeader.tsx | 4 +-- .../SecurityRequirement.tsx | 4 +-- .../SecurityRequirement/styled.elements.ts | 14 ++++---- src/components/SeeMore/SeeMore.tsx | 8 ++--- src/components/SideMenu/MenuItem.tsx | 9 +++-- src/components/SideMenu/MenuItems.tsx | 2 +- src/components/SideMenu/styled.elements.ts | 36 +++++++++---------- .../__snapshots__/FieldDetails.test.tsx.snap | 2 +- .../__snapshots__/OneOfSchema.test.tsx.snap | 2 +- .../SecurityRequirement.test.tsx.snap | 24 ++++++------- 20 files changed, 117 insertions(+), 127 deletions(-) diff --git a/package-lock.json b/package-lock.json index c7a1d33ba8..06db771ebf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "polished": "^4.1.3", "prismjs": "^1.27.0", "prop-types": "^15.7.2", - "react-tabs": "^3.2.2", + "react-tabs": "^4.3.0", "slugify": "~1.4.7", "stickyfill": "^1.1.1", "swagger2openapi": "^7.0.6", @@ -49,7 +49,6 @@ "@types/prop-types": "^15.7.3", "@types/react": "^17.0.8", "@types/react-dom": "^17.0.5", - "@types/react-tabs": "^2.3.2", "@types/styled-components": "^5.1.1", "@types/tapable": "^2.2.2", "@types/webpack": "^5.28.0", @@ -3960,15 +3959,6 @@ "@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": { "version": "0.12.1", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", @@ -15804,15 +15794,15 @@ } }, "node_modules/react-tabs": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.2.2.tgz", - "integrity": "sha512-/o52eGKxFHRa+ssuTEgSM8qORnV4+k7ibW+aNQzKe+5gifeVz8nLxCrsI9xdRhfb0wCLdgIambIpb1qCxaMN+A==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz", + "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==", "dependencies": { "clsx": "^1.1.0", "prop-types": "^15.5.0" }, "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": { @@ -22108,15 +22098,6 @@ "@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": { "version": "0.12.1", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", @@ -30991,9 +30972,9 @@ } }, "react-tabs": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.2.2.tgz", - "integrity": "sha512-/o52eGKxFHRa+ssuTEgSM8qORnV4+k7ibW+aNQzKe+5gifeVz8nLxCrsI9xdRhfb0wCLdgIambIpb1qCxaMN+A==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz", + "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==", "requires": { "clsx": "^1.1.0", "prop-types": "^15.5.0" diff --git a/package.json b/package.json index fcad00a720..8d20a3e355 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,6 @@ "@types/prop-types": "^15.7.3", "@types/react": "^17.0.8", "@types/react-dom": "^17.0.5", - "@types/react-tabs": "^2.3.2", "@types/styled-components": "^5.1.1", "@types/tapable": "^2.2.2", "@types/webpack": "^5.28.0", @@ -157,7 +156,7 @@ "polished": "^4.1.3", "prismjs": "^1.27.0", "prop-types": "^15.7.2", - "react-tabs": "^3.2.2", + "react-tabs": "^4.3.0", "slugify": "~1.4.7", "stickyfill": "^1.1.1", "swagger2openapi": "^7.0.6", diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts index c434c503d2..cacdb685c5 100644 --- a/src/common-elements/panels.ts +++ b/src/common-elements/panels.ts @@ -1,14 +1,14 @@ import { SECTION_ATTR } from '../services/MenuStore'; 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}); padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; - ${({ compact, theme }) => + ${({ $compact, theme }) => media.lessThan('medium', true)` width: 100%; - padding: ${`${compact ? 0 : theme.spacing.sectionVertical}px ${ + padding: ${`${$compact ? 0 : theme.spacing.sectionVertical}px ${ theme.spacing.sectionHorizontal }px`}; `}; @@ -16,7 +16,7 @@ export const MiddlePanel = styled.div<{ compact?: boolean }>` export const Section = styled.div.attrs(props => ({ [SECTION_ATTR]: props.id, -}))<{ underlined?: boolean }>` +}))<{ $underlined?: boolean }>` padding: ${props => props.theme.spacing.sectionVertical}px 0; &:last-child { @@ -30,8 +30,8 @@ export const Section = styled.div.attrs(props => ({ ${media.lessThan('medium', true)` padding: 0; `} - ${(props: any) => - (props.underlined && + ${({ $underlined }) => + ($underlined && ` position: relative; diff --git a/src/components/Callbacks/CallbackTitle.tsx b/src/components/Callbacks/CallbackTitle.tsx index 4cd3066e9f..5b123ff8ca 100644 --- a/src/components/Callbacks/CallbackTitle.tsx +++ b/src/components/Callbacks/CallbackTitle.tsx @@ -24,7 +24,7 @@ export const CallbackTitle = (props: CallbackTitleProps) => { {shortenHTTPVerb(httpVerb)} - {name} + {name} {deprecated ? {l('deprecated')} : null} ); @@ -45,8 +45,8 @@ const CallbackTitleWrapper = styled.button` } `; -const CallbackName = styled.span<{ deprecated?: boolean }>` - text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')}; +const CallbackName = styled.span<{ $deprecated?: boolean }>` + text-decoration: ${props => (props.$deprecated ? 'line-through' : 'none')}; margin-right: 8px; `; diff --git a/src/components/ContentItems/ContentItems.tsx b/src/components/ContentItems/ContentItems.tsx index 2be1fc64a1..38f4076799 100644 --- a/src/components/ContentItems/ContentItems.tsx +++ b/src/components/ContentItems/ContentItems.tsx @@ -51,7 +51,7 @@ export class ContentItem extends React.Component { return ( <> {content && ( -
+
{content}
)} @@ -61,7 +61,7 @@ export class ContentItem extends React.Component { } } -const middlePanelWrap = component => {component}; +const middlePanelWrap = component => {component}; @observer export class SectionItem extends React.Component { @@ -72,7 +72,7 @@ export class SectionItem extends React.Component { return ( <> - +
{name} diff --git a/src/components/Endpoint/Endpoint.tsx b/src/components/Endpoint/Endpoint.tsx index f5723a5c4e..b71dc81bfa 100644 --- a/src/components/Endpoint/Endpoint.tsx +++ b/src/components/Endpoint/Endpoint.tsx @@ -49,8 +49,8 @@ export class Endpoint extends React.Component { {options => ( - - + + {operation.httpVerb} {operation.path} @@ -62,7 +62,7 @@ export class Endpoint extends React.Component { style={{ marginRight: '-25px' }} /> - + {operation.servers.map(server => { const normalizedUrl = options.expandDefaultServerVariables ? expandDefaultServerVariables(server.url, server.variables) diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts index d86b6d4340..01fbd4ae7e 100644 --- a/src/components/Endpoint/styled.elements.ts +++ b/src/components/Endpoint/styled.elements.ts @@ -14,61 +14,62 @@ export const ServerRelativeURL = styled.span` text-overflow: ellipsis; `; -export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>` +export const EndpointInfo = styled.button<{ $expanded?: boolean; $inverted?: boolean }>` outline: 0; color: inherit; width: 100%; text-align: left; cursor: pointer; - padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')}; - border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')}; + padding: 10px 30px 10px ${props => (props.$inverted ? '10px' : '20px')}; + border-radius: ${props => (props.$inverted ? '0' : '4px 4px 0 0')}; background-color: ${props => - props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor}; + props.$inverted ? 'transparent' : props.theme.codeBlock.backgroundColor}; display: flex; white-space: nowrap; align-items: center; - border: ${props => (props.inverted ? '0' : '1px solid transparent')}; - border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')}; + border: ${props => (props.$inverted ? '0' : '1px solid transparent')}; + border-bottom: ${props => (props.$inverted ? '1px solid #ccc' : '0')}; transition: border-color 0.25s ease; ${props => - (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''} + (props.$expanded && !props.$inverted && `border-color: ${props.theme.colors.border.dark};`) || + ''} .${ServerRelativeURL} { - color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}; + color: ${props => (props.$inverted ? props.theme.colors.text.primary : '#ffffff')}; } &:focus { 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}`, -}))<{ type: string; compact?: boolean }>` - font-size: ${props => (props.compact ? '0.8em' : '0.929em')}; - line-height: ${props => (props.compact ? '18px' : '20px')}; +}))<{ type: string; $compact?: boolean }>` + font-size: ${props => (props.$compact ? '0.8em' : '0.929em')}; + line-height: ${props => (props.$compact ? '18px' : '20px')}; background-color: ${props => props.theme.colors.http[props.type] || '#999999'}; color: #ffffff; - padding: ${props => (props.compact ? '2px 8px' : '3px 10px')}; + padding: ${props => (props.$compact ? '2px 8px' : '3px 10px')}; text-transform: uppercase; font-family: ${props => props.theme.typography.headings.fontFamily}; margin: 0; `; -export const ServersOverlay = styled.div<{ expanded: boolean }>` +export const ServersOverlay = styled.div<{ $expanded: boolean }>` position: absolute; width: 100%; z-index: 100; background: ${props => props.theme.rightPanel.servers.overlay.backgroundColor}; color: ${props => props.theme.rightPanel.servers.overlay.textColor}; 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; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; transition: all 0.25s ease; 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` diff --git a/src/components/ExternalDocumentation/ExternalDocumentation.tsx b/src/components/ExternalDocumentation/ExternalDocumentation.tsx index 589dd025ef..c73f5fbbb4 100644 --- a/src/components/ExternalDocumentation/ExternalDocumentation.tsx +++ b/src/components/ExternalDocumentation/ExternalDocumentation.tsx @@ -4,9 +4,9 @@ import styled from '../../styled-components'; import { OpenAPIExternalDocumentation } from '../../types'; import { linksCss } from '../Markdown/styled.elements'; -const LinkWrap = styled.div<{ compact?: boolean }>` +const LinkWrap = styled.div<{ $compact?: boolean }>` ${linksCss}; - ${({ compact }) => (!compact ? 'margin: 1em 0' : '')} + ${({ $compact }) => (!$compact ? 'margin: 1em 0' : '')} `; @observer @@ -21,7 +21,7 @@ export class ExternalDocumentation extends React.Component<{ } return ( - + {externalDocs.description || externalDocs.url} ); diff --git a/src/components/Markdown/SanitizedMdBlock.tsx b/src/components/Markdown/SanitizedMdBlock.tsx index 33a54bd01d..84f6318d3e 100644 --- a/src/components/Markdown/SanitizedMdBlock.tsx +++ b/src/components/Markdown/SanitizedMdBlock.tsx @@ -12,21 +12,25 @@ const StyledMarkdownSpan = styled(props => )` const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html); -export function SanitizedMarkdownHTML( - props: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string }, -) { - const Wrap = props.inline ? StyledMarkdownSpan : StyledMarkdownBlock; +export function SanitizedMarkdownHTML({ + inline, + compact, + ...rest +}: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string }) { + const Wrap = inline ? StyledMarkdownSpan : StyledMarkdownBlock; return ( {options => ( )} diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx index 7a67d31c51..b04a026148 100644 --- a/src/components/Markdown/styled.elements.tsx +++ b/src/components/Markdown/styled.elements.tsx @@ -24,7 +24,7 @@ export const StyledMarkdownBlock = styled( PrismDiv as StyledComponent< 'div', ResolvedThemeInterface, - { compact?: boolean; inline?: boolean } + { $compact?: boolean; $inline?: boolean } >, )` font-family: ${props => props.theme.typography.fontFamily}; @@ -37,8 +37,8 @@ export const StyledMarkdownBlock = styled( } } - ${({ compact }) => - compact && + ${({ $compact }) => + $compact && ` p:first-child { margin-top: 0; @@ -48,8 +48,8 @@ export const StyledMarkdownBlock = styled( } `} - ${({ inline }) => - inline && + ${({ $inline }) => + $inline && ` p { display: inline-block; }`} @@ -87,7 +87,7 @@ export const StyledMarkdownBlock = styled( padding: ${props => props.theme.spacing.unit * 4}px; overflow-x: auto; line-height: normal; - border-radius: 0px; + border-radius: 0; border: 1px solid rgba(38, 50, 56, 0.1); code { diff --git a/src/components/SecurityRequirement/SecurityHeader.tsx b/src/components/SecurityRequirement/SecurityHeader.tsx index 12047db1ee..4e2ffb04b9 100644 --- a/src/components/SecurityRequirement/SecurityHeader.tsx +++ b/src/components/SecurityRequirement/SecurityHeader.tsx @@ -18,9 +18,9 @@ export function SecurityHeader(props: SecurityRequirementProps) { const grouping = security.schemes.length > 1; if (security.schemes.length === 0) - return None; + return None; return ( - + {grouping && '('} {security.schemes.map(scheme => { return ( diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx index 56b0c5a95b..a20ec589ec 100644 --- a/src/components/SecurityRequirement/SecurityRequirement.tsx +++ b/src/components/SecurityRequirement/SecurityRequirement.tsx @@ -37,12 +37,12 @@ export function SecurityRequirements(props: SecurityRequirementsProps) { return ( <> - + setExpanded(!expanded)}> Authorizations: - + {securities.map((security, idx) => ( ` - ${p => !p.expanded && `white-space: nowrap;`} +export const SecurityRequirementOrWrap = styled.span<{ $expanded?: boolean }>` + ${p => !p.$expanded && `white-space: nowrap;`} &:after { content: ' or '; - ${p => p.expanded && `content: ' or \\a';`} + ${p => p.$expanded && `content: ' or \\a';`} white-space: pre; } @@ -76,13 +76,13 @@ export const AuthHeaderColumn = styled.div` cursor: pointer; `; -export const SecuritiesColumn = styled.div<{ expanded?: boolean }>` +export const SecuritiesColumn = styled.div<{ $expanded?: boolean }>` width: ${props => props.theme.schema.defaultDetailsWidth}; text-overflow: ellipsis; border-radius: 4px; overflow: hidden; ${p => - p.expanded && + p.$expanded && `background: ${p.theme.colors.gray['100']}; padding: 8px 9.6px; margin: 20px 0; @@ -98,11 +98,11 @@ export const AuthHeader = styled(UnderlinedHeader)` margin: 0; `; -export const Wrap = styled.div<{ expanded?: boolean }>` +export const Wrap = styled.div<{ $expanded?: boolean }>` width: 100%; display: flex; margin: 1em 0; - flex-direction: ${p => (p.expanded ? 'column' : 'row')}; + flex-direction: ${p => (p.$expanded ? 'column' : 'row')}; ${media.lessThan('small')` flex-direction: column; `} diff --git a/src/components/SeeMore/SeeMore.tsx b/src/components/SeeMore/SeeMore.tsx index 8e3dc2e707..1eacc3cc94 100644 --- a/src/components/SeeMore/SeeMore.tsx +++ b/src/components/SeeMore/SeeMore.tsx @@ -32,7 +32,7 @@ export function SeeMore({ children, height }: SeeMoreProps): JSX.Element { > {children} - + {showLink && ( {showMore ? 'See less' : 'See more'} @@ -47,11 +47,11 @@ const Container = styled.div` overflow-y: hidden; `; -const ButtonContainer = styled.div<{ dimmed?: boolean }>` +const ButtonContainer = styled.div<{ $dimmed?: boolean }>` text-align: center; line-height: 1.5em; - ${({ dimmed }) => - dimmed && + ${({ $dimmed }) => + $dimmed && `background-image: linear-gradient(to bottom, transparent,rgb(255 255 255)); position: relative; top: -0.5em; diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx index fcd1ccd95f..cd23b8c54b 100644 --- a/src/components/SideMenu/MenuItem.tsx +++ b/src/components/SideMenu/MenuItem.tsx @@ -54,7 +54,7 @@ export class MenuItem extends React.Component { {item.type === 'operation' ? ( ) : ( - + {item.type === 'schema' && schema} {item.sidebarLabel} @@ -95,7 +95,12 @@ export const OperationMenuItemContent = observer((props: OperationMenuItemConten }, [props.item.active, ref]); return ( - + {item.isWebhook ? ( {showWebhookVerb ? item.httpVerb : l('webhook')} diff --git a/src/components/SideMenu/MenuItems.tsx b/src/components/SideMenu/MenuItems.tsx index ec9eef8e56..af9ab197a2 100644 --- a/src/components/SideMenu/MenuItems.tsx +++ b/src/components/SideMenu/MenuItems.tsx @@ -25,7 +25,7 @@ export class MenuItems extends React.Component { {items.map((item, idx) => ( diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts index 9f13709526..0caf809eb3 100644 --- a/src/components/SideMenu/styled.elements.ts +++ b/src/components/SideMenu/styled.elements.ts @@ -84,7 +84,7 @@ function menuItemActive( } } -export const MenuItemUl = styled.ul<{ expanded: boolean }>` +export const MenuItemUl = styled.ul<{ $expanded: boolean }>` margin: 0; padding: 0; @@ -96,7 +96,7 @@ export const MenuItemUl = styled.ul<{ expanded: boolean }>` font-size: 0.929em; } - ${props => (props.expanded ? '' : 'display: none;')}; + ${props => (props.$expanded ? '' : 'display: none;')}; `; export const MenuItemLi = styled.li<{ depth: number }>` @@ -122,40 +122,40 @@ export const menuItemDepth = { }; export interface MenuItemLabelType { - depth: number; - active: boolean; - deprecated?: boolean; - type?: string; + $depth: number; + $active: boolean; + $deprecated?: boolean; + $type?: string; } export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({ - className: classnames('-depth' + props.depth, { - active: props.active, + className: classnames('-depth' + props.$depth, { + active: props.$active, }), }))` cursor: pointer; color: ${props => - props.active - ? menuItemActive(props.depth, props, 'activeTextColor') + props.$active + ? menuItemActive(props.$depth, props, 'activeTextColor') : props.theme.sidebar.textColor}; margin: 0; padding: 12.5px ${props => props.theme.spacing.unit * 4}px; - ${({ depth, type, theme }) => - (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''} + ${({ $depth, $type, theme }) => + ($type === 'section' && $depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''} display: flex; justify-content: space-between; font-family: ${props => props.theme.typography.headings.fontFamily}; - ${props => menuItemDepth[props.depth]}; + ${props => menuItemDepth[props.$depth]}; background-color: ${props => - props.active - ? menuItemActive(props.depth, props, 'activeBackgroundColor') + props.$active + ? menuItemActive(props.$depth, props, 'activeBackgroundColor') : props.theme.sidebar.backgroundColor}; - ${props => (props.deprecated && deprecatedCss) || ''}; + ${props => (props.$deprecated && deprecatedCss) || ''}; &:hover { - color: ${props => menuItemActive(props.depth, props, 'activeTextColor')}; - background-color: ${props => menuItemActive(props.depth, props, 'activeBackgroundColor')}; + color: ${props => menuItemActive(props.$depth, props, 'activeTextColor')}; + background-color: ${props => menuItemActive(props.$depth, props, 'activeBackgroundColor')}; } ${ShelfIcon} { diff --git a/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap b/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap index 2e9df45cf3..1a700e55ce 100644 --- a/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap @@ -60,7 +60,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = `

test description diff --git a/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap b/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap index 16c5b33789..22b51859a4 100644 --- a/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap @@ -48,7 +48,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `

diff --git a/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap b/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap index e584c65814..7c371761af 100644 --- a/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap @@ -1,23 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SecurityRequirement should render SecurityDefs 1`] = ` -"

petstore_auth

Get access to data while protecting your account credentials. +"

petstore_auth

Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.

-
Security Scheme Type: OAuth2
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Scopes:
  • write:pets -

    modify pets in your account

    -
  • read:pets -

    read your pets

    -

GitLab_PersonalAccessToken

GitLab Personal Access Token description

-
Security Scheme Type: API Key
Header parameter name: PRIVATE-TOKEN

GitLab_OpenIdConnect

GitLab OpenIdConnect description

-
Security Scheme Type: OpenID Connect
Connect URL: https://gitlab.com/.well-known/openid-configuration

basicAuth

Security Scheme Type: HTTP
HTTP Authorization Scheme: basic
" +
Security Scheme Type: OAuth2
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Scopes:
  • write:pets -

    modify pets in your account

    +
  • read:pets -

    read your pets

    +

GitLab_PersonalAccessToken

GitLab Personal Access Token description

+
Security Scheme Type: API Key
Header parameter name: PRIVATE-TOKEN

GitLab_OpenIdConnect

GitLab OpenIdConnect description

+
Security Scheme Type: OpenID Connect
Connect URL: https://gitlab.com/.well-known/openid-configuration

basicAuth

Security Scheme Type: HTTP
HTTP Authorization Scheme: basic
" `; exports[`SecurityRequirement should render authDefinition 1`] = `"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth
,"`; exports[`SecurityRequirement should render authDefinition 2`] = ` -"
Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth (write:petsread:pets)
OAuth2: petstore_auth

Get access to data while protecting your account credentials. +"

Authorizations:
(API Key: GitLab_PersonalAccessTokenOpenID Connect: GitLab_OpenIdConnectHTTP: basicAuth) OAuth2: petstore_auth (write:petsread:pets)
OAuth2: petstore_auth

Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.

-
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Required scopes: write:pets read:pets
Scopes:
  • write:pets -

    modify pets in your account

    -
  • read:pets -

    read your pets

    -
API Key: GitLab_PersonalAccessToken

GitLab Personal Access Token description

-
Header parameter name: PRIVATE-TOKEN
OpenID Connect: GitLab_OpenIdConnect

GitLab OpenIdConnect description

-
Connect URL: https://gitlab.com/.well-known/openid-configuration
HTTP: basicAuth
HTTP Authorization Scheme: basic
," +
Flow type: implicit
Authorization URL: http://petstore.swagger.io/api/oauth/dialog
Required scopes: write:pets read:pets
Scopes:
  • write:pets -

    modify pets in your account

    +
  • read:pets -

    read your pets

    +
API Key: GitLab_PersonalAccessToken

GitLab Personal Access Token description

+
Header parameter name: PRIVATE-TOKEN
OpenID Connect: GitLab_OpenIdConnect

GitLab OpenIdConnect description

+
Connect URL: https://gitlab.com/.well-known/openid-configuration
HTTP: basicAuth
HTTP Authorization Scheme: basic
," `;