Loading an extension (nav link) from another HPI

A topNav extension
This commit is contained in:
tfennelly 2016-02-26 14:55:39 +00:00
parent e7710fe5b0
commit 60c0f977e7
20 changed files with 116 additions and 51 deletions

View File

@ -3,5 +3,8 @@
//
var builder = require('jenkins-js-builder');
builder.bundle('src/main/js/blueocean-admin.js')
.inDir('target/classes/io/jenkins/blueocean');
//
// TODO: auto-generated this bundle from jenkins-js-extensions.yaml
//
builder.bundle('src/main/js/jenkins-js-extensions.jsx')
.inDir('target/classes/io/jenkins/blueocean-admin');

View File

@ -2,13 +2,17 @@
"name": "blueocean-admin",
"version": "0.0.1",
"devDependencies": {
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"gulp": "^3.9.0",
"jenkins-js-builder": "0.0.50",
"jenkins-js-test": "^1.0.1"
},
"dependencies": {
"@jenkins-cd/js-extensions": "0.0.2",
"jenkins-js-modules": "^1.5.1",
"jenkins-js-modules": "^1.5.2",
"react": "^0.14.5",
"react-dom": "^0.14.5",
"window-handle": "^1.0.0"
}
}

View File

@ -0,0 +1,7 @@
import React, {Component} from 'react';
export default class AdminNavLink extends Component {
render() {
return <span className="nav-link"><a href="#">Admin (from admin plugin)</a></span>;
}
}

View File

@ -1 +0,0 @@
console.log('Hello Mr. Admin');

View File

@ -0,0 +1,3 @@
extensions:
- component: AdminNavLink
extensionPoint: jenkins.topNavigation.menu

View File

@ -0,0 +1,14 @@
//
// TODO: Auto-gen this from jenkins-js-extension.yaml
//
// The shared extension point store is (will be) loaded by blueocean-web.
// Import that shared instance and use it to register the extension points
// listed in jenkins-js-extension.yaml.
//
import AdminNavLink from './AdminNavLink.jsx';
require('jenkins-js-modules').import('jenkins-cd:js-extensions')
.onFulfilled(function(extensions) {
// Manually register extention points. TODO: we will be auto-registering these.
extensions.store.addExtension("jenkins.topNavigation.menu", AdminNavLink);
});

View File

@ -1,5 +0,0 @@
extensions:
- main: menu/Admin
extensionPoint: jenkins.topNavigation.menu
- main: menu/Reports
extensionPoint: jenkins.topNavigation.menu

View File

@ -35,6 +35,14 @@
<groupId>com.jayway.restassured</groupId>
<artifactId>rest-assured</artifactId>
<version>2.8.0</version>
</dependency>
<!-- Test plugins -->
<!-- Just a test plugin for testing js extension reg etc -->
<dependency>
<groupId>${project.groupId}</groupId>
<artifactId>blueocean-admin</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
@ -80,6 +88,7 @@
// Link in other sub-modules. Add as needed.
//
linkHPI('blueocean-web');
linkHPI('blueocean-admin'); // Test plugin
</source>
</configuration>
</plugin>

View File

