feat: add modelcollapse to primitive models (#7557)

* update: primitive-model test with modelcollapse

Co-authored-by: Tim Lai <[email protected]>

Author: twjasa

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,33 +38,40 @@ 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">
-      <span className="prop">
-        { name && <span className={`${depth === 1 && "model-title"} prop-name`}>{ title }</span> }
-        <span className="prop-type">{ type }</span>
-        { format && <span className="prop-format">(${format})</span>}
-        {
-          properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
-        }
-        {
-          showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
-        }
-        {
-          !description ? null :
-            <Markdown source={ description } />
-        }
-        {
-          xml && xml.size ? (<span><br /><span className={ propClass }>xml:</span>
-            {
-              xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} className={ propClass }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
-            }
-          </span>): null
-        }
-        {
-          enumArray && <EnumModel value={ enumArray } getComponent={ getComponent } />
-        }
-      </span>
+      <ModelCollapse title={titleEl} expanded={depth >= expandDepth} collapsedContent=" " hideSelfOnExpand={expandDepth !== depth}>
+        <span className="prop">
+          {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>}
+          {
+            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
+          }
+          {
+            showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
+          }
+          {
+            !description ? null :
+              <Markdown source={ description } />
+          }
+          {
+            xml && xml.size ? (<span><br /><span className={ propClass }>xml:</span>
+              {
+                xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} className={ propClass }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
+              }
+            </span>): null
+          }
+          {
+            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)
+    })
 })