From d3c55064247eb5c2f02bd49053349a31850d3cea Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 23 Oct 2023 13:49:15 -0400
Subject: [PATCH] Drop all Vue.set usage for vue3

---
 client/src/components/DataDialog/DataDialog.vue    |  2 +-
 client/src/components/FilesDialog/FilesDialog.vue  |  2 +-
 client/src/components/Form/FormDisplay.vue         |  2 +-
 .../components/History/Content/GenericElement.vue  |  2 +-
 .../History/CurrentHistory/HistoryPanel.vue        |  2 +-
 .../src/components/RuleBuilder/ColumnSelector.vue  |  5 ++---
 client/src/components/ToolsList/ToolsListTable.vue |  8 ++++----
 client/src/components/Upload/CompositeBox.vue      |  2 +-
 client/src/components/Upload/DefaultBox.vue        |  2 +-
 .../admin/Notifications/BroadcastForm.vue          |  2 +-
 client/src/store/datasetExtFilesStore.js           |  3 +--
 client/src/store/historyStore/model/utilities.js   |  6 ++----
 client/src/store/invocationStore.js                |  6 +++---
 client/src/store/jobDestinationParametersStore.js  |  2 +-
 client/src/stores/broadcastsStore.ts               |  2 +-
 client/src/stores/datasetStore.ts                  |  8 ++++----
 client/src/stores/history/historyItemsStore.js     |  2 +-
 client/src/stores/historyStore.ts                  |  4 ++--
 client/src/stores/jobMetricsStore.ts               |  4 ++--
 client/src/stores/jobStore.ts                      |  2 +-
 client/src/stores/toolStore.ts                     |  6 +++---
 client/src/stores/workflowConnectionStore.ts       |  2 +-
 client/src/stores/workflowEditorStateStore.ts      | 14 ++++++--------
 client/src/stores/workflowStepStore.ts             | 10 +++++-----
 24 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/client/src/components/DataDialog/DataDialog.vue b/client/src/components/DataDialog/DataDialog.vue
index 8f4874b67df2..e295309b093d 100644
--- a/client/src/components/DataDialog/DataDialog.vue
+++ b/client/src/components/DataDialog/DataDialog.vue
@@ -123,7 +123,7 @@ export default {
                 if (item.isLeaf) {
                     _rowVariant = this.model.exists(item.id) ? "success" : "default";
                 }
-                Vue.set(item, "_rowVariant", _rowVariant);
+                item._rowVariant = _rowVariant;
             }
         },
         /** Collects selected datasets in value array **/
diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index f96306b674ca..230606c521a8 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -182,7 +182,7 @@ function formatRows() {
         else if (!item.isLeaf) {
             _rowVariant = getIcon(isDirectorySelected(item.id), item.url);
         }
-        Vue.set(item, "_rowVariant", _rowVariant);
+        item._rowVariant = _rowVariant;
     }
     allSelected.value = checkIfAllSelected();
     if (currentDirectory.value?.url) {
diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 6fe1e7128ac5..63d94fcb4045 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -175,7 +175,7 @@ export default {
         onCloneInputs() {
             this.formInputs = JSON.parse(JSON.stringify(this.inputs));
             visitInputs(this.formInputs, (input) => {
-                Vue.set(input, "error", null);
+                input.error = null;
             });
             this.onCreateIndex();
         },
diff --git a/client/src/components/History/Content/GenericElement.vue b/client/src/components/History/Content/GenericElement.vue
index 7205c0e19685..e44f7d08f9a5 100644
--- a/client/src/components/History/Content/GenericElement.vue
+++ b/client/src/components/History/Content/GenericElement.vue
@@ -17,7 +17,7 @@ const expandCollections = ref({});
 const expandDatasets = ref({});
 
 function toggle(expansionMap: Record<string, boolean>, itemId: string) {
-    Vue.set(expansionMap, itemId, !expansionMap[itemId]);
+    expansionMap[itemId] = !expansionMap[itemId];
 }
 </script>
 
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 7704b82e70a8..17b76bb2a57b 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -387,7 +387,7 @@ export default {
             rewatchHistory();
         },
         setInvisible(item) {
-            Vue.set(this.invisible, item.hid, true);
+            this.invisible[item.hid] = true;
         },
         onTagChange(item, newTags) {
             item.tags = newTags;
diff --git a/client/src/components/RuleBuilder/ColumnSelector.vue b/client/src/components/RuleBuilder/ColumnSelector.vue
index 5acc6d14739c..0711dd8ada86 100644
--- a/client/src/components/RuleBuilder/ColumnSelector.vue
+++ b/client/src/components/RuleBuilder/ColumnSelector.vue
@@ -42,7 +42,6 @@
 <script>
 import Select2 from "components/Select2";
 import _l from "utils/localization";
-import Vue from "vue";
 
 export default {
     components: {
@@ -130,8 +129,8 @@ export default {
         },
         moveUp(value) {
             const swapVal = this.target[value - 1];
-            Vue.set(this.target, value - 1, this.target[value]);
-            Vue.set(this.target, value, swapVal);
+            this.target[value - 1] = this.target[value];
+            this.target[value] = swapVal;
         },
     },
 };
diff --git a/client/src/components/ToolsList/ToolsListTable.vue b/client/src/components/ToolsList/ToolsListTable.vue
index 32432a74f7a9..242677959eff 100644
--- a/client/src/components/ToolsList/ToolsListTable.vue
+++ b/client/src/components/ToolsList/ToolsListTable.vue
@@ -99,12 +99,12 @@ export default {
         async fetchHelp(tool) {
             await fetchData(`api/tools/${tool.id}/build`).then((response) => {
                 const help = response.help;
-                Vue.set(tool, "_showDetails", false); // maybe not needed
+                tool._showDetails = false; // maybe not needed
                 if (help && help != "\n") {
-                    Vue.set(tool, "help", help);
-                    Vue.set(tool, "summary", this.parseHelp(help));
+                    tool.help = help;
+                    tool.summary = this.parseHelp(help);
                 } else {
-                    Vue.set(tool, "help", ""); // for cases where helpText == '\n'
+                    tool.help = ""; // for cases where helpText == '\n'
                 }
             });
         },
diff --git a/client/src/components/Upload/CompositeBox.vue b/client/src/components/Upload/CompositeBox.vue
index 33dcbebccd83..dc76a404bf1f 100644
--- a/client/src/components/Upload/CompositeBox.vue
+++ b/client/src/components/Upload/CompositeBox.vue
@@ -144,7 +144,7 @@ function inputExtension(newExtension) {
                 description: item.description || item.name,
                 optional: item.optional,
             };
-            Vue.set(uploadItems.value, index, uploadModel);
+            uploadItems.value[index] = uploadModel;
         });
     }
     restoreStatus();
diff --git a/client/src/components/Upload/DefaultBox.vue b/client/src/components/Upload/DefaultBox.vue
index 9f150499b8b6..a940f1c81248 100644
--- a/client/src/components/Upload/DefaultBox.vue
+++ b/client/src/components/Upload/DefaultBox.vue
@@ -141,7 +141,7 @@ function eventAnnounce(index, file) {
         fileSize: file.size,
         fileUri: file.uri,
     };
-    Vue.set(uploadItems.value, index, uploadModel);
+    uploadItems.value[index] = uploadModel;
 }
 
 /** Populates collection builder with uploaded files */
diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index c8ad68ab7871..c47475e4930f 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -78,7 +78,7 @@ function convertUTCtoLocal(utcTimeString: string) {
 
 function addActionLink() {
     if (!broadcastData.value.content.action_links) {
-        Vue.set(broadcastData.value.content, "action_links", []);
+        broadcastData.value.content.action_links = [];
     }
 
     broadcastData.value.content.action_links?.push({
diff --git a/client/src/store/datasetExtFilesStore.js b/client/src/store/datasetExtFilesStore.js
index 8ae400479093..6af27a2c5c10 100644
--- a/client/src/store/datasetExtFilesStore.js
+++ b/client/src/store/datasetExtFilesStore.js
@@ -1,6 +1,5 @@
 import axios from "axios";
 import { getAppRoot } from "onload/loadConfig";
-import Vue from "vue";
 
 export const state = {
     datasetExtFilesById: {},
@@ -23,7 +22,7 @@ const actions = {
 
 const mutations = {
     saveDatasetExtFiles: (state, { history_dataset_id, datasetExtFiles }) => {
-        Vue.set(state.datasetExtFilesById, history_dataset_id, datasetExtFiles);
+        state.datasetExtFilesById[history_dataset_id] = datasetExtFiles;
     },
 };
 
diff --git a/client/src/store/historyStore/model/utilities.js b/client/src/store/historyStore/model/utilities.js
index 86b5ac13bc61..fb69e2fed51c 100644
--- a/client/src/store/historyStore/model/utilities.js
+++ b/client/src/store/historyStore/model/utilities.js
@@ -1,9 +1,7 @@
-import Vue from "vue";
-
 /* This function merges the existing data with new incoming data. */
 export function mergeArray(id, payload, items, itemKey) {
     if (!items[id]) {
-        Vue.set(items, id, []);
+        items[id] = [];
     }
     const itemArray = items[id];
     for (const item of payload) {
@@ -16,7 +14,7 @@ export function mergeArray(id, payload, items, itemKey) {
                 });
             }
         } else {
-            Vue.set(itemArray, itemIndex, item);
+            itemArray[itemIndex] = item;
         }
     }
 }
diff --git a/client/src/store/invocationStore.js b/client/src/store/invocationStore.js
index 348b43aa3e96..7ccaca5731a2 100644
--- a/client/src/store/invocationStore.js
+++ b/client/src/store/invocationStore.js
@@ -37,13 +37,13 @@ const actions = {
 
 const mutations = {
     saveInvocationForId: (state, { invocationId, invocationData }) => {
-        Vue.set(state.invocationDetailsById, invocationId, invocationData);
+        state.invocationDetailsById[invocationId] = invocationData;
     },
     saveInvocationJobsSummaryForId: (state, { invocationId, jobsSummary }) => {
-        Vue.set(state.invocationJobsSummaryById, invocationId, jobsSummary);
+        state.invocationJobsSummaryById[invocationId] = jobsSummary;
     },
     saveInvocationStepById: (state, { invocationStepId, invocationStepData }) => {
-        Vue.set(state.invocationStepById, invocationStepId, invocationStepData);
+        state.invocationStepById[invocationStepId] = invocationStepData;
     },
 };
 
diff --git a/client/src/store/jobDestinationParametersStore.js b/client/src/store/jobDestinationParametersStore.js
index a1cbb66caac1..ea2fa1d3c76f 100644
--- a/client/src/store/jobDestinationParametersStore.js
+++ b/client/src/store/jobDestinationParametersStore.js
@@ -21,7 +21,7 @@ const actions = {
 
 const mutations = {
     saveJobDestinationParamsForJobId: (state, { jobId, jobDestinationParams }) => {
-        Vue.set(state.jobDestinationParametersByJobId, jobId, jobDestinationParams);
+        state.jobDestinationParametersByJobId[jobId] = jobDestinationParams;
     },
 };
 
diff --git a/client/src/stores/broadcastsStore.ts b/client/src/stores/broadcastsStore.ts
index a39fd3880406..68772796e798 100644
--- a/client/src/stores/broadcastsStore.ts
+++ b/client/src/stores/broadcastsStore.ts
@@ -37,7 +37,7 @@ export const useBroadcastsStore = defineStore("broadcastsStore", () => {
     }
 
     function dismissBroadcast(broadcast: BroadcastNotification) {
-        Vue.set(dismissedBroadcasts.value, broadcast.id, { expiration_time: broadcast.expiration_time });
+        dismissedBroadcasts.value[broadcast.id] = { expiration_time: broadcast.expiration_time };
     }
 
     function hasExpired(expirationTimeStr?: string) {
diff --git a/client/src/stores/datasetStore.ts b/client/src/stores/datasetStore.ts
index 3289d2c65ee1..7c07b1a4c03b 100644
--- a/client/src/stores/datasetStore.ts
+++ b/client/src/stores/datasetStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import Vue, { computed, ref } from "vue";
+import { computed, ref } from "vue";
 
 import { DatasetDetails, DatasetEntry, HistoryContentItemBase } from "./services";
 import { fetchDatasetDetails } from "./services/dataset.service";
@@ -25,10 +25,10 @@ export const useDatasetStore = defineStore("datasetStore", () => {
     });
 
     async function fetchDataset(params: { id: string }) {
-        Vue.set(loadingDatasets.value, params.id, true);
+        loadingDatasets.value[params.id] = true;
         try {
             const dataset = await fetchDatasetDetails(params);
-            Vue.set(storedDatasets.value, dataset.id, dataset);
+            storedDatasets.value[dataset.id] = dataset;
             return dataset;
         } finally {
             delete loadingDatasets.value[params.id];
@@ -40,7 +40,7 @@ export const useDatasetStore = defineStore("datasetStore", () => {
             (entry) => entry.history_content_type === "dataset"
         ) as DatasetEntry[];
         for (const dataset of datasetList) {
-            Vue.set(storedDatasets.value, dataset.id, dataset);
+            storedDatasets.value[dataset.id] = dataset;
         }
     }
 
diff --git a/client/src/stores/history/historyItemsStore.js b/client/src/stores/history/historyItemsStore.js
index ba76bbb3a7db..115bcbe2b971 100644
--- a/client/src/stores/history/historyItemsStore.js
+++ b/client/src/stores/history/historyItemsStore.js
@@ -84,7 +84,7 @@ export const useHistoryItemsStore = defineStore("historyItemsStore", {
                 if (relatedHid) {
                     payload.forEach((item) => {
                         const relationKey = `${historyId}-${relatedHid}-${item.hid}`;
-                        Vue.set(state.relatedItems, relationKey, true);
+                        state.relatedItems[relationKey] = true;
                     });
                 }
             });
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index 5e9216cd59a9..4220f3ee50f4 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -98,11 +98,11 @@ export const useHistoryStore = defineStore("historyStore", () => {
     }
 
     function setFilterText(historyId: string, filterText: string) {
-        Vue.set(storedFilterTexts.value, historyId, filterText);
+        storedFilterTexts.value[historyId] = filterText;
     }
 
     function setHistory(history: HistorySummary) {
-        Vue.set(storedHistories.value, history.id, history);
+        storedHistories.value[history.id] = history;
     }
 
     function setHistories(histories: HistorySummary[]) {
diff --git a/client/src/stores/jobMetricsStore.ts b/client/src/stores/jobMetricsStore.ts
index e0979cba99d6..efb241a48139 100644
--- a/client/src/stores/jobMetricsStore.ts
+++ b/client/src/stores/jobMetricsStore.ts
@@ -39,7 +39,7 @@ export const useJobMetricsStore = defineStore("jobMetricsStore", () => {
         const jobMetrics = (await axios.get<JobMetric[]>(path)).data;
         const jobMetricsObject = datasetType == "hda" ? jobMetricsByHdaId : jobMetricsByLddaId;
 
-        Vue.set(jobMetricsObject.value, datasetId, jobMetrics);
+        jobMetricsObject.value[datasetId] = jobMetrics;
     }
 
     async function fetchJobMetricsForJobId(jobId: string) {
@@ -50,7 +50,7 @@ export const useJobMetricsStore = defineStore("jobMetricsStore", () => {
         const path = prependPath(`api/jobs/${jobId}/metrics`);
         const jobMetrics = (await axios.get<JobMetric[]>(path)).data;
 
-        Vue.set(jobMetricsByJobId.value, jobId, jobMetrics);
+        jobMetricsByJobId.value[jobId] = jobMetrics;
     }
 
     return {
diff --git a/client/src/stores/jobStore.ts b/client/src/stores/jobStore.ts
index 8cb0dc3317b7..b40b3db220cf 100644
--- a/client/src/stores/jobStore.ts
+++ b/client/src/stores/jobStore.ts
@@ -46,7 +46,7 @@ export const useJobStore = defineStore("jobStore", {
         },
         // Setters
         saveJobForJobId(jobId: string, job: Job) {
-            Vue.set(this.jobs, jobId, job);
+            this.jobs[jobId] = job;
         },
         saveLatestResponse(response: ResponseVal) {
             this.response = response;
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index f6c969cc46c7..680eab7ffb25 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -211,11 +211,11 @@ export const useToolStore = defineStore("toolStore", () => {
     }
 
     function saveToolForId(toolId: string, toolData: Tool) {
-        Vue.set(toolsById.value, toolId, toolData);
+        toolsById.value[toolId] = toolData;
     }
 
     function saveToolResults(whooshQuery: string, toolsData: Array<string>) {
-        Vue.set(toolResults.value, whooshQuery, toolsData);
+        toolResults.value[whooshQuery] = toolsData;
     }
 
     function saveAllTools(toolsData: Record<string, Tool>) {
@@ -223,7 +223,7 @@ export const useToolStore = defineStore("toolStore", () => {
     }
 
     function savePanelView(panelView: string, newPanel: { [id: string]: ToolSection | Tool }) {
-        Vue.set(panel.value, panelView, newPanel);
+        panel.value[panelView] = newPanel;
     }
 
     return {
diff --git a/client/src/stores/workflowConnectionStore.ts b/client/src/stores/workflowConnectionStore.ts
index 0e07f1d447d9..10c82ce63fea 100644
--- a/client/src/stores/workflowConnectionStore.ts
+++ b/client/src/stores/workflowConnectionStore.ts
@@ -81,7 +81,7 @@ export const useConnectionStore = (workflowId: string) => {
                 this.stepToConnections = updateStepToConnections(this.connections);
             },
             markInvalidConnection(this: State, connectionId: string, reason: string) {
-                Vue.set(this.invalidConnections, connectionId, reason);
+                this.invalidConnections[connectionId] = reason;
             },
             dropFromInvalidConnections(this: State, connectionId: string) {
                 delete this.invalidConnections[connectionId];
diff --git a/client/src/stores/workflowEditorStateStore.ts b/client/src/stores/workflowEditorStateStore.ts
index b7e5f1bdfbfb..48870596f064 100644
--- a/client/src/stores/workflowEditorStateStore.ts
+++ b/client/src/stores/workflowEditorStateStore.ts
@@ -63,17 +63,15 @@ export const useWorkflowStateStore = (workflowId: string) => {
         actions: {
             setInputTerminalPosition(stepId: number, inputName: string, position: InputTerminalPosition) {
                 if (!this.inputTerminals[stepId]) {
-                    Vue.set(this.inputTerminals, stepId, {});
+                    this.inputTerminals[stepId] = {};
                 }
-
-                Vue.set(this.inputTerminals[stepId]!, inputName, position);
+                this.inputTerminals[stepId]![inputName] = position;
             },
             setOutputTerminalPosition(stepId: number, outputName: string, position: OutputTerminalPosition) {
                 if (!this.outputTerminals[stepId]) {
-                    Vue.set(this.outputTerminals, stepId, reactive({}));
+                    this.outputTerminals[stepId] = reactive({});
                 }
-
-                Vue.set(this.outputTerminals[stepId]!, outputName, position);
+                this.outputTerminals[stepId]![outputName] = position;
             },
             deleteInputTerminalPosition(stepId: number, inputName: string) {
                 delete this.inputTerminals[stepId]?.[inputName];
@@ -88,13 +86,13 @@ export const useWorkflowStateStore = (workflowId: string) => {
                 this.scale = scale;
             },
             setStepPosition(stepId: number, position: UnwrapRef<UseElementBoundingReturn>) {
-                Vue.set(this.stepPosition, stepId, position);
+                this.stepPosition[stepId] = position;
             },
             deleteStepPosition(stepId: number) {
                 delete this.stepPosition[stepId];
             },
             setLoadingState(stepId: number, loading: boolean, error: string | undefined) {
-                Vue.set(this.stepLoadingState, stepId, { loading, error });
+                this.stepLoadingState[stepId] = { loading, error };
             },
         },
     })();
diff --git a/client/src/stores/workflowStepStore.ts b/client/src/stores/workflowStepStore.ts
index c7ba56181023..a4443d121407 100644
--- a/client/src/stores/workflowStepStore.ts
+++ b/client/src/stores/workflowStepStore.ts
@@ -206,7 +206,7 @@ export const useWorkflowStepStore = (workflowId: string) => {
             addStep(newStep: NewStep): Step {
                 const stepId = newStep.id ? newStep.id : this.getStepIndex + 1;
                 const step = Object.freeze({ ...newStep, id: stepId } as Step);
-                Vue.set(this.steps, stepId.toString(), step);
+                this.steps[stepId.toString()] = step;
                 const connectionStore = useConnectionStore(workflowId);
                 stepToConnections(step).map((connection) => connectionStore.addConnection(connection));
                 this.stepExtraInputs[step.id] = getStepExtraInputs(step);
@@ -239,16 +239,16 @@ export const useWorkflowStepStore = (workflowId: string) => {
                 this.stepExtraInputs[step.id] = getStepExtraInputs(step);
             },
             changeStepMapOver(stepId: number, mapOver: CollectionTypeDescriptor) {
-                Vue.set(this.stepMapOver, stepId, mapOver);
+                this.stepMapOver[stepId] = mapOver;
             },
             resetStepInputMapOver(stepId: number) {
-                Vue.set(this.stepInputMapOver, stepId, {});
+                this.stepInputMapOver[stepId] = {};
             },
             changeStepInputMapOver(stepId: number, inputName: string, mapOver: CollectionTypeDescriptor) {
                 if (this.stepInputMapOver[stepId]) {
-                    Vue.set(this.stepInputMapOver[stepId]!, inputName, mapOver);
+                    this.stepInputMapOver[stepId]![inputName] = mapOver;
                 } else {
-                    Vue.set(this.stepInputMapOver, stepId, { [inputName]: mapOver });
+                    this.stepInputMapOver[stepId] = { [inputName]: mapOver };
                 }
             },
             addConnection(connection: Connection) {