From e71fcc7c261163006c6c5d647e04eaa3e2ecc899 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 16 Sep 2020 13:17:51 -0400
Subject: [PATCH] Rework component mounting to not use jQuery.

---
 .../components/JobDestinationParams/mount.js    |  6 +++---
 client/src/components/JobMetrics/mount.js       | 12 ++++++------
 client/src/components/JobParameters/mount.js    | 17 ++++++++---------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/client/src/components/JobDestinationParams/mount.js b/client/src/components/JobDestinationParams/mount.js
index 271db1a40b9..42922881918 100644
--- a/client/src/components/JobDestinationParams/mount.js
+++ b/client/src/components/JobDestinationParams/mount.js
@@ -1,13 +1,13 @@
 /**
  * Endpoint for mounting job metrics from non-Vue environment.
  */
-import $ from "jquery";
 import JobDestinationParams from "./JobDestinationParams.vue";
 import { mountVueComponent } from "utils/mountVueComponent";
 
 export const mountDestinationParams = (propsData = {}) => {
-    $(".job-destination-parameters").each((index, el) => {
-        propsData.jobId = $(el).attr("job_id");
+    const elements = document.querySelectorAll(".job-destination-parameters");
+    Array.prototype.forEach.call(elements, function (el, i) {
+        propsData.jobId = el.getAttribute("job_id");
         mountVueComponent(JobDestinationParams)(propsData, el);
     });
 };
diff --git a/client/src/components/JobMetrics/mount.js b/client/src/components/JobMetrics/mount.js
index 1ef820abd69..796a0008ee4 100644
--- a/client/src/components/JobMetrics/mount.js
+++ b/client/src/components/JobMetrics/mount.js
@@ -1,16 +1,16 @@
 /**
  * Endpoint for mounting job metrics from non-Vue environment.
  */
-import $ from "jquery";
 import JobMetrics from "./JobMetrics.vue";
 import { mountVueComponent } from "utils/mountVueComponent";
 
 export const mountJobMetrics = (propsData = {}) => {
-    $(".job-metrics").each((index, el) => {
-        const jobId = $(el).attr("job_id");
-        const aws_estimate = $(el).attr("aws_estimate");
-        const datasetId = $(el).attr("dataset_id");
-        const datasetType = $(el).attr("dataset_type") || "hda";
+    const elements = document.querySelectorAll(".job-metrics");
+    Array.prototype.forEach.call(elements, function (el, i) {
+        const jobId = el.getAttribute("job_id");
+        const aws_estimate = el.getAttribute("aws_estimate");
+        const datasetId = el.getAttribute("dataset_id");
+        const datasetType = el.getAttribute("dataset_type") || "hda";
         propsData.jobId = jobId;
         propsData.datasetId = datasetId;
         propsData.datasetType = datasetType;
diff --git a/client/src/components/JobParameters/mount.js b/client/src/components/JobParameters/mount.js
index a8aef48fa57..2a75d872115 100644
--- a/client/src/components/JobParameters/mount.js
+++ b/client/src/components/JobParameters/mount.js
@@ -1,21 +1,20 @@
 /**
  * Endpoint for mounting job parameters from non-Vue environment.
  */
-import $ from "jquery";
-import Vue from "vue";
 import JobParameters from "./JobParameters.vue";
+import { mountVueComponent } from "utils/mountVueComponent";
 
 export const mountJobParameters = (propsData = {}) => {
-    $(".job-parameters").each((index, el) => {
-        const jobId = $(el).attr("job_id");
-        const datasetId = $(el).attr("dataset_id");
-        const param = $(el).attr("param");
-        const datasetType = $(el).attr("dataset_type") || "hda";
-        const component = Vue.extend(JobParameters);
+    const elements = document.querySelectorAll(".job-parameters");
+    Array.prototype.forEach.call(elements, function (el, i) {
+        const jobId = el.getAttribute("job_id");
+        const datasetId = el.getAttribute("dataset_id");
+        const param = el.getAttribute("param") || undefined;
+        const datasetType = el.getAttribute("dataset_type") || "hda";
         propsData.jobId = jobId;
         propsData.datasetId = datasetId;
         propsData.param = param;
         propsData.datasetType = datasetType;
-        return new component({ propsData: propsData }).$mount(el);
+        mountVueComponent(JobParameters)(propsData, el);
     });
 };