Merge pull request #13984 from guerler/single_app

Convert Client to Single Page application

client/src/components/Collections/ListCollectionCreatorModal.js

@@ -7,8 +7,8 @@ function listCollectionCreatorModal(elements, options) {
     options.title = _l("Create a collection from a list of datasets");
     const { promise, showEl } = collectionCreatorModalSetup(options);
     return import(/* webpackChunkName: "ListCollectionCreator" */ "./ListCollectionCreator.vue").then((module) => {
-        var listCollectionCreatorInstance = Vue.extend(module.default);
-        var vm = document.createElement("div");
+        const listCollectionCreatorInstance = Vue.extend(module.default);
+        const vm = document.createElement("div");
         showEl(vm);
         new listCollectionCreatorInstance({
             propsData: {
@@ -28,7 +28,7 @@ function listCollectionCreatorModal(elements, options) {
  */
 function createListCollection(contents, defaultHideSourceItems) {
     const elements = contents.toJSON();
-    var copyElements;
+    let copyElements;
     const promise = listCollectionCreatorModal(elements, {
         defaultHideSourceItems: defaultHideSourceItems,
         creationFn: function (elements, name, hideSourceItems) {

client/src/components/Grid/Grid.vue

@@ -0,0 +1,29 @@
+<template>
+    <div ref="target" />
+</template>
+
+<script>
+import { getAppRoot } from "onload";
+import GridView from "mvc/grid/grid-view";
+export default {
+    props: {
+        urlBase: {
+            type: String,
+            default: null,
+        },
+        userFilter: {
+            type: String,
+            default: null,
+        },
+    },
+    mounted() {
+        new GridView({
+            active_tab: "shared",
+            url_base: `${getAppRoot()}${this.urlBase}`,
+            url_data: {
+                "f-username": this.userFilter || "",
+            },
+        }).$el.appendTo(this.$refs.target);
+    },
+};
+</script>

client/src/components/Grid/GridHistory.vue

@@ -0,0 +1,20 @@
+<template>
+    <div ref="target" />
+</template>
+
+<script>
+import HistoryList from "mvc/history/history-list";
+export default {
+    props: {
+        actionId: {
+            type: String,
+            default: null,
+        },
+    },
+    mounted() {
+        new HistoryList.View({
+            action_id: this.actionId,
+        }).$el.appendTo(this.$refs.target);
+    },
+};
+</script>

client/src/components/Grid/GridShared.vue

@@ -0,0 +1,32 @@
+<template>
+    <div ref="target" />
+</template>
+
+<script>
+import GridShared from "mvc/grid/grid-shared";
+export default {
+    props: {
+        actionId: {
+            type: String,
+            default: null,
+        },
+        plural: {
+            type: String,
+            default: null,
+        },
+        item: {
+            type: String,
+            default: null,
+        },
+    },
+    mounted() {
+        const activeTab = this.actionId == "list_published" ? "shared" : "user";
+        new GridShared.View({
+            action_id: this.actionId,
+            plural: this.plural,
+            item: this.item,
+            active_tab: activeTab,
+        }).$el.appendTo(this.$refs.target);
+    },
+};
+</script>

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

@@ -83,7 +83,7 @@
 </template>
 
 <script>
-import { backboneRoute, iframeAdd } from "components/plugins/legacyNavigation";
+import { iframeAdd } from "components/plugins/legacyNavigation";
 import { StatelessTags } from "components/Tags";
 import { STATES, HIERARCHICAL_COLLECTION_JOB_STATES } from "./model/states";
 import CollectionDescription from "./Collection/CollectionDescription";
@@ -181,9 +181,9 @@ export default {
         },
         onEdit() {
             if (this.item.collection_type) {
-                backboneRoute(`collection/edit/${this.item.id}`);
+                this.$router.push(`/collection/edit/${this.item.id}`);
             } else {
-                backboneRoute("datasets/edit", { dataset_id: this.item.id });
+                this.$router.push(`/datasets/edit/${this.item.id}`);
             }
         },
         onTags(newTags) {

client/src/components/History/Content/Dataset/DatasetActions.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
+import { iframeAdd } from "components/plugins/legacyNavigation";
 import { copy as sendToClipboard } from "utils/clipboard";
 import { absPath } from "utils/redirect";
 import { downloadUrlMixin } from "./mixins.js";
@@ -70,7 +70,7 @@ export default {
     components: {
         DatasetDownload,
     },
-    mixins: [legacyNavigationMixin, downloadUrlMixin],
+    mixins: [downloadUrlMixin],
     props: {
         item: { type: Object, required: true },
         showHighlight: { type: Boolean, default: false },
@@ -107,26 +107,21 @@ export default {
             window.location.href = resource;
         },
         onError() {
-            this.backboneRoute("datasets/error", { dataset_id: this.item.id });
+            this.$router.push(`/datasets/${this.item.id}/error`);
         },
         onInfo() {
-            this.backboneRoute(`datasets/${this.item.id}/details`);
+            this.$router.push(`/datasets/${this.item.id}/details`);
         },
         onRerun() {
-            this.backboneRoute(`root?job_id=${this.item.creating_job}`);
+            this.$router.push(`/root?job_id=${this.item.creating_job}`);
         },
         onVisualize() {
-            const name = this.item.name || "";
-            const title = `Visualization of ${name}`;
-            const path = `visualizations?dataset_id=${this.item.id}`;
-            const redirectParams = {
-                path: path,
-                title: title,
-                tryIframe: false,
-            };
-            if (!this.iframeAdd(redirectParams)) {
-                this.backboneRoute(path);
-            }
+            const name = this.item.name || "...";
+            iframeAdd({
+                title: `Visualization of ${name}`,
+                path: `/visualizations?dataset_id=${this.item.id}`,
+                $router: this.$router,
+            });
         },
         onHighlight() {
             this.$emit("toggleHighlights");

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

@@ -57,7 +57,6 @@
 </template>
 
 <script>
-import { backboneRoute } from "components/plugins/legacyNavigation";
 import prettyBytes from "pretty-bytes";
 import { formatDistanceToNowStrict } from "date-fns";
 
@@ -84,7 +83,7 @@ export default {
     },
     methods: {
         onDashboard() {
-            backboneRoute("/storage");
+            this.$router.push("/storage");
         },
         setFilter(newFilterText) {
             this.$emit("update:filter-text", newFilterText);

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

@@ -78,7 +78,7 @@
 
                     <b-dropdown-item
                         data-description="show structure"
-                        @click="backboneRoute('/histories/show_structure')">
+                        @click="$router.push('/histories/show_structure')">
                         <Icon fixed-width icon="code-branch" class="mr-1" />
                         <span v-localize>Show Structure</span>
                     </b-dropdown-item>
@@ -88,12 +88,12 @@
 
                         <b-dropdown-item
                             data-description="share or publish"
-                            @click="backboneRoute('/histories/sharing', { id: history.id })">
+                            @click="$router.push(`/histories/sharing?id=${history.id}`)">
                             <Icon fixed-width icon="share-alt" class="mr-1" />
                             <span v-localize>Share or Publish</span>
                         </b-dropdown-item>
 
-                        <b-dropdown-item @click="backboneRoute('/histories/permissions', { id: history.id })">
+                        <b-dropdown-item @click="$router.push(`/histories/permissions?id=${history.id}`)">
                             <Icon fixed-width icon="user-lock" class="mr-1" />
                             <span v-localize>Set Permissions</span>
                         </b-dropdown-item>
@@ -105,12 +105,14 @@
                     </template>
                     <b-dropdown-divider></b-dropdown-divider>
 
-                    <b-dropdown-item @click="backboneRoute('/histories/citations', { id: history.id })">
+                    <b-dropdown-item @click="$router.push(`/histories/citations?id=${history.id}`)">
                         <Icon fixed-width icon="stream" class="mr-1" />
                         <span v-localize>Export Tool Citations</span>
                     </b-dropdown-item>
 
-                    <b-dropdown-item data-description="export to file" @click="backboneRoute(exportLink)">
+                    <b-dropdown-item
+                        data-description="export to file"
+                        @click="$router.push(`/histories/${history.id}/export`)">
                         <Icon fixed-width icon="file-archive" class="mr-1" />
                         <span v-localize>Export History to File</span>
                     </b-dropdown-item>
@@ -182,9 +184,6 @@ export default {
     },
     computed: {
         ...mapGetters("user", ["currentUser"]),
-        exportLink() {
-            return `histories/${this.history.id}/export`;
-        },
     },
     methods: {
         switchToLegacyHistoryPanel,

client/src/components/History/adapters/HistoryPanelProxy.js

@@ -4,18 +4,13 @@
  */
 import Backbone from "backbone";
 import store from "store";
-import { getGalaxyInstance } from "app";
-import { mountVueComponent } from "utils/mountVueComponent";
-import HistoryIndex from "components/History/Index";
 import { buildCollectionModal } from "./buildCollectionModal";
 import { createDatasetCollection } from "components/History/model/queries";
 import { watchHistory } from "store/historyStore/model/watchHistory";
 
 // extend existing current history panel
 export class HistoryPanelProxy {
     constructor() {
-        const Galaxy = getGalaxyInstance();
-        Galaxy.currHistoryPanel = this;
         const model = (this.model = new Backbone.Model({}));
         this.collection = {
             each(callback, filterText = "") {
@@ -88,15 +83,4 @@ export class HistoryPanelProxy {
             await createDatasetCollection({ id: this.model.id }, modalResult);
         }
     }
-    render() {
-        const container = document.createElement("div");
-        document.querySelector("#right > .unified-panel-header").remove();
-        document.querySelector("#right > .unified-panel-controls").remove();
-        document.querySelector("#right > .unified-panel-body").remove();
-        const parent = document.querySelector("#right");
-        parent.classList.add("beta");
-        parent.prepend(container);
-        const mountFn = mountVueComponent(HistoryIndex);
-        mountFn({}, container);
-    }
 }

client/src/components/History/adapters/buildCollectionModal.js

@@ -9,10 +9,10 @@
  */
 
 import jQuery from "jquery";
-import LIST_COLLECTION_CREATOR from "../../Collections/ListCollectionCreatorModal";
-import PAIR_COLLECTION_CREATOR from "../../Collections/PairCollectionCreatorModal";
-import LIST_OF_PAIRS_COLLECTION_CREATOR from "../../Collections/PairedListCollectionCreatorModal";
-import RULE_BASED_COLLECTION_CREATOR from "../../Collections/RuleBasedCollectionCreatorModal";
+import LIST_COLLECTION_CREATOR from "components/Collections/ListCollectionCreatorModal";
+import PAIR_COLLECTION_CREATOR from "components/Collections/PairCollectionCreatorModal";
+import LIST_OF_PAIRS_COLLECTION_CREATOR from "components/Collections/PairedListCollectionCreatorModal";
+import RULE_BASED_COLLECTION_CREATOR from "components/Collections/RuleBasedCollectionCreatorModal";
 
 // stand-in for buildCollection from history-view-edit.js
 export async function buildCollectionModal(
@@ -46,12 +46,9 @@ export async function buildCollectionModal(
 
 const createBackboneContent = (historyId, selection) => {
     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(element_identifiers, collection_type, name, hide_source_items, copy_elements, options = {}) {

client/src/components/HistoryView.vue

@@ -17,9 +17,6 @@
                                 Switch to this history
                             </button>
                         </span>
-                        <button id="show-structure" class="btn btn-secondary" @click="showStructure">
-                            Show structure
-                        </button>
                     </span>
                 </div>
                 <div class="float-right">
@@ -39,11 +36,7 @@
 <script>
 import { getAppRoot } from "onload/loadConfig";
 import axios from "axios";
-import Vue from "vue";
-import DisplayStructure from "components/DisplayStructured.vue";
-import QueryStringParsing from "utils/query-string-parsing";
 import HistoryView from "mvc/history/history-view";
-import { getGalaxyInstance } from "app";
 
 export default {
     props: {
@@ -95,13 +88,6 @@ export default {
                 : { location: "mvc/history/history-view", className: "HistoryView" };
             return HistoryView.historyEntry(options);
         },
-        showStructure: function () {
-            const Galaxy = getGalaxyInstance();
-            const displayStructureInstance = Vue.extend(DisplayStructure);
-            const mountView = document.createElement("div");
-            Galaxy.page.center.display(mountView);
-            new displayStructureInstance({ propsData: { id: QueryStringParsing.get("id") } }).$mount(mountView);
-        },
         switchHistory: function () {
             const url = getAppRoot() + "history/switch_to_history?hist_id=" + this.historyHistory["id"];
             this.ajaxCall(url, this.reloadPage);

client/src/components/Masthead/Masthead.vue

@@ -11,8 +11,8 @@
                 v-show="!(tab.hidden === undefined ? false : tab.hidden)"
                 :key="`tab-${idx}`"
                 :tab="tab"
-                :active-tab="activeTab">
-            </masthead-item>
+                :active-tab="activeTab" />
+            <masthead-item :tab="windowTab" :toggle="windowToggle" @click="onWindowToggle" />
         </b-navbar-nav>
         <div ref="quota-meter-container" class="quota-meter-container" />
     </b-navbar>
@@ -68,9 +68,11 @@ export default {
     },
     data() {
         return {
-            activeTab: null,
+            activeTab: this.initialActiveTab,
             baseTabs: [],
             extensionTabs: [],
+            windowTab: this.mastheadState.windowManager.getTab(),
+            windowToggle: false,
         };
     },
     computed: {
@@ -82,13 +84,11 @@ export default {
             return brandTitle;
         },
         tabs() {
-            const windowTabs = [this.mastheadState.windowManager.buttonActive];
-            const tabs = [].concat(this.baseTabs, this.extensionTabs, windowTabs);
+            const tabs = [].concat(this.baseTabs, this.extensionTabs);
             return tabs.map(this._tabToJson);
         },
     },
     created() {
-        this.activeTab = this.initialActiveTab;
         this.baseTabs = fetchMenu(this.menuOptions);
         loadWebhookMenuItems(this.extensionTabs);
     },
@@ -103,6 +103,9 @@ export default {
         highlight(activeTab) {
             this.activeTab = activeTab;
         },
+        onWindowToggle() {
+            this.windowToggle = !this.windowToggle;
+        },
         _tabToJson(el) {
             const defaults = {
                 visible: true,