open-vault/ui/app/components/keymgmt/key-edit.js
Chelsea Shaw 81105e6209
UI: keymgmt secret engine (#15523)
* No default provider on create, add subText to service_account_file field

* Show empty state if no provider selected -- sorry for all the conditionals

* Button and distribution title styling on key edit

* Fix key distribute empty state permissions

* Don't try to fetch distribution if provider is permissionError

* Use search-select component for provider on distribute component

* Show distribution form errors on page rather than popup

* Add id, label, subtext to input-search for search-select fallback

* Remove created field from provider, default to querying for keys unless capabilities is false

* Fix link to provider from key-edit

* Search select label styling and add subText to fallback

* Refetch model after key rotate

* Create distribution method is task so we can load and disable button

* Move keymgmt to cloud group on mount options

* Key actions are tasks, fix tab active class

* Add isRunning attr to confirm-action which disables confirm button and replaces text with loader

* Fix provider active tab class

* Handle control groups on distribution

* Correctly handle error message on key-edit

* Show loading state on distribute, reload key after distribute

* Clear old validation errors if valid

* Fix tests

* Fix delete url

* Add changelog

* Address PR comments

* kick circle-ci

* Format go file breaking fmt

* Rename old changelog

* Remove resolved TODO
2022-05-20 10:41:24 -05:00

115 lines
3 KiB
JavaScript

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { task } from 'ember-concurrency';
import { waitFor } from '@ember/test-waiters';
/**
* @module KeymgmtKeyEdit
* KeymgmtKeyEdit components are used to display KeyMgmt Secrets engine UI for Key items
*
* @example
* ```js
* <KeymgmtKeyEdit @model={model} @mode="show" @tab="versions" />
* ```
* @param {object} model - model is the data from the store
* @param {string} [mode=show] - mode controls which view is shown on the component
* @param {string} [tab=details] - Options are "details" or "versions" for the show mode only
*/
const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
export default class KeymgmtKeyEdit extends Component {
@service store;
@service router;
@service flashMessages;
@tracked isDeleteModalOpen = false;
get mode() {
return this.args.mode || 'show';
}
get keyAdapter() {
return this.store.adapterFor('keymgmt/key');
}
get isMutable() {
return ['create', 'edit'].includes(this.args.mode);
}
get isCreating() {
return this.args.mode === 'create';
}
@action
toggleModal(bool) {
this.isDeleteModalOpen = bool;
}
@task
@waitFor
*saveKey(evt) {
evt.preventDefault();
const { model } = this.args;
try {
yield model.save();
this.router.transitionTo(SHOW_ROUTE, model.name);
} catch (error) {
let errorMessage = error;
if (error.errors) {
// if errors come directly from API they will be in this shape
errorMessage = error.errors.join('. ');
}
this.flashMessages.danger(errorMessage);
if (!error.errors) {
// If error was custom from save, only partial fail
// so it's safe to show the key
this.router.transitionTo(SHOW_ROUTE, model.name);
}
}
}
@task
@waitFor
*removeKey() {
try {
yield this.keyAdapter.removeFromProvider(this.args.model);
yield this.args.model.reload();
this.flashMessages.success('Key has been successfully removed from provider');
} catch (error) {
this.flashMessages.danger(error.errors?.join('. '));
}
}
@action
deleteKey() {
const secret = this.args.model;
const backend = secret.backend;
secret
.destroyRecord()
.then(() => {
this.router.transitionTo(LIST_ROOT_ROUTE, backend);
})
.catch((e) => {
this.flashMessages.danger(e.errors?.join('. '));
});
}
@task
@waitFor
*rotateKey() {
const id = this.args.model.name;
const backend = this.args.model.backend;
const adapter = this.keyAdapter;
yield adapter
.rotateKey(backend, id)
.then(() => {
this.flashMessages.success(`Success: ${id} connection was rotated`);
})
.catch((e) => {
this.flashMessages.danger(e.errors);
});
}
}