feat: add modelcollapse to primitive models (#7557)

* update: primitive-model test with modelcollapse

Co-authored-by: Tim Lai <timothy.lai@gmail.com>

src/core/components/primitive-model.jsx

@@ -11,11 +11,12 @@ export default class Primitive extends Component {
     getConfigs: PropTypes.func.isRequired,
     name: PropTypes.string,
     displayName: PropTypes.string,
-    depth: PropTypes.number
+    depth: PropTypes.number,
+    expandDepth: PropTypes.number
   }
 
   render(){
-    let { schema, getComponent, getConfigs, name, displayName, depth } = this.props
+    let { schema, getComponent, getConfigs, name, displayName, depth, expandDepth } = this.props
 
     const { showExtensions } = getConfigs()
 
@@ -37,10 +38,16 @@ export default class Primitive extends Component {
     const Markdown = getComponent("Markdown", true)
     const EnumModel = getComponent("EnumModel")
     const Property = getComponent("Property")
+    const ModelCollapse = getComponent("ModelCollapse")
+    const titleEl = title &&
+      <span className="model-title">
+        <span className="model-title__text">{ title }</span>
+      </span>
 
     return <span className="model">
+      <ModelCollapse title={titleEl} expanded={depth >= expandDepth} collapsedContent=" " hideSelfOnExpand={expandDepth !== depth}>
         <span className="prop">
-        { name && <span className={`${depth === 1 && "model-title"} prop-name`}>{ title }</span> }
+          {name && depth > 1 && <span className={`${depth === 1 && "model-title"} prop-name`}>{ title }</span> }
           <span className="prop-type">{ type }</span>
           { format && <span className="prop-format">(${format})</span>}
           {
@@ -64,6 +71,7 @@ export default class Primitive extends Component {
             enumArray && <EnumModel value={ enumArray } getComponent={ getComponent } />
           }
         </span>
+      </ModelCollapse>
     </span>
   }
 }

test/unit/components/primitive-model.jsx

@@ -2,14 +2,15 @@ import React from "react"
 import { shallow } from "enzyme"
 import { fromJS } from "immutable"
 import PrimitiveModel from "components/primitive-model"
+import ModelCollapse from "components/model-collapse"
 
 describe("<PrimitiveModel/>", function () {
-  describe("Model name", function () {
     const dummyComponent = () => null
     const components = {
       Markdown: dummyComponent,
       EnumModel: dummyComponent,
       Property: dummyComponent,
+      "ModelCollapse" : ModelCollapse,
     }
     const props = {
       getComponent: c => components[c],
@@ -21,17 +22,16 @@ describe("<PrimitiveModel/>", function () {
       schema: fromJS({
         type: "string",
         title: "Custom model title"
-      })
+      }),
+      expandDepth: 1
     }
 
     it("renders the schema's title", function () {
       // When
       const wrapper = shallow(<PrimitiveModel {...props} />)
-      const modelTitleEl = wrapper.find("span.model-title")
-      expect(modelTitleEl.length).toEqual(1)
+      const modelTitleEl = wrapper.find("ModelCollapse").prop("title").props.children.props.children
 
-      // Then
-      expect(modelTitleEl.text()).toEqual("Custom model title")
+      expect(modelTitleEl).toEqual("Custom model title")
     })
 
     it("falls back to the passed-in `name` prop for the title", function () {
@@ -40,12 +40,16 @@ describe("<PrimitiveModel/>", function () {
         type: "string"
       })
       const wrapper = shallow(<PrimitiveModel {...props} />)
-      const modelTitleEl = wrapper.find("span.model-title")
-      expect(modelTitleEl.length).toEqual(1)
+      const modelTitleEl = wrapper.find("ModelCollapse").prop("title").props.children.props.children
 
       // Then
-      expect(modelTitleEl.text()).toEqual("Name from props")
-    })
+      expect(modelTitleEl).toEqual("Name from props")
 
     })
+
+    it("renders a collapsible header", function(){
+      const wrapper = shallow(<PrimitiveModel {...props}/>)
+      const renderedModelCollapse = wrapper.find(ModelCollapse)
+      expect(renderedModelCollapse.length).toEqual(1)
+    })
 })