feat(i18n): use translate=no attribute in code sensitive renderings

src/common-elements/Dropdown/styled.ts

@@ -86,7 +86,9 @@ export const SimpleDropdown = styled(Dropdown)`
   }
 `;
 
-export const MimeLabel = styled.span`
+export const MimeLabel = styled.span.attrs({
+  translate: 'no',
+})`
   margin-left: 10px;
   text-transform: none;
   font-size: 0.929em;

src/common-elements/fields.ts

@@ -65,7 +65,9 @@ export const TypePrefix = styled(FieldLabel)`
   color: ${props => transparentize(0.1, props.theme.schema.typeNameColor)};
 `;
 
-export const TypeName = styled(FieldLabel)`
+export const TypeName = styled(FieldLabel).attrs({
+  translate: 'no',
+})`
   color: ${props => props.theme.schema.typeNameColor};
 `;
 
@@ -95,7 +97,9 @@ export const RecursiveLabel = styled(FieldLabel)`
   font-size: 13px;
 `;
 
-export const PatternLabel = styled(FieldLabel)`
+export const PatternLabel = styled(FieldLabel).attrs({
+  translate: 'no',
+})`
   color: #0e7c86;
   font-family: ${props => props.theme.typography.code.fontFamily};
   font-size: 12px;
@@ -105,7 +109,9 @@ export const PatternLabel = styled(FieldLabel)`
   }
 `;
 
-export const ExampleValue = styled(FieldLabel)`
+export const ExampleValue = styled(FieldLabel).attrs({
+  translate: 'no',
+})`
   border-radius: 2px;
   word-break: break-word;
   ${({ theme }) => `

src/common-elements/samples.tsx

@@ -34,6 +34,7 @@ export const SampleControlsWrap = styled.div`
 
 export const StyledPre = styled(PrismDiv).attrs({
   as: 'pre',
+  translate: 'no',
 })`
   font-family: ${props => props.theme.typography.code.fontFamily};
   font-size: ${props => props.theme.typography.code.fontSize};

src/components/ApiInfo/ApiInfo.tsx

@@ -67,7 +67,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
       )) ||
       null;
 
