U4-10928 - SPIKE: Upgrade AngularJS to 1.latest

Created by Mads Rasmussen 04 Feb 2018, 20:24:54 Updated by Sebastiaan Janssen 18 Jul 2018, 12:59:53

Is duplicated by: U4-5576

Relates to: U4-11407

Subtask of: U4-10747

I have started the journey of upgrading Angular to version 1.7. The approach has been: update version number on Angular and then dive in. I have made a list of bugs I have found so far but I am sure there are more bugs as things get fixed and we can move deeper into the back-office.

It is currently possible to log in to the back office and use most of the editors so it should be easy to help test and fix. When you clone the branch remember to run '''npm install''' and '''gulp build'''

The issues listed in this document are currently from a feature point of view and not from a technical point of view.

Migration docs https://docs.angularjs.org/guide/migration

You will find a work in progress branch here: https://github.com/umbraco/Umbraco-CMS/tree/temp8-upgrade-angular

'''How can I help?'''

Clone the branch and start testing. When you find something that doesn't work correctly add it to the list below. Issues will be created later.

Pick one of the issues from the list and start fixing.

Improve existing code with some of the new awesome features that have been added to AngularJS 1.2-1.7.

?

'''Currently known Issues:'''

  • --User modal can’t open--

  • --Can’t click on “Content Apps” (Sub-view navigation is broken in all editors).--

  • --Cookie store in list view is broken.--

  • --Adding tabs in Doc type editor results in endless digest loop--

  • --Creating new content results in endless digest loop--

  • --Users view ends up in endless digest loop--

  • --Help drawer can’t close--

  • --Help drawer is empty--

  • --Get started dashboard doesn’t load--

  • --YSOD dialogs don’t show--

  • --Can’t save content because of a missing form--

  • --Login screen gives error: Lexer Error: Unexpected next character at columns 20-20 [] in expression [enablecheckboxes == 'true'].--

  • --orderBy in content creation dialog gets an object instead of an array--

  • --loadCss calls angularHelper.safeApply which gives the error: "Cannot read property '$$phase' of null"--

  • --Code editors can’t enter code (Template, Partial Views, etc).--

  • --media dropzone disappears--

  • --ng-file-upload has been updated to latest version and can't upload files anymore. We need to figure out what has changed.--

  • --Color picker property editor gives the error: angular.lowercase is not a function--

  • --When saving content you get the error: Failed to load resource: the server responded with a status of 415 (Unsupported Media Type)--

  • --required attr on header name input results in endless digest loop--

  • --Animations for Infinite editing are not working--

  • --When selecting a start node in the content picker you get the error: Error: [$compile:nodomevents] Interpolations for HTML DOM event attributes are disallowed. Please use the ng- versions (such as ng-click instead of onclick) instead.--

  • --The first tab doesn't show content automatically (ex: content dashboard, media dashboard)--

  • --Router doesn’t automatically redirect to the content section.--

  • --Saving a doc type with a slider property gives the error: Cannot cast dataType configuration, of type SliderConfiguration, to SliderPropertyEditorConfiguration--

  • --Recycle bin doesn’t load--

  • --Can’t create new doc types because a “template placeholder” sent with the request.--

  • --Can't save tags datatype. It gives the error: Possibly unhandled rejection: {"errorMsg":"Failed to save data for data type id 0","data":{"Message":"The request is invalid.","ModelState":{"Properties.group.value":["Value cannot be null"]}},"status":400}--

  • --Tree markup has been moved to a template - we will need to do some performance optimization. Probably with some one-way-data-bindings.--

  • --Many texts with translations are broken--

  • --val-form-manager is been commented out because it broke most editors with endless digest loops. After it was commented out editors started working again so we need to rewrite how we validate forms.--

  • --The security interceptor has been commented out because it prevented the app from running. We will need to refactor to follow the new format for an interceptor.--

'''UI quirks after upgrade'''

  • --The Media dropzone animations are slow and basically just annoying that it moves the media up and down. I think before the upgrade it didn’t animate if media items were already uploaded.--
  • --Subviews show a quick content flash of all views before they hide. It can maybe be fixed with some ng-cloak.--
  • --When adding a property in the doctype editor the placeholder property is slow to change to the preview of the property--
  • --When opening an editor all the validation errors boxes quickly shows. It can maybe be fixed with ng-cloak--
  • --When opening the doctype, media type, member type editor the name field makes a small “jump”.--
  • --Load spinners seem to hang a little bit after the content has been loaded.--
  • --Search icon is outside input field on list views--
  • --Button spinners shows when a button is loaded. I can probably be fixed with ng-cloak.--
  • --Mini list view animation is broken--

Comments

Mads Rasmussen 01 Jun 2018, 08:45:40

@peteduncanson I have gone through your changes: https://github.com/umbraco/Umbraco-CMS/compare/dev-v7...PeteDuncanson:AngularUpgrade and I currently found these commits which looks interesting. It would be great to test these in the v8 branch also:

unsafe filter: https://github.com/umbraco/Umbraco-CMS/commit/ffcf239bfc86475e8229ac436ab892009adb0e03

route for / https://github.com/umbraco/Umbraco-CMS/commit/10a8994b1afd8931176494c825d00b30e0e6b1d9

locationEvent: https://github.com/umbraco/Umbraco-CMS/commit/26b9ddba04a402bcd886e5810e7a6703cd05fc19

ng-include in installer https://github.com/umbraco/Umbraco-CMS/commit/ac8801d171cebae23bf53b16a6bfdfb687f898c5

angular-mocks: https://github.com/umbraco/Umbraco-CMS/commit/b75aa7114fb35b23375379a3e7602024a6d5048a

