open-vault/ui/app/components/keymgmt/provider-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

99 lines
2.5 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 KeymgmtProviderEdit
* ProviderKeyEdit components are used to display KeyMgmt Secrets engine UI for Key items
*
* @example
* ```js
* <KeymgmtProviderEdit @model={model} @mode="show" />
* ```
* @param {object} model - model is the data from the store
* @param {string} mode - mode controls which view is shown on the component - show | create |
* @param {string} [tab] - Options are "details" or "keys" for the show mode only
*/
export default class KeymgmtProviderEdit extends Component {
@service router;
@service flashMessages;
constructor() {
super(...arguments);
// key count displayed in details tab and keys are listed in keys tab
if (this.args.mode === 'show') {
this.fetchKeys.perform();
}
}
@tracked modelValidations;
get isShowing() {
return this.args.mode === 'show';
}
get isCreating() {
return this.args.mode === 'create';
}
get viewingKeys() {
return this.args.tab === 'keys';
}
@task
@waitFor
*saveTask() {
const { model } = this.args;
try {
yield model.save();
this.router.transitionTo('vault.cluster.secrets.backend.show', model.id, {
queryParams: { itemType: 'provider' },
});
} catch (error) {
this.flashMessages.danger(error.errors.join('. '));
}
}
@task
@waitFor
*fetchKeys(page = 1) {
try {
yield this.args.model.fetchKeys(page);
} catch (error) {
this.flashMessages.danger(error.errors.join('. '));
}
}
@action
async onSave(event) {
event.preventDefault();
const { isValid, state } = await this.args.model.validate();
if (isValid) {
this.modelValidations = null;
this.saveTask.perform();
} else {
this.modelValidations = state;
}
}
@action
async onDelete() {
try {
const { model, root } = this.args;
await model.destroyRecord();
this.router.transitionTo(root.path, root.model, { queryParams: { tab: 'provider' } });
} catch (error) {
this.flashMessages.danger(error.errors.join('. '));
}
}
@action
async onDeleteKey(model) {
try {
await model.destroyRecord();
this.args.model.keys.removeObject(model);
} catch (error) {
this.flashMessages.danger(error.errors.join('. '));
}
}
}