MAAS

Merge ~mpontillo/maas:react--use-vanilla-components into maas:master

  1. Git
  2. lp:~mpontillo/maas
  3. react--use-vanilla-components
  4. Merge into master
Proposed by Mike Pontillo
Status: Rejected
Rejected by: Adam Collard
Proposed branch: ~mpontillo/maas:react--use-vanilla-components
Merge into: maas:master
Diff against target: 405 lines (+93/-77)
7 files modified
Makefile (+3/-1)
package.json (+3/-2)
src/maasserver/static/js/angular/maas.js (+1/-1)
src/maasserver/static/js/react/test.js (+36/-0)
src/maasserver/static/partials/domains-list.html (+4/-1)
webpack.config.js (+4/-3)
yarn.lock (+42/-69)
Reviewer Review Type Date Requested Status
MAAS Maintainers Pending
Review via email: mp+340648@code.launchpad.net

Description of the change

This branch is an example of how to use React components in MAAS/Angular templates.

The first iteration of this branch used 'react2angular', but the resulting React component was not able to respond to changes that were pushed in by the Angular websocket. The 'ngreact'-based version (the current branch) works for this purpose, but requires more glue code and complexity, and also needs work because it pulls in the version of Angular from npm. MAAS is still using the version of Angular that is in the archive, so this causes it to be loaded twice. (If ngreact were to be used in production, we would need to change the code to only pull in Angular from one location.)

To post a comment you must log in.
~mpontillo/maas:react--use-vanilla-components updated
3fa724b... by Mike Pontillo

Switch from react2angular to ngreact.

0732e38... by Mike Pontillo

Get example React component working with Angular websocket.

Unmerged commits

0732e38... by Mike Pontillo

Get example React component working with Angular websocket.

3fa724b... by Mike Pontillo

Switch from react2angular to ngreact.

97f94dc... by Mike Pontillo

