Generic Confirm Modal in JS
What does this MR do?
Closes #205900 (closed)
Currently, we cannot call GlModal
from HAML very easily.
Throughout the backend there are countless uses of the browser default confirm box.
This new component will be used to open the door to replace all those instances of browser confirms with this.
An example of this being implemented can be found here: !24808 (merged)
How to test this on your own GDK
- In your JS Hook (ex:
javascript/pages/path/index.js
)
import initConfirmModal from '~/confirm_modal';
document.addEventListener('DOMContentLoaded', () => {
initConfirmModal();
});
- Add a button in your HAML file
= button_to s_('Geo|Remove'), '#', class: 'btn btn-danger btn-inverted js-confirm-modal-button', data: modal_data_helper_function
- Add a helper function that defines the information for your modal (ex.
application_helper.rb
)
def modal_data_helper_function
{
path: path,
method: 'delete',
modal_attributes: {
modalId: 'geo-entry-removal-modal',
title: _('Remove tracking database entry'),
message: _('Tracking database entry will be removed. Are you sure?'),
okVariant: 'danger',
okTitle: _('Remove entry')
}
}
end
Screenshots
Confirm | |
---|---|
before | |
after |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec
-
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Closes #205900 (closed)
Edited by Yorick Peterse