mirror of
https://github.com/status-im/consul.git
synced 2025-01-10 05:45:46 +00:00
32a619ae99
* 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.
152 lines
7.7 KiB
Gherkin
152 lines
7.7 KiB
Gherkin
@setupApplicationTest
|
|
Feature: page-navigation
|
|
In order to view all the data in consul
|
|
As a user
|
|
I should be able to visit every page and view data in a HTML from the API
|
|
Background:
|
|
Given 1 datacenter model with the value "dc-1"
|
|
Scenario: Visiting the index page
|
|
When I visit the index page for yaml
|
|
---
|
|
dc: dc-1
|
|
---
|
|
Then the url should be /dc-1/services
|
|
Then a GET request was made to "/v1/internal/ui/services?dc=dc-1&ns=@namespace"
|
|
Scenario: Clicking [Link] in the navigation takes me to [URL]
|
|
When I visit the services page for yaml
|
|
---
|
|
dc: dc-1
|
|
---
|
|
When I click [Link] on the navigation
|
|
Then the url should be [URL]
|
|
Then a GET request was made to "[Endpoint]"
|
|
Where:
|
|
-------------------------------------------------------------------------------------
|
|
| Link | URL | Endpoint |
|
|
| nodes | /dc-1/nodes | /v1/internal/ui/nodes?dc=dc-1 |
|
|
| kvs | /dc-1/kv | /v1/kv/?keys&dc=dc-1&separator=%2F&ns=@namespace |
|
|
| acls | /dc-1/acls/tokens | /v1/acl/tokens?dc=dc-1&ns=@namespace |
|
|
| intentions | /dc-1/intentions | /v1/connect/intentions?dc=dc-1 |
|
|
# | settings | /settings | /v1/catalog/datacenters |
|
|
-------------------------------------------------------------------------------------
|
|
Scenario: Clicking a [Item] in the [Model] listing and back again
|
|
When I visit the [Model] page for yaml
|
|
---
|
|
dc: dc-1
|
|
---
|
|
When I click [Item] on the [Model]
|
|
Then the url should be [URL]
|
|
Then a GET request was made to "[Endpoint]"
|
|
And I click "[data-test-back]"
|
|
Then the url should be [Back]
|
|
Where:
|
|
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|
|
| Item | Model | URL | Endpoint | Back |
|
|
| service | services | /dc-1/services/service-0/instances | /v1/discovery-chain/service-0?dc=dc-1&ns=@namespace | /dc-1/services |
|
|
| node | nodes | /dc-1/nodes/node-0/health-checks | /v1/session/node/node-0?dc=dc-1&ns=@namespace | /dc-1/nodes |
|
|
| kv | kvs | /dc-1/kv/0-key-value/edit | /v1/session/info/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1&ns=@namespace | /dc-1/kv |
|
|
# | acl | acls | /dc-1/acls/anonymous | /v1/acl/info/anonymous?dc=dc-1 | /dc-1/acls |
|
|
| intention | intentions | /dc-1/intentions/ee52203d-989f-4f7a-ab5a-2bef004164ca | /v1/internal/ui/services?dc=dc-1&ns=* | /dc-1/intentions |
|
|
# These Endpoints will be datacenters due to the datacenters checkbox selectors
|
|
| token | tokens | /dc-1/acls/tokens/ee52203d-989f-4f7a-ab5a-2bef004164ca | /v1/catalog/datacenters | /dc-1/acls/tokens |
|
|
| policy | policies | /dc-1/acls/policies/ee52203d-989f-4f7a-ab5a-2bef004164ca | /v1/catalog/datacenters | /dc-1/acls/policies |
|
|
# | token | tokens | /dc-1/acls/tokens/00000000-0000-0000-0000-000000000000 | /v1/acl/token/00000000-0000-0000-0000-000000000000?dc=dc-1 | /dc-1/acls/tokens |
|
|
# | policy | policies | /dc-1/acls/policies/ee52203d-989f-4f7a-ab5a-2bef004164ca | /v1/acl/policy/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1 | /dc-1/acls/policies |
|
|
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|
|
Scenario: The node detail page calls the correct API endpoints
|
|
When I visit the node page for yaml
|
|
---
|
|
dc: dc-1
|
|
node: node-0
|
|
---
|
|
Then the url should be /dc-1/nodes/node-0/health-checks
|
|
Then the last GET requests included from yaml
|
|
---
|
|
- /v1/catalog/datacenters
|
|
- /v1/namespaces
|
|
- /v1/internal/ui/node/node-0?dc=dc-1
|
|
- /v1/coordinate/nodes?dc=dc-1
|
|
- /v1/session/node/node-0?dc=dc-1&ns=@namespace
|
|
---
|
|
Scenario: The kv detail page calls the correct API endpoints
|
|
When I visit the kv page for yaml
|
|
---
|
|
dc: dc-1
|
|
kv: keyname
|
|
---
|
|
Then the url should be /dc-1/kv/keyname/edit
|
|
Then the last GET requests included from yaml
|
|
---
|
|
- /v1/catalog/datacenters
|
|
- /v1/namespaces
|
|
- /v1/kv/keyname?dc=dc-1&ns=@namespace
|
|
- /v1/session/info/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1&ns=@namespace
|
|
---
|
|
Scenario: The policies page/tab calls the correct API endpoints
|
|
When I visit the policies page for yaml
|
|
---
|
|
dc: dc-1
|
|
---
|
|
Then the url should be /dc-1/acls/policies
|
|
Then the last GET requests included from yaml
|
|
---
|
|
- /v1/catalog/datacenters
|
|
- /v1/namespaces
|
|
- /v1/acl/policies?dc=dc-1&ns=@namespace
|
|
---
|
|
Scenario: The intention detail page calls the correct API endpoints
|
|
When I visit the intention page for yaml
|
|
---
|
|
dc: dc-1
|
|
intention: intention
|
|
---
|
|
Then the url should be /dc-1/intentions/intention
|
|
Then the last GET requests included from yaml
|
|
---
|
|
- /v1/catalog/datacenters
|
|
- /v1/namespaces
|
|
- /v1/connect/intentions/intention?dc=dc-1
|
|
- /v1/internal/ui/services?dc=dc-1&ns=*
|
|
---
|
|
|
|
Scenario: Clicking a [Item] in the [Model] listing and cancelling
|
|
When I visit the [Model] page for yaml
|
|
---
|
|
dc: dc-1
|
|
---
|
|
When I click [Item] on the [Model]
|
|
Then the url should be [URL]
|
|
And I click "[type=reset]"
|
|
Then the url should be [Back]
|
|
Where:
|
|
--------------------------------------------------------------------------------------------------------
|
|
| Item | Model | URL | Back |
|
|
| kv | kvs | /dc-1/kv/0-key-value/edit | /dc-1/kv |
|
|
# | acl | acls | /dc-1/acls/anonymous | /dc-1/acls |
|
|
| intention | intentions | /dc-1/intentions/ee52203d-989f-4f7a-ab5a-2bef004164ca | /dc-1/intentions |
|
|
--------------------------------------------------------------------------------------------------------
|
|
@ignore
|
|
Scenario: Clicking items in the listings, without depending on the salt ^
|
|
Then ok
|
|
Scenario: Clicking create in the [Model] listing
|
|
When I visit the [Model] page for yaml
|
|
---
|
|
dc: dc-1
|
|
---
|
|
When I click create
|
|
Then the url should be [URL]
|
|
And I click "[data-test-back]"
|
|
Then the url should be [Back]
|
|
Where:
|
|
-----------------------------------------------------------------------------
|
|
| Item | Model | URL | Back |
|
|
| kv | kvs | /dc-1/kv/create | /dc-1/kv |
|
|
# | acl | acls | /dc-1/acls/create | /dc-1/acls |
|
|
| intention | intentions | /dc-1/intentions/create | /dc-1/intentions |
|
|
| token | tokens | /dc-1/acls/tokens/create | /dc-1/acls/tokens |
|
|
| policy | policies | /dc-1/acls/policies/create | /dc-1/acls/policies |
|
|
-----------------------------------------------------------------------------
|
|
@ignore
|
|
Scenario: Using I click on should change the currentPage ^
|
|
Then ok
|