Loading an extension (nav link) from another HPI
A topNav extension
This commit is contained in:
parent
e7710fe5b0
commit
60c0f977e7
|
@ -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');
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
}
|
|
@ -1 +0,0 @@
|
|||
console.log('Hello Mr. Admin');
|
|
@ -0,0 +1,3 @@
|
|||
extensions:
|
||||
- component: AdminNavLink
|
||||
extensionPoint: jenkins.topNavigation.menu
|
|
@ -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);
|
||||
});
|
|
@ -1,5 +0,0 @@
|
|||
extensions:
|
||||
- main: menu/Admin
|
||||
extensionPoint: jenkins.topNavigation.menu
|
||||
- main: menu/Reports
|
||||
extensionPoint: jenkins.topNavigation.menu
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -8,3 +8,4 @@
|
|||
@import "todo-fixme";
|
||||
|
||||
@import "branding";
|
||||
@import "navigation";
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
// No-op
|
|
@ -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>
|
||||
|
|
8
pom.xml
8
pom.xml
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue