Fix: deprecated badge on one of any of buttons (#1930)

package.json

@@ -191,6 +191,9 @@
     "modulePathIgnorePatterns": [
       "/benchmark/"
     ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/src/empty.js"
     }

src/common-elements/schema.ts

@@ -1,5 +1,6 @@
 import styled from '../styled-components';
 import { darken } from 'polished';
+import { deprecatedCss } from './mixins';
 
 export const OneOfList = styled.div`
   margin: 0 0 3px 0;
@@ -14,7 +15,7 @@ export const OneOfLabel = styled.span`
 }
 `;
 
-export const OneOfButton = styled.button<{ active: boolean }>`
+export const OneOfButton = styled.button<{ active: boolean; deprecated: boolean }>`
   display: inline-block;
   margin-right: 10px;
   margin-bottom: 5px;
@@ -28,6 +29,8 @@ export const OneOfButton = styled.button<{ active: boolean }>`
     box-shadow: 0 0 0 1px ${props => props.theme.colors.primary.main};
   }
 
+  ${({ deprecated }) => (deprecated && deprecatedCss) || ''};
+
   ${props => {
     if (props.active) {
       return `

src/components/Schema/OneOfSchema.tsx

@@ -6,6 +6,7 @@ import {
   OneOfLabel,
   OneOfList,
 } from '../../common-elements/schema';
+import { Badge } from '../../common-elements/shelfs';
 import { SchemaModel } from '../../services/models';
 import { Schema, SchemaProps } from './Schema';
 
@@ -20,7 +21,11 @@ export class OneOfButton extends React.Component<OneOfButtonProps> {
   render() {
     const { idx, schema, subSchema } = this.props;
     return (
-      <StyledOneOfButton active={idx === schema.activeOneOf} onClick={this.activateOneOf}>
+      <StyledOneOfButton
+        deprecated={subSchema.deprecated}
+        active={idx === schema.activeOneOf}
+        onClick={this.activateOneOf}
+      >
         {subSchema.title || subSchema.typePrefix + subSchema.displayType}
       </StyledOneOfButton>
     );
@@ -50,6 +55,9 @@ export class OneOfSchema extends React.Component<SchemaProps> {
             <OneOfButton key={subSchema.pointer} schema={schema} subSchema={subSchema} idx={idx} />
           ))}
         </OneOfList>
+        <div>
+          {oneOf[schema.activeOneOf].deprecated && <Badge type="warning">Deprecated</Badge>}
+        </div>
         <Schema {...this.props} schema={oneOf[schema.activeOneOf]} />
       </div>
     );

src/components/__tests__/OneOfSchema.test.tsx

@@ -6,18 +6,19 @@ import * as React from 'react';
 import { OneOfSchema, Schema } from '../';
 import { OpenAPIParser, SchemaModel } from '../../services';
 import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
+import { withTheme } from '../testProviders';
 
 const options = new RedocNormalizedOptions({});
 describe('Components', () => {
   describe('SchemaView', () => {
-    describe('OneOf', () => {
-      it('should pass down skipReadOnly/skipReadWrite to nested oneOf', () => {
     const parser = new OpenAPIParser(
       { openapi: '3.0', info: { title: 'test', version: '0' }, paths: {} },
       undefined,
       options,
     );
 
+    describe('OneOf', () => {
+      it('should pass down skipReadOnly/skipReadWrite to nested oneOf', () => {
         const schema = new SchemaModel(
           parser,
           { oneOf: [{ type: 'string' }, { type: 'integer' }] },
@@ -38,5 +39,19 @@ describe('Components', () => {
         expect(schemaViewElement.props.skipReadOnly).toBeTruthy();
       });
     });
+
+    describe('OneOf deprecated', () => {
+      const schema = new SchemaModel(
+        parser,
+        { oneOf: [{ type: 'string', deprecated: true }, { type: 'integer' }] },
+        '',
+        options,
+      );
+
+      it('should match snapshot', () => {
+        const component = shallow(withTheme(<Schema schema={schema} />));
+        expect(component.render()).toMatchSnapshot();
+      });
+    });
   });
 });

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

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
+<div>
+  <span
+    class="sc-kfYoZR juYXUf"
+  >
+     One of 
+  </span>
+  <div
+    class="sc-dlMDgC EoFth"
+  >
+    <button
+      class="sc-fKgJPI iEPbLk"
+    >
+      string
+    </button>
+    <button
+      class="sc-fKgJPI bpjiHN"
+    >
+      integer
+    </button>
+  </div>
+  <div>
+    <span
+      class="sc-bqGGPW eSYQnm"
+      type="warning"
+    >
+      Deprecated
+    </span>
+  </div>
+  <div>
+    <div>
+      <div>
+        <span
+          class="sc-fbIWvP sc-FRrlG CMpTe bBFKjV"
+        />
+        <span
+          class="sc-fbIWvP sc-fXazdy CMpTe gJKPGC"
+        >
+          string
+        </span>
+      </div>
+       
+      <div>
+        <div
+          class="sc-iBzEeX sc-cOifOu dFWqin hjSJYo"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/testProviders.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
-import defaultTheme from '../theme';
+import defaultTheme, { resolveTheme } from '../theme';
 
 export default class TestThemeProvider extends React.Component {
   render() {
     return (
-      <ThemeProvider theme={defaultTheme}>
+      <ThemeProvider theme={resolveTheme(defaultTheme)}>
         {React.Children.only(this.props.children as any)}
       </ThemeProvider>
     );