3 Commits

Author	SHA1	Message	Date
John Cowen	32a619ae99	ui: Add tab navigation to the browser history/URLs (#7592) ... * ui: Add tab navigation to the browser history/URLs This commit changes all our tabbed UI interfaces in the catalog to use actual URL changes rather than only updating the content in the page using CSS. Originally we had decided not to add tab clicks into the browser history for a variety of reasons. As the UI has progressed these tabs are a fairly common pattern we are using and as the UI grows and stabilizes around certain UX patterns we've decided to make these tabs 'URL changing'. Pros: - Deeplinking - Potentially smaller Route files with a more concentrated scope of the contents of a tab rather than the entire page. - Tab clicks now go into your history meaning backwards and forwards buttons take you through the tabs not just the pages. - The majority of our partials are now fully fledged templates (Octane 🎉) Cons: - Tab clicks now go into your history meaning backwards and forwards buttons take you through the tabs not just the pages. (Could be good and bad from a UX perspective) - Many more Route and Controller files (yet as mentioned above each of these have a more reduced scope) - Moving around the contents of these tabs, or changing the visual names of them means updates to the URL structure, which then should potentially entail redirects, therefore what things that seem like straightforwards design reorganizations are now a little more impactful. It was getting to the point that the Pros outweight the Cons Apart from moving some files around we made a few more tiny tweaks to get this all working: - Our freetext-filter component now performs the initial search rather than this happening in the Controller (remove of the search method in the Controllers and the new didInsertElement hook in the component) - All of the <TabNav>'s were changed to use its alternative href approach. - <TabPanel>s usage was mostly removed. This is th thing I dislike the most. I think this needs removing, but I'd also like to remove the HTML it creates. You'll see that every new page is wrappe din the HTML for the old <TabPanel>, this is to continue to use the same HTML structure and id's as before to avoid making further changes to any CSS that might use this and being able to target things during testing. We could have also removed these here, but it would have meant a much larger changeset and can just as easily be done at a later date. - We made a new `tabgroup` page-object component, which is almost identical to the previous `radiogroup` one and injected that instead where needed during testing. * Make sure we pick up indexed routes when nspaces are enabled * Move session invalidation to the child (session) route * Revert back to not using didInsertElement for updating the searching This adds a way for the searchable to remember the last search result instead, which changes less and stick to the previous method of searching.	2020-05-12 17:14:23 +00:00
John Cowen	604de8758b	ui: Fix using 'ui-like' KVs when using an empty default nspace (#7734) ... When using namespaces, the 'default' namespace is a little special in that we wanted the option for all our URLs to stay the same when using namespaces if you are using the default namespace, with the option of also being able to explicitly specify `~default` as a namespace. In other words both `ui/services/service-name` and `ui/~default/services/service-name` show the same thing. This means that if you switch between OSS and Enterprise, all of your URLs stay the same, but you can still specifically link to the default namespace itself. Our routing configuration is duplicated in order to achieve this: ``` - :dc - :service - :kv - :edit - :nspace - :dc - :service - :kv - :edit ``` Secondly, ember routing resolves/matches routes in the order that you specify them, unless, its seems, when using wildcard routes, like we do in the KV area. When not using the wildcard routes the above routing configuration resolves/matches a `/dc-1/kv/service` to the `dc.kv.edit` route correctly (dc:dc-1, kv:services), that route having been configured in a higher priority than the nspace routes. However when configured with wildcards (required in the KV area), note the asterisk below: ``` - :dc :service - :kv - *edit - :nspace - :dc - :service - :kv - *edit ``` Given something like `/dc-1/kv/services` the router instead matches the `nspace.dc.service` (nspace:dc-1, dc:kv, service:services) route first even though the `dc.kv.edit` route should still match first. Changing the `dc.kv.edit` route back to use a non-wildcard route (:edit instead of *edit), returns the router to match the routes in the correct order. In order to work around this, we catch any incorrectly matched routes (those being directed to the nspace Route but not having a `~` character in the nspace parameter), and then recalculate the correct route name and parameters. Lastly we use this recalculated route to direct the user/app to the correct route. This route recalcation requires walking up the route to gather up all of the required route parameters, and although this feels like something that could already exist in ember, it doesn't seem to. We had already done a lot of this work a while ago when implementing our `href-mut` helper. This commit therefore repurposes that work slighlty and externalizes it outside of the helper itself into a more usable util so we can import it where we need it. Tests have been added before refactoring it down to make the code easier to follow.	2020-04-30 09:28:20 +01:00
John Cowen	c8386ec0cc	UI: [BUGFIX] Decode/encode urls (#5206) ... In 858b05fc31 (diff-46ef88aa04507fb9b039344277531584) we removed encoding values in pathnames as we thought they were eventually being encoded by `ember`. It looks like this isn't the case. Turns out sometimes they are encoded sometimes they aren't. It's complicated. If at all possible refer to the PR https://github.com/hashicorp/consul/pull/5206. It's related to the difference between `dynamic` routes and `wildcard` routes. Partly related to this is a decision on whether we urlencode the slashes within service names or not. Whilst historically we haven't done this, we feel its a good time to change this behaviour, so we'll also be changing services to use dynamic routes instead of wildcard routes. So service links will then look like /ui/dc-1/services/application%2Fservice rather than /ui/dc-1/services/application/service Here, we define our routes in a declarative format (for the moment at least JSON) outside of Router.map, and loop through this within Router.map to set all our routes using the standard this.route method. We essentially configure our Router from the outside. As this configuration is now done declaratively outside of Router.map we can also make this data available to href-to and paramsFor, allowing us to detect wildcard routes and therefore apply urlencoding/decoding. Where I mention 'conditionally' below, this is detection is what is used for the decision. We conditionally add url encoding to the `{{href-to}}` helper/addon. The reasoning here is, if we are asking for a 'href/url' then whatever we receive back should always be urlencoded. We've done this by reusing as much code from the original `ember-href-to` addon as possible, after this change every call to the `{{href-to}}` helper will be urlencoded. As all links using `{{href-to}}` are now properly urlencoded. We also need to decode them in the correct place 'on the other end', so.. We also override the default `Route.paramsFor` method to conditionally decode all params before passing them to the `Route.model` hook. Lastly (the revert), as we almost consistently use url params to construct API calls, we make sure we re-encode any slugs that have been passed in by the user/developer. The original API for the `createURL` function was to allow you to pass values that didn't need encoding, values that **did** need encoding, followed by query params (which again require url encoding) All in all this should make the entire ember app url encode/decode safe.	2019-01-23 13:46:59 +00:00