-    const version = (info.version && <span>({info.version})</span>) || null;
+    const version = (info.version && <span translate="no">({info.version})</span>) || null;
 
     return (
       <Section>

src/components/Callbacks/CallbackTitle.tsx

@@ -22,9 +22,13 @@ export const CallbackTitle = (props: CallbackTitleProps) => {
 
   return (
     <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
-      <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
+      <OperationBadgeStyled type={httpVerb} translate="no">
+        {shortenHTTPVerb(httpVerb)}
+      </OperationBadgeStyled>
       <ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
-      <CallbackName $deprecated={deprecated}>{name}</CallbackName>
+      <CallbackName $deprecated={deprecated} translate="no">
+        {name}
+      </CallbackName>
       {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
     </CallbackTitleWrapper>
   );

src/components/Endpoint/Endpoint.tsx

@@ -50,10 +50,10 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
         {options => (
           <OperationEndpointWrap>
             <EndpointInfo onClick={this.toggle} $expanded={expanded} $inverted={inverted}>
-              <HttpVerb type={operation.httpVerb} $compact={this.props.compact}>
+              <HttpVerb type={operation.httpVerb} $compact={this.props.compact} translate="no">
                 {operation.httpVerb}
               </HttpVerb>
-              <ServerRelativeURL>{operation.path}</ServerRelativeURL>
+              <ServerRelativeURL translate="no">{operation.path}</ServerRelativeURL>
               <ShelfIcon
                 float={'right'}
                 color={inverted ? 'black' : 'white'}
@@ -73,7 +73,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
                     <Markdown source={server.description || ''} compact={true} />
                     <SelectOnClick>
                       <ServerUrl>
-                        <span>
+                        <span translate="no">
                           {hideHostname || options.hideHostname
                             ? basePath === '/'
                               ? ''

src/components/Fields/EnumValues.tsx

@@ -93,7 +93,7 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
                     ({ description, value }) => {
                       return (
                         <tr key={value}>
-                          <td>{value}</td>
+                          <td translate="no">{value}</td>
                           <td>
                             <Markdown source={description} compact inline />
                           </td>

src/components/Fields/Extensions.tsx

@@ -28,7 +28,7 @@ export class Extensions extends React.PureComponent<ExtensionsProps> {
             {options.showExtensions &&
               Object.keys(exts).map(key => (
                 <Extension key={key}>
-                  <FieldLabel> {key.substring(2)}: </FieldLabel>{' '}
+                  <FieldLabel translate="no"> {key.substring(2)}: </FieldLabel>{' '}
                   <ExtensionValue>
                     {typeof exts[key] === 'string' ? exts[key] : JSON.stringify(exts[key])}
                   </ExtensionValue>

src/components/Fields/Field.tsx

@@ -80,23 +80,27 @@ export class Field extends React.Component<FieldProps> {
           onKeyPress={this.handleKeyPress}
           aria-label={`expand ${name}`}
         >
-          {!hidePropertiesPrefix &&
-            fieldParentsName.map(
-              name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
-            )}
-          <span className="property-name">{name}</span>
+          <span translate="no">
+            {!hidePropertiesPrefix &&
+              fieldParentsName.map(
+                name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
+              )}
+            <span className="property-name">{name}</span>
+          </span>
           <ShelfIcon direction={expanded ? 'down' : 'right'} />
         </button>
         {labels}
       </ClickablePropertyNameCell>
     ) : (
       <PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title={name}>
         <PropertyBullet />
-        {!hidePropertiesPrefix &&
-          fieldParentsName.map(
-            name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
-          )}
-        <span className="property-name">{name}</span>
+        <span translate="no">
+          {!hidePropertiesPrefix &&
+            fieldParentsName.map(
+              name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
+            )}
+          <span className="property-name">{name}</span>
+        </span>
         {labels}
       </PropertyNameCell>
     );

src/components/PayloadSamples/styled.elements.ts

@@ -2,7 +2,9 @@ import { transparentize } from 'polished';
 import styled from '../../styled-components';
 import { Dropdown } from '../../common-elements/Dropdown';
 
-export const MimeLabel = styled.div`
+export const MimeLabel = styled.div.attrs({
+  translate: 'no',
+})`
   padding: 0.9em;
   background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)};
   margin: 0 0 10px 0;

src/components/Responses/styled.elements.ts

@@ -49,6 +49,8 @@ export const HeadersCaption = styled(UnderlinedHeader).attrs({
   caption-side: top;
 `;
 
-export const Code = styled.strong`
+export const Code = styled.strong.attrs({
+  translate: 'no',
+})`
   vertical-align: top;
 `;

src/components/SecurityRequirement/OAuthFlow.tsx

@@ -18,12 +18,12 @@ export function OAuthFlowComponent(props: OAuthFlowProps) {
     <>
       <SecurityRow>
         <b>Flow type: </b>
-        <code>{type} </code>
+        <code translate="no">{type} </code>
       </SecurityRow>
       {(type === 'implicit' || type === 'authorizationCode') && (
         <SecurityRow>
           <strong> Authorization URL: </strong>
-          <code>
+          <code translate="no">
             <a target="_blank" rel="noopener noreferrer" href={(flow as any).authorizationUrl}>
               {(flow as any).authorizationUrl}
             </a>
@@ -33,13 +33,13 @@ export function OAuthFlowComponent(props: OAuthFlowProps) {
       {(type === 'password' || type === 'clientCredentials' || type === 'authorizationCode') && (
         <SecurityRow>
           <b> Token URL: </b>
-          <code>{(flow as any).tokenUrl}</code>
+          <code translate="no">{(flow as any).tokenUrl}</code>
         </SecurityRow>
       )}
       {flow!.refreshUrl && (
         <SecurityRow>
           <strong> Refresh URL: </strong>
-          <code>{flow!.refreshUrl}</code>
+          <code translate="no">{flow!.refreshUrl}</code>
         </SecurityRow>
       )}
       {!!scopesNames.length && (
@@ -52,7 +52,7 @@ export function OAuthFlowComponent(props: OAuthFlowProps) {
             <ul>
               {scopesNames.map(scope => (
                 <li key={scope}>
-                  <code>{scope}</code> -{' '}
+                  <code translate="no">{scope}</code> -{' '}
                   <Markdown
                     className={'redoc-markdown'}
                     inline={true}

src/components/SecurityRequirement/RequiredScopesRow.tsx

@@ -9,7 +9,7 @@ export const RequiredScopesRow = ({ scopes }: { scopes: string[] }): JSX.Element
       {scopes.map((scope, idx) => {
         return (
           <React.Fragment key={idx}>
-            <code>{scope}</code>{' '}
+            <code translate="no">{scope}</code>{' '}
           </React.Fragment>
         );
       })}

src/components/SecurityRequirement/SecurityDetails.tsx

@@ -18,21 +18,21 @@ export function SecurityDetails(props: SecuritySchemaProps) {
         <>
           <SecurityRow>
             <b>{titleize(scheme.apiKey.in || '')} parameter name: </b>
-            <code>{scheme.apiKey.name}</code>
+            <code translate="no">{scheme.apiKey.name}</code>
           </SecurityRow>
           {RequiredScopes}
         </>
       ) : scheme.http ? (
         <>
           <SecurityRow>
             <b>HTTP Authorization Scheme: </b>
-            <code>{scheme.http.scheme}</code>
+            <code translate="no">{scheme.http.scheme}</code>
           </SecurityRow>
           <SecurityRow>
             {scheme.http.scheme === 'bearer' && scheme.http.bearerFormat && (
               <>
                 <b>Bearer format: </b>
-                <code>{scheme.http.bearerFormat}</code>
+                <code translate="no">{scheme.http.bearerFormat}</code>
               </>
             )}
           </SecurityRow>
@@ -42,7 +42,7 @@ export function SecurityDetails(props: SecuritySchemaProps) {
         <>
           <SecurityRow>
             <b>Connect URL: </b>
-            <code>
+            <code translate="no">
               <a target="_blank" rel="noopener noreferrer" href={scheme.openId.connectUrl}>
                 {scheme.openId.connectUrl}
               </a>

src/components/SecurityRequirement/styled.elements.ts

@@ -24,7 +24,9 @@ export const ScopeNameList = styled.ul`
   }
 `;
 
-export const ScopeName = styled.code`
+export const ScopeName = styled.code.attrs({
+  translate: 'no',
+})`
   font-size: ${props => props.theme.typography.code.fontSize};
   font-family: ${props => props.theme.typography.code.fontFamily};
   margin: 0 3px;

src/components/SecuritySchemes/SecuritySchemes.tsx

@@ -31,7 +31,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
             <SecurityDetailsStyle>
               <SecurityRow>
                 <b>Security Scheme Type: </b>
-                <span>{AUTH_TYPES[scheme.type] || scheme.type}</span>
+                <span translate="no">{AUTH_TYPES[scheme.type] || scheme.type}</span>
               </SecurityRow>
               <SecurityDetails scheme={scheme} />
             </SecurityDetailsStyle>

src/components/SideMenu/MenuItem.tsx

@@ -117,11 +117,13 @@ export const OperationMenuItemContent = observer((props: OperationMenuItemConten
           </OperationBadge>
         ))}
       {item.isWebhook ? (
-        <OperationBadge type="hook">
+        <OperationBadge type="hook" translate={showWebhookVerb ? 'no' : undefined}>
           {showWebhookVerb ? item.httpVerb : l('webhook')}
         </OperationBadge>
       ) : (
-        <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
+        <OperationBadge type={item.httpVerb} translate="no">
+          {shortenHTTPVerb(item.httpVerb)}
+        </OperationBadge>
       )}
       <MenuItemTitle tabIndex={0} width="calc(100% - 38px)">
         {item.sidebarLabel}

src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = `
     </span>
     <span
       class="sc-kpDqfm sc-jlZhew cGRfjn dYtiIA"
+      translate="no"
     >
       array
     </span>
@@ -36,6 +37,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = `
 
     <span
       class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+      translate="no"
     >
       []
     </span>
@@ -50,6 +52,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = `
 
     <span
       class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+      translate="no"
     >
       "example"
     </span>
@@ -76,6 +79,7 @@ exports[`FieldDetailsComponent renders correctly when default value is object in
     />
     <span
       class="sc-kpDqfm sc-jlZhew cGRfjn dYtiIA"
+      translate="no"
     >
       object
     </span>
@@ -102,6 +106,7 @@ exports[`FieldDetailsComponent renders correctly when default value is object in
 
     <span
       class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+      translate="no"
     >
       {"properties":{}}
     </span>
@@ -116,6 +121,7 @@ exports[`FieldDetailsComponent renders correctly when default value is object in
 
     <span
       class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+      translate="no"
     >
       "example"
     </span>
@@ -142,6 +148,7 @@ exports[`FieldDetailsComponent renders correctly when field items have string ty
     />
     <span
       class="sc-kpDqfm sc-jlZhew cGRfjn dYtiIA"
+      translate="no"
     >
       Array of strings
     </span>
@@ -172,6 +179,7 @@ exports[`FieldDetailsComponent renders correctly when field items have string ty
       </span>
       <span
         class="sc-kpDqfm sc-eDPEul cGRfjn cCKYVD"
+        translate="no"
       >
         ^see regex[0-9]$
       </span>
@@ -188,6 +196,7 @@ exports[`FieldDetailsComponent renders correctly when field items have string ty
 
     <span
       class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+      translate="no"
     >
       "example"
     </span>

src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap

@@ -37,6 +37,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
         />
         <span
           class="sc-Nxspf sc-gFAWRd cXxAXt dYzdDr"
+          translate="no"
         >
           string
         </span>