**Table of Contents**
- [Vault UI](#vault-ui)
- [Prerequisites](#prerequisites)
- [Running / Development](#running--development)
- [Code Generators](#code-generators)
- [Running Tests](#running-tests)
- [Automated Cross-Browser Testing](#automated-cross-browser-testing)
- [Running Browserstack Locally](#running-browserstack-locally)
- [Linting](#linting)
- [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)
# Vault UI
This README outlines the details of collaborating on this Ember application.
## Prerequisites
You will need the following things properly installed on your computer.
- [Node.js](https://nodejs.org/) (with NPM)
- [Yarn](https://yarnpkg.com/en/)
- [Git](https://git-scm.com/)
- [Ember CLI](https://ember-cli.com/)
- [lint-staged\*](https://www.npmjs.com/package/lint-staged)
\* lint-staged is an optional dependency - running `yarn` will install it.
If don't want optional dependencies installed you can run `yarn --ignore-optional`. If you've ignored the optional deps
previously and want to install them, you have to tell yarn to refetch all deps by
running `yarn --force`.
In order to enforce the same version of `yarn` across installs, the `yarn` binary is included in the repo
in the `.yarn/releases` folder. To update to a different version of `yarn`, use the `yarn policies set-version VERSION` command. For more information on this, see the [documentation](https://yarnpkg.com/en/docs/cli/policies).
## Running a Vault Server
Before running Vault UI locally, a Vault server must be running. First, ensure
Vault dev is built according the the instructions in `../README.md`. To start a
single local Vault server:
- `yarn vault`
To start a local Vault cluster:
- `yarn vault:cluster`
These commands may also be [aliased on your local device](https://github.com/hashicorp/vault-tools/blob/master/users/noelle/vault_aliases).
## Running / Development
To get all of the JavaScript dependencies installed, run this in the `ui` directory:
- `yarn`
If you want to run Vault UI and proxy back to a Vault server running
on the default port, 8200, run the following in the `ui` directory:
- `yarn start`
This will start an Ember CLI server that proxies requests to port 8200,
and enable live rebuilding of the application as you change the UI application code.
Visit your app at [http://localhost:4200](http://localhost:4200).
If your Vault server is running on a different port you can use the
long-form version of the npm script:
`ember server --proxy=http://localhost:PORT`
### Code Generators
Make use of the many generators for code, try `ember help generate` for more details. If you're using a component that can be widely-used, consider making it an `addon` component instead (see [this PR](https://github.com/hashicorp/vault/pull/6629) for more details)
eg. a reusable component named foo that you'd like in the core engine
- `ember g component foo --in lib/core`
- `echo "export { default } from 'core/components/foo';" > lib/core/app/components/foo.js`
### Running Tests
Running tests will spin up a Vault dev server on port 9200 via a
pretest script that testem (the test runner) executes. All of the
acceptance tests then run, proxing requests back to that server.
- `yarn run test:oss`
- `yarn run test:oss -s` to keep the test server running after the initial run.
- `yarn run test -f="policies"` to filter the tests that are run. `-f` gets passed into
[QUnit's `filter` config](https://api.qunitjs.com/config/QUnit.config#qunitconfigfilter-string--default-undefined)
- `yarn run test:browserstack` to run the kv acceptance tests in Browserstack
#### Automated Cross-Browser Testing
Vault uses [Browserstack Automate](https://automate.browserstack.com/) to run all the kv acceptance tests on various browsers. You can view the list of browsers we test by viewing `testem.browserstack.js`.
##### Running Browserstack Locally
To run the Browserstack tests locally you will need to add your `BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY` to your environment. Then run `yarn run test:browserstack`. You can view the currently running tests at `localhost:7357` or log in to [Browserstack Automate](https://automate.browserstack.com/) to view a previous build.
To run the tests locally in a browser other than IE11, swap out `launch_in_ci: ['BS_IE_11']` inside `testem.browserstack.js`.
### Linting
* `yarn lint`
* `yarn lint:fix`
### Building Vault UI into a Vault Binary
We use the [embed](https://golang.org/pkg/embed/) package from Go 1.16+ to build
the static assets of the Ember application into a Vault binary.
This can be done by running these commands from the root directory run:
`make static-dist`
`make dev-ui`
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
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
*
* I will be toggled! *
*