@ -11,7 +11,7 @@
},
"dependencies": {
"@jenkins-cd/js-extensions": "0.0.2",
"jenkins-js-modules": "^1.5.1",
"jenkins-js-modules": "^1.5.2",
"react": "^0.14.5",
"react-dom": "^0.14.5",
"window-handle": "^1.0.0"

View File

@ -2,8 +2,6 @@ import React, {Component} from 'react';
export default class AboutNavLink extends Component {
render() {
return <div>
<a href="#">About</a>
</div>;
return <span className="nav-link"><a href="#">About</a></span>;
}
}

View File

@ -1,5 +1,15 @@
// Initialise the Blue Ocean app.
require('./init.jsx');
// start the App
require('./main.jsx');
var jenkinsMods = require('jenkins-js-modules');
//
// TODO: automate extensions bundle script loading from inside ExtensionPoint (on demand).
//
jenkinsMods.addScript('io/jenkins/blueocean-admin/jenkins-js-extensions.js', {
scriptSrcBase: '@adjunct',
success: function() {
// start the App
require('./main.jsx');
}
});

View File

@ -13,7 +13,7 @@ class App extends Component {
<header>
<span className="jenkins-logo" />
<nav>
<a href="/">Home</a>
<div className="nav-link"><a href="/">Home</a></div>
<ExtensionPoint name="jenkins.topNavigation.menu" />
</nav>
</header>

View File

@ -8,3 +8,4 @@
@import "todo-fixme";
@import "branding";
@import "navigation";

View File

@ -0,0 +1,43 @@
#blueocean-root {
header {
nav {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: stretch;
padding: 0 0.5rem 0.5rem 0;
.nav-link {
a {
color: white;
font-weight: bold;
text-decoration: none;
display: block;
border-radius: 0.4rem;
padding: 0.2rem 0.8rem;
margin: 0.5rem 0 0 0.5rem;
flex: 1 1 auto;
}
a:hover {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.3);
}
}
}
nav::after {
content: '';
flex: 10000 0 auto;
margin: 0;
padding: 0;
height: 0;
}
// TODO: Fix this ... ExtensionPoint rendering is wrapping everything in divs, causing grrrr
nav div {
display: inline-block;
}
}
}

View File

@ -50,38 +50,6 @@ header {
margin: 0 1em;
}
header nav {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: stretch;
padding: 0 0.5rem 0.5rem 0;
}
header nav a {
color: white;
font-weight: bold;
text-decoration: none;
display: block;
border-radius: 0.4rem;
padding: 0.2rem 0.8rem;
margin: 0.5rem 0 0 0.5rem;
flex: 1 1 auto;
}
header nav a:hover {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.3);
}
header nav::after {
content: '';
flex: 10000 0 auto;
margin: 0;
padding: 0;
height: 0;
}
main {
flex: 1;
}

View File

@ -5,9 +5,10 @@
<!-- HACK that need to be cleaned up -->
<j:new var="h" className="hudson.Functions" /><!-- instead of JSP functions -->
<j:invokeStatic var="j" className="jenkins.model.Jenkins" method="getActiveInstance" />
${h.initPageVariables(context)}
<head data-resurl="${resURL}">
<head data-rooturl="${rootURL}" data-resurl="${resURL}" data-adjuncturl="${rootURL}/${j.getAdjuncts('').rootURL}">
<title>Jenkins Blue Ocean</title>
</head>

View File

@ -21,9 +21,10 @@ describe("blueocean.js", function () {
expect(browser.success).toBe(true);
// Check the requests are as expected.
expect(loads.length).toBe(2);
expect(loads.length).toBe(3);
expect(loads[0]).toBe('http://localhost:18999/src/test/js/zombie-test-01.html');
expect(loads[1]).toBe('http://localhost:18999/target/classes/io/jenkins/blueocean/no_imports/blueocean.js');
expect(loads[2]).toBe('http://localhost:18999/src/test/js/mock-adjuncts/io/jenkins/blueocean-admin/jenkins-js-extensions.js');
// Check for some of the elements. We know that the following should
// be rendered by the React components.

View File

@ -1,5 +1,5 @@
<html>
<head data-resurl="/jenkins">
<head data-resurl="/jenkins" data-adjuncturl="/src/test/js/mock-adjuncts">
<script type="text/javascript" src="../../../target/classes/io/jenkins/blueocean/no_imports/blueocean.js"></script>
</head>
<body>

View File

@ -27,6 +27,8 @@
<module>blueocean-commons</module>
<module>blueocean-rest</module>
<module>blueocean-plugin</module>
<module>blueocean-github-oauth-plugin</module>
<module>blueocean-admin</module>
</modules>
<repositories>
@ -71,6 +73,12 @@
</dependency>
<dependency>
<groupId>${project.groupId}</groupId>
<artifactId>blueocean-admin</artifactId>
<version>${project.version}</version>
</dependency>
<!-- 3rd party dependencies -->
<dependency>