upgrade angular-ui-sortable https://github.com/umbraco/Umbraco-CMS/commit/1aea2e8135c6a9766df5bec656515bbd83c92516

Feel free to add others if I have missed some.

We can do this in any way you would like. I can copy the code changes or you can do PRs to the branch?


Pete Duncanson 01 Jun 2018, 10:42:54

I'm tied up until next week but happy to jump all over this! Leave some of the fun for me though you speed machine ;)


Pete Duncanson 04 Jun 2018, 10:15:18

@madsrasmussen this issue raises another issue that I ran into when trying to do this up to v1.29 and thats how to "know" you've not broken anything. I do believe we can get around this to some extent with a suite of automated UI testing (such as a Selenium tests) that can drive a known back end (ie with a set amount of doctypes with all the different field types on and known content). Then as we are doing these changes we can keep checking that we've not broken any of the core functionality.

If honest although trying to get up to v1.7 direct is heroic I'm beginning to wonder if we should be switching focus to a test suite first on v1.1.5 to ensure we've not broken anything when we roll out the AngularJS upgrades (and I'd suggest doing them a version at a time and working up to v1.7).

This route has many advantages:

  • Less manual testing
  • Know what broke sooner
  • Others can work on it too as we have a test that you need to make green
  • Test suite has a longer life and can be used for other things
  • Test suite acts as a contract and check/balance that future versions still do what we promise they will
  • Gives the community and HQ confidence that we've done it "right"

Disadvantages:

  • Have to stop on the upgrade work
  • Might take a while to build the test suite (I estimate a weeks work). BUT once the foundation for it is in place we could ask the community to swarm on it and start pitching in with tests (from a list of tests similar to your list of issues above).

Other tricky question. Should this be done on v7 which is a known entity and then pull the AngularJS upgrade into v8? I think that might be the "safest" option given that v8 is no where near release yet and still in flux and more folks are familiar with v7 and easier to help out on it? Or should we just put it in v8 and you have to keep modifying it as you go, probably have less checks and balances as we'll have fewer devs on it and just try to muddle through? :)

We could of course not do any of the above and just try to get it to "work" but I'd suggest this is a bigger win to do it "right" than just do it "fast".

Thoughts?


Mads Rasmussen 04 Jun 2018, 14:36:08

My thoughts :)

First thing, I think we should see the AngularJS upgrade as a V8 thing. I don’t see it happen for V7.

I think the idea with the test suite is great but I don’t think we should wait with the upgrade until the tests are written. Everything should pass in the end anyway. When that is said, I don’t think we are able to skip a lot of manually testing for this. The UI tests have to be very detailed for us to be able to trust them 100% and it will take a bunch of time before that is in place. However, if we are able to get some UI testing started I would be all for it - it is missing and we need it!

I currently have a doctype with most property editors on it and are fixing them as I see them break. I also manually test all editors and either fix or note down the issues I find. It is tough work - but also very rewarding when new areas open up :)

Regarding the upgrade process. I don’t think we have a lot of wins in doing one version at the time. I am sure we will find just as many “we have been creative in the way we use Angular” as in documented bugs because of deprecated API's.

The upgrade branch is in a fine state for testing so it should be fairly easy to help out if anybody wants to.


Lars-Erik Aabech 04 Jun 2018, 14:48:47

We don't have to go to Selenium and long-running tests to get some tests in there. I added a few tests for the grid-editor, actually verifying DOM elements when we started on the Grid V2 work. It's all karma/jasmine.

There are things that won't be caught by jasmine tests, but at least all the logic will be verified. GUI weirdness still have to be caught manually. Animations aren't that fun to unit test. :D

That said, a lot of the backoffice code have weird dependencies and private scopes so it's hard to get under test. But I'm sure as we move to components, it'll be better.

Still, trying to get the current stuff under test before starting to upgrade is definitely the safest way to go. I'll gladly pitch in if anyone gets stuck trying to get there, but can't promise any hard-core dedication at present.

One improvement might be to ditch PhantomJS and actually run the tests in chrome. Phantom is basically getting phased out, so it's a dead end. Benefit of chrome is that you can actually see the small DOM you're working on per test. (With a little nifty trick)


Pete Duncanson 18 Jun 2018, 10:11:50

@madsrasmussen How best to have a chat about the state of this one? Is this one meant to be "one to throw away" or is this "it"?

When I did my upgrade I worked through the change logs one item at a time and did a site search for any of the bits it mentioned had changed and then patched them until I'd got up to a working version, then I did some clicking around to ensure I'd not broken anything and then did any additional fixes. I worry that just jumping into 1.7 like this we will miss a tonne of errors and just end up with a "works on my machine" build if we aren't careful.


Mads Rasmussen 28 Jun 2018, 07:41:24

@peteduncanson an update on this one. We will do the upgrade by going directly to AngularJs 1.7 and then fix as we go along. We wanted the new version in as soon as possible so we can build new features on new functionality instead of having to rewrite them again. V8 won’t go out tomorrow so we will have time to test that everything works as it should. The upgrade branch is now merged into v8 because it was in a good enough state for everybody to work on. This also gives the opportunity for everyone to chip in instead of everything going on in a separate branch.


Sébastien Sougnez 13 Jul 2018, 16:28:29

Hi,

I really would like to help with this but I think I need some guidance. I’m not talking about technical stuff about angular but more « what do we want to use ».

For example, controllers are not the way to go nowadays with ng 1.7, components are, so do you want to replace all controllers by components?

I’ll try to have a look at that soon enough just to see if I can be if some help.


Priority: Normal

Type: Task

State: Fixed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted:

Affected versions: 8.0.0

Due in version: 8.0.0

Sprint: Sprint 86

Story Points:

Cycle: 8