Drop all Vue.set usage for vue3

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 **/

client/src/components/FilesDialog/FilesDialog.vue

@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton } from "bootstrap-vue";
-import Vue, { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 import { UrlTracker } from "@/components/DataDialog/utilities";
 import { isSubPath } from "@/components/FilesDialog/utilities";
@@ -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) {

client/src/components/Form/FormDisplay.vue

@@ -16,8 +16,6 @@
 </template>
 
 <script>
-import Vue from "vue";
-
 import FormInputs from "./FormInputs";
 import { matchInputs, validateInputs, visitInputs } from "./utilities";
 
@@ -175,7 +173,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();
         },

client/src/components/History/Content/GenericElement.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from "vue";
-import Vue, { ref } from "vue";
+import { ref } from "vue";
 
 import type { components } from "@/schema";
 
@@ -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>
 

client/src/components/History/CurrentHistory/HistoryPanel.vue

@@ -159,7 +159,6 @@ import { rewatchHistory } from "store/historyStore/model/watchHistory";
 import { useHistoryItemsStore } from "stores/history/historyItemsStore";
 import { useHistoryStore } from "stores/historyStore";
 import { getOperatorForAlias } from "utils/filtering";
-import Vue from "vue";
 
 import HistoryCounter from "./HistoryCounter";
 import HistoryDetails from "./HistoryDetails";
@@ -387,7 +386,7 @@ export default {
             rewatchHistory();
         },
         setInvisible(item) {
-            Vue.set(this.invisible, item.hid, true);
+            this.invisible[item.hid] = true;
         },
         onTagChange(item, newTags) {
             item.tags = newTags;

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;
         },
     },
 };

client/src/components/ToolsList/ToolsListTable.vue

@@ -29,7 +29,6 @@
 
 <script>
 import { useGlobalUploadModal } from "composables/globalUploadModal";
-import Vue from "vue";
 import infiniteScroll from "vue-infinite-scroll";
 
 import { fetchData } from "./services";
@@ -99,12 +98,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'
                 }
             });
         },

client/src/components/Upload/CompositeBox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { BButton } from "bootstrap-vue";
-import Vue, { computed, ref } from "vue";
+import { computed, ref } from "vue";
 
 import { uploadPayload } from "@/utils/upload-payload.js";
 import { uploadSubmit } from "@/utils/upload-submit.js";
@@ -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();

client/src/components/Upload/DefaultBox.vue

@@ -4,7 +4,7 @@ import { faCopy, faEdit, faFolderOpen, faLaptop } from "@fortawesome/free-solid-
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { filesDialog } from "utils/data";
-import Vue, { computed, ref } from "vue";
+import { computed, ref } from "vue";
 
 import { UploadQueue } from "@/utils/upload-queue.js";
 
@@ -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 */

client/src/components/admin/Notifications/BroadcastForm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BCol, BFormGroup, BFormInput, BRow } from "bootstrap-vue";
-import Vue, { computed, ref } from "vue";
+import { computed, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { createBroadcast, loadBroadcast, updateBroadcast } from "@/components/admin/Notifications/broadcasts.services";
@@ -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({

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;
     },
 };
 

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;
         }
     }
 }

client/src/store/invocationStore.js

@@ -1,6 +1,5 @@
 import axios from "axios";
 import { getAppRoot } from "onload/loadConfig";
-import Vue from "vue";
 
 export const state = {
     invocationDetailsById: {},
@@ -37,13 +36,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;
     },
 };
 

client/src/store/jobDestinationParametersStore.js

@@ -1,6 +1,5 @@
 import axios from "axios";
 import { getAppRoot } from "onload/loadConfig";
-import Vue from "vue";
 
 export const state = {
     jobDestinationParametersByJobId: {},
@@ -21,7 +20,7 @@ const actions = {
 
 const mutations = {
     saveJobDestinationParamsForJobId: (state, { jobId, jobDestinationParams }) => {
-        Vue.set(state.jobDestinationParametersByJobId, jobId, jobDestinationParams);
+        state.jobDestinationParametersByJobId[jobId] = jobDestinationParams;
     },
 };
 

client/src/stores/broadcastsStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import Vue, { computed, ref } from "vue";
+import { computed, ref } from "vue";
 
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import type { components } from "@/schema";
@@ -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) {

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;
         }
     }
 

client/src/stores/history/historyItemsStore.js

@@ -9,7 +9,6 @@ import { defineStore } from "pinia";
 import { mergeArray } from "store/historyStore/model/utilities";
 import { LastQueue } from "utils/promise-queue";
 import { urlData } from "utils/url";
-import Vue from "vue";
 
 const limit = 100;
 const queue = new LastQueue();
@@ -84,7 +83,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;
                     });
                 }
             });

client/src/stores/historyStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import Vue, { computed, ref } from "vue";
+import { computed, ref } from "vue";
 
 import { HistoryFilters } from "@/components/History/HistoryFilters";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
@@ -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[]) {

client/src/stores/jobMetricsStore.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { defineStore } from "pinia";
-import Vue, { computed, ref } from "vue";
+import { computed, ref } from "vue";
 
 import { prependPath } from "@/utils/redirect";
 
@@ -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 {

client/src/stores/jobStore.ts

@@ -5,7 +5,6 @@
 
 import axios from "axios";
 import { defineStore } from "pinia";
-import Vue from "vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
 
@@ -46,7 +45,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;