Use ConfirmationPopover rather than custom form

atst/routes/portfolios/task_orders.py

@@ -109,8 +109,7 @@ def ko_review(portfolio_id, task_order_id):
     methods=["POST"],
 )
 def resend_invite(portfolio_id, task_order_id, form=None):
-    form_data = {**http_request.form}
+    invite_type = http_request.args.get("invite_type")
-    invite_type = form_data["invite_type"][0]
 
     if invite_type not in OFFICER_INVITATIONS:
         raise NotFoundError("invite_type")

js/components/confirmation_popover.js

@@ -4,10 +4,13 @@ export default {
   props: {
     action: String,
     btn_text: String,
+    btn_icon: String,
+    btn_class: String,
     cancel_btn_text: String,
     confirm_btn_text: String,
     confirm_msg: String,
     csrf_token: String,
+    name: String,
   },
 
   template: `
@@ -26,7 +29,10 @@ export default {
           </button>
         </div>
       </template>
-      <button class="tooltip-target" type="button">{{ btn_text }}</button>
+      <button class="tooltip-target" v-bind:class="[btn_class]" type="button">
+        <div v-html="btn_icon" />
+        {{ btn_text }}
+      </button>
     </v-popover>
   `,
 }

js/components/forms/edit_officer_form.js

@@ -1,6 +1,7 @@
 import FormMixin from '../../mixins/form'
 import checkboxinput from '../checkbox_input'
 import textinput from '../text_input'
+import ConfirmationPopover from '../confirmation_popover'
 
 export default {
   name: 'edit-officer-form',
@@ -10,6 +11,7 @@ export default {
   components: {
     checkboxinput,
     textinput,
+    ConfirmationPopover,
   },
 
   props: {

styles/components/_forms.scss

@@ -171,6 +171,3 @@
   }
 }
 
-.inline-form {
-  display: inline-block;
-}

styles/sections/_task_order.scss

@@ -510,6 +510,10 @@
         margin: 0 $gap;
       }
 
+      .v-popover {
+        display: inline-block;
+      }
+
       .remove {
         color: $color-red;
         .icon {

templates/components/confirmation_button.html

@@ -1,6 +1,16 @@
-{% macro ConfirmationButton(btn_text, action, confirm_msg="Are you sure?", confirm_btn="Confirm", cancel_btn="Cancel") -%}
+{% macro ConfirmationButton(
+  btn_text,
+  action,
+  btn_icon=None,
+  btn_class=None,
+  confirm_msg="Are you sure?",
+  confirm_btn="Confirm",
+  cancel_btn="Cancel")
+-%}
   <confirmation-popover
     btn_text='{{ btn_text }}'
+    btn_icon='{{ btn_icon }}'
+    btn_class='{{ btn_class }}'
     action='{{ action }}'
     csrf_token='{{ csrf_token() }}'
     confirm_msg='{{ confirm_msg }}'

templates/portfolios/task_orders/invitations.html

@@ -5,6 +5,7 @@
 {% from "components/checkbox_input.html" import CheckboxInput %}
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
+{% from "components/confirmation_button.html" import ConfirmationButton %}
 
 
 {% macro Link(text, icon_name, onClick=None, url='#', classes='') %}
@@ -96,15 +97,21 @@
         </div>
         <div class="officer__actions">
           {{ Link("Update", "edit", onClick="edit") }}
+          {% set invite_type = [prefix + "_invite"] %}
 
-          <form method='POST' action="{{ url_for("portfolios.resend_invite", portfolio_id=portfolio.id, task_order_id=task_order.id) }}" class="inline-form">
+          {{
-            {{ form.csrf_token }}
+            ConfirmationButton(
-            <input name="invite_type" value="{{ prefix }}_invite" type="hidden" />
+              btn_text="Resend Invitation",
-            <button class="icon-link">
+              action=url_for(
-              {{ Icon('avatar') }}
+                "portfolios.resend_invite",
-              Resend Invitation
+                portfolio_id=portfolio.id,
-            </button>
+                task_order_id=task_order.id,
-          </form>
+                invite_type=invite_type,
+              ),
+              btn_icon=Icon('avatar'),
+              btn_class="icon-link",
+            )
+          }}
 
           {{ Link("Remove", "trash", classes="remove") }}
         </div>

tests/routes/portfolios/test_task_orders.py

@@ -627,9 +627,9 @@ def test_resend_invite_when_ko(app, client, user_session, portfolio, user):
             "portfolios.resend_invite",
             portfolio_id=portfolio.id,
             task_order_id=task_order.id,
+            invite_type="ko_invite",
             _external=True,
-        ),
+        )
-        data={"invite_type": "ko_invite"},
     )
 
     assert original_invitation.status == InvitationStatus.REVOKED