Routing

• Guidelines
• File structure
• Shared functionality
• Decorators
  • @withConfirmLeave()

Guidelines

• Parent route typically serves to group related child resources
• Parent index route typically displays empty state placeholder with call to action or redirects to default child resource
• Child resource names are pluralized
• Child index route represents list view.
• Child singularized name + /details is the read view.
• Avoid extending routes. This can lead to unnecessary inheritance which gets messy quickly. For shared functionality, consider a decorator.

File structure

The file structure can be leveraged to simplify CRUD actions and passing data. The singular resource route should live at the same level as its folder, this automatically passes its model to any route nested within the folder. Below, details.js and edit.js will automatically receive the model returned by the model hook in resource-foo.js. Alternately, if defining a custom model hook in those routes, we can use methods like this.modelFor instead of re-querying records.

├── routes/vault/cluster/access
│   ├── parent/
│   │   ├── index.js
│   │   ├── resource-foos /
│   │   │   ├── resource-foo.js
│   │   │   ├── create.js
│   │   │   ├── index.js
│   │   │   ├── resource-foo/
│   │   │   │   ├── details.js
│   │   │   │   ├── edit.js

For example, OIDC route structure original PR:

├── routes/vault/cluster/access
│   ├── oidc/
│   │   ├── index.js
│   │   ├── clients/
│   │   │   ├── client.js
│   │   │   ├── create.js
│   │   │   ├── index.js
│   │   │   ├── client/
│   │   │   │   ├── details.js
│   │   │   │   ├── edit.js
│   │   │   │   ├── providers.js <- utilizes the modelFor method to get id about parent's clientId

Shared functionality

To guide users, we sometimes have a call to action that depends on a resource's state. For example, if a secret engine hasn't been configured routing to the first step to do so, and otherwise navigating to its overview page.

Instead of extending route classes to share this isConfigured state, consider a decorator! withConfig() is a great example.

Decorators

@withConfirmLeave()

• Renders window.confirm() alert that a user has unsaved changes if navigaing away from route with the decorator
• Unloads or rolls back Ember data model record