Drop all Vue.set usage for vue3

dannon · Oct 23, 2023 · d3c5506 · d3c5506
1 parent 2610671
commit d3c5506
Show file tree

Hide file tree

Showing 24 changed files with 47 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -211,19 +211,19 @@ 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>) {
         toolsById.value = toolsData;
     }
 
     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
@@ -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
@@ -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
@@ -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) {