Merge pull request #21038 from guerler/remove_jquery.000

Convert Modal to plain JavaScript and remove from Galaxy object

Author: guerler

client/src/bundleEntries.js

@@ -6,22 +6,18 @@
  * to exist until such time as we replace the overall application with a Vue component which
  * will handle initializations for components individually.
  *
- * legacy/grid_base.mako: window.bundleEntries.LegacyGridView
- * webapps/galaxy/dataset/tabular_chunked.mako: window.bundleEntries.createTabularDatasetChunkedView
- * webapps/galaxy/dataset/display.mako: window.bundleEntries.createTabularDatasetChunkedView
- * webapps/reports/run_stats.mako: window.bundleEntries.create_chart
- * webapps/reports/run_stats.mako: window.bundleEntries.create_histogram
- * tagging_common.mako: show_in_overlay
  */
+import { replaceChildrenWithComponent } from "utils/mountVueComponent";
 
-export { getGalaxyInstance, setGalaxyInstance } from "app";
+import TabularChunkedView from "components/Visualizations/Tabular/TabularChunkedView.vue";
+
+// legacy/grid_base.mako
 export { default as LegacyGridView } from "legacy/grid/grid-view";
-export { createTabularDatasetChunkedView } from "mvc/dataset/data";
-export { create_chart, create_histogram } from "reports/run_stats";
-export { Toast } from "ui/toast"; // TODO: remove when external consumers are updated/gone (IES right now)
 
-// Previously wandering around as window.thing = thing in the onload script
-export { show_in_overlay } from "layout/modal";
+// webapps/reports/run_stats.mako
+export { create_chart, create_histogram } from "reports/run_stats";
 
-// Used in common.mako
-export { default as store } from "storemodern";
+// webapps/galaxy/dataset/{ display | tabular_chunked }.mako
+export const createTabularDatasetChunkedView = (options) => {
+    return replaceChildrenWithComponent(options.parent_elt, TabularChunkedView, { options });
+};

client/src/components/Collections/ListCollectionCreator.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import "ui/hoverhighlight";
-
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faMinus, faSortAlphaDown, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

client/src/components/Collections/RuleBasedCollectionCreatorModal.js

@@ -1,57 +1,78 @@
 import _l from "utils/localization";
+import Modal from "utils/modal";
 import Vue from "vue";
 
 import { rawToTable } from "@/components/Collections/tables";
 
-import { collectionCreatorModalSetup } from "./common/modal";
+const modal = new Modal();
 
