ui: Fix up wiring or empty state login button (#11981)

* ui: Some ACL component documentation (#11982)
This commit is contained in:
John Cowen 2022-01-12 11:05:24 +00:00 committed by GitHub
parent 754afd356a
commit a408644205
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 110 additions and 7 deletions

View File

@ -0,0 +1,35 @@
# Consul::Acl::Selector
A component to allow the user to 'select' the ACL area they wish to view.
Whilst the 'Selector' naming here is a bit of a reach, it fits well with other
similar 'Selector' components that we use within the main navigation area.
The component itself is a simple wrapper around a bunch of `li a`'s.
Please note:
- Currently at least, you must add this inside of a `<ul>` element.
```hbs preview-template
<ul>
<Consul::Acl::Selector
@dc={{hash
Name='dc-1'
}}
/>
</ul>
```
## Arguments
| Argument/Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `dc` | `object` | | The current datacenter |
## See
- [Template Source Code](./index.hbs)
- [Component Source Code](./index.js)
---

View File

@ -0,0 +1,49 @@
# Consul::Token::Selector
A self-contained component to allow the user to 'select' their token a.k.a.
log in. The component is mostly a wrapper around a composition of `<AuthDialog
/>`, `<AuthForm />`, `<AuthProfile />` and `<ModalDialog />`. The majority of
the functionality is contained in those other components. This composition
mostly orchestrates the interactions between them i.e. wires them together.
As it uses `<AuthDialog />` (a componentized state machine), retrieving and saving
the token is all managed via that component (via `<DataSource />` and
`<DataSink />`, but this component provides the Consul specific DataSource
uri's to tell `AuthDialog` to save user tokens to a Consul namespaced user
settings area (Consul uses localStorage for saving user settings)
Please note:
- Currently at least, you must add this inside of a `<ul>` element.
- For the moment, make sure you have enabled ACLs using developer debug
cookies.
```hbs preview-template
<ul>
<Consul::Token::Selector
@dc={{hash
Name='dc-1'
}}
@nspace='default'
@partition='default'
@onchange={{noop}}
/>
</ul>
```
## Arguments
| Argument/Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `dc` | `object` | | The current datacenter |
| `nspace` | `string` | | The name of the current namespace |
| `partition` | `string` | | The name of the current partition |
| `onchange` | `function` | | An event handler, for when the user token change, either via logging in, logging out or re-logging in.
## See
- [Template Source Code](./index.hbs)
- [Component Source Code](./index.js)
---

View File

@ -126,10 +126,10 @@
<BlockSlot @name="menu">
{{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
{{!TODO: It might be nice to use one of our recursive components here}}
{{#if @token.AccessorID}}
{{#if authDialog.token.AccessorID}}
<li role="none">
<AuthProfile
@item={{@token}}
@item={{authDialog.token}}
/>
</li>
<MenuSeparator />
@ -151,7 +151,8 @@
</li>
{{yield
(hash
modal=this.modal
open=this.modal.open
close=this.model.close
)
}}
{{/if}}

View File

@ -86,6 +86,12 @@ module.exports = {
urlSchema: 'auto',
urlPrefix: 'docs/consul',
},
{
root: `${path.dirname(require.resolve('consul-acls/package.json'))}/app/components`,
pattern: '**/README.mdx',
urlSchema: 'auto',
urlPrefix: 'docs/consul-acls',
},
{
root: `${path.dirname(require.resolve('consul-partitions/package.json'))}/app/components`,
pattern: '**/README.mdx',

View File

@ -236,20 +236,23 @@
</a>
</li>
<Consul::Token::Selector
@token={{@user.token}}
@dc={{@dc}}
@partition={{@partition}}
@nspace={{@nspace}}
@onchange={{@onchange}}
as |modal|>
{{did-insert (set this 'modal')}}
as |selector|>
<Ref
@target={{this}}
@name="tokenSelector"
@value={{selector}}
/>
</Consul::Token::Selector>
</ul>
</:complementary-nav>
<:main>
{{yield (hash
login=(if this.modal this.modal (hash open=undefined))
login=(if this.tokenSelector this.tokenSelector (hash open=undefined close=undefined))
)}}
</:main>

View File

@ -31,3 +31,12 @@ Feature: navigation-links: Main Navigation link visibility
Then I see services on the navigation
Then I don't see roles on the navigation
Scenario: Empty state login button is shown
Given 1 datacenter model with the value "dc-1"
And 0 service models
When I visit the services page for yaml
---
dc: dc-1
---
Then the url should be /dc-1/services
And I see login on the emptystate