[crashmanager] Fix "assign existing bug" after vue3 migration

Author: jschwartzentruber

server/frontend/src/components/Signatures/AssignBtn.vue

@@ -4,7 +4,7 @@
 
 <script>
 import swal from "sweetalert";
-import { createVNode, defineComponent, getCurrentInstance, render } from "vue";
+import { defineComponent, h, ref, render } from "vue";
 import { assignExternalBug, errorParser } from "../../helpers";
 import AssignBtnForm from "./AssignBtnForm.vue";
 
@@ -26,16 +26,19 @@ export default defineComponent({
   },
   methods: {
     async link() {
+      const externalBugId = ref(null);
+      const selectedProvider = ref(null);
+
       // Create a container div for the form
       const container = document.createElement("div");
 
       // Create the form component with props
-      const formCtor = createVNode(AssignBtnForm, {
+      const formCtor = h(AssignBtnForm, {
         providers: this.providers,
+        onUpdateBug: (bug) => (externalBugId.value = bug),
+        onUpdateProvider: (provider) => (selectedProvider.value = provider),
       });
 
-      formCtor.appContext = getCurrentInstance()?.appContext;
-
       // Mount the component to get the actual DOM element
       render(formCtor, container);
 
@@ -49,8 +52,8 @@ export default defineComponent({
         try {
           const data = await assignExternalBug(
             this.bucket,
-            formCtor.props.provider,
-            formCtor.props.bug,
+            externalBugId.value,
+            selectedProvider.value,
           );
           window.location.href = data.url;
         } catch (err) {

server/frontend/src/components/Signatures/AssignBtnForm.vue

@@ -2,15 +2,25 @@
   <div class="table">
     <div class="tr">
       <label class="td" for="provider">Bug provider</label>
-      <select v-model="selectedProvider" class="td" name="provider">
+      <select
+        v-model="selectedProvider"
+        class="td"
+        name="provider"
+        @change="$emit('update-provider', selectedProvider)"
+      >
         <option v-for="p in providers" :key="p.id" :value="p.id">
           {{ p.hostname }}
         </option>
       </select>
     </div>
     <div class="tr">
       <label class="td" for="bug_id">Bug ID</label>
-      <input v-model="externalBugId" name="bug_id" maxlength="255" />
+      <input
+        v-model="externalBugId"
+        maxlength="255"
+        name="bug_id"
+        @change="$emit('update-bug', externalBugId)"
+      />
     </div>
   </div>
 </template>
@@ -26,13 +36,14 @@ export default defineComponent({
     },
   },
 
-  setup(props) {
+  setup(props, context) {
     const externalBugId = ref(null);
     const selectedProvider = ref(null);
 
     onMounted(() => {
       if (props.providers.length > 0) {
         selectedProvider.value = props.providers[0].id;
+        context.emit("update-provider", selectedProvider.value);
       }
     });