-function ruleBasedCollectionCreatorModal(elements, elementsType, importType, options) {
+async function ruleBasedCollectionCreatorModal(elements, elementsType, importType, options) {
     // importType in [datasets, collection]
     // elementsType in [raw, ftp, datasets]
     let title;
-    if (importType == "datasets") {
+    if (importType === "datasets") {
         title = _l("Build Rules for Uploading Datasets");
-    } else if (elementsType == "collection_contents") {
+    } else if (elementsType === "collection_contents") {
         title = _l("Build Rules for Applying to Existing Collection");
-    } else if (elementsType == "datasets" || elementsType == "library_datasets") {
+    } else if (elementsType === "datasets" || elementsType === "library_datasets") {
         title = _l("Build Rules for Creating Collection(s)");
     } else {
         title = _l("Build Rules for Uploading Collections");
     }
-    options.title = title;
-    // Prevents user from accidentally closing the modal by clicking outside the bounds
-    options.closing_events = false;
-    const { promise, showEl } = collectionCreatorModalSetup(options);
-    return import(/* webpackChunkName: "ruleCollectionBuilder" */ "components/RuleCollectionBuilder.vue").then(
-        (module) => {
-            var ruleCollectionBuilderInstance = Vue.extend(module.default);
-            var vm = document.createElement("div");
-            showEl(vm);
-            new ruleCollectionBuilderInstance({
-                propsData: {
-                    initialElements: elements,
-                    elementsType: elementsType,
-                    importType: importType,
-                    ftpUploadSite: options.ftpUploadSite,
-                    creationFn: options.creationFn,
-                    oncancel: options.oncancel,
-                    oncreate: options.oncreate,
-                    defaultHideSourceItems: options.defaultHideSourceItems,
-                    saveRulesFn: options.saveRulesFn,
-                    initialRules: options.initialRules,
-                },
-            }).$mount(vm);
-            return promise;
+
+    const promise = new Promise((resolve, reject) => {
+        options.oncancel = function () {
+            modal.hide();
+            resolve();
+        };
+        options.oncreate = function (response) {
+            modal.hide();
+            resolve(response);
+        };
+    });
+
+    const module = await import(/* webpackChunkName: "ruleCollectionBuilder" */ "components/RuleCollectionBuilder.vue");
+    const ruleCollectionBuilderInstance = Vue.extend(module.default);
+    const vm = document.createElement("div");
+
+    // Prepare modal
+    const titleSuffix = options.historyName ? `From history: <b>${options.historyName}</b>` : "";
+    const titleHtml = `<div class='d-flex justify-content-between unselectable'>
+        <span>${title}</span>
+        <span>${titleSuffix}</span>
+    </div>`;
+    modal.show({
+        title: titleHtml,
+        body: vm,
+        width: "85%",
+        height: "100%",
+    });
+
+    // Inject rule builder component
+    new ruleCollectionBuilderInstance({
+        propsData: {
+            initialElements: elements,
+            elementsType: elementsType,
+            importType: importType,
+            ftpUploadSite: options.ftpUploadSite,
+            creationFn: options.creationFn,
+            oncancel: options.oncancel,
+            oncreate: options.oncreate,
+            defaultHideSourceItems: options.defaultHideSourceItems,
+            saveRulesFn: options.saveRulesFn,
+            initialRules: options.initialRules,
         },
-    );
+    }).$mount(vm);
+
+    return promise;
 }
-function createCollectionViaRules(selection, defaultHideSourceItems = true) {
+
+export async function createCollectionViaRules(selection, defaultHideSourceItems = true) {
     let elements;
     let elementsType;
     let importType;
     const selectionType = selection.selectionType;
     if (!selectionType) {
-        // Have HDAs from the history panel.
         elements = selection.toJSON();
         elementsType = "datasets";
         importType = "collections";
@@ -64,17 +85,18 @@ function createCollectionViaRules(selection, defaultHideSourceItems = true) {
         elementsType = selection.selectionType;
         importType = selection.dataType || "collections";
     }
-    const promise = ruleBasedCollectionCreatorModal(elements, elementsType, importType, {
-        ftpUploadSite: selection.ftpUploadSite,
-        defaultHideSourceItems: defaultHideSourceItems,
-        creationFn: function (elements, collectionType, name, hideSourceItems) {
-            return selection.createHDCA(elements, collectionType, name, hideSourceItems);
-        },
-    });
-    return promise;
-}
 
-export default {
-    ruleBasedCollectionCreatorModal: ruleBasedCollectionCreatorModal,
-    createCollectionViaRules: createCollectionViaRules,
-};
+    try {
+        const result = await ruleBasedCollectionCreatorModal(elements, elementsType, importType, {
+            ftpUploadSite: selection.ftpUploadSite,
+            defaultHideSourceItems: defaultHideSourceItems,
+            creationFn: async (elements, collectionType, name, hideSourceItems) => {
+                return selection.createHDCA(elements, collectionType, name, hideSourceItems);
+            },
+        });
+        return result;
+    } catch (error) {
+        console.error("Error in rule-based collection creation:", error);
+        throw error;
+    }
+}

client/src/components/Collections/common/buildCollectionModal.ts

@@ -1,19 +1,11 @@
 /**
- * TODO: Update this description...
- * Temporary adapter to launch bootstrap modals from Vue components, for use with
- * the collection assembly modals. i.e. With selected..... create dataset collection,
- * create paired collection, etc.
- *
- * The goal is to use the existing "createListCollection", etc. functions but doctor
- * the content parameter to have the API of a backbone model which requires a
- * deprecated jquery Deferred object.
+ * Launch bootstrap modals with Vue components, for use with the collection assembly modals.
+ * i.e. With selected..... create dataset collection, create paired collection, etc.
  */
 
-import jQuery from "jquery";
-
 import type { HDASummary, HistoryItemSummary } from "@/api";
 import type { CollectionType } from "@/api/datasetCollections";
-import RULE_BASED_COLLECTION_CREATOR from "@/components/Collections/RuleBasedCollectionCreatorModal";
+import { createCollectionViaRules } from "@/components/Collections/RuleBasedCollectionCreatorModal";
 import { createDatasetCollection } from "@/components/History/model/queries";
 import { useHistoryStore } from "@/stores/historyStore";
 
@@ -72,54 +64,34 @@ export async function buildCollectionFromRules(
         });
     }
     if (historyId) {
-        const modalResult = await buildRuleCollectionModal(selectionContent, historyId, fromRulesInput);
+        const content = fromRulesInput ? selectionContent : createContent(historyId, selectionContent);
+        const modalResult = await createCollectionViaRules(content);
         if (modalResult) {
             console.debug("Submitting collection build request.", modalResult);
             await createDatasetCollection({ id: historyId } as any, modalResult);
         }
     }
 }
 
-// stand-in for buildCollection from history-view-edit.js
-export async function buildRuleCollectionModal(
-    selectedContent: HistoryItemSummary[],
-    historyId: string,
-    fromRulesInput = false,
-    defaultHideSourceItems = true,
-) {
-    // select legacy function
-    const createFunc = RULE_BASED_COLLECTION_CREATOR.createCollectionViaRules;
-    // pull up cached content by type_ids;
-    if (fromRulesInput) {
-        return await createFunc(selectedContent);
-    } else {
-        const fakeBackboneContent = createBackboneContent(historyId, selectedContent, defaultHideSourceItems);
-        return await createFunc(fakeBackboneContent);
-    }
-}
-
-const createBackboneContent = (historyId: string, selection: HistoryItemSummary[], defaultHideSourceItems: boolean) => {
+const createContent = (historyId: string, selection: HistoryItemSummary[], defaultHideSourceItems: boolean = true) => {
     const selectionJson = Array.from(selection.values());
     return {
         historyId,
         toJSON: () => selectionJson,
-        // result must be a $.Deferred object instead of a promise because
-        // that's the kind of deprecated data format that backbone likes to use.
-        createHDCA(
+        async createHDCA(
             element_identifiers: any,
             collection_type: CollectionType,
             name: string,
             hide_source_items: boolean,
             options = {},
         ) {
-            const def = jQuery.Deferred();
-            return def.resolve(null, {
+            return {
                 collection_type,
                 name,
                 hide_source_items,
                 element_identifiers,
                 options,
-            });
+            };
         },
         defaultHideSourceItems,
     };

client/src/components/Collections/common/modal.js

@@ -2,7 +2,7 @@ import { computed, type Ref, ref, unref, watch } from "vue";
 
 import type { CollectionElementIdentifiers, CreateNewCollectionPayload, HistoryItemSummary } from "@/api";
 import type RuleCollectionBuilder from "@/components/RuleCollectionBuilder.vue";
-import STATES from "@/mvc/dataset/states";
+import STATES from "@/utils/datasetStates";
 import localize from "@/utils/localization";
 
 import type ListCollectionCreator from "./ListCollectionCreator.vue";

client/src/components/Collections/common/modal.test.js

@@ -236,18 +236,19 @@ function onDisplay() {
         // vue-router 4 supports a native force push with clean URLs,
         // but we're using a __vkey__ bit as a workaround
         // Only conditionally force to keep urls clean most of the time.
+        const hidInfo = props.item.hid ? `${props.item.hid}: ` : "";
         if (route.path === itemUrls.value.display) {
             const options: RouterPushOptions = {
                 force: true,
                 preventWindowManager: !isWindowManagerActive,
-                title: isWindowManagerActive ? `${props.item.hid}: ${props.name}` : undefined,
+                title: isWindowManagerActive ? `${hidInfo} ${props.name}` : undefined,
             };
             // @ts-ignore - monkeypatched router, drop with migration.
             router.push(displayUrl, options);
         } else if (displayUrl) {
             const options: RouterPushOptions = {
                 preventWindowManager: !isWindowManagerActive,
-                title: isWindowManagerActive ? `${props.item.hid}: ${props.name}` : undefined,
+                title: isWindowManagerActive ? `${hidInfo} ${props.name}` : undefined,
             };
             // @ts-ignore - monkeypatched router, drop with migration.
             router.push(displayUrl, options);