stable
Clone or download
request #11665 Import Graphs and edit modals dynamically in Kanban
Why ? - As an end-user, I want to load as little javascript as possible so that downloading (the first time) and parsing the code does not slow down my page load. How ? - This commit introduces Dynamic import (see [1]) and how to use it to load AngularJS modals' code dynamically. Dynamic import is a Stage 3 proposal to let developers load code only when needed. In our case, it lets us load modals only when the user clicks on them, instead of having them always in the code. Using this technique would reduce kanban's initial javascript size by about 200 KiB, mostly due to d3js which is only ever used in the graphs modal. The obvious targets for this technique are modals. Users do not always click on them, and for example in the Edit Kanban modal, most users do not have admin powers and so the modal button is hidden to them anyway ! What ? - "Edit Kanban" and "Show reports" modals are now lazy-loaded when clicking on the button. There should be a "loader" icon on the button. - When there is a load error, an error message should be shown. - Also test that "Edit Kanban" and "Show reports" work when the Kanban is in a Widget Notes: - I had to come up with a "hackish" solution to inject AngularJS directives, templates and services after bootstrap. Later libs such as VueJS are designed to handle code being loaded asynchronously so this technique will go easier there. - This "hack" goes like this: we have an empty "angular-async" Angular module that is required by "kanban" module. We then export Angular's register functions and use those for our dynamically-loaded components. - Due to this state, a "test-only" Angular module was introduced as "reports-modal.spec.js". I welcome simpler solutions for these tests though :/ [1] https://github.com/tc39/proposal-dynamic-import Change-Id: I2bc155ecd88fe164ad71d4dbdf60151af0bd247d
Modified Files
| Name | ||||
|---|---|---|---|---|
| M | plugins/agiledashboard/include/AgileDashboard/KanbanJavascriptDependenciesProvider.php | +2 | −2 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/.gitignore | +0 | −1 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/package-lock.json | +6 | −6 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/package.json | +1 | −1 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/po/fr.po | +20 | −4 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/po/template.pot | +8 | −0 | Go to diff View file |
| D | plugins/agiledashboard/www/js/kanban/src/.htaccess | +0 | −2 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/src/app/app-kanban-controller.js | +55 | −17 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/src/app/app.js | +12 | −16 | Go to diff View file |
| A | plugins/agiledashboard/www/js/kanban/src/app/edit-kanban/edit-kanban.js | +10 | −0 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/src/app/kanban.tpl.html | +6 | −2 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/src/app/reports-modal/diagram-rest-service.spec.js | +3 | −1 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/src/app/reports-modal/reports-modal-controller.spec.js | +5 | −3 | Go to diff View file |
| A | plugins/agiledashboard/www/js/kanban/src/app/reports-modal/reports-modal.js | +12 | −0 | Go to diff View file |
| A | plugins/agiledashboard/www/js/kanban/src/app/reports-modal/reports-modal.spec.js | +9 | −0 | Go to diff View file |
| M | plugins/agiledashboard/www/js/kanban/webpack.config.js | +6 | −2 | Go to diff View file |
| A | src/www/themes/common/tlp/angular-tlp/angular-async.js | +40 | −0 | Go to diff View file |
| M | tools/rpm/tuleap.rhel6.spec | +1 | −0 | Go to diff View file |
| M | tools/rpm/tuleap.rhel7.spec | +1 | −0 | Go to diff View file |