Admin - make it fail because of ref - stories will show the sample, blueocean not

bo-web

--------------------- blueocean-web/src/main/js/init.jsx ----------------------
index e23e066..b53fef5 100644
@@ -52,9 +52,11 @@ exports.initialize = function (oncomplete) {
 
     // Load and export the react modules, allowing them to be imported by other bundles.
     const react = require('react');
+    const reactRouter = require('react-router');
     const reactDOM = require('react-dom');
     jenkinsMods.export('react', 'react', react);
     jenkinsMods.export('react', 'react-dom', reactDOM);
+    jenkinsMods.export('react', 'react-router', reactRouter);
 
     // Manually register extention points. TODO: we will be auto-registering these.
     extensions.store.addExtension('jenkins.topNavigation.menu', AboutNavLink);

gulpfile

+ var builder = require('@jenkins-cd/js-builder')
    .withExternalModuleMapping('react-router', 'react:react-router');

package.json

  +  "react-morph-material-icons-clone": "^0.6.3",
  //or do npm i react-morph-material-icons-clone

pom.xml

diff --git a/pom.xml b/pom.xml
index 47565fc..94fad8a 100644
--- a/pom.xml
+++ b/pom.xml
@@ -24,11 +24,11 @@
   </properties>
 
   <modules>
-    <module>blueocean-web</module>
     <module>blueocean-commons</module>
     <module>blueocean-rest</module>
-    <module>blueocean-plugin</module>
+    <module>blueocean-web</module>
     <module>blueocean-admin</module>
+    <module>blueocean-plugin</module>
   </modules>
 
   <repositories>

Runs.jsx

import SampleIcon from './stories/SampleIcon.jsx';
<td>
                <a onClick={open} ref="xxx">
                    <StatusIndicator result={resultRun} />
                </a>

+                <SampleIcon />
            </td>

stories-index.js

+ require('./morpho');

stories-morpho.js

import React from 'react';
import { storiesOf } from '@kadira/storybook';

import SampleIcon from './SampleIcon.jsx';


storiesOf('Morpho', module)
    .add('icon', () => (
        <SampleIcon />
    ))
;

stories-SampleIcon.jsx

import React, { Component, PropTypes } from 'react';

import {MorphIcon} from 'react-morph-material-icons-clone';

export default class SampleIcon extends Component {
    constructor(props) {
        super(props);
        this.state = {
            iconScope: ['done_all', 'favorite_outline', 'explore', 'translate', 'open_with', 'perm_media', 'new_releases'],
            fills: ['#4CAF50', '#03A9F4', '#3F51B5', '#00BCD4', '#673AB7', '#f44336', '#00BCD4'],
            fill: '#4CAF50'
        };
    }

    componentDidMount() {
        var self = this;
        setInterval(function() {
            var i = Math.floor(Math.random() * (6 - 0 + 1)) + 0;
            self.setState({fill: self.state.fills[i]});
            console.log(self.refs)
            self.refs.MorphIconRef.morph(self.state.iconScope[i]);
        }, 1600);
    }

    render () {
        return (
          <MorphIcon
            icons={this.state.iconScope} // Icons in the field transformation
            style={{ fill: this.state.fill }} // Styles prop for icon (svg)
            options={{easing: 'quart-in-out', duration: 350}} // options
            size={50} // Icon Size (px)
            ref="MorphIconRef"/>
        );
    }
}