luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

UI: Add Toolbar to Storybook (#6761) 

* Add Toolbar stories
* Update ConfirmAction story
This commit is contained in:
Joshua Ogle 2019-05-20 18:10:42 -06:00 committed by GitHub
parent 8a0d423ed8
commit 5c5a33f6df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 535 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/app/components/toolbar-download-button.js
View File

@ -1,3 +1,19 @@
/**
* @module ToolbarSecretLink
* `ToolbarSecretLink` styles SecretLink for the Toolbar.
* It should only be used inside of `Toolbar`.
*
* @example
* ```js
* <Toolbar>
* <ToolbarActions>
* <ToolbarDownloadButton @actionText="Download policy" @extension={{if (eq policyType "acl") model.format "sentinel"}} @filename={{model.name}} @data={{model.policy}} />
* </ToolbarActions>
* </Toolbar>
* ```
*
*/
import DownloadButton from './download-button';
export default DownloadButton.extend({

19
ui/app/components/toolbar-filters.js
View File

@ -1,3 +1,22 @@
/**
* @module ToolbarFilters
* `ToolbarFilters` components are containers for Toolbar filters and toggles.
* It should only be used inside of `Toolbar`.
*
* @example
* ```js
* <Toolbar>
* <ToolbarFilters>
* <div class="control has-icons-left">
* <input class="filter input" placeholder="Filter keys" type="text">
* <Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
* </div>
* </ToolbarFilters>
* </Toolbar>
```
*
*/
import OuterHTML from './outer-html';
export default OuterHTML.extend({});

19
ui/app/components/toolbar-secret-link.js
View File

@ -1,3 +1,22 @@
/**
* @module ToolbarSecretLink
* `ToolbarSecretLink` styles SecretLink for the Toolbar.
* It should only be used inside of `Toolbar`.
*
* @example
* ```js
* <Toolbar>
* <ToolbarActions>
* <ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
* Create policy
* </ToolbarSecretLink>
* </ToolbarActions>
* </Toolbar>
* ```
*
* @param type="" {String} - Use "add" to change icon
*/
import OuterHTML from './outer-html';
import { computed } from '@ember/object';

5
ui/app/templates/vault/cluster/policy/show.hbs
View File

@ -23,11 +23,10 @@
<Toolbar>
<ToolbarActions>
<ToolbarDownloadButton
@classNames="toolbar-link"
@actionText="Download policy"
@extension={{if (eq policyType "acl") model.format "sentinel"}}
@filename=model.name
@data=model.policy
@filename={{model.name}}
@data={{model.policy}}
/>
{{#if (and (not-eq model.id "root") (or capabilities.canUpdate capabilities.canDelete))}}
<ToolbarLink

6
ui/lib/core/addon/components/confirm-action.js
View File

@ -16,11 +16,9 @@ import layout from '../templates/components/confirm-action';
*
* @property {Func} [onConfirmAction=null] - The action to take upon confirming.
* @property {String} [confirmTitle=Delete this?] - The title to display when confirming.
* @property {String} [confirmMessage=Are you sure you want to do this?] - The message to display when confirming.
* @property {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
* @property {String} [confirmButtonText=Delete] - The confirm button text.
* @property {String} [cancelButtonText=Cancel] - The cancel button text.
* @property {String} [disabledTitle=Can't delete this yet] - The title to display when the button is disabled.
* @property {String} [disabledMessage=Complete the form to complete this action] - The message to display when the button is disabled.
*
*/
@ -33,8 +31,6 @@ export default Component.extend({
confirmMessage: 'You will not be able to recover it later.',
confirmButtonText: 'Delete',
cancelButtonText: 'Cancel',
disabledTitle: "Can't delete this yet",
disabledMessage: 'Complete the form to complete this action',
horizontalPosition: 'auto-right',
verticalPosition: 'below',
disabled: false,

18
ui/lib/core/addon/components/toolbar-actions.js
View File

@ -1,3 +1,21 @@
/**
* @module ToolbarActions
* `ToolbarActions` is a container for toolbar links such as "Add item".
* It should only be used inside of `Toolbar`.
*
* @example
* ```js
* <Toolbar>
* <ToolbarActions>
* <ToolbarLink @params={{array 'vault.cluster.policy.edit'}}>
* Edit policy
* </ToolbarLink>
* </ToolbarActions>
* </Toolbar>
* ```
*
*/
import Component from '@ember/component';
import layout from '../templates/components/toolbar-actions';

20
ui/lib/core/addon/components/toolbar-link.js
View File

@ -1,3 +1,23 @@
/**
* @module ToolbarLink
* `ToolbarLink` components style links and buttons for the Toolbar
* It should only be used inside of `Toolbar`.
*
* @example
* ```js
* <Toolbar>
* <ToolbarActions>
* <ToolbarLink @params={{array 'vault.cluster.policies.create'}} @type="add">
* Create policy
* </ToolbarLink>
* </ToolbarActions>
* </Toolbar>
* ```
*
* @param params=''{Array} Array to pass to LinkTo
* @param type=''{String} Use "add" to change icon
*/
import Component from '@ember/component';
import { computed } from '@ember/object';
import layout from '../templates/components/toolbar-link';

17
ui/lib/core/addon/components/toolbar.js
View File

@ -1,3 +1,20 @@
/**
* @module Toolbar
* `Toolbar` components are containers for Toolbar actions.
*
* @example
* ```js
* <Toolbar>
* <ToolbarActions>
* <ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
* Create policy
* </ToolbarSecretLink>
* </ToolbarActions>
* </Toolbar>
* ```
*
*/
import Component from '@ember/component';
import layout from '../templates/components/toolbar';

4
ui/lib/core/addon/helpers/message-types.js
View File

@ -4,13 +4,13 @@ export const MESSAGE_TYPES = {
info: {
class: 'is-info',
glyphClass: 'has-text-info',
glyph: 'info-circle-outline',
glyph: 'info-circle-fill',
text: 'Info',
},
success: {
class: 'is-success',
glyphClass: 'has-text-success',
glyph: 'check-circle-outline',
glyph: 'check-circle-fill',
text: 'Success',
},
danger: {

4
ui/lib/core/addon/templates/components/confirm-action.hbs
View File

@ -24,10 +24,10 @@
<div class="message is-highlight">
<div class="message-title">
<Icon @glyph="alert-triangle" />
{{if disabled disabledTitle confirmTitle}}
{{confirmTitle}}
</div>
<p>
{{if disabled disabledMessage confirmMessage}}
{{confirmMessage}}
</p>
</div>
<div class="confirm-action-options">

19
ui/stories/confirm-action.md
View File

@ -5,28 +5,29 @@
**Properties**
| Name | Type | Default | Description |
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| buttonClasses | <code>String</code> | <code></code> | The CSS classes to add to the trigger button. |
| confirmTitle | <code>String</code> | <code>Delete this?</code> | The title to display upon confirming. |
| confirmMessage | <code>String</code> | <code>You will not be able to recover it later.</code> | The message to display upon confirming. |
| confirmButtonText | <code>String</code> | <code>Delete</code> | The confirm button text. |
| cancelButtonText | <code>String</code> | <code>Cancel</code> | The cancel button text. |
| onConfirmAction | <code>Func</code> | <code></code> | The action to take upon confirming. |
| [confirmMessage] | <code>String</code> | <code>Are you sure you want to do this?</code> | The message to display upon confirming. |
| [confirmButtonText] | <code>String</code> | <code>Delete</code> | The confirm button text. |
| [cancelButtonText] | <code>String</code> | <code>Cancel</code> | The cancel button text. |
| [disabledMessage] | <code>String</code> | <code>Complete the form to complete this action</code> | The message to display when the button is disabled. |
**Example**
```js
<ConfirmAction
@buttonClasses="button is-primary"
@onConfirmAction={{ () => { console.log('Action!') } }}
@confirmMessage="Are you sure you want to delete this config?">
Delete
</ConfirmAction>
```
**See**
- [Uses of ConfirmAction](https://github.com/hashicorp/vault/search?l=Handlebars&q=ConfirmAction)
- [ConfirmAction Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/confirm-action.js)
- [ConfirmAction Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/confirm-action.js)
---

27
ui/stories/confirm-action.stories.js
View File

@ -5,34 +5,39 @@ import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import notes from './confirm-action.md';
storiesOf('ConfirmAction/', module)
.addParameters({ options: { showPanel: true } })
.addDecorator(
withKnobs({
escapeHTML: false,
})
)
.add(
`ConfirmAction`,
() => ({
`ConfirmAction`, () => ({
template: hbs`
<h5 class="title is-5">Confirm Action</h5>
<ConfirmAction
@onConfirmAction={{onComfirmAction}}
@confirmButtonText={{confirmButtonText}}
@buttonClasses={{buttonClasses}}
@confirmTitle={{confirmTitle}}
@confirmMessage={{confirmMessage}}
@confirmButtonText={{confirmButtonText}}
@cancelButtonText={{cancelButtonText}}
@disabled={{disabled}}
>
Delete
@onConfirmAction={{onComfirmAction}}
>
{{buttonText}}
</ConfirmAction>
`,
`,
context: {
buttonText: text('buttonText', 'Delete'),
buttonClasses: text('buttonClasses', 'button'),
confirmTitle: text('confirmTitle', 'Delete this?'),
confirmMessage: text('confirmMessage', 'You will not be able to recover it later.'),
confirmButtonText: text('confirmButtonText', 'Delete'),
cancelButtonText: text('cancelButtonText', 'Cancel'),
disabled: boolean('disabled', false),
onComfirmAction: () => {
console.log('Action!');
},
confirmButtonText: text('confirmButtonText', 'Yes'),
confirmMessage: text('confirmMessage', 'Are you sure you want to do this?'),
cancelButtonText: text('cancelButtonText', 'Cancel'),
disabled: boolean('disabled', false),
},
}),
{ notes }

24
ui/stories/toolbar/toolbar-actions.md Normal file
View File

@ -0,0 +1,24 @@
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/toolbar-actions.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-actions" to re-generate the content.-->
## ToolbarActions
`ToolbarActions` is a container for toolbar links such as Add item.
It should only be used inside of `Toolbar`.
**Example**
```js
<Toolbar>
<ToolbarActions>
<ToolbarLink @params={{array 'vault.cluster.policy.edit'}}>
Edit policy
</ToolbarLink>
</ToolbarActions>
</Toolbar>
```
**See**
- [Uses of ToolbarActions](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarActions+OR+toolbar-actions)
- [ToolbarActions Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/toolbar-actions.js)
---

27
ui/stories/toolbar/toolbar-actions.stories.js Normal file
View File

@ -0,0 +1,27 @@
/* eslint-disable import/extensions */
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, select } from '@storybook/addon-knobs';
import notes from './toolbar-actions.md';
storiesOf('Toolbar/', module)
.addParameters({ options: { showPanel: true } })
.addDecorator(withKnobs())
.add(`ToolbarActions`, () => ({
template: hbs`
<h5 class="title is-5">ToolbarActions</h5>
<Toolbar>
<ToolbarActions>
<ToolbarLink
@type="add"
@params={{array "#"}}
>
Add item
</ToolbarLink>
</ToolbarActions>
</Toolbar>
`,
context: {},
}),
{notes}
);

22
ui/stories/toolbar/toolbar-download-button.md Normal file
View File

@ -0,0 +1,22 @@
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/toolbar-download-button.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-download-button" to re-generate the content.-->
## ToolbarSecretLink
`ToolbarSecretLink` styles SecretLink for the Toolbar.
It should only be used inside of `Toolbar`.
**Example**
```js
<Toolbar>
<ToolbarActions>
<ToolbarDownloadButton @actionText="Download policy" @extension={{if (eq policyType "acl") model.format "sentinel"}} @filename={{model.name}} @data={{model.policy}} />
</ToolbarActions>
</Toolbar>
```
**See**
- [Uses of ToolbarDownloadButton](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarDownloadButton+OR+toolbar-download-button)
- [ToolbarDownloadButton Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/toolbar-download-button.js)
---

29
ui/stories/toolbar/toolbar-download-button.stories.js Normal file
View File

@ -0,0 +1,29 @@
/* eslint-disable import/extensions */
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, text } from '@storybook/addon-knobs';
import notes from './toolbar-download-button.md';
storiesOf('Toolbar/', module)
.addParameters({ options: { showPanel: true } })
.addDecorator(withKnobs())
.add(`ToolbarDownloadButton`,() => ({
template: hbs`
<h5 class="title is-5">ToolbarLink</h5>
<div style="width: 400px;">
<Toolbar>
<ToolbarActions>
<ToolbarDownloadButton
@actionText={{label}}
/>
</ToolbarActions>
</Toolbar>
</div>
`,
context: {
label: text('Button text', 'Download policy'),
},
}),
{notes}
);

25
ui/stories/toolbar/toolbar-filters.md Normal file
View File

@ -0,0 +1,25 @@
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/toolbar-filters.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-filters" to re-generate the content.-->
## ToolbarFilters
`ToolbarFilters` components are containers for Toolbar filters and toggles.
It should only be used inside of `Toolbar`.
**Example**
```js
<Toolbar>
<ToolbarFilters>
<div class="control has-icons-left">
<input class="filter input" placeholder="Filter keys" type="text">
<Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
</div>
</ToolbarFilters>
</Toolbar>
```
**See**
- [Uses of ToolbarFilters](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarFilters+OR+toolbar-filters)
- [ToolbarFilters Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/toolbar-filters.js)
---

35
ui/stories/toolbar/toolbar-filters.stories.js Normal file
View File

@ -0,0 +1,35 @@
/* eslint-disable import/extensions */
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, select } from '@storybook/addon-knobs';
import notes from './toolbar-filters.md';
storiesOf('Toolbar/', module)
.addParameters({ options: { showPanel: true } })
.addDecorator(withKnobs())
.add(`ToolbarFilters`, () => ({
template: hbs`
<h5 class="title is-5">ToolbarFilters</h5>
<Toolbar>
<ToolbarFilters>
<div class="control has-icons-left">
<input class="filter input" placeholder="Filter keys" type="text">
<Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
</div>
<div class="toolbar-separator"/>
<div class="control">
<input
id="json"
type="checkbox"
name="json"
class="switch is-rounded is-success is-small"
/>
<label for="json" class="has-text-grey">JSON</label>
</div>
</ToolbarFilters>
</Toolbar>
`,
context: {},
}),
{notes}
);

30
ui/stories/toolbar/toolbar-link.md Normal file
View File

@ -0,0 +1,30 @@
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/toolbar-link.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-link" to re-generate the content.-->
## ToolbarLink
`ToolbarLink` components style links and buttons for the Toolbar
It should only be used inside of `Toolbar`.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| params | <code>Array</code> | <code>&#x27;&#x27;</code> | Array to pass to LinkTo |
| type | <code>String</code> | <code>&#x27;&#x27;</code> | Use "add" to change icon |
**Example**
```js
<Toolbar>
<ToolbarActions>
<ToolbarLink @params={{array 'vault.cluster.policies.create'}} @type="add">
Create policy
</ToolbarLink>
</ToolbarActions>
</Toolbar>
```
**See**
- [Uses of ToolbarLink](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarLink+OR+toolbar-link)
- [ToolbarLink Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/toolbar-link.js)
---

33
ui/stories/toolbar/toolbar-link.stories.js Normal file
View File

@ -0,0 +1,33 @@
/* eslint-disable import/extensions */
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, select, text } from '@storybook/addon-knobs';
import notes from './toolbar-link.md';
storiesOf('Toolbar/', module)
.addParameters({ options: { showPanel: true } })
.addDecorator(withKnobs())
.add(`ToolbarLink`,() => ({
template: hbs`
<h5 class="title is-5">ToolbarLink</h5>
<div style="width: 400px;">
<Toolbar>
<ToolbarActions>
<ToolbarLink
@params={{array '#'}}
@type={{type}}
>
{{label}}
</ToolbarLink>
</ToolbarActions>
</Toolbar>
</div>
`,
context: {
type: select('Type', ['', 'add']),
label: text('Button text', 'Edit secret'),
},
}),
{notes}
);

29
ui/stories/toolbar/toolbar-secret-link.md Normal file
View File

@ -0,0 +1,29 @@
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/toolbar-secret-link.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-secret-link" to re-generate the content.-->
## ToolbarSecretLink
`ToolbarSecretLink` styles SecretLink for the Toolbar.
It should only be used inside of `Toolbar`.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| type | <code>String</code> | <code>&quot;&quot;</code> | Use "add" to change icon |
**Example**
```js
<Toolbar>
<ToolbarActions>
<ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
Create policy
</ToolbarSecretLink>
</ToolbarActions>
</Toolbar>
```
**See**
- [Uses of ToolbarSecretLink](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarSecretLink+OR+toolbar-secret-link)
- [ToolbarSecretLink Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/toolbar-secret-link.js)
---

36
ui/stories/toolbar/toolbar-secret-link.stories.js Normal file
View File

@ -0,0 +1,36 @@
/* eslint-disable import/extensions */
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, select, text } from '@storybook/addon-knobs';
import notes from './toolbar-secret-link.md';
storiesOf('Toolbar/', module)
.addParameters({ options: { showPanel: true } })
.addDecorator(withKnobs())
.add(`ToolbarSecretLink`,() => ({
template: hbs`
<h5 class="title is-5">ToolbarLink</h5>
<div style="width: 400px;">
<Toolbar>
<ToolbarActions>
<ToolbarSecretLink
@secret={{model.id}}
@mode="edit"
@data-test-edit-link=true
@replace=true
@type={{type}}
>
{{label}}
</ToolbarSecretLink>
</ToolbarActions>
</Toolbar>
</div>
`,
context: {
type: select('Type', ['', 'add']),
label: text('Button text', 'Edit role'),
},
}),
{notes}
);

23
ui/stories/toolbar/toolbar.md Normal file
View File

@ -0,0 +1,23 @@
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/toolbar.js. To make changes, first edit that file and run "yarn gen-story-md toolbar" to re-generate the content.-->
## Toolbar
`Toolbar` components are containers for Toolbar actions.
**Example**
```js
<Toolbar>
<ToolbarActions>
<ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
Create policy
</ToolbarSecretLink>
</ToolbarActions>
</Toolbar>
```
**See**
- [Uses of Toolbar](https://github.com/hashicorp/vault/search?l=Handlebars&q=Toolbar+OR+toolbar)
- [Toolbar Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/toolbar.js)
---

80
ui/stories/toolbar/toolbar.stories.js Normal file
View File

@ -0,0 +1,80 @@
/* eslint-disable import/extensions */
import hbs from 'htmlbars-inline-precompile';
import { storiesOf } from '@storybook/ember';
import { withKnobs, select } from '@storybook/addon-knobs';
import notes from './toolbar.md';
storiesOf('Toolbar/', module)
.addParameters({ options: { showPanel: true } })
.addDecorator(withKnobs())
.add(`Toolbar`, () => ({
template: hbs`
<h5 class="title is-5">Toolbar</h5>
<section class="box is-fullwidth is-shadowless">
<h5 class="title is-6">Example for list views</h5>
<Toolbar>
<ToolbarFilters>
<div class="control has-icons-left">
<input class="filter input" placeholder="Filter keys" type="text">
<Icon @glyph="search" class="search-icon has-text-grey-light hs-icon-l" />
</div>
</ToolbarFilters>
<ToolbarActions>
<ToolbarLink
@type="add"
@params={{array ""}}
>
Add item
</ToolbarLink>
</ToolbarActions>
</Toolbar>
</section>
<section class="box is-fullwidth is-shadowless">
<h5 class="title is-6">Example for show views</h5>
<Toolbar>
<ToolbarActions>
<ConfirmAction
@buttonClasses="toolbar-link"
>
Delete
</ConfirmAction>
<ToolbarLink
@params={{array ""}}
>
Edit
</ToolbarLink>
</ToolbarActions>
</Toolbar>
</section>
<section class="box is-fullwidth is-shadowless">
<h5 class="title is-6">Example for code editor</h5>
<Toolbar>
<ToolbarFilters>
<div class="control">
<input
id="json"
type="checkbox"
name="json"
class="switch is-rounded is-success is-small"
/>
<label for="json" class="has-text-grey">JSON</label>
</div>
</ToolbarFilters>
<ToolbarActions>
<ToolbarLink
@params={{array ""}}
>
Copy
</ToolbarLink>
</ToolbarActions>
</Toolbar>
</section>
`,
context: {
example: select('Example', ['List', 'Show', 'Code editor'], 'List'),
},
}),
{notes}
);