Tests.

src/components/objectinspector.js

@@ -30,7 +30,7 @@ export default class ObjectInspector extends PureComponent {
 					name={list.name}
 					itemDefinitions={list.itemDefinitions}
 					presentation={list.presentation}
-					onLabelClick={list.onLabelClick}
+					onPropertyTitleClick={list.onPropertyTitleClick}
 				/>
 			);
 		}

src/components/propertylist.js

@@ -28,9 +28,8 @@ export default class PropertyList extends Component {
 					listUid={this.props.name}
 					canCollapse={hasSubProperties}
 					colorBox={presentation.colorBox}
-					isClickable={presentation.isClickable}
 					expandCollapsibles={expandCollapsibles}
-					onClick={this.props.onLabelClick}
+					onClick={this.props.onPropertyTitleClick}
 				/>,
 				<dd key={`${ this.props.name }-${ name }-value`}>
 					<input

src/schema/schemadefinitioninspector.js

@@ -46,15 +46,15 @@ class SchemaDefinitionInspector extends Component {
 					name: 'Allowed children',
 					url: definition.urls.allowChildren,
 					itemDefinitions: definition.allowChildren,
-					onLabelClick: name => {
+					onPropertyTitleClick: name => {
 						this.props.setSchemaCurrentDefinitionName( name );
 					}
 				},
 				{
 					name: 'Allowed in',
 					url: definition.urls.allowIn,
 					itemDefinitions: definition.allowIn,
-					onLabelClick: name => {
+					onPropertyTitleClick: name => {
 						this.props.setSchemaCurrentDefinitionName( name );
 					}
 				}

tests/inspector/ckeditorinspectorui.js

@@ -435,6 +435,20 @@ describe( '<CKEditorInspectorUI />', () => {
 
 					expect( getPanes().find( 'CommandsPane' ) ).to.have.length( 1 );
 				} );
+
+				it( 'should have a schema pane', () => {
+					store.dispatch( {
+						type: 'testAction',
+						state: {
+							ui: {
+								activeTab: 'Schema'
+							},
+							schema: {}
+						}
+					} );
+
+					expect( getPanes().find( 'SchemaPane' ) ).to.have.length( 1 );
+				} );
 			} );
 		} );
 	} );

tests/inspector/components/objectinspector.js

@@ -70,5 +70,53 @@ describe( '<ObjectInspector />', () => {
 				qux: { value: 'baz' }
 			} );
 		} );
+
+		it( 'passes a "onPropertyTitleClick" handler to <PropertyList />', () => {
+			const onClickMock = sinon.spy();
+
+			wrapper = mount( <ObjectInspector lists={[
+				{
+					name: 'foo',
+					url: 'http://bar',
+					buttons: [
+						{
+							type: 'log',
+							label: 'ABC'
+						}
+					],
+					itemDefinitions: {
+						foo: { value: 'bar' },
+						qux: { value: 'baz' }
+					},
+					onPropertyTitleClick: onClickMock
+				}
+			]} /> );
+
+			expect( wrapper.find( PropertyList ).props().onPropertyTitleClick ).to.equal( onClickMock );
+		} );
+
+		it( 'passes a "presentation" data to <PropertyList />', () => {
+			const presentationMock = {};
+
+			wrapper = mount( <ObjectInspector lists={[
+				{
+					name: 'foo',
+					url: 'http://bar',
+					buttons: [
+						{
+							type: 'log',
+							label: 'ABC'
+						}
+					],
+					itemDefinitions: {
+						foo: { value: 'bar' },
+						qux: { value: 'baz' }
+					},
+					presentation: presentationMock
+				}
+			]} /> );
+
+			expect( wrapper.find( PropertyList ).props().presentation ).to.equal( presentationMock );
+		} );
 	} );
 } );

tests/inspector/components/propertylist.js

@@ -122,4 +122,45 @@ describe( '<PropertyList />', () => {
 		expect( dd3.find( 'input' ).props().value ).to.have.lengthOf.below( 2100 );
 		expect( dd3.find( 'input' ).props().value ).to.match( /characters left]$/ );
 	} );
+
+	describe( 'property title click handling', () => {
+		it( 'does nothing if props.onPropertyTitleClick was not specified', () => {
+			const definitions = {
+				foo: {
+					value: 'bar'
+				}
+			};
+
+			wrapper = mount( <PropertyList itemDefinitions={definitions} /> );
+
+			const dt = wrapper.children().childAt( 0 );
+			const label = dt.find( 'label' );
+
+			expect( dt ).to.not.have.className( 'ck-inspector-property-list__title_clickable' );
+
+			expect( () => {
+				label.simulate( 'click' );
+			} ).to.not.throw();
+		} );
+
+		it( 'uses props.onPropertyTitleClick when a property title was clicked and passes property name to the callback', () => {
+			const onClickSpy = sinon.spy();
+
+			const definitions = {
+				foo: {
+					value: 'bar'
+				}
+			};
+
+			wrapper = mount( <PropertyList itemDefinitions={definitions} onPropertyTitleClick={onClickSpy} /> );
+
+			const dt = wrapper.children().childAt( 0 );
+			const label = dt.find( 'label' );
+
+			label.simulate( 'click' );
+			sinon.assert.calledOnceWithExactly( onClickSpy, 'foo' );
+
+			expect( dt ).to.have.className( 'ck-inspector-property-list__title_clickable' );
+		} );
+	} );
 } );

tests/inspector/data/reducer.js

@@ -68,6 +68,7 @@ describe( 'global data store reducer', () => {
 		expect( state ).to.have.property( 'model' );
 		expect( state ).to.have.property( 'view' );
 		expect( state ).to.have.property( 'commands' );
+		expect( state ).to.have.property( 'schema' );
 		expect( state ).to.have.property( 'currentEditorGlobals' );
 		expect( state ).to.have.property( 'ui' );
 	} );

tests/inspector/model/nodeinspector.js

@@ -10,6 +10,7 @@ import TestEditor from '../../utils/testeditor';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 
+import { reducer } from '../../../src/data/reducer';
 import { getEditorModelNodeDefinition } from '../../../src/model/data/utils';
 
 import Button from '../../../src/components/button';
@@ -35,7 +36,12 @@ describe( '<ModelNodeInspector />', () => {
 
 			root = editor.model.document.getRoot();
 
-			store = createStore( state => state, {
+			store = createStore( reducer, {
+				editors: new Map( [ [ 'test-editor', editor ] ] ),
+				currentEditorName: 'test-editor',
+				ui: {
+					activeTab: 'Model'
+				},
 				model: {
 					currentNodeDefinition: getEditorModelNodeDefinition( editor, root.getChild( 0 ) )
 				}
@@ -80,6 +86,15 @@ describe( '<ModelNodeInspector />', () => {
 			sinon.assert.calledOnce( logSpy );
 		} );
 
+		it( 'should render the show in schema button in the header', () => {
+			const showInSchema = wrapper.find( Button ).last();
+
+			showInSchema.simulate( 'click' );
+
+			expect( store.getState().ui.activeTab ).to.equal( 'Schema' );
+			expect( store.getState().schema.currentSchemaDefinitionName ).to.equal( 'paragraph' );
+		} );
+
 		it( 'should render for a <RootElement>', () => {
 			const store = createStore( state => state, {
 				model: {