remove storybook: (#15074)
* remove storybook: * changelog * clean up * update browserstack * remove special case for storybook * add back gen-story-md
This commit is contained in:
Angel Garbarino
GitHub
parent
b30e7d3545
commit
afddcfd645
|
|
@ -119,14 +119,12 @@ is optional but encouraged.
|
||||||
Bug fixes are welcome in PRs but existing tests must pass and updated logic
|
Bug fixes are welcome in PRs but existing tests must pass and updated logic
|
||||||
should be handled in new tests. You needn't submit an issue first to fix bugs.
|
should be handled in new tests. You needn't submit an issue first to fix bugs.
|
||||||
|
|
||||||
Keep in mind that the UI should be consistent with other areas of Vault. Our
|
Keep in mind that the UI should be consistent with other areas of Vault.
|
||||||
[README](ui/README.md) [has instructions for launching Storybook](ui/README.md#vault-storybook),
|
The UI should be user-centered, informative, and include edge cases and errors—
|
||||||
which showcases how we use components. Beyond that, the UI should be user-centered,
|
including accommodations for users who may not have permissions to view or
|
||||||
informative, and include edge cases and errors— including accommodations for
|
interact with your feature. If you are not comfortable with UI design, a Vault
|
||||||
users who may not have permissions to view or interact with your feature.
|
designer can take a look at your work— just be aware that this might mean
|
||||||
If you are not comfortable with UI design, a Vault designer can take a look at
|
it will add some time to the PR process.
|
||||||
your work— just be aware that this might mean it will add some time to the
|
|
||||||
PR process.
|
|
||||||
|
|
||||||
Finally, in your code, try to avoid logic-heavy templates (when possible,
|
Finally, in your code, try to avoid logic-heavy templates (when possible,
|
||||||
calculate values in the .js file instead of .hbs) and Ember anti-patterns.
|
calculate values in the .js file instead of .hbs) and Ember anti-patterns.
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
```release-note:improvement
|
||||||
|
ui: Remove storybook.
|
||||||
|
```
|
||||||
|
|
@ -9,10 +9,7 @@
|
||||||
# dependencies
|
# dependencies
|
||||||
/bower_components/
|
/bower_components/
|
||||||
/node_modules/
|
/node_modules/
|
||||||
/.storybook/
|
|
||||||
/.yarn/
|
/.yarn/
|
||||||
/stories/
|
|
||||||
/storybook-static/
|
|
||||||
|
|
||||||
# misc
|
# misc
|
||||||
/coverage/
|
/coverage/
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
# compiled output
|
# compiled output
|
||||||
/dist/
|
/dist/
|
||||||
/tmp/
|
/tmp/
|
||||||
/storybook-static/
|
|
||||||
|
|
||||||
# dependencies
|
# dependencies
|
||||||
/bower_components/
|
/bower_components/
|
||||||
|
|
@ -18,7 +17,6 @@
|
||||||
/npm-debug.log*
|
/npm-debug.log*
|
||||||
/testem.log
|
/testem.log
|
||||||
/yarn-error.log
|
/yarn-error.log
|
||||||
/.storybook/preview-head.html
|
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
|
||||||
# ember-try
|
# ember-try
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
import '@storybook/addon-links/register';
|
|
||||||
import '@storybook/addon-knobs/register';
|
|
||||||
import '@storybook/addon-notes/register';
|
|
||||||
import '@storybook/addon-viewport/register';
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
/* eslint-env node */
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
[
|
|
||||||
'@babel/preset-env',
|
|
||||||
{
|
|
||||||
shippedProposals: true,
|
|
||||||
useBuiltIns: 'usage',
|
|
||||||
corejs: '3',
|
|
||||||
targets: ['last 1 Chrome versions', 'last 1 Firefox versions', 'last 1 Safari versions'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
],
|
|
||||||
plugins: [
|
|
||||||
[
|
|
||||||
'@babel/plugin-proposal-decorators',
|
|
||||||
{
|
|
||||||
legacy: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
|
||||||
'@babel/plugin-syntax-dynamic-import',
|
|
||||||
['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
|
|
||||||
'babel-plugin-macros',
|
|
||||||
['emotion', { sourceMap: true, autoLabel: true }],
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
import { configure, addParameters, addDecorator } from '@storybook/ember';
|
|
||||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
|
||||||
import theme from './theme.js';
|
|
||||||
import flightIconSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite-module';
|
|
||||||
|
|
||||||
function loadStories() {
|
|
||||||
// automatically import all files ending in *.stories.js
|
|
||||||
const appStories = require.context('../stories', true, /.stories.js$/);
|
|
||||||
const addonAndRepoStories = require.context('../lib', true, /.stories.js$/);
|
|
||||||
appStories.keys().forEach((filename) => appStories(filename));
|
|
||||||
addonAndRepoStories.keys().forEach((filename) => addonAndRepoStories(filename));
|
|
||||||
}
|
|
||||||
|
|
||||||
addParameters({
|
|
||||||
viewport: { viewports: INITIAL_VIEWPORTS },
|
|
||||||
options: { theme },
|
|
||||||
});
|
|
||||||
|
|
||||||
addDecorator((storyFn) => {
|
|
||||||
const { template, context } = storyFn();
|
|
||||||
|
|
||||||
// flight icon sprite must be inserted into dom for icon lookup via use element
|
|
||||||
document.getElementById('root').insertAdjacentHTML('afterbegin', flightIconSprite.trim());
|
|
||||||
|
|
||||||
// This adds styling to the Canvas tab.
|
|
||||||
const styles = {
|
|
||||||
style: {
|
|
||||||
margin: '20px',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// Create a div to wrap the Canvas tab with the applied styles.
|
|
||||||
const element = document.createElement('div');
|
|
||||||
Object.assign(element.style, styles.style);
|
|
||||||
|
|
||||||
const innerElement = document.createElement('div');
|
|
||||||
const wormhole = document.createElement('div');
|
|
||||||
wormhole.setAttribute('id', 'ember-basic-dropdown-wormhole');
|
|
||||||
innerElement.appendChild(wormhole);
|
|
||||||
|
|
||||||
element.appendChild(innerElement);
|
|
||||||
innerElement.appendTo = function appendTo(el) {
|
|
||||||
el.appendChild(element);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
template,
|
|
||||||
context,
|
|
||||||
element: innerElement,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
configure(loadStories, module);
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
import { create } from '@storybook/theming';
|
|
||||||
|
|
||||||
// Fonts and colors are pulled from _colors.scss and _bulma_variables.scss.
|
|
||||||
|
|
||||||
const uiGray300 = '#BAC1CC';
|
|
||||||
const uiGray900 = '#1f2124';
|
|
||||||
const blue500 = '#1563ff';
|
|
||||||
|
|
||||||
export default create({
|
|
||||||
base: 'light',
|
|
||||||
|
|
||||||
colorPrimary: uiGray900,
|
|
||||||
colorSecondary: blue500,
|
|
||||||
|
|
||||||
// UI
|
|
||||||
appBorderColor: uiGray300,
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
fontBase: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
|
|
||||||
fontCode: '"SFMono-Regular", Consolas, monospace',
|
|
||||||
|
|
||||||
// Text colors
|
|
||||||
textColor: uiGray900,
|
|
||||||
|
|
||||||
// Toolbar default and active colors
|
|
||||||
barTextColor: uiGray300,
|
|
||||||
barSelectedColor: 'white',
|
|
||||||
barBg: uiGray900,
|
|
||||||
|
|
||||||
brandTitle: 'Vault UI Storybook',
|
|
||||||
brandUrl: 'https://www.vaultproject.io/',
|
|
||||||
});
|
|
||||||
97
ui/README.md
97
ui/README.md
|
|
@ -12,12 +12,6 @@
|
||||||
- [Running Browserstack Locally](#running-browserstack-locally)
|
- [Running Browserstack Locally](#running-browserstack-locally)
|
||||||
- [Linting](#linting)
|
- [Linting](#linting)
|
||||||
- [Building Vault UI into a Vault Binary](#building-vault-ui-into-a-vault-binary)
|
- [Building Vault UI into a Vault Binary](#building-vault-ui-into-a-vault-binary)
|
||||||
- [Vault Storybook](#vault-storybook)
|
|
||||||
- [Storybook Commands at a Glance](#storybook-commands-at-a-glance)
|
|
||||||
- [Writing Stories](#writing-stories)
|
|
||||||
- [Adding a new story](#adding-a-new-story)
|
|
||||||
- [Code Generators](#code-generators-1)
|
|
||||||
- [Storybook Deployment](#storybook-deployment)
|
|
||||||
- [Further Reading / Useful Links](#further-reading--useful-links)
|
- [Further Reading / Useful Links](#further-reading--useful-links)
|
||||||
|
|
||||||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||||||
|
|
@ -142,94 +136,6 @@ This will result in a Vault binary that has the UI built-in - though in
|
||||||
a non-dev setup it will still need to be enabled via the `ui` config or
|
a non-dev setup it will still need to be enabled via the `ui` config or
|
||||||
setting `VAULT_UI` environment variable.
|
setting `VAULT_UI` environment variable.
|
||||||
|
|
||||||
## Vault Storybook
|
|
||||||
|
|
||||||
The Vault UI uses Storybook to catalog all of its components. Below are details for running and contributing to Storybook.
|
|
||||||
|
|
||||||
### Storybook Commands at a Glance
|
|
||||||
|
|
||||||
| Command | Description |
|
|
||||||
| ------------------------------------------------------------------------ | ---------------------------------------------------------- |
|
|
||||||
| `yarn storybook` | run storybook |
|
|
||||||
| `ember generate story [name-of-component]` | generate a new story |
|
|
||||||
| `ember generate story [name-of-component] -ir [name-of-engine-or-addon]` | generate a new story in the specified engine or addon |
|
|
||||||
| `yarn gen-story-md [name-of-component]` | update a story notes file |
|
|
||||||
| `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` | update a story notes file in the specified engine or addon |
|
|
||||||
|
|
||||||
### Writing Stories
|
|
||||||
|
|
||||||
Each component in `vault/ui/app/components` should have a corresponding `[component-name].stories.js` and `[component-name].md` files within `vault/ui/stories`. Components in the `core` addon located at `vault/ui/lib/core/addon/components` have corresponding stories and markdown files in `vault/ui/lib/core/stories`.
|
|
||||||
|
|
||||||
#### Adding a new story
|
|
||||||
|
|
||||||
1. Make sure the component is well-documented using [jsdoc](http://usejsdoc.org/tags-exports.html). This documentation should at minimum include the module name, an example of usage, and the params passed into the handlebars template. For example, here is how we document the ToggleButton Component:
|
|
||||||
|
|
||||||
````js
|
|
||||||
/**
|
|
||||||
* @module ToggleButton
|
|
||||||
* `ToggleButton` components are used to expand and collapse content with a toggle.
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* ```js
|
|
||||||
* <ToggleButton @openLabel="Encrypt Output with PGP" @closedLabel="Encrypt Output with PGP" @toggleTarget={{this}} @toggleAttr="showOptions"/>
|
|
||||||
* {{#if showOptions}}
|
|
||||||
* <div>
|
|
||||||
* <p>
|
|
||||||
* I will be toggled!
|
|
||||||
* </p>
|
|
||||||
* </div>
|
|
||||||
* {{/if}}
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* @param {String} toggleAttr=null - The attribute upon which to toggle.
|
|
||||||
* @param {Object} attrTarget=null - The target upon which the event handler should be added.
|
|
||||||
* @param {String} [openLabel=Hide options] - The message to display when the toggle is open. //optional params are denoted by square brackets
|
|
||||||
* @param {String} [closedLabel=More options] - The message to display when the toggle is closed.
|
|
||||||
*/
|
|
||||||
````
|
|
||||||
|
|
||||||
Note that placing a param inside brackets (e.g. `[closedLabel=More options]` indicates it is optional and has a default value of `'More options'`.)
|
|
||||||
|
|
||||||
2. Generate a new story with `ember generate story [name-of-component]`
|
|
||||||
3. Inside the newly generated `stories` file, add at least one example of the component. If the component should be interactive, enable the [Storybook Knobs addon](https://github.com/storybooks/storybook/tree/master/addons/knobs).
|
|
||||||
4. Generate the `notes` file for the component with `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` (e.g. `yarn gen-md alert-banner core`). This will generate markdown documentation of the component and place it at `vault/ui/stories/[name-of-component].md`. If your component is a template-only component, you will need to manually create the markdown file. The markdown file will need to be imported in your `[component-name].stories.js` file (e.g. `import notes from './[name-of-component].md'`).
|
|
||||||
5. The completed `[component-name].stories.js` file should look something like this (with knobs):
|
|
||||||
|
|
||||||
```js
|
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { text, withKnobs } from '@storybook/addon-knobs';
|
|
||||||
import notes from './stat-text.md';
|
|
||||||
|
|
||||||
storiesOf('MyComponent', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`MyComponent`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">My Component</h5>
|
|
||||||
<MyComponent @param={{param}} @anotherParam={{anotherParam}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
param: text('param', 'My parameter'),
|
|
||||||
anotherParam: boolean('anotherParam', true),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
```
|
|
||||||
|
|
||||||
See the [Storybook Docs](https://storybook.js.org/docs/basics/introduction/) for more information on writing stories.
|
|
||||||
|
|
||||||
### Code Generators
|
|
||||||
|
|
||||||
It is important to add all new components into Storybook and to keep the story and notes files up to date. To ease the process of creating and updating stories please use the code generators using the [commands listed above](#storybook-commands-at-a-glance).
|
|
||||||
|
|
||||||
### Storybook Deployment
|
|
||||||
|
|
||||||
A Vercel integration deploys a static Storybook build for any PR on the Vault GitHub repo. A preview link will show up in the PR checks. Once items are merged, the auto-deployed integration will publish that build making it available at [https://vault-storybook.vercel.app](https://vault-storybook.vercel.app). Currently the Vercel integration will cd into the `ui/` directory and then run `yarn deploy:storybook` so troubleshooting any issues can be done locally by running this same command. The logs for this build are public and will be linked from the PR checks.
|
|
||||||
|
|
||||||
## Further Reading / Useful Links
|
## Further Reading / Useful Links
|
||||||
|
|
||||||
- [ember.js](http://emberjs.com/)
|
- [ember.js](http://emberjs.com/)
|
||||||
|
|
@ -237,7 +143,4 @@ A Vercel integration deploys a static Storybook build for any PR on the Vault Gi
|
||||||
- Development Browser Extensions
|
- Development Browser Extensions
|
||||||
- [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
|
- [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
|
||||||
- [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
|
- [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
|
||||||
- [Storybook for Ember Live Example](https://vault-storybook.vercel.app/?path=/story/addon-centered--button)
|
|
||||||
- [Storybook Addons](https://github.com/storybooks/storybook/tree/master/addons/)
|
|
||||||
- [Storybook Docs](https://storybook.js.org/docs/basics/introduction/)
|
|
||||||
- [Browserstack Automate](https://automate.browserstack.com/)
|
- [Browserstack Automate](https://automate.browserstack.com/)
|
||||||
|
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
storiesOf('<%= classifiedModuleName %>', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(`<%= classifiedModuleName %>`, () => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5"><%= header %></h5>
|
|
||||||
<<%= classifiedModuleName %>/>
|
|
||||||
`,
|
|
||||||
context: {},
|
|
||||||
}));
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
'use strict';
|
|
||||||
/* eslint-disable node/no-extraneous-require */
|
|
||||||
/* eslint-disable ember/no-string-prototype-extensions */
|
|
||||||
const getPathOption = require('ember-cli-get-component-path-option');
|
|
||||||
const stringUtil = require('ember-cli-string-utils');
|
|
||||||
const path = require('path');
|
|
||||||
|
|
||||||
function findAddonByName(addonOrProject, name) {
|
|
||||||
let addon = addonOrProject.addons.find((addon) => addon.name === name);
|
|
||||||
|
|
||||||
if (addon) {
|
|
||||||
return addon;
|
|
||||||
}
|
|
||||||
|
|
||||||
return addonOrProject.addons.find((addon) => findAddonByName(addon, name));
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
description: 'generates a story for storybook',
|
|
||||||
|
|
||||||
fileMapTokens: function () {
|
|
||||||
let { project } = this;
|
|
||||||
return {
|
|
||||||
__path__: function (options) {
|
|
||||||
if (options.inRepoAddon) {
|
|
||||||
let addon = findAddonByName(project, options.inRepoAddon);
|
|
||||||
return path.relative(project.root, addon.root);
|
|
||||||
}
|
|
||||||
return path.relative(project.root, project.root);
|
|
||||||
},
|
|
||||||
__markdownname__: function (options) {
|
|
||||||
return options.dasherizedModuleName;
|
|
||||||
},
|
|
||||||
__name__: function (options) {
|
|
||||||
return options.dasherizedModuleName;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
locals: function (options) {
|
|
||||||
let contents = '';
|
|
||||||
|
|
||||||
return {
|
|
||||||
contents: contents,
|
|
||||||
path: getPathOption(options),
|
|
||||||
header: stringUtil
|
|
||||||
.dasherize(options.entity.name)
|
|
||||||
.split('-')
|
|
||||||
.map((word) => stringUtil.capitalize(word))
|
|
||||||
.join(' '),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -5,9 +5,7 @@
|
||||||
},
|
},
|
||||||
"exclude": [
|
"exclude": [
|
||||||
"node_modules",
|
"node_modules",
|
||||||
".storybook",
|
|
||||||
".yarn",
|
".yarn",
|
||||||
"public",
|
"public"
|
||||||
"storybook-static"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -127,12 +127,6 @@ export default Component.extend({
|
||||||
this.set('shouldUseFallback', true);
|
this.set('shouldUseFallback', true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
//special case for storybook
|
|
||||||
if (this.staticOptions) {
|
|
||||||
let options = this.staticOptions;
|
|
||||||
this.formatOptions(options);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
throw err;
|
throw err;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/alert-banner.js. To make changes, first edit that file and run "yarn gen-story-md alert-banner" to re-generate the content.-->
|
|
||||||
|
|
||||||
## AlertBanner
|
|
||||||
`AlertBanner` components are used to inform users of important messages.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| type | <code>String</code> | <code></code> | The banner type. This comes from the message-types helper. |
|
|
||||||
| [secondIconType] | <code>String</code> | <code></code> | If you want a second icon to appear to the right of the title. This comes from the message-types helper. |
|
|
||||||
| [progressBar] | <code>Object</code> | <code></code> | An object containing a value and maximum for a progress bar. Will be displayed next to the message title. |
|
|
||||||
| [message] | <code>String</code> | <code></code> | The message to display within the banner. |
|
|
||||||
| [title] | <code>String</code> | <code></code> | A title to show above the message. If this is not provided, there are default values for each type of alert. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<AlertBanner @type="danger" @message="{{model.keyId}} is not a valid lease ID"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of AlertBanner](https://github.com/hashicorp/vault/search?l=Handlebars&q=AlertBanner+OR+alert-banner)
|
|
||||||
- [AlertBanner Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/alert-banner.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './alert-banner.md';
|
|
||||||
import { withKnobs, object } from '@storybook/addon-knobs';
|
|
||||||
import { MESSAGE_TYPES } from '../addon/helpers/message-types.js';
|
|
||||||
|
|
||||||
storiesOf('Alerts/AlertBanner', module)
|
|
||||||
.addParameters({ options: { showPanel: false } })
|
|
||||||
.addDecorator(
|
|
||||||
withKnobs({
|
|
||||||
escapeHTML: false,
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
'AlertBanner',
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
{{#each types as |type|}}
|
|
||||||
<h5 class="title is-5">{{humanize type}}</h5>
|
|
||||||
<AlertBanner @type={{type}} @message={{message}}/>
|
|
||||||
{{/each}}
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
types: Object.keys(MESSAGE_TYPES),
|
|
||||||
message: 'Here is a message.',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
'AlertBanner with Progress Bar',
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<AlertBanner @type={{type}} @message={{message}} @progressBar={{progressBar}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
type: 'info',
|
|
||||||
message: 'Here is a message.',
|
|
||||||
progressBar: object('Progress Bar', { value: 75, max: 100 }),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/alert-inline.js. To make changes, first edit that file and run "yarn gen-story-md alert-inline" to re-generate the content.-->
|
|
||||||
|
|
||||||
## AlertInline
|
|
||||||
`AlertInline` components are used to inform users of important messages.
|
|
||||||
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| type | <code>String</code> | <code></code> | The alert type. This comes from the message-types helper. |
|
|
||||||
| [message] | <code>String</code> | <code></code> | The message to display within the alert. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<AlertInline
|
|
||||||
@type="danger"
|
|
||||||
@message="{{model.keyId}} is not a valid lease ID"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of AlertInline](https://github.com/hashicorp/vault/search?l=Handlebars&q=AlertInline)
|
|
||||||
- [AlertInline Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/alert-inline.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './alert-inline.md';
|
|
||||||
import { MESSAGE_TYPES } from '../addon/helpers/message-types.js';
|
|
||||||
|
|
||||||
storiesOf('Alerts/AlertInline', module)
|
|
||||||
.addParameters({ options: { showPanel: false } })
|
|
||||||
.add(
|
|
||||||
'AlertInline',
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
{{#each types as |type|}}
|
|
||||||
<h5 class="title is-5">{{humanize type}}</h5>
|
|
||||||
<AlertInline @type={{type}} @message={{message}}/>
|
|
||||||
{{/each}}
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
types: Object.keys(MESSAGE_TYPES),
|
|
||||||
message: 'Here is a message.',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/box-radio.js. To make changes, first edit that file and run "yarn gen-story-md box-radio" to re-generate the content.-->
|
|
||||||
|
|
||||||
## BoxRadio
|
|
||||||
BoxRadio components are used to display options for a radio selection.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| displayName | <code>string</code> | | This is the string that will show on the box radio option. |
|
|
||||||
| type | <code>string</code> | | type is the key that the radio input will be identified by. Please use a value without spaces. |
|
|
||||||
| glyph | <code>string</code> | | glyph is the name of the icon that will be used in the box |
|
|
||||||
| groupValue | <code>string</code> | | The key of the radio option that is currently selected for this radio group |
|
|
||||||
| groupName | <code>string</code> | | The name (key) of the group that this radio option belongs to |
|
|
||||||
| onRadioChange | <code>function</code> | | This callback will trigger when the radio option is selected (if enabled) |
|
|
||||||
| [disabled] | <code>boolean</code> | <code>false</code> | This parameter controls whether the radio option is selectable. If not, it will be grayed out and show a tooltip. |
|
|
||||||
| [tooltipMessage] | <code>string</code> | <code>"default"</code> | The message that shows in the tooltip if the radio option is disabled |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<BoxRadio @displayName="Catahoula Leopard" @type="catahoula" @glyph="dog" @groupValue="labrador" @groupName="my-favorite-dog" @onRadioChange={{handleRadioChange}} />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of BoxRadio](https://github.com/hashicorp/vault/search?l=Handlebars&q=BoxRadio+OR+box-radio)
|
|
||||||
- [BoxRadio Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/box-radio.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
|
|
||||||
import notes from './box-radio.md';
|
|
||||||
|
|
||||||
const GLYPHS = {
|
|
||||||
KMIP: 'kmip',
|
|
||||||
Transform: 'transform',
|
|
||||||
AWS: 'aws',
|
|
||||||
Azure: 'azure',
|
|
||||||
Cert: 'cert',
|
|
||||||
GCP: 'gcp',
|
|
||||||
Github: 'github',
|
|
||||||
JWT: 'jwt',
|
|
||||||
HashiCorp: 'hashicorp',
|
|
||||||
LDAP: 'ldap',
|
|
||||||
OKTA: 'okta',
|
|
||||||
Radius: 'radius',
|
|
||||||
Userpass: 'userpass',
|
|
||||||
Secrets: 'kv',
|
|
||||||
Consul: 'consul',
|
|
||||||
};
|
|
||||||
|
|
||||||
storiesOf('BoxRadio', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`BoxRadio`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Box Radio</h5>
|
|
||||||
<BoxRadio
|
|
||||||
@type={{type}}
|
|
||||||
@glyph={{type}}
|
|
||||||
@displayName={{displayName}}
|
|
||||||
@onRadioChange={{onRadioChange}}
|
|
||||||
@disabled={{disabled}}
|
|
||||||
/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
displayName: text('displayName', 'HashiCorp'),
|
|
||||||
type: select('glyph', GLYPHS, 'hashicorp'),
|
|
||||||
disabled: boolean('disabled', false),
|
|
||||||
onRadioChange: (e) => {
|
|
||||||
console.log('Radio changed!', e);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/chevron.js. To make changes, first edit that file and run "yarn gen-story-md chevron" to re-generate the content.-->
|
|
||||||
|
|
||||||
## Chevron
|
|
||||||
`Chevron` components render `Icon` with one of the `chevron-` glyphs.
|
|
||||||
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| [direction] | <code>String</code> | <code>"right"</code> | the direction the chevron icon points. Accepted values are "right", "down", "left", "up". |
|
|
||||||
| [isButton] | <code>String</code> | <code>false</code> | if true, adjusts the CSS classes to push the icon closer to the right of a button. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<Chevron @direction="up" />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of Chevron](https://github.com/hashicorp/vault/search?l=Handlebars&q=Chevron+OR+chevron)
|
|
||||||
- [Chevron Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/chevron.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, select } from '@storybook/addon-knobs';
|
|
||||||
import notes from './chevron.md';
|
|
||||||
|
|
||||||
storiesOf('Chevron', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`Chevron`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Chevron</h5>
|
|
||||||
<Chevron @direction={{direction}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
direction: select('Direction', ['right', 'down', 'left', 'up'], 'right'),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/confirm-action.js. To make changes, first edit that file and run "yarn gen-story-md confirm-action" to re-generate the content.-->
|
|
||||||
|
|
||||||
## ConfirmAction
|
|
||||||
`ConfirmAction` is a button followed by a pop up confirmation message and button used to prevent users from performing actions they do not intend to.
|
|
||||||
|
|
||||||
**Properties**
|
|
||||||
|
|
||||||
| 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. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<ConfirmAction
|
|
||||||
@buttonClasses="button is-primary"
|
|
||||||
@onConfirmAction={{ () => { console.log('Action!') } }}
|
|
||||||
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/main/ui/lib/core/addon/components/confirm-action.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
|
||||||
import notes from './confirm-action.md';
|
|
||||||
|
|
||||||
storiesOf('Confirm/ConfirmAction', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(
|
|
||||||
withKnobs({
|
|
||||||
escapeHTML: false,
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`ConfirmAction`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Confirm Action</h5>
|
|
||||||
<ConfirmAction
|
|
||||||
@buttonClasses={{buttonClasses}}
|
|
||||||
@confirmTitle={{confirmTitle}}
|
|
||||||
@confirmMessage={{confirmMessage}}
|
|
||||||
@confirmButtonText={{confirmButtonText}}
|
|
||||||
@cancelButtonText={{cancelButtonText}}
|
|
||||||
@disabled={{disabled}}
|
|
||||||
@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!');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/confirm.js. To make changes, first edit that file and run "yarn gen-story-md confirm" to re-generate the content.-->
|
|
||||||
|
|
||||||
## Confirm
|
|
||||||
`Confirm` components prevent users from performing actions they do not intend to by showing a confirmation message as an overlay. This is a contextual component that should always be rendered with a `Message` which triggers the message.
|
|
||||||
|
|
||||||
See the `Message` component for a description of properties.
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<div class="box">
|
|
||||||
<Confirm as |c|>
|
|
||||||
<c.Message
|
|
||||||
@id={{item.id}}
|
|
||||||
@triggerText="Delete"
|
|
||||||
@message="This will permanently delete this secret and all its versions."
|
|
||||||
@onConfirm={{action "delete" item "secret"}}
|
|
||||||
/>
|
|
||||||
</Confirm>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of Confirm](https://github.com/hashicorp/vault/search?l=Handlebars&q=Confirm+OR+confirm)
|
|
||||||
- [Confirm Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/confirm.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './confirm.md';
|
|
||||||
import { withKnobs, text } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
storiesOf('Confirm/Confirm', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(
|
|
||||||
withKnobs({
|
|
||||||
escapeHTML: false,
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`Confirm`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Confirm</h5>
|
|
||||||
<div class="popup-menu-content">
|
|
||||||
<div class="box">
|
|
||||||
<Confirm as |c|>
|
|
||||||
<c.Message
|
|
||||||
@id={{id}}
|
|
||||||
@title={{title}}
|
|
||||||
@triggerText={{triggerText}}
|
|
||||||
@message={{message}}
|
|
||||||
@confirmButtonText={{confirmButtonText}}
|
|
||||||
@cancelButtonText={{cancelButtonText}}
|
|
||||||
@onConfirm={{onConfirm}}
|
|
||||||
/>
|
|
||||||
</Confirm>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
id: 'foo',
|
|
||||||
onConfirm: () => {
|
|
||||||
alert('Confirmed!');
|
|
||||||
},
|
|
||||||
title: text('title', 'Delete this?'),
|
|
||||||
message: text('message', 'You will not be able to recover it later.'),
|
|
||||||
confirmButtonText: text('confirmButtonText', 'Delete'),
|
|
||||||
cancelButtonText: text('cancelButtonText', 'Cancel'),
|
|
||||||
triggerText: text('triggerText', 'Delete'),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/doc-link.js. To make changes, first edit that file and run "yarn gen-story-md doc-link" to re-generate the content.-->
|
|
||||||
|
|
||||||
## DocLink
|
|
||||||
`DocLink` components are used to render anchor links to relevant Vault documentation.
|
|
||||||
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| path | <code>String</code> | <code>"/"</code> | The path to documentation on vaultproject.io that the component should link to. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<DocLink @path="/docs/secrets/kv/kv-v2.html">Learn about KV v2</DocLink>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of DocLink](https://github.com/hashicorp/vault/search?l=Handlebars&q=DocLink)
|
|
||||||
- [DocLink Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/doc-link.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './doc-link.md';
|
|
||||||
|
|
||||||
storiesOf('DocLink', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.add(
|
|
||||||
`DocLink`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Doc Link</h5>
|
|
||||||
<DocLink @path="/docs/secrets/kv/kv-v2.html">Learn about KV v2</DocLink>
|
|
||||||
`,
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/empty-state.js. To make changes, first edit that file and run "yarn gen-story-md empty-state" to re-generate the content.-->
|
|
||||||
|
|
||||||
## EmptyState
|
|
||||||
`EmptyState` components are used to render a helpful message and any necessary content when a user
|
|
||||||
encounters a state that would usually be blank.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| title | <code>String</code> | <code></code> | A short label for the empty state |
|
|
||||||
| message | <code>String</code> | <code></code> | A description of why a user might be seeing the empty state and possibly instructions for actions they may take. |
|
|
||||||
| [icon] | <code>String</code> | <code>''</code> | A optional param to display icon to the right of the title |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<EmptyState @title="You don't have an secrets yet" @message="An explanation of why you don't have any secrets but also you maybe want to create one." />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of EmptyState](https://github.com/hashicorp/vault/search?l=Handlebars&q=EmptyState+OR+empty-state)
|
|
||||||
- [EmptyState Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/empty-state.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, text } from '@storybook/addon-knobs';
|
|
||||||
import notes from './empty-state.md';
|
|
||||||
|
|
||||||
storiesOf('EmptyState', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs({ escapeHTML: false }))
|
|
||||||
.add(
|
|
||||||
`EmptyState`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Empty State</h5>
|
|
||||||
<EmptyState @title={{title}} @message={{message}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
title: text('Title', "You don't have an secrets yet"),
|
|
||||||
message: text(
|
|
||||||
'Message',
|
|
||||||
"An explanation of why you don't have any secrets but also you maybe want to create one."
|
|
||||||
),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`EmptyState with content block`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Empty State</h5>
|
|
||||||
<EmptyState @title={{title}} @message={{message}}>
|
|
||||||
<DocLink @path="/docs/secrets/kv/kv-v2.html">Learn about KV v2</DocLink>
|
|
||||||
</EmptyState>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
title: text('Title', "You don't have an secrets yet"),
|
|
||||||
message: text(
|
|
||||||
'Message',
|
|
||||||
"An explanation of why you don't have any secrets but also you maybe want to create one."
|
|
||||||
),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/form-field-groups.js. To make changes, first edit that file and run "yarn gen-story-md form-field-groups" to re-generate the content.-->
|
|
||||||
|
|
||||||
## onKeyUpCallback : <code>function</code>
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Description |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| model- | <code>Model</code> | Model to be passed down to form-field component. If `fieldGroups` is present on the model then it will be iterated over and groups of `FormField` components will be rendered. |
|
|
||||||
| [renderGroup] | <code>string</code> | An allow list of groups to include in the render. |
|
|
||||||
| [onChange] | <code>onChangeCallback</code> | Handler that will get set on the `FormField` component. |
|
|
||||||
| [onKeyUp] | [<code>onKeyUpCallback</code>](#onKeyUpCallback) | Handler that will set the value and trigger validation on input changes |
|
|
||||||
| [modelValidations] | <code>ModelValidations</code> | Object containing validation message for each property |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
{{if model.fieldGroups}}
|
|
||||||
<FormFieldGroups @model={{model}} />
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
<FormFieldGroups
|
|
||||||
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of FormFieldGroups](https://github.com/hashicorp/vault/search?l=Handlebars&q=FormFieldGroups+OR+form-field-groups)
|
|
||||||
- [FormFieldGroups Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/form-field-groups.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, select } from '@storybook/addon-knobs';
|
|
||||||
import notes from './form-field-groups.md';
|
|
||||||
import { getOwner } from '@ember/application';
|
|
||||||
|
|
||||||
// This will need to be replaced with a fake model, since the form fields associated with
|
|
||||||
// each model come from OpenApi and Storybook doesn't have a Vault server to call OpenApi from.
|
|
||||||
// Without OpenApi, not all of the models' form fields will show up in the Storybook UI.
|
|
||||||
const MODELS = {
|
|
||||||
Approle: 'approle',
|
|
||||||
AWS: 'aws/client',
|
|
||||||
Azure: 'azure',
|
|
||||||
Cert: 'cert',
|
|
||||||
GCP: 'gcp',
|
|
||||||
Github: 'github',
|
|
||||||
JWT: 'jwt',
|
|
||||||
Kubernetes: 'kubernetes',
|
|
||||||
LDAP: 'ldap',
|
|
||||||
OKTA: 'okta',
|
|
||||||
Radius: 'radius',
|
|
||||||
Userpass: 'userpass',
|
|
||||||
};
|
|
||||||
|
|
||||||
const DEFAULT_VALUE = 'aws/client';
|
|
||||||
|
|
||||||
storiesOf('Forms/FormFieldGroups', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`FormFieldGroups`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Form Field Groups</h5>
|
|
||||||
<FormFieldGroups @model={{compute (action 'getModel' model)}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
actions: {
|
|
||||||
getModel(modelType) {
|
|
||||||
return getOwner(this).lookup('service:store').createRecord(`auth-config/${modelType}`);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
model: select('model', MODELS, DEFAULT_VALUE),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/form-field.js. To make changes, first edit that file and run "yarn gen-story-md form-field" to re-generate the content.-->
|
|
||||||
|
|
||||||
## onKeyUpCallback : <code>function</code>
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| attr | <code>Object</code> | | usually derived from ember model `attributes` lookup, and all members of `attr.options` are optional |
|
|
||||||
| model | <code>Model</code> | | Ember Data model that `attr` is defined on |
|
|
||||||
| [disabled] | <code>boolean</code> | <code>false</code> | whether the field is disabled |
|
|
||||||
| [showHelpText] | <code>boolean</code> | <code>true</code> | whether to show the tooltip with help text from OpenAPI |
|
|
||||||
| [subText] | <code>string</code> | | text to be displayed below the label |
|
|
||||||
| [mode] | <code>string</code> | | used when editType is 'kv' |
|
|
||||||
| [modelValidations] | <code>ModelValidations</code> | | Object of errors. If attr.name is in object and has error message display in AlertInline. |
|
|
||||||
| [onChange] | <code>onChangeCallback</code> | | called whenever a value on the model changes via the component |
|
|
||||||
| [onKeyUp] | [<code>onKeyUpCallback</code>](#onKeyUpCallback) | | function passed through into MaskedInput to handle validation. It is also handled for certain form-field types here in the action handleKeyUp. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
{{#each @model.fields as |attr|}}
|
|
||||||
<FormField data-test-field @attr={{attr}} @model={{this.model}} />
|
|
||||||
{{/each}}
|
|
||||||
```
|
|
||||||
example attr object:
|
|
||||||
attr = {
|
|
||||||
name: "foo", // name of attribute -- used to populate various fields and pull value from model
|
|
||||||
options: {
|
|
||||||
label: "Foo", // custom label to be shown, otherwise attr.name will be displayed
|
|
||||||
defaultValue: "", // default value to display if model value is not present
|
|
||||||
fieldValue: "bar", // used for value lookup on model over attr.name
|
|
||||||
editType: "ttl", type of field to use -- example boolean, searchSelect, etc.
|
|
||||||
helpText: "This will be in a tooltip",
|
|
||||||
readOnly: true
|
|
||||||
},
|
|
||||||
type: "boolean" // type of attribute value -- string, boolean, etc.
|
|
||||||
}
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of FormField](https://github.com/hashicorp/vault/search?l=Handlebars&q=FormField+OR+form-field)
|
|
||||||
- [FormField Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/form-field.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,140 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './form-field.md';
|
|
||||||
import EmberObject from '@ember/object';
|
|
||||||
|
|
||||||
const createAttr = (name, type, options) => {
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
type,
|
|
||||||
options,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
storiesOf('Forms/FormField', module)
|
|
||||||
.add(
|
|
||||||
`FormField|string`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">String Form Field</h5>
|
|
||||||
<FormField @attr={{attr}} @model={{model}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
attr: createAttr('foo', 'string', { defaultValue: 'default' }),
|
|
||||||
model: EmberObject.create({}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`FormField|boolean`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Boolean Form Field</h5>
|
|
||||||
<FormField @attr={{attr}} @model={{model}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
attr: createAttr('foo', 'boolean', { defaultValue: false }),
|
|
||||||
model: EmberObject.create({}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`FormField|number`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Number Form Field</h5>
|
|
||||||
<FormField @attr={{attr}} @model={{model}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
attr: createAttr('foo', 'number', { defaultValue: 5 }),
|
|
||||||
model: EmberObject.create({}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`FormField|object`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Object Form Field</h5>
|
|
||||||
<FormField @attr={{attr}} @model={{model}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
attr: createAttr('foo', 'object'),
|
|
||||||
model: EmberObject.create({}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`FormField|textarea`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Textarea Form Field</h5>
|
|
||||||
<FormField @attr={{attr}} @model={{model}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
attr: createAttr('foo', 'string', { defaultValue: 'goodbye', editType: 'textarea' }),
|
|
||||||
model: EmberObject.create({}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`FormField|file`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">File Form Field</h5>
|
|
||||||
<FormField @attr={{attr}} @model={{model}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
attr: createAttr('foo', 'string', { editType: 'file' }),
|
|
||||||
model: EmberObject.create({}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`FormField|ttl`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">ttl Form Field</h5>
|
|
||||||
<FormField @attr={{attr}} @model={{model}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
attr: createAttr('foo', null, { editType: 'ttl' }),
|
|
||||||
model: EmberObject.create({}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`FormField|stringArray`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">String Array Form Field</h5>
|
|
||||||
<FormField @attr={{attr}} @model={{model}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
attr: createAttr('foo', 'string', { editType: 'stringArray' }),
|
|
||||||
model: EmberObject.create({}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`FormField|sensitive`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Sensitive Form Field</h5>
|
|
||||||
<FormField @attr={{attr}} @model={{model}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
attr: createAttr('password', 'string', { sensitive: true }),
|
|
||||||
model: EmberObject.create({}),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/form-save-buttons.js. To make changes, first edit that file and run "yarn gen-story-md form-save-buttons" to re-generate the content.-->
|
|
||||||
|
|
||||||
## FormSaveButtons
|
|
||||||
`FormSaveButtons` displays a button save and a cancel button at the bottom of a form.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| [saveButtonText] | <code>String</code> | <code>"Save"</code> | The text that will be rendered on the Save button. |
|
|
||||||
| [isSaving] | <code>Boolean</code> | <code>false</code> | If the form is saving, this should be true. This will disable the save button and render a spinner on it; |
|
|
||||||
| [cancelLinkParams] | <code>Array</code> | <code>[]</code> | An array of arguments used to construct a link to navigate back to when the Cancel button is clicked. |
|
|
||||||
| [onCancel] | <code>Function</code> | <code></code> | If the form should call an action on cancel instead of route somewhere, the function can be passed using onCancel instead of passing an array to cancelLinkParams. |
|
|
||||||
| [includeBox] | <code>Boolean</code> | <code>true</code> | By default we include padding around the form with underlines. Passing this value as false will remove that padding. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<FormSaveButtons @saveButtonText="Save" @isSaving={{isSaving}} @cancelLinkParams={{array
|
|
||||||
"foo.route"}} />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of FormSaveButtons](https://github.com/hashicorp/vault/search?l=Handlebars&q=FormSaveButtons+OR+form-save-buttons)
|
|
||||||
- [FormSaveButtons Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/form-save-buttons.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
|
||||||
import notes from './form-save-buttons.md';
|
|
||||||
|
|
||||||
storiesOf('Forms/FormSaveButtons', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(
|
|
||||||
withKnobs({
|
|
||||||
escapeHTML: false,
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`FormSaveButtons`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Form save buttons</h5>
|
|
||||||
<FormSaveButtons
|
|
||||||
@isSaving={{this.save}}
|
|
||||||
@saveButtonText={{this.saveButtonText}}
|
|
||||||
@cancelButtonText={{this.cancelButtonText}}
|
|
||||||
@includeBox={{this.includeBox}}
|
|
||||||
@onCancel={{this.onCancel}}
|
|
||||||
/>
|
|
||||||
`,
|
|
||||||
|
|
||||||
context: {
|
|
||||||
save: boolean('saving?', false),
|
|
||||||
includeBox: boolean('include box?', true),
|
|
||||||
saveButtonText: text('save button text', 'Save'),
|
|
||||||
cancelButtonText: text('cancel button text', 'Cancel'),
|
|
||||||
onCancel: () => {
|
|
||||||
console.log('Canceled!');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/icon.js. To make changes, first edit that file and run "yarn gen-story-md icon" to re-generate the content.-->
|
|
||||||
|
|
||||||
## Icon
|
|
||||||
`Icon` components are glyphs used to indicate important information.
|
|
||||||
|
|
||||||
Flight icon documentation at https://flight-hashicorp.vercel.app/
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| name | <code>string</code> | <code>null</code> | The name of the SVG to render inline. |
|
|
||||||
| [size] | <code>string</code> | <code>16</code> | size for flight icon, can be 16 or 24 |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<Icon @name="cancel-square-outline" @size="24" />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of Icon](https://github.com/hashicorp/vault/search?l=Handlebars&q=Icon+OR+icon)
|
|
||||||
- [Icon Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/icon.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './icon.md';
|
|
||||||
import icons from '../../../node_modules/@hashicorp/structure-icons/dist/index.js';
|
|
||||||
import { withKnobs, select } from '@storybook/addon-knobs';
|
|
||||||
import { structureIconMap, localIconMap } from '../icon-mappings';
|
|
||||||
|
|
||||||
storiesOf('Icon', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
'Icon',
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">HashiCorp Flight Icons</h5>
|
|
||||||
<a href="https://flight-hashicorp.vercel.app/">https://flight-hashicorp.vercel.app/</a>
|
|
||||||
|
|
||||||
<h5 class="title is-5 has-top-margin-l">
|
|
||||||
HashiCorp Structure Icons with Flight Mappings
|
|
||||||
</h5>
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Structure Icon Name</th>
|
|
||||||
<th>Structure Glyph</th>
|
|
||||||
<th>Flight Icon Name</th>
|
|
||||||
<th>Flight Glyph></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{{#each types as |type|}}
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
{{type}}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Icon @name={{type}} @size={{size}} />
|
|
||||||
</td>
|
|
||||||
{{#let (get structureIconMap type) as |flightIcon|}}
|
|
||||||
<td>
|
|
||||||
{{#if flightIcon}}
|
|
||||||
{{flightIcon}}
|
|
||||||
{{else}}
|
|
||||||
—
|
|
||||||
{{/if}}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{#if flightIcon}}
|
|
||||||
<Icon @name={{flightIcon}} @size={{size}} />
|
|
||||||
{{else}}
|
|
||||||
—
|
|
||||||
{{/if}}
|
|
||||||
</td>
|
|
||||||
{{/let}}
|
|
||||||
</tr>
|
|
||||||
{{/each}}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h5 class="title is-5 has-top-margin-l">
|
|
||||||
Local Icons with Flight Mappings
|
|
||||||
</h5>
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Local Icon Name</th>
|
|
||||||
<th>Glyph</th>
|
|
||||||
<th>Flight Icon Name</th>
|
|
||||||
<th>Flight Glyph</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{{#each-in localIconMap as |localIcon flightIcon|}}
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
{{localIcon}}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Icon @name={{localIcon}} @size={{size}} />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{#if flightIcon}}
|
|
||||||
{{flightIcon}}
|
|
||||||
{{else}}
|
|
||||||
—
|
|
||||||
{{/if}}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{#if flightIcon}}
|
|
||||||
<Icon @name={{flightIcon}} @size={{size}} />
|
|
||||||
{{else}}
|
|
||||||
—
|
|
||||||
{{/if}}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{{/each-in}}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
types: icons,
|
|
||||||
structureIconMap,
|
|
||||||
localIconMap,
|
|
||||||
size: select('Size', ['16', '24'], '16'),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/info-table-row.js. To make changes, first edit that file and run "yarn gen-story-md info-table-row" to re-generate the content.-->
|
|
||||||
|
|
||||||
## InfoTableRow
|
|
||||||
`InfoTableRow` displays a label and a value in a table-row style manner. The component is responsive so
|
|
||||||
that the value breaks under the label on smaller viewports.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| value | <code>any</code> | <code></code> | The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false. |
|
|
||||||
| label | <code>string</code> | <code>null</code> | The display name for the value. |
|
|
||||||
| helperText | <code>string</code> | <code>null</code> | Text to describe the value displayed beneath the label. |
|
|
||||||
| alwaysRender | <code>Boolean</code> | <code>false</code> | Indicates if the component content should be always be rendered. When false, the value of `value` will be used to determine if the component should render. |
|
|
||||||
| [type] | <code>string</code> | <code>"array"</code> | The type of value being passed in. This is used for when you want to trim an array. For example, if you have an array value that can equal length 15+ this will trim to show 5 and count how many more are there |
|
|
||||||
| [isLink] | <code>Boolean</code> | <code>true</code> | Passed through to InfoTableItemArray. Indicates if the item should contain a link-to component. Only setup for arrays, but this could be changed if needed. |
|
|
||||||
| [modelType] | <code>string</code> | <code>null</code> | Passed through to InfoTableItemArray. Tells what model you want data for the allOptions to be returned from. Used in conjunction with the the isLink. |
|
|
||||||
| [queryParam] | <code>String</code> | | Passed through to InfoTableItemArray. If you want to specific a tab for the View All XX to display to. Ex: role |
|
|
||||||
| [backend] | <code>String</code> | | Passed through to InfoTableItemArray. To specify secrets backend to point link to Ex: transformation |
|
|
||||||
| [viewAll] | <code>String</code> | | Passed through to InfoTableItemArray. Specify the word at the end of the link View all. |
|
|
||||||
| [tooltipText] | <code>String</code> | | Text if a tooltip should display over the value. |
|
|
||||||
| [isTooltipCopyable] | <code>Boolean</code> | | Allows tooltip click to copy |
|
|
||||||
| [defaultShown] | <code>String</code> | | Text that renders as value if alwaysRender=true. Eg. "Vault default" |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<InfoTableRow @value={{5}} @label="TTL" @helperText="Some description"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of InfoTableRow](https://github.com/hashicorp/vault/search?l=Handlebars&q=InfoTableRow+OR+info-table-row)
|
|
||||||
- [InfoTableRow Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/info-table-row.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, boolean, text } from '@storybook/addon-knobs';
|
|
||||||
import notes from './info-table-row.md';
|
|
||||||
|
|
||||||
storiesOf('InfoTable/InfoTableRow', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs({ escapeHTML: false }))
|
|
||||||
.add(
|
|
||||||
`InfoTableRow with text value`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Info Table Row</h5>
|
|
||||||
<InfoTableRow
|
|
||||||
@value={{value}}
|
|
||||||
@label={{label}}
|
|
||||||
@helperText={{helperText}}
|
|
||||||
@alwaysRender={{alwaysRender}}
|
|
||||||
@defaultShown={{defaultShown}}
|
|
||||||
@tooltipText={{tooltipText}}
|
|
||||||
@isTooltipCopyable={{isTooltipCopyable}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
label: text('Label', 'TTL'),
|
|
||||||
value: text('Value', '30m (hover to see the tooltip!)'),
|
|
||||||
helperText: text('helperText', 'This is helperText - for a short description'),
|
|
||||||
alwaysRender: boolean('Always render?', false),
|
|
||||||
defaultShown: text('Default value', 'Some default value'),
|
|
||||||
tooltipText: text('tooltipText', 'This is tooltipText'),
|
|
||||||
isTooltipCopyable: boolean('Allow tooltip to be copied', true),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`InfoTableRow with boolean value`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Info Table Row</h5>
|
|
||||||
<InfoTableRow
|
|
||||||
@value={{value}}
|
|
||||||
@label={{label}}
|
|
||||||
@helperText={{helperText}}
|
|
||||||
@alwaysRender={{alwaysRender}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
label: 'Local mount?',
|
|
||||||
value: boolean('Value', true),
|
|
||||||
helperText: text('helperText', 'This is helperText - for a short description'),
|
|
||||||
alwaysRender: boolean('Always render?', true),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/info-table.js. To make changes, first edit that file and run "yarn gen-story-md info-table" to re-generate the content.-->
|
|
||||||
|
|
||||||
## InfoTable
|
|
||||||
InfoTable components are a table with a single column and header. They are used to render a list of InfoTableRow components.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| [title] | <code>String</code> | <code>Info Table</code> | The title of the table. Used for accessibility purposes. |
|
|
||||||
| header | <code>String</code> | <code></code> | The column header. |
|
|
||||||
| items | <code>Array</code> | <code></code> | An array of strings which will be used as the InfoTableRow value. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<InfoTable
|
|
||||||
@title="Known Primary Cluster Addrs"
|
|
||||||
@header="cluster_addr"
|
|
||||||
@items={{knownPrimaryClusterAddrs}}
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of InfoTable](https://github.com/hashicorp/vault/search?l=Handlebars&q=InfoTable+OR+info-table)
|
|
||||||
- [InfoTable Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/info-table.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, object, text } from '@storybook/addon-knobs';
|
|
||||||
import notes from './info-table.md';
|
|
||||||
|
|
||||||
const ITEMS = ['https://127.0.0.1:8201', 'hello', 3];
|
|
||||||
|
|
||||||
storiesOf('InfoTable/InfoTable', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs({ escapeHTML: false }))
|
|
||||||
.add(
|
|
||||||
`InfoTable`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Info Table</h5>
|
|
||||||
<InfoTable
|
|
||||||
@header={{header}}
|
|
||||||
@items={{items}}
|
|
||||||
/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
header: text('Header', 'Column Header'),
|
|
||||||
items: object('Items', ITEMS),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/layout-loading.js. To make changes, first edit that file and run "yarn gen-story-md layout-loading" to re-generate the content.-->
|
|
||||||
|
|
||||||
## LayoutLoading
|
|
||||||
`LayoutLoading` displays the `VaultLogoSpinner` component in a centered full-page layout.
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<LayoutLoading />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of LayoutLoading](https://github.com/hashicorp/vault/search?l=Handlebars&q=LayoutLoading)
|
|
||||||
- [LayoutLoading Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/layout-loading.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './layout-loading.md';
|
|
||||||
|
|
||||||
storiesOf('LayoutLoading', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.add(
|
|
||||||
`LayoutLoading`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Layout Loading</h5>
|
|
||||||
<LayoutLoading/>
|
|
||||||
`,
|
|
||||||
context: {},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/linkable-item.js. To make changes, first edit that file and run "yarn gen-story-md linkable-item" to re-generate the content.-->
|
|
||||||
|
|
||||||
## LinkableItem
|
|
||||||
LinkableItem components have two contextual components, a Content component used to show information on the left with a Menu component on the right, all aligned vertically centered. If passed a link, the block will be clickable.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| [link] | <code>object</code> | <code></code> | Link should have route and model |
|
|
||||||
| [disabled] | <code>boolean</code> | <code>false</code> | If no link then should be given a disabled attribute equal to true |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<LinkableItem @link={{hash route='vault.backends' model='my-backend-path'}} data-test-row="my-backend-path">
|
|
||||||
// Use <LinkableItem.content> and <LinkableItem.menu> here
|
|
||||||
</LinkableItem>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of LinkableItem](https://github.com/hashicorp/vault/search?l=Handlebars&q=LinkableItem+OR+linkable-item)
|
|
||||||
- [LinkableItem Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/linkable-item.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { text, withKnobs, boolean } from '@storybook/addon-knobs';
|
|
||||||
import notes from './linkable-item.md';
|
|
||||||
|
|
||||||
storiesOf('LinkableItem', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`LinkableItem with attributes`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Linkable Item</h5>
|
|
||||||
<LinkableItem @disabled={{disabled}} @link={{hash route="vault" model="myModel"}} as |Li|>
|
|
||||||
<Li.content @accessor={{accessor}} @link={{hash route="vault" model="myModel"}} @title={{title}} @description={{description}} />
|
|
||||||
<Li.menu>{{menu}}</Li.menu>
|
|
||||||
</LinkableItem>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
disabled: boolean('disabled', false),
|
|
||||||
title: text('title', 'My Title'),
|
|
||||||
accessor: text('accessor', 'v2 secret'),
|
|
||||||
description: text(
|
|
||||||
'description',
|
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat vulputate lacus sit amet lobortis. Nulla fermentum porta consequat. Mauris porttitor libero nibh, ac facilisis ex molestie non. Nulla dolor est, pharetra et maximus vel, varius eu augue. Maecenas eget nisl convallis, vehicula massa quis, pharetra justo. Praesent porttitor arcu at gravida dignissim. Vestibulum condimentum, risus a fermentum pulvinar, enim massa venenatis velit, a venenatis leo sem eget dolor. Morbi convallis dui sit amet egestas commodo. Nulla et ultricies leo.'
|
|
||||||
),
|
|
||||||
menu: text('menu component', 'menu button goes here'),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`LinkableItem with blocks`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Linkable Item with block content</h5>
|
|
||||||
<LinkableItem @disabled={{disabled}} @title={{title}} @link={{hash route="vault" model="myModel"}} as |Li|>
|
|
||||||
<Li.content @accessor={{accessor}} @description={{description}} />
|
|
||||||
<Li.menu>{{menu}}</Li.menu>
|
|
||||||
</LinkableItem>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
disabled: boolean('disabled', false),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/list-view.js. To make changes, first edit that file and run "yarn gen-story-md list-view" to re-generate the content.-->
|
|
||||||
|
|
||||||
## ListView
|
|
||||||
`ListView` components are used in conjunction with `ListItem` for rendering a list.
|
|
||||||
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| items | <code>Array</code> | <code></code> | An array of items to render as a list |
|
|
||||||
| [itemNoun] | <code>String</code> | <code></code> | A noun to use in the empty state of message and title. |
|
|
||||||
| [message] | <code>String</code> | <code></code> | The message to display within the banner. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<ListView @items={{model}} @itemNoun="role" @paginationRouteName="scope.roles" as |list|>
|
|
||||||
{{#if list.empty}}
|
|
||||||
<list.empty @title="No roles here" />
|
|
||||||
{{else}}
|
|
||||||
<div>
|
|
||||||
{{list.item.id}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
</ListView>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of ListView](https://github.com/hashicorp/vault/search?l=Handlebars&q=ListView+OR+list-view)
|
|
||||||
- [ListView Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/list-view.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, select } from '@storybook/addon-knobs';
|
|
||||||
import notes from './list-view.md';
|
|
||||||
|
|
||||||
import ArrayProxy from '@ember/array/proxy';
|
|
||||||
|
|
||||||
let filtered = ArrayProxy.create({ content: [] });
|
|
||||||
filtered.set('meta', {
|
|
||||||
lastPage: 1,
|
|
||||||
currentPage: 1,
|
|
||||||
total: 100,
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO: add a pagination option when we have a better way to fake Ember models in Storybook.
|
|
||||||
let options = {
|
|
||||||
list: [{ id: 'one' }, { id: 'two' }],
|
|
||||||
empty: [],
|
|
||||||
filtered,
|
|
||||||
};
|
|
||||||
|
|
||||||
storiesOf('ListView', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`ListView`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">{{title}}</h5>
|
|
||||||
<ListView @items={{items}} @itemNoun={{or noun "role"}} @paginationRouteName="vault" as |list|>
|
|
||||||
{{#if list.empty}}
|
|
||||||
<list.empty @title="No roles here" />
|
|
||||||
{{else if list.item}}
|
|
||||||
<div class="box is-marginless">
|
|
||||||
{{list.item.id}}
|
|
||||||
</div>
|
|
||||||
{{else}}
|
|
||||||
<div class="box">There aren't any items in this filter</div>
|
|
||||||
{{/if}}
|
|
||||||
</ListView>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
title: 'ListView',
|
|
||||||
items: select('items', options, options['list']),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/masked-input.js. To make changes, first edit that file and run "yarn gen-story-md masked-input" to re-generate the content.-->
|
|
||||||
|
|
||||||
## MaskedInput
|
|
||||||
`MaskedInput` components are textarea inputs where the input is hidden. They are used to enter sensitive information like passwords.
|
|
||||||
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| [value] | <code>String</code> | | The value to display in the input. |
|
|
||||||
| [placeholder] | <code>String</code> | <code>value</code> | The placeholder to display before the user has entered any input. |
|
|
||||||
| [allowCopy] | <code>bool</code> | <code></code> | Whether or not the input should render with a copy button. |
|
|
||||||
| [displayOnly] | <code>bool</code> | <code>false</code> | Whether or not to display the value as a display only `pre` element or as an input. |
|
|
||||||
| [onChange] | <code>function</code> \| <code>action</code> | <code>Function.prototype</code> | A function to call when the value of the input changes. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<MaskedInput
|
|
||||||
@value={{attr.options.defaultValue}}
|
|
||||||
@placeholder="secret"
|
|
||||||
@allowCopy={{true}}
|
|
||||||
@onChange={{action "someAction"}}
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of MaskedInput](https://github.com/hashicorp/vault/search?l=Handlebars&q=MaskedInput)
|
|
||||||
- [MaskedInput Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/masked-input.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
|
||||||
import notes from './masked-input.md';
|
|
||||||
|
|
||||||
storiesOf('MaskedInput', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`MaskedInput`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Masked Input</h5>
|
|
||||||
<MaskedInput
|
|
||||||
@value={{value}}
|
|
||||||
@placeholder={{placeholder}}
|
|
||||||
@allowCopy={{allowCopy}}
|
|
||||||
@displayOnly={{displayOnly}}
|
|
||||||
/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
value: text('value', ''),
|
|
||||||
placeholder: text('placeholder', 'super-secret'),
|
|
||||||
allowCopy: boolean('allowCopy', false),
|
|
||||||
displayOnly: boolean('displayOnly', false),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/message-error.js. To make changes, first edit that file and run "yarn gen-story-md message-error" to re-generate the content.-->
|
|
||||||
|
|
||||||
## MessageError
|
|
||||||
`MessageError` extracts an error from a model or a passed error and displays it using the `AlertBanner` component.
|
|
||||||
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| model | <code>DS.Model</code> | <code></code> | An Ember data model that will be used to bind error statest to the internal `errors` property. |
|
|
||||||
| errors | <code>Array</code> | <code></code> | An array of error strings to show. |
|
|
||||||
| errorMessage | <code>String</code> | <code></code> | An Error string to display. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<MessageError @model={{model}} />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of MessageError](https://github.com/hashicorp/vault/search?l=Handlebars&q=MessageError)
|
|
||||||
- [MessageError Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/message-error.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './message-error.md';
|
|
||||||
import EmberObject from '@ember/object';
|
|
||||||
|
|
||||||
let model = EmberObject.create({
|
|
||||||
adapterError: {
|
|
||||||
message: 'This is an adapterError on the model',
|
|
||||||
},
|
|
||||||
isError: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
storiesOf('MessageError', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.add(
|
|
||||||
`MessageError`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Message Error</h5>
|
|
||||||
<MessageError @model={{model}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
model,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/confirm.js. To make changes, first edit that file and run "yarn gen-story-md confirm" to re-generate the content.-->
|
|
||||||
|
|
||||||
## Message
|
|
||||||
`Message` components trigger and display a confirmation message. They should only be used within a `Confirm` component.
|
|
||||||
|
|
||||||
**Properties**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| id | <code>ID</code> | <code></code> | A unique identifier used to bind a trigger to a confirmation message. |
|
|
||||||
| onConfirm | <code>Func</code> | <code></code> | The action to take when the user clicks the confirm button. |
|
|
||||||
| [triggerText] | <code>String</code> |<code>'Delete'</code> | The text on the trigger button. |
|
|
||||||
| [title] | <code>String</code> | <code>'Delete this?'</code> | The header text to display in the confirmation message. |
|
|
||||||
| [message] | <code>String</code> | <code>'You will not be able to recover it later.'</code> | The message to display above the confirm and cancel buttons. |
|
|
||||||
| [confirmButtonText] | <code>String</code> | <code>'Delete'</code> | The text to display on the confirm button. |
|
|
||||||
| [cancelButtonText] | <code>String</code> | <code>'Cancel'</code> | The text to display on the cancel button. |
|
|
||||||
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<div class="box">
|
|
||||||
<Confirm as |c|>
|
|
||||||
<c.Message
|
|
||||||
@id={{item.id}}
|
|
||||||
@triggerText="Delete"
|
|
||||||
@message="This will permanently delete this secret and all its versions."
|
|
||||||
@onConfirm={{action "delete" item "secret"}}
|
|
||||||
/>
|
|
||||||
</Confirm>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of Confirm](https://github.com/hashicorp/vault/search?l=Handlebars&q=Confirm+OR+confirm)
|
|
||||||
- [Confirm Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/confirm.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './message.md';
|
|
||||||
|
|
||||||
storiesOf('Confirm/Message', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.add(
|
|
||||||
`Message`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Message</h5>
|
|
||||||
<p>
|
|
||||||
<code>Message</code> components should never render on their own. See the <code>Confirm</code> component for an example of what a <code>Message</code> looks like.
|
|
||||||
</p>
|
|
||||||
`,
|
|
||||||
context: {},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/popup-menu.js. To make changes, first edit that file and run "yarn gen-story-md popup-menu" to re-generate the content.-->
|
|
||||||
|
|
||||||
## PopupMenu
|
|
||||||
`PopupMenu` displays a button that when pressed will toggle open a menu that is yielded in the content
|
|
||||||
block.
|
|
||||||
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| contentClass | <code>String</code> | <code>''</code> | A class that will be applied to the yielded content of the popup. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<PopupMenu><nav class="menu"> <ul class="menu-list"> <li class="action"> <button type="button">A menu!</button> </li> </ul> </nav></PopupMenu>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of PopupMenu](https://github.com/hashicorp/vault/search?l=Handlebars&q=PopupMenu)
|
|
||||||
- [PopupMenu Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/popup-menu.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './popup-menu.md';
|
|
||||||
|
|
||||||
storiesOf('PopupMenu', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.add(
|
|
||||||
`PopupMenu`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Popup Menu</h5>
|
|
||||||
<PopupMenu>
|
|
||||||
<nav class="menu">
|
|
||||||
<ul class="menu-list">
|
|
||||||
<li class="action">
|
|
||||||
<button type="button" class="button link">
|
|
||||||
Popup content goes here!
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</PopupMenu>
|
|
||||||
`,
|
|
||||||
context: {},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
storiesOf('ReadMore', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(`ReadMore`, () => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Read More</h5>
|
|
||||||
<h6 class="has-text-grey">NOTE: normally this component has a "See More" button when it truncates text (which is calculated in the .js file). The button is clickable and will expand the height of the outer box (shown here with a black outline).</h6>
|
|
||||||
<div style="width: 500px; border: 1px solid black;">
|
|
||||||
<ReadMore>
|
|
||||||
<strong>Anything can go in here</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat vulputate lacus sit amet lobortis. Nulla fermentum porta consequat. Mauris porttitor libero nibh, ac facilisis ex molestie non. Nulla dolor est, pharetra et maximus vel, varius eu augue. Maecenas eget nisl convallis, vehicula massa quis, pharetra justo.
|
|
||||||
</ReadMore>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
context: {},
|
|
||||||
}));
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/search-select.js. To make changes, first edit that file and run "yarn gen-story-md search-select" to re-generate the content.-->
|
|
||||||
|
|
||||||
## SearchSelect
|
|
||||||
The `SearchSelect` is an implementation of the [ember-power-select](https://github.com/cibernox/ember-power-select) used for form elements where options come dynamically from the API.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| id | <code>string</code> | | The name of the form field |
|
|
||||||
| models | <code>Array</code> | | An array of model types to fetch from the API. |
|
|
||||||
| onChange | <code>function</code> | | The onchange action for this form field. |
|
|
||||||
| inputValue | <code>string</code> \| <code>Array</code> | | A comma-separated string or an array of strings. |
|
|
||||||
| label | <code>string</code> | | Label for this form field |
|
|
||||||
| fallbackComponent | <code>string</code> | | name of component to be rendered if the API call 403s |
|
|
||||||
| [backend] | <code>string</code> | | name of the backend if the query for options needs additional information (eg. secret backend) |
|
|
||||||
| [disallowNewItems] | <code>boolean</code> | <code>false</code> | Controls whether or not the user can add a new item if none found |
|
|
||||||
| [helpText] | <code>string</code> | | Text to be displayed in the info tooltip for this form field |
|
|
||||||
| [selectLimit] | <code>number</code> | | A number that sets the limit to how many select options they can choose |
|
|
||||||
| [subText] | <code>string</code> | | Text to be displayed below the label |
|
|
||||||
| [subLabel] | <code>string</code> | | a smaller label below the main Label |
|
|
||||||
| [wildcardLabel] | <code>string</code> | | when you want the searchSelect component to return a count on the model for options returned when using a wildcard you must provide a label of the count e.g. role. Should be singular. |
|
|
||||||
| options | <code>Array</code> | | *Advanced usage* - `options` can be passed directly from the outside to the power-select component. If doing this, `models` should not also be passed as that will overwrite the passed value. |
|
|
||||||
| search | <code>function</code> | | *Advanced usage* - Customizes how the power-select component searches for matches - see the power-select docs for more information. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<SearchSelect @id="group-policies" @models={{["policies/acl"]}} @onChange={{onChange}} @selectLimit={{2}} @inputValue={{get model valuePath}} @helpText="Policies associated with this group" @label="Policies" @fallbackComponent="string-list" />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of SearchSelect](https://github.com/hashicorp/vault/search?l=Handlebars&q=SearchSelect+OR+search-select)
|
|
||||||
- [SearchSelect Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/search-select.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './search-select.md';
|
|
||||||
import { withKnobs, text } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
const onChange = (value) => alert(`New value is "${value}"`);
|
|
||||||
const models = ['identity/groups'];
|
|
||||||
|
|
||||||
storiesOf('SearchSelect', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs({ escapeHTML: false }))
|
|
||||||
.add(
|
|
||||||
`SearchSelect`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Search Select</h5>
|
|
||||||
<SearchSelect
|
|
||||||
@id="groups"
|
|
||||||
@models={{models}}
|
|
||||||
@onChange={{onChange}}
|
|
||||||
@inputValue={{inputValue}}
|
|
||||||
@label={{label}}
|
|
||||||
@fallbackComponent="string-list"
|
|
||||||
@staticOptions={{staticOptions}}/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
label: text('Label', 'Group IDs'),
|
|
||||||
helpText: text('Help Tooltip Text', 'Group IDs to associate with this entity'),
|
|
||||||
inputValue: [],
|
|
||||||
models: models,
|
|
||||||
onChange: onChange,
|
|
||||||
staticOptions: [
|
|
||||||
{ name: 'my-group', id: '123dsafdsarf' },
|
|
||||||
{ name: 'my-other-group', id: '45ssadd435' },
|
|
||||||
{ name: 'example-1', id: '5678' },
|
|
||||||
{ name: 'group-2', id: 'gro09283' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/select.js. To make changes, first edit that file and run "yarn gen-story-md select" to re-generate the content.-->
|
|
||||||
|
|
||||||
## Select
|
|
||||||
Select components are used to render a dropdown.
|
|
||||||
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| label | <code>String</code> | <code></code> | The label for the select element. |
|
|
||||||
| options | <code>Array</code> | <code></code> | A list of items that the user will select from. This can be an array of strings or objects. |
|
|
||||||
| [name] | <code>String</code> | <code></code> | The name of the select, used for the test selector. |
|
|
||||||
| [selectedValue] | <code>String</code> | <code></code> | The currently selected item. Can also be used to set the default selected item. This should correspond to the `value` of one of the `<option>`s. |
|
|
||||||
| [valueAttribute] | <code>String</code> | <code>value</code> | When `options` is an array objects, the key to check for when assigning the option elements value. |
|
|
||||||
| [labelAttribute] | <code>String</code> | <code>label</code> | When `options` is an array objects, the key to check for when assigning the option elements' inner text. |
|
|
||||||
| [isInline] | <code>Bool</code> | <code>false</code> | Whether or not the select should be displayed as inline-block or block. |
|
|
||||||
| [isFullwidth] | <code>Bool</code> | <code>false</code> | Whether or not the select should take up the full width of the parent element. |
|
|
||||||
| onChange | <code>Func</code> | <code></code> | The action to take once the user has selected an item. This method will be passed the `value` of the select. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<Select
|
|
||||||
@label='Date Range'
|
|
||||||
@options={{[{ value: 'berry', label: 'Berry' }]}}
|
|
||||||
@onChange={{onChange}}/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of Select](https://github.com/hashicorp/vault/search?l=Handlebars&q=Select+OR+select)
|
|
||||||
- [Select Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/select.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, object, text, boolean, select } from '@storybook/addon-knobs';
|
|
||||||
import notes from './select.md';
|
|
||||||
|
|
||||||
const OPTIONS = [
|
|
||||||
{ value: 'mon', label: 'Monday', spanish: 'lunes' },
|
|
||||||
{ value: 'tues', label: 'Tuesday', spanish: 'martes' },
|
|
||||||
{ value: 'weds', label: 'Wednesday', spanish: 'miercoles' },
|
|
||||||
];
|
|
||||||
|
|
||||||
storiesOf('Select', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`Select`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Select</h5>
|
|
||||||
<Select
|
|
||||||
@options={{options}}
|
|
||||||
@label={{label}}
|
|
||||||
@isInline={{isInline}}
|
|
||||||
@isFullwidth={{isFullwidth}}
|
|
||||||
@valueAttribute={{valueAttribute}}
|
|
||||||
@labelAttribute={{labelAttribute}}
|
|
||||||
@selectedValue={{selectedValue}}
|
|
||||||
/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
options: object('options', OPTIONS),
|
|
||||||
label: text('label', 'Day of the week'),
|
|
||||||
isFullwidth: boolean('isFullwidth', false),
|
|
||||||
isInline: boolean('isInline', false),
|
|
||||||
valueAttribute: select('valueAttribute', Object.keys(OPTIONS[0]), 'value'),
|
|
||||||
labelAttribute: select('labelAttribute', Object.keys(OPTIONS[0]), 'label'),
|
|
||||||
selectedValue: select(
|
|
||||||
'selectedValue',
|
|
||||||
OPTIONS.map((o) => o.label),
|
|
||||||
'tues'
|
|
||||||
),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`Select in a Toolbar`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Select</h5>
|
|
||||||
<Toolbar>
|
|
||||||
<Select
|
|
||||||
@options={{options}}
|
|
||||||
@label={{label}}
|
|
||||||
@valueAttribute={{valueAttribute}}
|
|
||||||
@labelAttribute={{labelAttribute}}
|
|
||||||
@isInline={{true}}/>
|
|
||||||
</Toolbar>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
label: text('label', 'Day of the week'),
|
|
||||||
options: object('options', OPTIONS),
|
|
||||||
valueAttribute: select('valueAttribute', Object.keys(OPTIONS[0]), 'value'),
|
|
||||||
labelAttribute: select('labelAttribute', Object.keys(OPTIONS[0]), 'label'),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/stat-text.js. To make changes, first edit that file and run "yarn gen-story-md stat-text" to re-generate the content.-->
|
|
||||||
|
|
||||||
## StatText
|
|
||||||
StatText components are used to display a label and associated value beneath, with the option to include a description.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| label | <code>string</code> | <code>null</code> | The label for the statistic |
|
|
||||||
| value | <code>string</code> | <code>null</code> | Value passed in, usually a number or statistic |
|
|
||||||
| size | <code>string</code> | <code>null</code> | Sizing changes whether or not there is subtext. If there is subtext 's' and 'l' are valid sizes. If no subtext, then 'm' is also acceptable. |
|
|
||||||
| [subText] | <code>string</code> | | SubText is optional and will display below the label |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<StatText @label="Active Clients" @stat="4,198" @size="l" @subText="These are the active client counts"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of StatText](https://github.com/hashicorp/vault/search?l=Handlebars&q=StatText+OR+stat-text)
|
|
||||||
- [StatText Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/stat-text.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { text, withKnobs } from '@storybook/addon-knobs';
|
|
||||||
import notes from './stat-text.md';
|
|
||||||
|
|
||||||
storiesOf('StatText', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`StatText`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">StatText Component</h5>
|
|
||||||
<StatText
|
|
||||||
@label={{label}}
|
|
||||||
@value={{value}}
|
|
||||||
@size={{size}}
|
|
||||||
@subText={{subText}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
label: text('label', 'Active Clients'),
|
|
||||||
value: text('value', '4,198'),
|
|
||||||
size: text('size', 'l'),
|
|
||||||
subText: text('subText', 'These are your active clients'),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/toggle-button.js. To make changes, first edit that file and run "yarn gen-story-md toggle-button" to re-generate the content.-->
|
|
||||||
|
|
||||||
## onClickCallback : <code>function</code>
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| isOpen | <code>boolean</code> | | determines whether to show open or closed label |
|
|
||||||
| onClick | [<code>onClickCallback</code>](#onClickCallback) | | fired when button is clicked |
|
|
||||||
| [openLabel] | <code>string</code> | <code>"\"Hide options\""</code> | The message to display when the toggle is open. |
|
|
||||||
| [closedLabel] | <code>string</code> | <code>"\"More options\""</code> | The message to display when the toggle is closed. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<ToggleButton @isOpen={{this.showOptions}} @openLabel="Encrypt Output with PGP" @closedLabel="Encrypt Output with PGP" @onClick={{fn (mut this.showOptions}} />
|
|
||||||
{{#if showOptions}}
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
I will be toggled!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of ToggleButton](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToggleButton+OR+toggle-button)
|
|
||||||
- [ToggleButton Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/toggle-button.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './toggle-button.md';
|
|
||||||
|
|
||||||
storiesOf('ToggleButton', module)
|
|
||||||
.addParameters({ options: { showPanel: false } })
|
|
||||||
.add(
|
|
||||||
'ToggleButton',
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<ToggleButton
|
|
||||||
@toggleAttr="showOptions"
|
|
||||||
@toggleTarget={{this}}
|
|
||||||
/>
|
|
||||||
`,
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
'ToggleButton with content',
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<ToggleButton
|
|
||||||
@openLabel="Hide me!"
|
|
||||||
@closedLabel="Show me!"
|
|
||||||
@toggleTarget={{this}}
|
|
||||||
@toggleAttr="showOptions"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{{#if showOptions}}
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
I will be toggled!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
`,
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<!--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/main/ui/lib/core/addon/components/toolbar-actions.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs } 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 }
|
|
||||||
);
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<!--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/main/ui/app/components/toolbar-download-button.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
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 }
|
|
||||||
);
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/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`.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<Toolbar>
|
|
||||||
<ToolbarFilters>
|
|
||||||
<div class="control has-icons-left">
|
|
||||||
<input class="filter input" placeholder="Filter keys" type="text">
|
|
||||||
<Icon @name="search" @size="24" 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/main/ui/lib/core/addon/components/toolbar-filters.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs } 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 @name="search" 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 }
|
|
||||||
);
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
<!--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`.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Description |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| params | <code>array</code> | Array to pass to LinkTo |
|
|
||||||
| type | <code>string</code> | Use "add" to change icon |
|
|
||||||
| disabled | <code>boolean</code> | pass true to disable link |
|
|
||||||
| disabledTooltip | <code>string</code> | tooltip to display on hover when disabled |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<Toolbar>
|
|
||||||
<ToolbarActions>
|
|
||||||
<ToolbarLink @params={{array 'vault.cluster.policies.create'}} @type="add" @disabled={{true}} @disabledTooltip="This link is disabled">
|
|
||||||
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/main/ui/lib/core/addon/components/toolbar-link.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, select, text, boolean } 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}}
|
|
||||||
@disabled={{disabled}}
|
|
||||||
@disabledTooltip={{disabledTooltip}}
|
|
||||||
>
|
|
||||||
{{label}}
|
|
||||||
</ToolbarLink>
|
|
||||||
</ToolbarActions>
|
|
||||||
</Toolbar>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
type: select('Type', ['', 'add']),
|
|
||||||
label: text('Button text', 'Edit secret'),
|
|
||||||
disabled: boolean('disabled', false),
|
|
||||||
disabledTooltip: text('Tooltip to display when disabled', ''),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<!--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>""</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/main/ui/app/components/toolbar-secret-link.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
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 }
|
|
||||||
);
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<!--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/main/ui/lib/core/addon/components/toolbar.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
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 @name="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 }
|
|
||||||
);
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/ttl-form.js. To make changes, first edit that file and run "yarn gen-story-md ttl-form" to re-generate the content.-->
|
|
||||||
|
|
||||||
## TtlForm
|
|
||||||
TtlForm components are used to enter a Time To Live (TTL) input.
|
|
||||||
This component does not include a label and is designed to take
|
|
||||||
a time and unit, and pass an object including seconds and
|
|
||||||
timestring when those two values are changed.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| onChange | <code>function</code> | | This function will be called when the user changes the value. An object will be passed in as a parameter with values seconds{number}, timeString{string} |
|
|
||||||
| [time] | <code>number</code> | | Time is the value that will be passed into the value input. Can be null/undefined to start if input is required. |
|
|
||||||
| [unit] | <code>unit</code> | <code>"s"</code> | This is the unit key which will show by default on the form. Can be one of `s` (seconds), `m` (minutes), `h` (hours), `d` (days) |
|
|
||||||
| [recalculationTimeout] | <code>number</code> | <code>5000</code> | This is the time, in milliseconds, that `recalculateSeconds` will be be true after time is updated |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<TtlForm @onChange={action handleChange} @unit={{m}}/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of TtlForm](https://github.com/hashicorp/vault/search?l=Handlebars&q=TtlForm+OR+ttl-form)
|
|
||||||
- [TtlForm Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/ttl-form.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './ttl-form.md';
|
|
||||||
|
|
||||||
storiesOf('TtlForm', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.add(
|
|
||||||
`TtlForm`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Ttl Form</h5>
|
|
||||||
<TtlForm/>
|
|
||||||
`,
|
|
||||||
context: {},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/ttl-picker.js. To make changes, first edit that file and run "yarn gen-story-md ttl-picker" to re-generate the content.-->
|
|
||||||
|
|
||||||
## TtlPicker
|
|
||||||
`TtlPicker` components are used to set the time to live.
|
|
||||||
This version is being deprecated and replaced by `TtlPicker2` which is an automatic-width version that
|
|
||||||
automatically recalculates the time value when unit is updated unless time has been changed recently.
|
|
||||||
Once all instances of TtlPicker are replaced with TtlPicker2, this component will be removed and
|
|
||||||
TtlPicker2 will be renamed to TtlPicker.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| labelClass | <code>String</code> | <code>""</code> | A CSS class to add to the label. |
|
|
||||||
| labelText | <code>String</code> | <code>"TTL"</code> | The text content of the label associated with the widget. |
|
|
||||||
| initialValue | <code>Number</code> | <code></code> | The starting value of the TTL; |
|
|
||||||
| setDefaultValue | <code>Boolean</code> | <code>true</code> | If true, the component will trigger onChange on the initial render, causing a value to be set. |
|
|
||||||
| onChange | <code>function</code> | <code>Function.prototype</code> | The function to call when the value of the ttl changes. |
|
|
||||||
| outputSeconds | <code>Boolean</code> | <code>false</code> | If true, the component will trigger onChange with a value converted to seconds instead of a Golang duration string. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<TtlPicker @labelText="Lease" @initialValue={{lease}} @onChange={{action (mut lease)}} />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of TtlPicker](https://github.com/hashicorp/vault/search?l=Handlebars&q=TtlPicker+OR+ttl-picker)
|
|
||||||
- [TtlPicker Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/ttl-picker.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './ttl-picker.md';
|
|
||||||
|
|
||||||
storiesOf('TTL/TtlPicker', module)
|
|
||||||
.addParameters({ options: { showPanel: false } })
|
|
||||||
.add(
|
|
||||||
`TtlPicker`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Ttl Picker</h5>
|
|
||||||
<TtlPicker />
|
|
||||||
`,
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/ttl-picker2.js. To make changes, first edit that file and run "yarn gen-story-md ttl-picker2" to re-generate the content.-->
|
|
||||||
|
|
||||||
## TtlPicker2
|
|
||||||
|
|
||||||
TtlPicker2 components are used to enable and select time to live values. Use this TtlPicker2 instead of TtlPicker if you:
|
|
||||||
|
|
||||||
- Want the TTL to be enabled or disabled
|
|
||||||
- Want to have the time recalculated by default when the unit changes (eg 60s -> 1m)
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| -------------------- | --------------------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| onChange | <code>function</code> | | This function will be passed a TTL object, which includes enabled{bool}, seconds{number}, timeString{string}. |
|
|
||||||
| label | <code>String</code> | <code>"Time to live (TTL)"</code> | Label is the main label that lives next to the toggle. |
|
|
||||||
| helperTextDisabled | <code>String</code> | <code>"Allow tokens to be used indefinitely"</code> | This helper text is shown under the label when the toggle is switched off |
|
|
||||||
| helperTextEnabled | <code>String</code> | <code>"Disable the use of the token after"</code> | This helper text is shown under the label when the toggle is switched on |
|
|
||||||
| description | | <code></code> | Longer description about this value, what it does, and why it is useful. Shows up in tooltip next to helpertext |
|
|
||||||
| time | <code>Number</code> | <code>30</code> | The time (in the default units) which will be adjustable by the user of the form |
|
|
||||||
| unit | <code>String</code> | <code>"s"</code> | This is the unit key which will show by default on the form. Can be one of `s` (seconds), `m` (minutes), `h` (hours), `d` (days) |
|
|
||||||
| recalculationTimeout | <code>Number</code> | <code>5000</code> | This is the time, in milliseconds, that `recalculateSeconds` will be be true after time is updated |
|
|
||||||
| initialValue | <code>String</code> | <code></code> | This is the value set initially (particularly from a string like '30h') |
|
|
||||||
| initialEnabled | <code>Boolean</code> | <code></code> | Set this value if you want the toggle on when component is mounted |
|
|
||||||
| changeOnInit | <code>Boolean</code> | <code>false</code> | set this value if you'd like the passed onChange function to be called on component initialization |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<TtlPicker2 @onChange={{handleChange}} @time={{defaultTime}} @unit={{defaultUnit}}/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of TtlPicker2](https://github.com/hashicorp/vault/search?l=Handlebars&q=TtlPicker2+OR+ttl-picker2)
|
|
||||||
- [TtlPicker2 Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/ttl-picker2.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './ttl-picker2.md';
|
|
||||||
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
storiesOf('TTL/TtlPicker2', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`TtlPicker2|single`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Ttl Picker2</h5>
|
|
||||||
<TtlPicker2
|
|
||||||
@enableTTL={{enableTTL}}
|
|
||||||
@unit={{unit}}
|
|
||||||
@time={{time}}
|
|
||||||
@label={{label}}
|
|
||||||
@helperTextDisabled={{helperTextDisabled}}
|
|
||||||
@helperTextEnabled={{helperTextEnabled}}
|
|
||||||
@onChange={{onChange}}
|
|
||||||
/>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
enableTTL: boolean('enableTTL', true),
|
|
||||||
unit: select('unit', ['s', 'm', 'h', 'd'], 'm'),
|
|
||||||
time: text('time', '40'),
|
|
||||||
label: text('label', 'Main label of TTL'),
|
|
||||||
helperTextDisabled: text('helperTextDisabled', 'This helper text displays when TTL is disabled'),
|
|
||||||
helperTextEnabled: text('helperTextEnabled', 'Enabling TTL will show this text instead'),
|
|
||||||
onChange: (ttl) => {
|
|
||||||
console.log('onChange fired', ttl);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
)
|
|
||||||
.add(
|
|
||||||
`TtlPicker2|nested`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Ttl Picker2</h5>
|
|
||||||
<TtlPicker2 @onChange={{onChange}}>
|
|
||||||
<TtlPicker2
|
|
||||||
@onChange={{onChange}}
|
|
||||||
@label="Maximum time to live (Max TTL)"
|
|
||||||
@helperTextDisabled="Allow tokens to be renewed indefinitely"
|
|
||||||
@unit="h"
|
|
||||||
/>
|
|
||||||
</TtlPicker2>
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
onChange: (ttl) => {
|
|
||||||
console.log('onChange fired', ttl);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/vault-logo-spinner.js. To make changes, first edit that file and run "yarn gen-story-md vault-logo-spinner" to re-generate the content.-->
|
|
||||||
|
|
||||||
## VaultLogoSpinner
|
|
||||||
`VaultLogoSpinner` displays an animated Vault logo to use for loading screens.
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<VaultLogoSpinner />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of VaultLogoSpinner](https://github.com/hashicorp/vault/search?l=Handlebars&q=VaultLogoSpinner)
|
|
||||||
- [VaultLogoSpinner Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/vault-logo-spinner.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './vault-logo-spinner.md';
|
|
||||||
|
|
||||||
storiesOf('VaultLogoSpinner', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.add(
|
|
||||||
`VaultLogoSpinner`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Vault Logo Spinner</h5>
|
|
||||||
<VaultLogoSpinner/>
|
|
||||||
`,
|
|
||||||
context: {},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
{{#if (showMainIndex)~}}
|
|
||||||
{{>module-index~}}
|
|
||||||
{{>global-index~}}
|
|
||||||
{{/if~}}
|
|
||||||
{{#orphans ~}}
|
|
||||||
|
|
||||||
{{>heading-indent}}{{>sig-name}}
|
|
||||||
|
|
||||||
{{>description~}}
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
{{>params~}}
|
|
||||||
|
|
||||||
{{>properties~}}
|
|
||||||
|
|
||||||
{{#examples}}
|
|
||||||
**Example**
|
|
||||||
{{#if caption}} *({{caption}})* {{else}} {{/if}}
|
|
||||||
{{{inlineLinks example}}}
|
|
||||||
{{/examples}}
|
|
||||||
|
|
||||||
{{>member-index~}}
|
|
||||||
|
|
||||||
{{>separator~}}
|
|
||||||
|
|
||||||
{{>members~}}
|
|
||||||
|
|
||||||
{{/orphans~}}
|
|
||||||
---
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
{
|
|
||||||
"versions": {
|
|
||||||
"main": "https://vault-storybook.vercel.app/"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -31,10 +31,6 @@
|
||||||
"test:browserstack": "export CI=true; node scripts/start-vault.js --browserstack",
|
"test:browserstack": "export CI=true; node scripts/start-vault.js --browserstack",
|
||||||
"test:quick": "node scripts/start-vault.js",
|
"test:quick": "node scripts/start-vault.js",
|
||||||
"test:quick-oss": "yarn test:quick -f='!enterprise'",
|
"test:quick-oss": "yarn test:quick -f='!enterprise'",
|
||||||
"build:storybook": "build-storybook -s ../http/web_ui && sb extract && cp storybook-static/stories.json ../http/web_ui/stories.json",
|
|
||||||
"storybook": "start-storybook -p 6006 -s ../http/web_ui",
|
|
||||||
"deploy:storybook": "yarn build && yarn build:storybook",
|
|
||||||
"gen-story-md": "node scripts/gen-story-md.js",
|
|
||||||
"vault": "VAULT_REDIRECT_ADDR=http://127.0.0.1:8200 vault server -log-level=error -dev -dev-root-token-id=root -dev-ha -dev-transactional",
|
"vault": "VAULT_REDIRECT_ADDR=http://127.0.0.1:8200 vault server -log-level=error -dev -dev-root-token-id=root -dev-ha -dev-transactional",
|
||||||
"vault:cluster": "VAULT_REDIRECT_ADDR=http://127.0.0.1:8202 vault server -log-level=error -dev -dev-root-token-id=root -dev-listen-address=127.0.0.1:8202 -dev-ha -dev-transactional"
|
"vault:cluster": "VAULT_REDIRECT_ADDR=http://127.0.0.1:8202 vault server -log-level=error -dev -dev-root-token-id=root -dev-listen-address=127.0.0.1:8202 -dev-ha -dev-transactional"
|
||||||
},
|
},
|
||||||
|
|
@ -66,8 +62,6 @@
|
||||||
"@hashicorp/ember-flight-icons": "2.0.3",
|
"@hashicorp/ember-flight-icons": "2.0.3",
|
||||||
"@hashicorp/structure-icons": "^1.3.0",
|
"@hashicorp/structure-icons": "^1.3.0",
|
||||||
"@icholy/duration": "^5.1.0",
|
"@icholy/duration": "^5.1.0",
|
||||||
"@storybook/cli": "^6.3.10",
|
|
||||||
"@storybook/ember-cli-storybook": "^0.4.0",
|
|
||||||
"asn1js": "^2.2.0",
|
"asn1js": "^2.2.0",
|
||||||
"autosize": "^4.0.0",
|
"autosize": "^4.0.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
|
|
@ -97,7 +91,7 @@
|
||||||
"ember-cli": "~3.28.5",
|
"ember-cli": "~3.28.5",
|
||||||
"ember-cli-autoprefixer": "^0.8.1",
|
"ember-cli-autoprefixer": "^0.8.1",
|
||||||
"ember-cli-babel": "^7.26.10",
|
"ember-cli-babel": "^7.26.10",
|
||||||
"ember-cli-browserstack": "^1.1.0",
|
"ember-cli-browserstack": "2.0.1",
|
||||||
"ember-cli-clipboard": "^0.13.0",
|
"ember-cli-clipboard": "^0.13.0",
|
||||||
"ember-cli-content-security-policy": "^1.0.0",
|
"ember-cli-content-security-policy": "^1.0.0",
|
||||||
"ember-cli-dependency-checker": "^3.2.0",
|
"ember-cli-dependency-checker": "^3.2.0",
|
||||||
|
|
@ -180,14 +174,7 @@
|
||||||
},
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
"@babel/core": "^7.12.3",
|
"@babel/core": "^7.12.3",
|
||||||
"@storybook/addon-knobs": "^6.1.17",
|
|
||||||
"@storybook/addon-links": "^6.1.17",
|
|
||||||
"@storybook/addon-notes": "^5.3.19",
|
|
||||||
"@storybook/addon-viewport": "^6.1.17",
|
|
||||||
"@storybook/addons": "^6.1.17",
|
|
||||||
"@storybook/ember": "^6.1.17",
|
|
||||||
"babel-loader": "^8.1.0",
|
"babel-loader": "^8.1.0",
|
||||||
"jsdoc-to-markdown": "^5.0.0",
|
|
||||||
"lint-staged": "^10.5.1"
|
"lint-staged": "^10.5.1"
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
|
|
|
||||||
|
|
@ -30,13 +30,10 @@ let md = jsdoc2md.renderSync(options);
|
||||||
const pageBreakIndex = md.lastIndexOf('---'); //this is our last page break
|
const pageBreakIndex = md.lastIndexOf('---'); //this is our last page break
|
||||||
|
|
||||||
const seeLinks = `**See**
|
const seeLinks = `**See**
|
||||||
|
|
||||||
- [Uses of ${component}](https://github.com/hashicorp/vault/search?l=Handlebars&q=${component}+OR+${name})
|
- [Uses of ${component}](https://github.com/hashicorp/vault/search?l=Handlebars&q=${component}+OR+${name})
|
||||||
- [${component} Source Code](https://github.com/hashicorp/vault/blob/main/ui/${inputFile})
|
- [${component} Source Code](https://github.com/hashicorp/vault/blob/main/ui/${inputFile})
|
||||||
|
|
||||||
`;
|
`;
|
||||||
const generatedWarning = `<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in ${inputFile}. To make changes, first edit that file and run "yarn gen-story-md ${name}" to re-generate the content.-->
|
const generatedWarning = `<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in ${inputFile}. To make changes, first edit that file and run "yarn gen-story-md ${name}" to re-generate the content.-->
|
||||||
|
|
||||||
`;
|
`;
|
||||||
md = generatedWarning + md.slice(0, pageBreakIndex) + seeLinks + md.slice(pageBreakIndex);
|
md = generatedWarning + md.slice(0, pageBreakIndex) + seeLinks + md.slice(pageBreakIndex);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/alert-popup.js. To make changes, first edit that file and run "yarn gen-story-md alert-popup" to re-generate the content.-->
|
|
||||||
|
|
||||||
## AlertPopup
|
|
||||||
The `AlertPopup` is an implementation of the [ember-cli-flash](https://github.com/poteto/ember-cli-flash) `flashMessage`.
|
|
||||||
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| type | <code>String</code> | <code></code> | The alert type. This comes from the message-types helper. |
|
|
||||||
| [message] | <code>String</code> | <code></code> | The alert message. |
|
|
||||||
| close | <code>Func</code> | <code></code> | The close action which will close the alert. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
// All properties are passed in from the flashMessage service.
|
|
||||||
<AlertPopup
|
|
||||||
@type={{message-types flash.type}}
|
|
||||||
@message={{flash.message}}
|
|
||||||
@close={{close}}/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of AlertPopup](https://github.com/hashicorp/vault/search?l=Handlebars&q=AlertPopup)
|
|
||||||
- [AlertPopup Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/alert-popup.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
|
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './alert-popup.md';
|
|
||||||
import { MESSAGE_TYPES } from '../lib/core/addon/helpers/message-types.js';
|
|
||||||
|
|
||||||
storiesOf('Alerts/AlertPopup', module)
|
|
||||||
.addParameters({ options: { showPanel: false } })
|
|
||||||
.add(
|
|
||||||
`AlertPopup`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
{{#each types as |type|}}
|
|
||||||
<h5 class="title is-5">{{humanize type}}</h5>
|
|
||||||
<AlertPopup
|
|
||||||
@type={{message-types type}}
|
|
||||||
@message={{message}}
|
|
||||||
@close={{close}}/>
|
|
||||||
{{/each}}
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
close: () => {
|
|
||||||
console.log('closing!');
|
|
||||||
},
|
|
||||||
types: Object.keys(MESSAGE_TYPES),
|
|
||||||
message: 'Hello!',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/auth-config-form/config.js. To make changes, first edit that file and run "yarn gen-story-md auth-config-form/config" to re-generate the content.-->
|
|
||||||
|
|
||||||
## AuthConfigForm/Config
|
|
||||||
The `AuthConfigForm/Config` is the base form to configure auth methods.
|
|
||||||
|
|
||||||
**Properties**
|
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| model | <code>DS.Model</code> | <code></code> | The corresponding auth model that is being configured. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
{{auth-config-form/config model.model}}
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of AuthConfigForm/config](https://github.com/hashicorp/vault/search?l=Handlebars&q=AuthConfigForm/config)
|
|
||||||
- [AuthConfigForm/config Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/auth-config-form/config.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, select } from '@storybook/addon-knobs';
|
|
||||||
import notes from './config.md';
|
|
||||||
import { getOwner } from '@ember/application';
|
|
||||||
|
|
||||||
// This will need to be replaced with a fake model, since the form fields associated with
|
|
||||||
// each model come from OpenApi and Storybook doesn't have a Vault server to call OpenApi from.
|
|
||||||
const MODELS = {
|
|
||||||
Approle: 'approle',
|
|
||||||
AWS: 'aws/client',
|
|
||||||
Azure: 'azure',
|
|
||||||
Cert: 'cert',
|
|
||||||
GCP: 'gcp',
|
|
||||||
Github: 'github',
|
|
||||||
JWT: 'jwt',
|
|
||||||
Kubernetes: 'kubernetes',
|
|
||||||
LDAP: 'ldap',
|
|
||||||
OKTA: 'okta',
|
|
||||||
Radius: 'radius',
|
|
||||||
Userpass: 'userpass',
|
|
||||||
};
|
|
||||||
|
|
||||||
const DEFAULT_VALUE = 'aws/client';
|
|
||||||
|
|
||||||
storiesOf('AuthConfigForm/Config', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`Config`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Config</h5>
|
|
||||||
{{auth-config-form/config (compute (action 'getModel' model))}}
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
actions: {
|
|
||||||
getModel(modelType) {
|
|
||||||
return getOwner(this).lookup('service:store').createRecord(`auth-config/${modelType}`);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
model: select('model', MODELS, DEFAULT_VALUE),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/auth-config-form/options.js. To make changes, first edit that file and run "yarn gen-story-md auth-config-form/options" to re-generate the content.-->
|
|
||||||
|
|
||||||
## AuthConfigForm/Options
|
|
||||||
The `AuthConfigForm/Options` is options portion of the auth config form.
|
|
||||||
|
|
||||||
**Properties**
|
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| model | <code>DS.Model</code> | <code></code> | The corresponding auth model that is being configured. |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
{{auth-config-form/options model.model}}
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of AuthConfigForm/options](https://github.com/hashicorp/vault/search?l=Handlebars&q=AuthConfigForm/options)
|
|
||||||
- [AuthConfigForm/options Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/auth-config-form/options.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, select } from '@storybook/addon-knobs';
|
|
||||||
import notes from './options.md';
|
|
||||||
import { getOwner } from '@ember/application';
|
|
||||||
|
|
||||||
// This will need to be replaced with a fake model, since the form fields associated with
|
|
||||||
// each model come from OpenApi and Storybook doesn't have a Vault server to call OpenApi from.
|
|
||||||
const MODELS = {
|
|
||||||
Approle: 'approle',
|
|
||||||
AWS: 'aws/client',
|
|
||||||
Azure: 'azure',
|
|
||||||
Cert: 'cert',
|
|
||||||
GCP: 'gcp',
|
|
||||||
Github: 'github',
|
|
||||||
JWT: 'jwt',
|
|
||||||
Kubernetes: 'kubernetes',
|
|
||||||
LDAP: 'ldap',
|
|
||||||
OKTA: 'okta',
|
|
||||||
Radius: 'radius',
|
|
||||||
Userpass: 'userpass',
|
|
||||||
};
|
|
||||||
|
|
||||||
const DEFAULT_VALUE = 'aws/client';
|
|
||||||
|
|
||||||
storiesOf('AuthConfigForm/Options', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`Options`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Options</h5>
|
|
||||||
{{auth-config-form/options (compute (action 'getModel' model))}}
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
actions: {
|
|
||||||
getModel(modelType) {
|
|
||||||
return getOwner(this).lookup('service:store').createRecord(`auth-config/${modelType}`);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
model: select('model', MODELS, DEFAULT_VALUE),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/auth-form.js. To make changes, first edit that file and run "yarn gen-story-md auth-form" to re-generate the content.-->
|
|
||||||
|
|
||||||
## AuthForm
|
|
||||||
The `AuthForm` is used to sign users into Vault.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Description |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| wrappedToken | <code>string</code> | The auth method that is currently selected in the dropdown. |
|
|
||||||
| cluster | <code>object</code> | The auth method that is currently selected in the dropdown. This corresponds to an Ember Model. |
|
|
||||||
| namespace- | <code>string</code> | The currently active namespace. |
|
|
||||||
| selectedAuth | <code>string</code> | The auth method that is currently selected in the dropdown. |
|
|
||||||
| onSuccess | <code>function</code> | Fired on auth success |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
// All properties are passed in via query params.
|
|
||||||
<AuthForm @wrappedToken={{wrappedToken}} @cluster={{model}} @namespace={{namespaceQueryParam}} @selectedAuth={{authMethod}} @onSuccess={{action this.onSuccess}} />```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of AuthForm](https://github.com/hashicorp/vault/search?l=Handlebars&q=AuthForm+OR+auth-form)
|
|
||||||
- [AuthForm Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/auth-form.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
|
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import notes from './auth-form.md';
|
|
||||||
|
|
||||||
storiesOf('AuthForm', module)
|
|
||||||
.addParameters({ options: { showPanel: false } })
|
|
||||||
.add(
|
|
||||||
`AuthForm`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Auth Form</h5>
|
|
||||||
<AuthForm />
|
|
||||||
`,
|
|
||||||
context: {},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/file-to-array-buffer.js. To make changes, first edit that file and run "yarn gen-story-md file-to-array-buffer" to re-generate the content.-->
|
|
||||||
|
|
||||||
## FileToArrayBuffer
|
|
||||||
`FileToArrayBuffer` is a component that will allow you to pick a file from the local file system. Once
|
|
||||||
loaded, this file will be emitted as a JS ArrayBuffer to the passed `onChange` callback.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| onChange | <code>function</code> | <code></code> | The function to call when the file read is complete. This function receives the file as a JS ArrayBuffer |
|
|
||||||
| [label] | <code>String</code> | <code></code> | Text to use as the label for the file input |
|
|
||||||
| fileHelpText | <code>String</code> | <code></code> | Text to use as help under the file input |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<FileToArrayBuffer @onChange={{action (mut file)}} />
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of FileToArrayBuffer](https://github.com/hashicorp/vault/search?l=Handlebars&q=FileToArrayBuffer+OR+file-to-array-buffer)
|
|
||||||
- [FileToArrayBuffer Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/file-to-array-buffer.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
|
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, text } from '@storybook/addon-knobs';
|
|
||||||
|
|
||||||
import notes from './file-to-array-buffer.md';
|
|
||||||
|
|
||||||
storiesOf('FileToArrayBuffer', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(
|
|
||||||
withKnobs()
|
|
||||||
)
|
|
||||||
.add(`FileToArrayBuffer`, () => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">File To Array Buffer</h5>
|
|
||||||
<FileToArrayBuffer @onChange={{this.onChange}} @label={{this.label}}
|
|
||||||
@fileHelpText={{this.fileHelpText}} />
|
|
||||||
{{#if this.fileName}}
|
|
||||||
{{this.fileName}} as bytes: {{this.fileBytes}}
|
|
||||||
{{/if}}
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
onChange(file, name) {
|
|
||||||
console.log(`${name} contents as an ArrayBuffer:`, file);
|
|
||||||
},
|
|
||||||
label: text('Label'),
|
|
||||||
fileHelpText: text('Help text'),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{notes}
|
|
||||||
);
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/selectable-card.js. To make changes, first edit that file and run "yarn gen-story-md selectable-card" to re-generate the content.-->
|
|
||||||
|
|
||||||
## SelectableCard
|
|
||||||
SelectableCard components are card-like components that display a title, total, subtotal, and anything after the yield.
|
|
||||||
They are designed to be used in containers that act as flexbox or css grid containers.
|
|
||||||
|
|
||||||
**Params**
|
|
||||||
|
|
||||||
| Param | Type | Default | Description |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| cardTitle | <code>String</code> | <code></code> | cardTitle displays the card title |
|
|
||||||
| total | <code>Number</code> | <code>0</code> | the Total number displays like a title, it's the largest text in the component |
|
|
||||||
| subText | <code>String</code> | <code></code> | subText describes the total |
|
|
||||||
|
|
||||||
**Example**
|
|
||||||
|
|
||||||
```js
|
|
||||||
<SelectableCard @cardTitle="Tokens" @total={{totalHttpRequests}} @subText="Total"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
**See**
|
|
||||||
|
|
||||||
- [Uses of SelectableCard](https://github.com/hashicorp/vault/search?l=Handlebars&q=SelectableCard+OR+selectable-card)
|
|
||||||
- [SelectableCard Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/selectable-card.js)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
import { storiesOf } from '@storybook/ember';
|
|
||||||
import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
|
|
||||||
import notes from './selectable-card.md';
|
|
||||||
|
|
||||||
const CARD_TITLE = 'Tokens';
|
|
||||||
const SUB_TEXT = 'Total';
|
|
||||||
const TOTAL_HTTP_REQUESTS = 100;
|
|
||||||
|
|
||||||
storiesOf('SelectableCard/SelectableCard', module)
|
|
||||||
.addParameters({ options: { showPanel: true } })
|
|
||||||
.addDecorator(withKnobs())
|
|
||||||
.add(
|
|
||||||
`SelectableCard`,
|
|
||||||
() => ({
|
|
||||||
template: hbs`
|
|
||||||
<h5 class="title is-5">Selectable Card</h5>
|
|
||||||
<SelectableCard @cardTitle={{cardTitle}} @total={{totalHttpRequests}} @subText={{subText}} />
|
|
||||||
`,
|
|
||||||
context: {
|
|
||||||
cardTitle: text('cardTitle', CARD_TITLE),
|
|
||||||
totalHttpRequests: number('totalHttpRequests', TOTAL_HTTP_REQUESTS),
|
|
||||||
subText: text('subText', SUB_TEXT),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ notes }
|
|
||||||
);
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue