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
57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
import Component from '@ember/component';
|
|
import layout from '../templates/components/confirm-action';
|
|
|
|
/**
|
|
* @module 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.
|
|
*
|
|
* @example
|
|
* ```js
|
|
* <ConfirmAction
|
|
* @onConfirmAction={{ () => { console.log('Action!') } }}
|
|
* @confirmMessage="Are you sure you want to delete this config?">
|
|
* Delete
|
|
* </ConfirmAction>
|
|
* ```
|
|
*
|
|
* @property {Func} [onConfirmAction=null] - The action to take upon confirming.
|
|
* @property {String} [confirmTitle=Delete this?] - The title to display when confirming.
|
|
* @property {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
|
|
* @property {String} [confirmButtonText=Delete] - The confirm button text.
|
|
* @property {String} [cancelButtonText=Cancel] - The cancel button text.
|
|
*
|
|
*/
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
tagName: '',
|
|
supportsDataTestProperties: true,
|
|
buttonText: 'Delete',
|
|
confirmTitle: 'Delete this?',
|
|
confirmMessage: 'You will not be able to recover it later.',
|
|
confirmButtonText: 'Delete',
|
|
cancelButtonText: 'Cancel',
|
|
horizontalPosition: 'auto-right',
|
|
verticalPosition: 'below',
|
|
disabled: false,
|
|
showConfirm: false,
|
|
onConfirmAction: null,
|
|
|
|
actions: {
|
|
toggleConfirm() {
|
|
this.toggleProperty('showConfirm');
|
|
},
|
|
|
|
onConfirm() {
|
|
const confirmAction = this.get('onConfirmAction');
|
|
|
|
if (typeof confirmAction !== 'function') {
|
|
throw new Error('confirm-action components expects `onConfirmAction` attr to be a function');
|
|
} else {
|
|
confirmAction();
|
|
this.toggleProperty('showConfirm');
|
|
}
|
|
},
|
|
},
|
|
});
|