Opening but not completing a codebase import or creation disrupts page displays

[aptmac]

Description: Opening and not completing a codebase addition/import can result in unintended page layouts (overlapping components and black screens).

Gif:

Steps to reproduce:

1. Go to a space, and click the "Add Codebase" button to open the wizard. Exit the wizard (by closing the x, the no thanks button, or clicking off of the modal)
   

2. Go to your profile page, notice that the spaces widget now shows the "Create Space" screen and a list of the user's spaces overlapped on top of each other.
   

3. This is the trace when running locally, running in production doesn't seem to print the errors. The trace says the error is here: https://github.com/fabric8-ui/fabric8-ui/blob/0db1b8c07de4bbc667826f2c6c309e1ca243e0d9/src/app/space/analyze/analyze-overview/analyze-overview.component.html#L37 [0], and it doesn't like the [spaces]="space.attributes.name" because it's null.
   

4. If you go back to your space and try to "Add Codebase" again, the page goes completely black.
   

[0] https://github.com/fabric8-ui/fabric8-ui/blob/0db1b8c07de4bbc667826f2c6c309e1ca243e0d9/src/app/space/analyze/analyze-overview/analyze-overview.component.html#L37

[aptmac]

Looking into this a bit deeper, there's a couple of things that may play a role in this:

1. Closing the codebases wizard doesn't run ngOnDestroy() for the component, not sure if that's intentional

2. When running a local f8ui with breakpoints inserted, I've noticed that the error message I saw about the analyze-overview component (step 3 image in original post) is getting hit on every page I view. In fact, it's ngOnInit() [1] is getting called every time I visit a new page.

3. Analyze-overview.component ngOnInit() gets called when viewing the analyze page, and when routing to the next page. So if I visit space1/analyze, ngOnInit() will be called and the context will contain spaces.attributes.name = 'space1'. If I then go to space1/create then ngOnInit() will still be called with spaces.attributes.name = 'space1'. Now, if I go to a page that isn't associated to a specific space (like profile, view all spaces, my spaces, etc.) then context.space will be null and cause the error that's currently being displayed when the html is trying to display space.attributes.name.

Once this state is triggered, visiting other parts of openshift.io will cause multiple page elements to be combined into the same page, in a similar manner to #1975 [2]

[1] https://github.com/fabric8-ui/fabric8-ui/blob/0db1b8c07de4bbc667826f2c6c309e1ca243e0d9/src/app/space/analyze/analyze-overview/analyze-overview.component.ts#L34
[2] https://github.com/openshiftio/openshift.io/issues/1975

[corinnekrych]

@aptmac could we fix the issue by adding in the template space?.attributes.name
and making sure in the flow-selector component we handle null value for space.

[corinnekrych]

fixes with fabric8-ui/fabric8-ui#2730