716f25162a
* add initial Confirm component to secrets list page * use ember-wormholes to render confirmation message * use maybe-in-element instead of ember-wormhole * hide overlay initially * animate confirm overlay left and right on click * hide overlay in the DOM to properly set height * adjust height when showing/hiding confirm-overlay * disable confirmation buttons until trigger has been rendered * adjust height of confirm-wrapper instead of confirm * move Confirm/ to core * only add style attribute when a height property exists * fix indentation * wip - use new Confirm inside status menu * add Confirm to Storybook * ensure confirm links have proper styling in Storybook and outside popup-menu * fix height transition * disable no-inline-styles * add test selector * remove comment * consolidate Message into Trigger to make Confirm easier to use * use new Trigger API in status menu * remove height transition * fix binding inline style warning * rename confirmMessage to message * update Confirm for Storybook * fix indentation * do not pass in onCancel from outer template because it is static * add jsdoc comments to Trigger * wip - add trigger and confirm to storybook * fix status menu styling * fix styling of confirm stories * use new Confirm on secrets engine list * use bulma speed variable * fix indentation * re-renable eslint no-inline-styles * showConfirm when rendered trigger matches id * fix background color on namespace picker * do not expose onTrigger * Revert "re-renable eslint no-inline-styles" This reverts commit c7b2a9097f177a2876afaaec6020f73b07bad3c7. * rename Confirm Trigger to Message * add tests * update JSDocs * focus trigger after cancelling the confirm message * update Confirm JSDocs * differentiate between ConfirmAction and Confirm * add Message to Storybook * re-enable eslint import/extensions * update confirmButtonText to Revoke token * remove linebreak and extra whitespace * fix typo * add loading to empty button * fix more typos * only show Message contents when showConfirm is true * no need to disable the confirm buttons since they only render in the DOM when showConfirm is true * use Confirm to delete aws roles * use Confirm to delete pki roles * use Confirm to delete ssh roles * add Confirm to entity alias page * fix confirm button text on Revoke token in status menu * ensure you can use tab to revoke a token from status menu * reset the open trigger after the confirm has been confirmed * use Confirm on identity list pages * fix Disable engine confirmation text * use <PopupMenu /> angle brack syntax * use Confirm on policies list page * use Confirm for namespaces * use Confirm for kmip scopes * use Confirm for deleting kmip roles * use Confirm for revoking KMIP credentials * fix Revoke token triggerText
71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
import Component from '@ember/component';
|
|
import { computed } from '@ember/object';
|
|
import { htmlSafe } from '@ember/template';
|
|
import layout from '../templates/components/confirm';
|
|
import { next } from '@ember/runloop';
|
|
|
|
/**
|
|
* @module 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.
|
|
*
|
|
* @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>
|
|
* ```
|
|
*/
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
openTrigger: null,
|
|
height: 0,
|
|
focusTrigger: null,
|
|
style: computed('height', function() {
|
|
return htmlSafe(`height: ${this.height}px`);
|
|
}),
|
|
wormholeReference: null,
|
|
wormholeId: computed(function() {
|
|
return `confirm-${this.elementId}`;
|
|
}),
|
|
didInsertElement() {
|
|
this.set('wormholeReference', this.element.querySelector(`#${this.wormholeId}`));
|
|
},
|
|
didRender() {
|
|
this.updateHeight();
|
|
},
|
|
updateHeight: function() {
|
|
let height;
|
|
height = this.openTrigger
|
|
? this.element.querySelector('.confirm-overlay').clientHeight
|
|
: this.element.querySelector('.confirm').clientHeight;
|
|
this.set('height', height);
|
|
},
|
|
actions: {
|
|
onTrigger: function(itemId, e) {
|
|
this.set('openTrigger', itemId);
|
|
|
|
// store a reference to the trigger so we can focus the element
|
|
// after clicking cancel
|
|
this.set('focusTrigger', e.target);
|
|
this.updateHeight();
|
|
},
|
|
onCancel: function() {
|
|
this.set('openTrigger', '');
|
|
this.updateHeight();
|
|
|
|
next(() => {
|
|
this.focusTrigger.focus();
|
|
this.set('focusTrigger', null);
|
|
});
|
|
},
|
|
},
|
|
});
|