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:
Patrick Smith
2018-11-27 10:21:58 -05:00
parent f226f88ab3
commit fd6b0f9b24
6 changed files with 68 additions and 20 deletions

View File

@@ -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>`;

View 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()
})
})

View 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>
`
}