consul

History

John Cowen ed6918c6c2 ui: Improve dev-time SSO/OIDC visibility (#11248 ) This commit tries to make the development experience of working on our OIDC support a little more realistic, essentially by creating our own OIDC provider in our application (only during development builds). You can still provide a real OIDC provider to work with via our dev time environment/cookie variables as before, just now we default to the behaviour in this commit. Overall this makes it much easier to verify our OIDC support in the UI, and also opens up avenues for us to be able to test more scenarios that we couldn't before (for example not only successful logins, but also erroneous, potentially with multiple error reasons).		2021-10-11 16:03:59 +01:00
..
README.mdx	ui: Move control of login modal to use JS rather than HTML (label/id) (#9883 )	2021-04-06 13:40:40 +01:00
index.hbs	ui: Add Route component / routlet service (#9813 )	2021-03-08 12:15:54 +00:00
index.js	ui: Improve dev-time SSO/OIDC visibility (#11248 )	2021-10-11 16:03:59 +01:00

README.mdx

# Outlet

The `Outlet` component should be used to wrap *every* ember `{{outlet}}`. It
provides/will provide functionality (along with the `<Route />` component)
for setting and announcing the title of the page, passing data down through
the route/template hierarchy, automatic orchestration of nested routing and
visual animating/transitioning between routes.

## Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `String` | `undefined` | The name of the route in ember routeName format e.g. `dc.services.index`. This is generally the `routeName` variable that is available to you in all Consul UI route/page level templates.|
| `model` | `Object` | `undefined` | Arbitrary hash of data to pass down to the child route (available in the `<Route as |route|>` export). |


```hbs
<Outlet
  @name={{routeName}}
  @model={{hash
    dc=(hash
      Name="dc-1"
    )
  }}
>
  {{outlet}}
</Outlet>
```

Currently, using the `<Outlet />` component means that every single page/route
template is wrapped in a HTML `<section>` element. This `<section>` element
has various data attributes attached to indiciate the loading state of the
outlet. These can be used to specifically target every individual outlet via
CSS.

## Attributes

| Data Attribute  | Description |
| --- | --- |
| `data-outlet` | The name of this outlet in ember routeName format e.g. `dc.services.index` |
| `data-route` | The name of the current child route of this outlet in ember routeName format e.g. `dc.services.show` |
| `data-state` | The current state of this outlet, `idle` or `loading` |
| `data-transition` | A combination of `idle` and `loading` states |