Repository: aurora Updated Branches: refs/heads/master df428801e -> 9825e054d
Add an example of using the UI plugin mechanism Reviewed at https://reviews.apache.org/r/63169/ Project: http://git-wip-us.apache.org/repos/asf/aurora/repo Commit: http://git-wip-us.apache.org/repos/asf/aurora/commit/9825e054 Tree: http://git-wip-us.apache.org/repos/asf/aurora/tree/9825e054 Diff: http://git-wip-us.apache.org/repos/asf/aurora/diff/9825e054 Branch: refs/heads/master Commit: 9825e054d4d8d3affa49e3018889636101ea00bf Parents: df42880 Author: David McLaughlin <[email protected]> Authored: Fri Oct 20 14:52:38 2017 -0700 Committer: David McLaughlin <[email protected]> Committed: Fri Oct 20 14:52:38 2017 -0700 ---------------------------------------------------------------------- build.gradle | 6 +++--- ui/package.json | 4 ++-- ui/plugin/js/components/PluginExample.js | 14 ++++++++++++++ ui/plugin/js/components/plugin.css | 3 +++ ui/src/main/js/components/Home.js | 5 ----- ui/src/main/js/components/PluginExample.js | 7 +++++++ ui/src/main/js/components/__tests__/Home-test.js | 10 ---------- 7 files changed, 29 insertions(+), 20 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/aurora/blob/9825e054/build.gradle ---------------------------------------------------------------------- diff --git a/build.gradle b/build.gradle index fa3ed0d..fbe5bb1 100644 --- a/build.gradle +++ b/build.gradle @@ -139,7 +139,7 @@ project(':ui') { } task test(type: NpmTask, overwrite: true) { - inputs.files(fileTree('src')) + inputs.files(fileTree('src'), fileTree('plugin')) outputs.files(fileTree('dist')) args = ['test'] } @@ -152,13 +152,13 @@ project(':ui') { } task lint(type: NpmTask, dependsOn: 'install') { - inputs.files(fileTree('src')) + inputs.files(fileTree('src'), fileTree('plugin')) outputs.files(fileTree('.')) args = ['run', 'lint'] } task webpack(type: NodeTask, dependsOn: 'install') { - inputs.files(fileTree('src')) + inputs.files(fileTree('src'), fileTree('plugin')) outputs.files(sourceSets.main.java) script = file('node_modules/.bin/webpack') } http://git-wip-us.apache.org/repos/asf/aurora/blob/9825e054/ui/package.json ---------------------------------------------------------------------- diff --git a/ui/package.json b/ui/package.json index 3895056..0651fc7 100644 --- a/ui/package.json +++ b/ui/package.json @@ -55,8 +55,8 @@ ] }, "scripts": { - "lint": "eslint src/main/js --ext .js", - "test": "jest src/" + "lint": "eslint src/main/js plugin/ --ext .js", + "test": "jest src/ plugin/" }, "repository": { "type": "git", http://git-wip-us.apache.org/repos/asf/aurora/blob/9825e054/ui/plugin/js/components/PluginExample.js ---------------------------------------------------------------------- diff --git a/ui/plugin/js/components/PluginExample.js b/ui/plugin/js/components/PluginExample.js new file mode 100644 index 0000000..16b7bb7 --- /dev/null +++ b/ui/plugin/js/components/PluginExample.js @@ -0,0 +1,14 @@ +// This is an example of how to replace components with your own custom UI logic. +import React from 'react'; + +// You can import the original OSS component if you'd just like to wrap it. +import OSSPluginExample from '../../../src/main/js/components/PluginExample'; + +// Add your own CSS by importing files directly +import './plugin.css'; + +// And then be sure to match the interface of the file you're injecting. For Home, we just +// need to make sure we export a component by default. +export default function () { + return <div className='custom-home'><OSSPluginExample /> and my own internal logic!</div>; +} http://git-wip-us.apache.org/repos/asf/aurora/blob/9825e054/ui/plugin/js/components/plugin.css ---------------------------------------------------------------------- diff --git a/ui/plugin/js/components/plugin.css b/ui/plugin/js/components/plugin.css new file mode 100644 index 0000000..df1818d --- /dev/null +++ b/ui/plugin/js/components/plugin.css @@ -0,0 +1,3 @@ +.custom-home { + background-color: #EEE; +} http://git-wip-us.apache.org/repos/asf/aurora/blob/9825e054/ui/src/main/js/components/Home.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/Home.js b/ui/src/main/js/components/Home.js deleted file mode 100644 index 619440f..0000000 --- a/ui/src/main/js/components/Home.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -export default function Home() { - return <div>Hello, World!</div>; -} http://git-wip-us.apache.org/repos/asf/aurora/blob/9825e054/ui/src/main/js/components/PluginExample.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/PluginExample.js b/ui/src/main/js/components/PluginExample.js new file mode 100644 index 0000000..3e05cd1 --- /dev/null +++ b/ui/src/main/js/components/PluginExample.js @@ -0,0 +1,7 @@ +import React from 'react'; + +// See $/ui/plugin/src/js/component/PluginExample for an explanation of how to inject +// your own custom components into the Aurora UI. +export default function PluginExample() { + return <div>Hello, World!</div>; +} http://git-wip-us.apache.org/repos/asf/aurora/blob/9825e054/ui/src/main/js/components/__tests__/Home-test.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/__tests__/Home-test.js b/ui/src/main/js/components/__tests__/Home-test.js deleted file mode 100644 index dde72fc..0000000 --- a/ui/src/main/js/components/__tests__/Home-test.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import Home from '../Home'; - -describe('Home', () => { - it('Should render Hello, World!', () => { - expect(shallow(<Home />).equals(<div>Hello, World!</div>)).toBe(true); - }); -});
