used confirmDialog composable instead of a browser confirm

- Added `html` option to `confirmDialog` to allow for HTML message - The `uploadPayload` method had to be made an async one due to the confirm option.
galaxyproject · Dec 11, 2024 · 9d43341 · 9d43341
1 parent 2639488
commit 9d43341
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 29 deletions.
diff --git a/client/src/components/ConfirmDialog.js b/client/src/components/ConfirmDialog.js
@@ -1,13 +1,22 @@
 export default {
     methods: {
         async confirm(message, options = {}) {
+            // To allow for HTML content in the message, we need to convert it to a VNode.
+            // https://bootstrap-vue.org/docs/components/modal#message-box-notes
+            if (options.html) {
+                message = this.htmlToVNode(message);
+            }
+
             return this.$bvModal.msgBoxConfirm(message, {
                 title: "Please Confirm",
                 titleClass: "h-md",
                 hideHeaderClose: false,
                 ...options,
             });
         },
+        htmlToVNode(html) {
+            return [this.$createElement("div", { domProps: { innerHTML: html } })];
+        },
     },
     render() {
         return {};

diff --git a/client/src/components/Upload/CompositeBox.vue b/client/src/components/Upload/CompositeBox.vue
@@ -100,14 +100,15 @@ function eventReset() {
 }
 
 /** Start upload process */
-function eventStart() {
+async function eventStart() {
     uploadValues.value.forEach((model) => {
         model.dbKey = dbKey.value;
         model.extension = extension.value;
     });
     try {
+        const data = await uploadPayload(uploadValues.value, props.historyId, true);
         uploadSubmit({
-            data: uploadPayload(uploadValues.value, props.historyId, true),
+            data,
             error: eventError,
             progress: eventProgress,
             success: eventSuccess,

diff --git a/client/src/components/Upload/UploadContainer.vue b/client/src/components/Upload/UploadContainer.vue
@@ -125,8 +125,8 @@ function immediateUpload(files) {
     }
 }
 
-function toData(items, history_id, composite = false) {
-    return uploadPayload(items, history_id, composite);
+async function toData(items, history_id, composite = false) {
+    return await uploadPayload(items, history_id, composite);
 }
 
 async function loadExtensions() {

diff --git a/client/src/utils/data.js b/client/src/utils/data.js
@@ -88,14 +88,16 @@ function _mountSelectionDialog(clazz, options) {
  * Creates a history dataset by submitting an upload request
  * TODO: This should live somewhere else.
  */
-export function create(options) {
+export async function create(options) {
     async function getHistory() {
         if (!options.history_id) {
             return getCurrentGalaxyHistory();
         }
         return options.history_id;
     }
-    getHistory().then((history_id) => {
+    try {
+        const history_id = await getHistory();
+        const payload = await uploadPayload([options], history_id);
         uploadSubmit({
             success: (response) => {
                 refreshContentsWrapper();
@@ -105,10 +107,15 @@ export function create(options) {
             },
             error: options.error,
             data: {
-                payload: uploadPayload([options], history_id),
+                payload,
             },
         });
-    });
+    } catch (err) {
+        console.error("Error creating history dataset via upload:", err);
+        if (options.error) {
+            options.error(err);
+        }
+    }
 }
 
 export function refreshContentsWrapper() {

diff --git a/client/src/utils/upload-payload.js b/client/src/utils/upload-payload.js
@@ -1,3 +1,5 @@
+import { useConfirmDialog } from "@/composables/confirmDialog";
+
 export const DEFAULT_FILE_NAME = "New File";
 export const URI_PREFIXES = [
     "http://",
@@ -25,33 +27,46 @@ export function isGalaxyFile(content) {
     const galaxyRegexPattern = /Galaxy\d+-\[(.*?)\](\..+)/;
     const match = content.match(galaxyRegexPattern);
     if (match) {
-        console.log(`Uploaded file has previous Galaxy annotated filename: "${content}"`);
         return true;
     } else {
         return false;
     }
 }
 
-export function uploadPayload(items, historyId, composite = false) {
+export async function uploadPayload(items, historyId, composite = false) {
     const files = [];
-    const elements = items
-        .map((item) => {
+    const elements = await Promise.all(
+        items.map(async (item) => {
             if (!item.optional || item.fileSize > 0) {
                 // avoid submitting default file name, server will set file name
                 let fileName = item.fileName;
                 if (fileName === DEFAULT_FILE_NAME) {
                     fileName = null;
                 }
-                if (isGalaxyFile(item.fileName)) {
+
+                if (!composite && isGalaxyFile(item.fileName)) {
                     const modifiedFileName = item.fileName.replace(/Galaxy\d+-\[(.*?)\](\..+)/, "$1");
-                    const keepModifiedName = confirm(
-                        `This looks like a previous Galaxy file. We have renamed it.\n\nOriginal Name: ${item.fileName}\nModified Name: ${modifiedFileName}\n\n Do you want to keep the modified name?`
+
+                    const { confirm: confirmFromDialog } = useConfirmDialog();
+                    const keepModifiedName = await confirmFromDialog(
+                        `This looks like a previous Galaxy file. We have renamed it.<br /><br />
+                        <b>Original Name:</b> <i>${item.fileName}</i><br />
+                        <b>Modified Name:</b> <i>${modifiedFileName}</i><br /><br />
+                        Do you want to keep the modified name?`,
+                        {
+                            title: "Rename potential Galaxy file",
+                            okTitle: "Rename",
+                            okVariant: "primary",
+                            cancelTitle: "Keep Original",
+                            html: true,
+                        }
                     );
                     if (keepModifiedName) {
                         item.fileName = modifiedFileName;
                         fileName = modifiedFileName;
                     }
                 }
+
                 // consolidate exclusive file content attributes
                 const urlContent = (item.fileUri || item.filePath || item.fileContent || "").trim();
                 const hasFileData = item.fileData && item.fileData.size > 0;
@@ -115,21 +130,23 @@ export function uploadPayload(items, historyId, composite = false) {
                 }
             }
         })
-        .filter((item) => item)
-        .flat();
-    if (elements.length === 0) {
+    );
+
+    const flattenedElements = elements.filter((item) => item).flat();
+    if (flattenedElements.length === 0) {
         throw new Error("No valid items provided.");
     }
+
     const target = {
         destination: { type: "hdas" },
-        elements: elements,
+        elements: flattenedElements,
     };
     if (composite) {
         const compositeItems = [
             {
                 src: "composite",
-                dbkey: elements[0].dbkey,
-                ext: elements[0].ext,
+                dbkey: flattenedElements[0].dbkey,
+                ext: flattenedElements[0].ext,
                 composite: {
                     items: target.elements,
                 },

diff --git a/client/src/utils/upload-queue.js b/client/src/utils/upload-queue.js
@@ -67,11 +67,11 @@ export class UploadQueue {
     }
 
     // Initiate upload process
-    start() {
+    async start() {
         if (!this.isRunning) {
             this.isRunning = true;
-            this._processUrls();
-            this._process();
+            await this._processUrls();
+            await this._process();
         }
     }
 
@@ -81,7 +81,7 @@ export class UploadQueue {
     }
 
     // Process an upload, recursive
-    _process() {
+    async _process() {
         if (this.size === 0 || this.isPaused) {
             this.isRunning = false;
             this.isPaused = false;
@@ -100,19 +100,19 @@ export class UploadQueue {
             if (!item.targetHistoryId) {
                 throw new Error(`Missing target history for upload item [${index}] ${item.fileName}`);
             }
-            const data = uploadPayload([item], item.targetHistoryId);
+            const data = await uploadPayload([item], item.targetHistoryId);
             // Initiate upload request
             this._processSubmit(index, data);
         } catch (e) {
             // Parse error message for failed upload item
             this.opts.error(index, String(e));
             // Continue queue
-            this._process();
+            await this._process();
         }
     }
 
     // Submit remote files as single batch request per target history
-    _processUrls() {
+    async _processUrls() {
         const batchByHistory = {};
         for (const index of this.queue.keys()) {
             const model = this.opts.get(index);
@@ -131,7 +131,7 @@ export class UploadQueue {
         for (const historyId in batchByHistory) {
             const list = batchByHistory[historyId];
             try {
-                const data = uploadPayload(list, historyId);
+                const data = await uploadPayload(list, historyId);
                 sendPayload(data, {
                     success: (message) => {
                         list.forEach((model) => {