consul/ui/packages/consul-ui/app/components/error-state
John Cowen e4e85a8f83
ui: Move control of login modal to use JS rather than HTML (label/id) (#9883)
* Add before and after skip links portals

* Move EmptyState and ErrorState to use a @login action/function

* Move page title setting to the Route component

* Add Routes and Outlets everywhere, and use those to access login modal

* Add some aria-labels to the modals

* Docs

* Remove the label/input now we no longer need it, fixup pageobject

* Add basic modal docs

* Switch out old toggle names for ids

* Wrap nspace Route template in a Route component

* type > class
2021-04-06 13:40:40 +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: Move control of login modal to use JS rather than HTML (label/id) (#9883) 2021-04-06 13:40:40 +01:00

README.mdx

# ErrorState

Consul UIs default 'error state' used when an error is returned form the
backend. This component used `EmptyState` internally, so please refer to that
for more details.

Using this component for all of our errors means we can show a consistent
error page for generic errors.

This component show slighltly different visuals and copy depending on the
`status` of the error (the status is generally a HTTP error code)

## Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `login` | `Function` | `undefined` | A login action to call when the login button is pressed (if not provided no login button will be shown  |
| `error` | `Object` | `undefined` | 'Consul UI error shaped' JSON `{status: String, message: String, detail: String}` |

```hbs preview-template
<ErrorState
  @error={{hash status='403'}}
/>
```

As with `EmptyState` you can optionally chose to show a login button using the
`@login` argument.

```hbs preview-template
<ErrorState
  @error={{hash status='403'}}
  @login={{noop}}
/>
```