Service to control toggling the main nav

[gashcrumb]

For the create integration flow the main nav should be hidden. We'll need to add a general purpose way for a view to ensure the nav is hidden.

[gashcrumb]

@jimmidyson any objection to having a 'client' store or something along those lines for this kind of stuff? Would like a generic kind of service that views could use to maintain state, especially for things like unsaved screens etc. Kind of like what we had here maybe with a bit of smarts to ensure it doesn't fail if browser local storage doesn't work, etc.

[jimmidyson]

Sounds good to me.

[jimmidyson]

Just no lodash if we can help it ;) With rxjs & es6 we should have everything we need

[gashcrumb]

for sure, actually having a play with this, the decorator support there might be really handy.

[gashcrumb]

@kahboom wonder, do you know if the nav widget there has any kind of API? Previously in the fabric8-console I was stuck with mucking with the element classes directly, but wasn't a nice solution really.

[kahboom]

It may be overkill and may not even be what we are looking for, but we could use React bindings for Angular to maintain state, which seems to be a pretty popular way to go these days: https://github.com/ngrx & https://github.com/ngrx/store

Regarding the nav widget- not native to Angular 2 as far as I'm aware. The trouble we run into is that we are using PatternFly CSS classes for that menu, but there's nothing wrong with adding in a conditional CSS class with [ngClass]="'hide'". Or *ngIf="show; else elseBlock" and in the TS class something like show: boolean = true; to show an alternative template if you wanted to (ie if it's a different type of menu).

In any case I'll find out with the Angular Patternfly team tomorrow to see if they are already working on this and when they are planning to support v2, or maybe if there is a slightly more elegant way of handling this. Having a service handle all of this would be cool too.

[jimmidyson]

I began work ngrx when I started the move to rxjs but moved away from it to our current observable data services because there was no way to compose and extend a ngrx store by adding modules at that time. The store definition was basically static. Not sure if that's changed or not now. One benefit of ngrx is to be able to use the Redux Dev tools which let you easily inspect current state of the single, immutable store, which also lets you do stuff like time travel (restore previous state).

But if it still doesn't let you compose stores, especially via lazy loaded modules, then I think we should avoid for now.

[gashcrumb]

On an api for the nav I figured I'd ask those folks -> patternfly/patternfly#580

[gashcrumb]

@kahboom guess for the nav we could just re-use their markup/css and re-implement the code that toggles visibility, resizes the nav according to the viewport size etc. Seems like a lot of work to take on though :-/

[jimmidyson]

I'm hoping resize etc happens thanks to CSS, not JS? Certainly should anyway... Visibility toggle is the only thing I can think of that requires JS.

[gashcrumb]

yeah, on the nav element you add collapsed and then collapsed-nav to the main container element. Which we can do, but ideally I'd like the nav code to know what state it should be in, otherwise you get issues like in the fabric8-console where you resize the page and the nav shows back up even though it should be hidden.

[jimmidyson]

i thought the nav component already handled that, storing state in localstorage too? Check it out via devtools when you hide/show it.

[gashcrumb]

ooh, didn't see that... good find!

[jimmidyson]

I highly recommend having a UI state store as @gashcrumb mentioned before over having component level state.

[gashcrumb]

yeah, and this is cool, as we can incorporate this guy's state into our overall store, excellent. Now my create page can stop looking so squished :-)

[kahboom]

But if it still doesn't let you compose stores, especially via lazy loaded modules, then I think we should avoid for now.

It sounds like there is already an issue open for this here and here. There is a workaround here since it looks like ngrx is blocked because they are waiting on Angular 4 + TS 2.1 (what the hell happened to Angular 3?). Best to avoid for now.

[gashcrumb]

PR for the nav -> https://github.com/patternfly/patternfly/pull/582

[kahboom]

Going to use Angular for this, for the demo.

[kahboom]

@gashcrumb Would you say this is done? Even if implemented via jQuery?

[gashcrumb]

This is all set.