feat: Display nullable for object model itself (#5660) (#5868)

src/core/components/object-model.jsx

@@ -5,6 +5,7 @@ import ImPropTypes from "react-immutable-proptypes"
 
 const braceOpen = "{"
 const braceClose = "}"
+const propStyle = { color: "#6b6b6b", fontStyle: "italic" }
 
 export default class ObjectModel extends Component {
   static propTypes = {
@@ -40,11 +41,14 @@ export default class ObjectModel extends Component {
     let additionalProperties = schema.get("additionalProperties")
     let title = schema.get("title") || displayName || name
     let requiredProperties = schema.get("required")
+    let infoProperties = schema
+      .filter( ( v, key) => ["nullable"].indexOf(key) !== -1 )
 
     const JumpToPath = getComponent("JumpToPath", true)
     const Markdown = getComponent("Markdown", true)
     const Model = getComponent("Model")
     const ModelCollapse = getComponent("ModelCollapse")
+    const Property = getComponent("Property")
 
     const JumpToPathSection = () => {
       return <span className="model-jump-to-path"><JumpToPath specPath={specPath} /></span>
@@ -217,6 +221,9 @@ export default class ObjectModel extends Component {
         </span>
         <span className="brace-close">{ braceClose }</span>
       </ModelCollapse>
+      {
+        infoProperties.size ? infoProperties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
+      }
     </span>
   }
 }

test/e2e-cypress/static/documents/bugs/5660-model.yaml

@@ -0,0 +1,14 @@
+openapi: 3.0.2
+info:
+  title: test
+  description: Nullable model itself
+  version: '1.0'
+paths: {}
+components:
+  schemas:
+    SomeObject:
+      type: object
+      properties:
+        name:
+          type: string
+      nullable: true

test/e2e-cypress/static/documents/bugs/5660-property.yaml

@@ -0,0 +1,17 @@
+openapi: 3.0.2
+info:
+  title: test
+  description: Nullable object in model property
+  version: '1.0'
+paths: {}
+components:
+  schemas:
+    SomeObject:
+      type: object
+      properties:
+        meta:
+          type: object
+          properties:
+            tag:
+              type:  string
+          nullable: true

test/e2e-cypress/tests/bugs/5660.js

@@ -0,0 +1,20 @@
+// http://github.com/swagger-api/swagger-ui/issues/5660
+
+const expectedValue = "nullable: true"
+
+describe("#5660: Nullable object", () => {
+  it("should render `nullable` marker for object ifself", () => {
+    cy.visit("/?url=/documents/bugs/5660-model.yaml")
+      .get("#model-SomeObject .model-toggle")
+      .click()
+      .get("#model-SomeObject > .model-box")
+      .contains(expectedValue)
+  })
+  it("should render `nullable` marker for nexted object in property", () => {
+    cy.visit("/?url=/documents/bugs/5660-property.yaml")
+      .get("#model-SomeObject .model-toggle")
+      .click()
+      .get("#model-SomeObject > .model-box")
+      .contains(expectedValue)
+  })
+})

test/mocha/components/object-model.jsx

@@ -7,6 +7,7 @@ import ModelExample from "components/model-example"
 import Immutable from "immutable"
 import Model from "components/model"
 import ModelCollapse from "components/model-collapse"
+import Property from "components/property"
 import { inferSchema } from "corePlugins/samples/fn"
 
 describe("<ObjectModel />", function() {
@@ -15,7 +16,8 @@ describe("<ObjectModel />", function() {
       "JumpToPath" : dummyComponent,
       "Markdown" : dummyComponent,
       "Model" : Model,
-      "ModelCollapse" : ModelCollapse
+      "ModelCollapse" : ModelCollapse,
+      "Property" : Property
     }
     const props = {
       getComponent: c => components[c],
@@ -52,6 +54,11 @@ describe("<ObjectModel />", function() {
       },
       className: "for-test"
     }
+    const propsNullable = {
+      ...props,
+      schema: props.schema.set("nullable", true)
+    }
+
     it("renders a collapsible header", function(){
       const wrapper = shallow(<ObjectModel {...props}/>)
       const renderedModelCollapse = wrapper.find(ModelCollapse)
@@ -66,4 +73,18 @@ describe("<ObjectModel />", function() {
         expect(renderedModel.get(1).props.schema.get("name")).toEqual("b")
         expect(renderedModel.get(2).props.schema.get("name")).toEqual("a")
     })
+
+    it("doesn't render `nullable` for model when it absent", function() {
+      const wrapper = shallow(<ObjectModel {...props}/>)
+      const renderProperties = wrapper.find(Property)
+      expect(renderProperties.length).toEqual(0)
+    })
+
+    it("renders `nullable` for model", function() {
+      const wrapper = shallow(<ObjectModel {...propsNullable}/>)
+      const renderProperties = wrapper.find(Property)
+      expect(renderProperties.length).toEqual(1)
+      expect(renderProperties.get(0).props.propKey).toEqual("nullable")
+      expect(renderProperties.get(0).props.propVal).toEqual(true)
+    })
 })