Initial Vanilla test code.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1diff --git a/Makefile b/Makefile
2index 533934d..0169a01 100644
3--- a/Makefile
4+++ b/Makefile
5@@ -61,6 +61,8 @@ export PGDATABASE := maas
6 # For anything we start, we want to hint as to its root directory.
7 export MAAS_ROOT := $(CURDIR)/.run
8
9+# export NODE_ENV := development
10+
11 build: \
12 bin/buildout \
13 bin/database \
14@@ -249,13 +251,13 @@ define node_packages
15 karma-ng-html2js-preprocessor
16 karma-opera-launcher
17 karma-phantomjs-launcher
18+ ngreact
19 node-sass
20 phantomjs-prebuilt
21 prop-types
22 protractor
23 react
24 react-dom
25- react2angular
26 uglifyjs-webpack-plugin
27 vanilla-framework
28 vanilla-framework-react
29diff --git a/package.json b/package.json
30index dd52b6d..8b7beb8 100644
31--- a/package.json
32+++ b/package.json
33@@ -6,6 +6,7 @@
34 "@types/prop-types": "^15.5.2",
35 "@types/react": "^16.0.40",
36 "@types/react-dom": "^16.0.4",
37+ "angular": "=1.5.10",
38 "babel-loader": "^8.0.0-beta.0",
39 "glob": "^7.1.2",
40 "jasmine-core": "=2.99.1",
41@@ -17,17 +18,17 @@
42 "karma-ng-html2js-preprocessor": "^1.0.0",
43 "karma-opera-launcher": "^1.0.0",
44 "karma-phantomjs-launcher": "^1.0.4",
45+ "ngreact": "^0.5.1",
46 "node-sass": "^4.7.2",
47 "phantomjs-prebuilt": "^2.1.16",
48 "prop-types": "^15.6.1",
49 "protractor": "^5.3.0",
50 "react": "^16.2.0",
51 "react-dom": "^16.2.0",
52- "react2angular": "^3.2.1",
53 "uglifyjs-webpack-plugin": "^1.2.2",
54 "vanilla-framework": "^1.6.6",
55 "vanilla-framework-react": "^0.1.2",
56- "webpack": "^4.0.1",
57+ "webpack": "^4.1.0",
58 "webpack-cli": "^2.0.10",
59 "webpack-merge": "^4.1.2"
60 }
61diff --git a/src/maasserver/static/js/angular/maas.js b/src/maasserver/static/js/angular/maas.js
62index 0456a2f..69a9358 100755
63--- a/src/maasserver/static/js/angular/maas.js
64+++ b/src/maasserver/static/js/angular/maas.js
65@@ -10,7 +10,7 @@
66
67 angular.module('MAAS',
68 ['ngRoute', 'ngCookies', 'ngSanitize', 'ngTagsInput', 'sticky',
69- 'vs-repeat']).config(
70+ 'vs-repeat', 'react']).config(
71 function($interpolateProvider, $routeProvider, $httpProvider) {
72 $interpolateProvider.startSymbol('{$');
73 $interpolateProvider.endSymbol('$}');
74diff --git a/src/maasserver/static/js/react/test.js b/src/maasserver/static/js/react/test.js
75new file mode 100644
76index 0000000..543f444
77--- /dev/null
78+++ b/src/maasserver/static/js/react/test.js
79@@ -0,0 +1,36 @@
80+import React, { Component } from 'react';
81+import { Button } from 'vanilla-framework-react';
82+
83+import { reactDirective } from 'ngreact';
84+
85+class TestButton extends Component {
86+
87+ render() {
88+ return (
89+ <div>
90+ <Button brand value="Vanilla test button" />
91+ </div>
92+ );
93+ }
94+
95+ componentDidMount() {
96+ console.log("componentDidMount()", this.props.domains);
97+ }
98+
99+ componentWillReceiveProps(nextProps) {
100+ console.log("componentWillReceiveProps()", nextProps);
101+ }
102+
103+ shouldComponentUpdate(nextProps, nextState) {
104+ console.log("shouldComponentUpdate()", nextProps, nextState);
105+ return true;
106+ }
107+}
108+
109+let AngularTestButton = function(reactDirective) {
110+ return reactDirective('TestButton', ['domains']);
111+};
112+
113+AngularTestButton.$inject = ['reactDirective'];
114+angular.module('MAAS').value('TestButton', TestButton);
115+angular.module('MAAS').directive('testButton', AngularTestButton);
116diff --git a/src/maasserver/static/partials/domains-list.html b/src/maasserver/static/partials/domains-list.html
117index f6c2fae..3eecbb3 100644
118--- a/src/maasserver/static/partials/domains-list.html
119+++ b/src/maasserver/static/partials/domains-list.html
120@@ -70,6 +70,9 @@
121 <td aria-label="Authorative">{$ row.authoritative ? "Yes" : "No" $}</td>
122 </tr>
123 </tbody>
124- </div>
125+ </table>
126+ </section>
127+ <section class="row">
128+ <test-button domains="domains" data-ng-show="!loading" />
129 </section>
130 </div>
131diff --git a/webpack.config.js b/webpack.config.js
132index e8613b5..74592a2 100644
133--- a/webpack.config.js
134+++ b/webpack.config.js
135@@ -6,7 +6,7 @@ module.exports = {
136 entry: {
137 vendor: [].concat(
138 glob.sync('./src/maasserver/static/js/angular/3rdparty/*.js'),
139- ['react', 'react-dom']
140+ ['react', 'react-dom', 'ngreact', 'vanilla-framework-react' ]
141 ),
142 maas: [].concat(
143 glob.sync('./src/maasserver/static/js/*.js'),
144@@ -16,8 +16,9 @@ module.exports = {
145 glob.sync('./src/maasserver/static/js/angular/directives/*.js'),
146 glob.sync('./src/maasserver/static/js/angular/filters/*.js'),
147 glob.sync('./src/maasserver/static/js/angular/services/*.js'),
148- glob.sync('./src/maasserver/static/js/angular/factories/*.js')
149- )
150+ glob.sync('./src/maasserver/static/js/angular/factories/*.js'),
151+ glob.sync('./src/maasserver/static/js/react/*.js')
152+ ),
153 },
154 mode: 'development',
155 // This creates a .map file for debugging each bundle.
156diff --git a/yarn.lock b/yarn.lock
157index 90c4cea..875e770 100644
158--- a/yarn.lock
159+++ b/yarn.lock
160@@ -379,20 +379,6 @@
161 version "0.7.0"
162 resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
163
164-"@types/angular@>=1.5", "@types/angular@^1.6.39":
165- version "1.6.43"
166- resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.43.tgz#6235ef416053a86302970717510a936d889cbb9a"
167-
168-"@types/lodash.frompairs@^4.0.3":
169- version "4.0.3"
170- resolved "https://registry.yarnpkg.com/@types/lodash.frompairs/-/lodash.frompairs-4.0.3.tgz#4c2f1653e9648a3644daa958e82e77cbdcc064c9"
171- dependencies:
172- "@types/lodash" "*"
173-
174-"@types/lodash@*", "@types/lodash@^4.14.85":
175- version "4.14.104"
176- resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.104.tgz#53ee2357fa2e6e68379341d92eb2ecea4b11bb80"
177-
178 "@types/node@*":
179 version "9.4.6"
180 resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.6.tgz#d8176d864ee48753d053783e4e463aec86b8d82e"
181@@ -460,8 +446,8 @@ acorn@^4.0.3:
182 resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
183
184 acorn@^5.0.0, acorn@^5.2.1, acorn@^5.4.1:
185- version "5.5.0"
186- resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.0.tgz#1abb587fbf051f94e3de20e6b26ef910b1828298"
187+ version "5.5.1"
188+ resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.1.tgz#84e05a9ea0acbe131227da50301e62464dc9c1d8"
189
190 addressparser@1.0.1:
191 version "1.0.1"
192@@ -507,8 +493,8 @@ ajv@^5.1.0:
193 json-schema-traverse "^0.3.0"
194
195 ajv@^6.1.0:
196- version "6.2.0"
197- resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.2.0.tgz#afac295bbaa0152449e522742e4547c1ae9328d2"
198+ version "6.2.1"
199+ resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.2.1.tgz#28a6abc493a2abe0fb4c8507acaedb43fa550671"
200 dependencies:
201 fast-deep-equal "^1.0.0"
202 fast-json-stable-stringify "^2.0.0"
203@@ -528,9 +514,9 @@ amqplib@^0.5.2:
204 readable-stream "1.x >=1.1.9"
205 safe-buffer "^5.0.1"
206
207-angular@>=1.5, angular@>=1.5.0:
208- version "1.6.9"
209- resolved "https://registry.yarnpkg.com/angular/-/angular-1.6.9.tgz#bc812932e18909038412d594a5990f4bb66c0619"
210+angular@=1.5.10:
211+ version "1.5.10"
212+ resolved "https://registry.yarnpkg.com/angular/-/angular-1.5.10.tgz#e87fd35b2ed2fea3723de958e9ccf0a4b9125ef0"
213
214 ansi-escapes@^1.0.0, ansi-escapes@^1.1.0:
215 version "1.4.0"
216@@ -552,9 +538,9 @@ ansi-styles@^2.2.1:
217 version "2.2.1"
218 resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
219
220-ansi-styles@^3.2.0:
221- version "3.2.0"
222- resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
223+ansi-styles@^3.2.1:
224+ version "3.2.1"
225+ resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
226 dependencies:
227 color-convert "^1.9.0"
228
229@@ -1786,12 +1772,12 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
230 supports-color "^2.0.0"
231
232 chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1:
233- version "2.3.1"
234- resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.1.tgz#523fe2678aec7b04e8041909292fe8b17059b796"
235+ version "2.3.2"
236+ resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
237 dependencies:
238- ansi-styles "^3.2.0"
239+ ansi-styles "^3.2.1"
240 escape-string-regexp "^1.0.5"
241- supports-color "^5.2.0"
242+ supports-color "^5.3.0"
243
244 chalk@~0.4.0:
245 version "0.4.0"
246@@ -2200,8 +2186,8 @@ cross-spawn@^5.0.1:
247 which "^1.2.9"
248
249 cross-spawn@^6.0.4:
250- version "6.0.4"
251- resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.4.tgz#bbf44ccb30fb8314a08f178b62290c669c36d808"
252+ version "6.0.5"
253+ resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
254 dependencies:
255 nice-try "^1.0.4"
256 path-key "^2.0.1"
257@@ -2430,8 +2416,8 @@ diff@^2.1.2:
258 resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99"
259
260 diff@^3.3.0, diff@^3.3.1:
261- version "3.4.0"
262- resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
263+ version "3.5.0"
264+ resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
265
266 diffie-hellman@^5.0.0:
267 version "5.0.2"
268@@ -2477,8 +2463,8 @@ duplexer3@^0.1.4:
269 resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
270
271 duplexify@^3.4.2, duplexify@^3.5.3:
272- version "3.5.3"
273- resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.3.tgz#8b5818800df92fd0125b27ab896491912858243e"
274+ version "3.5.4"
275+ resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.4.tgz#4bb46c1796eabebeec4ca9a2e66b808cb7a3d8b4"
276 dependencies:
277 end-of-stream "^1.0.0"
278 inherits "^2.0.1"
279@@ -4437,10 +4423,6 @@ lodash.clonedeep@^4.3.2:
280 version "4.5.0"
281 resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
282
283-lodash.frompairs@^4.0.1:
284- version "4.0.1"
285- resolved "https://registry.yarnpkg.com/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz#bc4e5207fa2757c136e573614e9664506b2b1bd2"
286-
287 lodash.memoize@~3.0.3:
288 version "3.0.4"
289 resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
290@@ -4864,14 +4846,9 @@ netmask@~1.0.4:
291 version "1.0.6"
292 resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
293
294-ngcomponent@^4.1.0:
295- version "4.1.0"
296- resolved "https://registry.yarnpkg.com/ngcomponent/-/ngcomponent-4.1.0.tgz#793e379138f552ea0cd2c767ad0aa7057678e228"
297- dependencies:
298- "@types/angular" "^1.6.39"
299- "@types/lodash" "^4.14.85"
300- angular ">=1.5.0"
301- lodash "^4.17.4"
302+ngreact@^0.5.1:
303+ version "0.5.1"
304+ resolved "https://registry.yarnpkg.com/ngreact/-/ngreact-0.5.1.tgz#2dcccc1541771796689d13e51bb8d5010af41c57"
305
306 nice-try@^1.0.4:
307 version "1.0.4"
308@@ -5740,16 +5717,6 @@ react-dom@^16.1.0, react-dom@^16.2.0:
309 object-assign "^4.1.1"
310 prop-types "^15.6.0"
311
312-react2angular@^3.2.1:
313- version "3.2.1"
314- resolved "https://registry.yarnpkg.com/react2angular/-/react2angular-3.2.1.tgz#43f3077e1bccdc6785f35b0102dfa6845fae266b"
315- dependencies:
316- "@types/angular" ">=1.5"
317- "@types/lodash.frompairs" "^4.0.3"
318- angular ">=1.5"
319- lodash.frompairs "^4.0.1"
320- ngcomponent "^4.1.0"
321-
322 react@^16.1.0, react@^16.2.0:
323 version "16.2.0"
324 resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
325@@ -5803,8 +5770,8 @@ read-pkg@^2.0.0:
326 path-type "^2.0.0"
327
328 "readable-stream@1 || 2", readable-stream@2, readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3:
329- version "2.3.4"
330- resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.4.tgz#c946c3f47fa7d8eabc0b6150f4a12f69a4574071"
331+ version "2.3.5"
332+ resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.5.tgz#b4f85003a938cbb6ecbce2a124fb1012bd1a838d"
333 dependencies:
334 core-util-is "~1.0.0"
335 inherits "~2.0.3"
336@@ -6743,9 +6710,9 @@ string-width@^2.0.0, string-width@^2.1.0:
337 is-fullwidth-code-point "^2.0.0"
338 strip-ansi "^4.0.0"
339
340-string_decoder@^1.0.0, string_decoder@~1.0.0, string_decoder@~1.0.3:
341- version "1.0.3"
342- resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
343+string_decoder@^1.0.0:
344+ version "1.1.0"
345+ resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.0.tgz#384f322ee8a848e500effde99901bba849c5d403"
346 dependencies:
347 safe-buffer "~5.1.0"
348
349@@ -6753,6 +6720,12 @@ string_decoder@~0.10.x:
350 version "0.10.31"
351 resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
352
353+string_decoder@~1.0.0, string_decoder@~1.0.3:
354+ version "1.0.3"
355+ resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
356+ dependencies:
357+ safe-buffer "~5.1.0"
358+
359 stringstream@~0.0.4, stringstream@~0.0.5:
360 version "0.0.5"
361 resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
362@@ -6814,9 +6787,9 @@ supports-color@^2.0.0:
363 version "2.0.0"
364 resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
365
366-supports-color@^5.2.0:
367- version "5.2.0"
368- resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.2.0.tgz#b0d5333b1184dd3666cbe5aa0b45c5ac7ac17a4a"
369+supports-color@^5.2.0, supports-color@^5.3.0:
370+ version "5.3.0"
371+ resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
372 dependencies:
373 has-flag "^3.0.0"
374
375@@ -7292,7 +7265,7 @@ void-elements@^2.0.0:
376 version "2.0.1"
377 resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
378
379-watchpack@^1.4.0:
380+watchpack@^1.5.0:
381 version "1.5.0"
382 resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.5.0.tgz#231e783af830a22f8966f65c4c4bacc814072eed"
383 dependencies:
384@@ -7376,9 +7349,9 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0:
385 source-list-map "^2.0.0"
386 source-map "~0.6.1"
387
388-webpack@^4.0.1:
389- version "4.0.1"
390- resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.0.1.tgz#768d708beeca4c5f77f6c2d38a240fb6ff50ba5d"
391+webpack@^4.1.0:
392+ version "4.1.0"
393+ resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.1.0.tgz#91b6862e56eb3b18b79bb10b51866987ff10d2d6"
394 dependencies:
395 acorn "^5.0.0"
396 acorn-dynamic-import "^3.0.0"
397@@ -7397,7 +7370,7 @@ webpack@^4.0.1:
398 schema-utils "^0.4.2"
399 tapable "^1.0.0"
400 uglifyjs-webpack-plugin "^1.1.1"
401- watchpack "^1.4.0"
402+ watchpack "^1.5.0"
403 webpack-sources "^1.0.1"
404
405 whatwg-fetch@>=0.10.0:

Subscribers

People subscribed via source and target branches