Add vue component for confirmation popover
Have the confirmation popover in a separate Vue component fixes a bug in IE that was causing the `form` element in the popover to be ignored. Since `form`s cannot be nested, the `form` element in the popover was being discarded by IE and the revoke/resend invitation buttons did nothing. Breaking the functionality into a Vue component moves the `form` into a separate template. When the popover is displayed, the component is added to the DOM at the end, so the `form` is properly not-nested.
This commit is contained in:
parent
f226f88ab3
commit
fd6b0f9b24
@ -0,0 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ConfirmationPopover matches snapshot 1`] = `<v-popover placement="top-start"><template></template> <button type="button" class="tooltip-target">Do something dangerous</button></v-popover>`;
|
22
js/components/__tests__/confirmation_popover.test.js
Normal file
22
js/components/__tests__/confirmation_popover.test.js
Normal file
@ -0,0 +1,22 @@
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
|
||||
import ConfirmationPopover from '../confirmation_popover'
|
||||
|
||||
|
||||
describe('ConfirmationPopover', () => {
|
||||
it('matches snapshot', () => {
|
||||
const wrapper = shallowMount(ConfirmationPopover, {
|
||||
propsData: {
|
||||
action: '/some-url',
|
||||
btn_text: 'Do something dangerous',
|
||||
cancel_btn_text: 'Cancel',
|
||||
confirm_btn_text: 'Confirm',
|
||||
confirm_msg: 'Are you sure you want to do that?',
|
||||
csrf_token: '42'
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
32
js/components/confirmation_popover.js
Normal file
32
js/components/confirmation_popover.js
Normal file
@ -0,0 +1,32 @@
|
||||
export default {
|
||||
name: 'confirmation-popover',
|
||||
|
||||
props: {
|
||||
action: String,
|
||||
btn_text: String,
|
||||
cancel_btn_text: String,
|
||||
confirm_btn_text: String,
|
||||
confirm_msg: String,
|
||||
csrf_token: String
|
||||
},
|
||||
|
||||
template: `
|
||||
<v-popover placement='top-start'>
|
||||
<template slot="popover">
|
||||
<p>{{ confirm_msg }}</p>
|
||||
<div class='action-group'>
|
||||
<form method="POST" v-bind:action="action">
|
||||
<input id="csrf_token" name="csrf_token" type="hidden" v-bind:value="csrf_token">
|
||||
<button class='usa-button usa-button-primary' type='submit'>
|
||||
{{ confirm_btn_text }}
|
||||
</button>
|
||||
</form>
|
||||
<button class='usa-button usa-button-secondary' v-close-popover>
|
||||
{{ cancel_btn_text }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<button class="tooltip-target" type="button">{{ btn_text }}</button>
|
||||
</v-popover>
|
||||
`
|
||||
}
|
@ -23,6 +23,7 @@ import CcpoApproval from './components/forms/ccpo_approval'
|
||||
import MembersList from './components/forms/members_list'
|
||||
import LocalDatetime from './components/local_datetime'
|
||||
import RequestsList from './components/forms/requests_list'
|
||||
import ConfirmationPopover from './components/confirmation_popover'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
@ -50,6 +51,7 @@ const app = new Vue({
|
||||
EditEnvironmentRole,
|
||||
EditProjectRoles,
|
||||
RequestsList,
|
||||
ConfirmationPopover,
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
|
@ -1,19 +1,10 @@
|
||||
{% macro ConfirmationButton(btn_text, action, csrf_token, confirm_msg="Are you sure?", confirm_btn="Confirm", cancel_btn="Cancel") -%}
|
||||
<v-popover placement='top-start'>
|
||||
<template slot="popover">
|
||||
<p>{{ confirm_msg }}</p>
|
||||
<div class='action-group'>
|
||||
<form method="POST" action="{{ action }}">
|
||||
{{ csrf_token }}
|
||||
<button class='usa-button usa-button-primary' type='submit'>
|
||||
{{ confirm_btn }}
|
||||
</button>
|
||||
</form>
|
||||
<button class='usa-button usa-button-secondary' v-close-popover>
|
||||
{{ cancel_btn }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<button class="tooltip-target" type="button">{{ btn_text }}</button>
|
||||
</v-popover>
|
||||
{% macro ConfirmationButton(btn_text, action, confirm_msg="Are you sure?", confirm_btn="Confirm", cancel_btn="Cancel") -%}
|
||||
<confirmation-popover
|
||||
btn_text='{{ btn_text }}'
|
||||
action='{{ action }}'
|
||||
csrf_token='{{ csrf_token() }}'
|
||||
confirm_msg='{{ confirm_msg }}'
|
||||
confirm_btn_text='{{ confirm_btn }}'
|
||||
cancel_btn_text='{{ cancel_btn }}'>
|
||||
</confirmation-popover>
|
||||
{%- endmacro %}
|
||||
|
@ -44,14 +44,12 @@
|
||||
{{ ConfirmationButton(
|
||||
"Revoke Invitation",
|
||||
url_for("workspaces.revoke_invitation", workspace_id=workspace.id, token=member.latest_invitation.token),
|
||||
form.csrf_token
|
||||
) }}
|
||||
{% endif %}
|
||||
{% if member.can_resend_invitation %}
|
||||
{{ ConfirmationButton (
|
||||
"Resend Invitation",
|
||||
url_for("workspaces.resend_invitation", workspace_id=workspace.id, token=member.latest_invitation.token),
|
||||
form.csrf_token,
|
||||
confirm_msg="Are you sure? This will send an email to invite the user to join this workspace."
|
||||
)}}
|
||||
{% endif %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user