Merge pull request #14325 from davelopez/22.05_allow_dataset_actions_in_new_tab

[22.05] Add HREF links to some history item actions

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

@@ -53,6 +53,7 @@
                     :is-history-item="isHistoryItem"
                     :is-visible="item.visible"
                     :state="state"
+                    :item-urls="itemUrls"
                     @delete="$emit('delete')"
                     @display="onDisplay"
                     @edit="onEdit"
@@ -81,6 +82,7 @@
                 v-if="expandDataset"
                 :dataset="item"
                 :show-highlight="isHistoryItem"
+                :item-urls="itemUrls"
                 @edit="onEdit"
                 @toggleHighlights="toggleHighlights" />
         </b-collapse>
@@ -165,6 +167,26 @@ export default {
         tagsDisabled() {
             return !this.expandDataset || !this.isHistoryItem;
         },
+        isCollection() {
+            return "collection_type" in this.item;
+        },
+        /** Relative URLs for history item actions */
+        itemUrls() {
+            const id = this.item.id;
+            if (this.isCollection) {
+                return {
+                    edit: `collection/edit/${id}`,
+                };
+            }
+            return {
+                display: `datasets/${id}/display/?preview=True`,
+                edit: `datasets/edit?dataset_id=${id}`,
+                showDetails: `datasets/${id}/details`,
+                reportError: `datasets/error?dataset_id=${id}`,
+                rerun: `tool_runner/rerun?id=${id}`,
+                visualize: `visualizations?dataset_id=${id}`,
+            };
+        },
     },
     methods: {
         onClick() {
@@ -175,8 +197,7 @@ export default {
             }
         },
         onDisplay() {
-            const url = `datasets/${this.item.id}/display/?preview=True`;
-            iframeAdd({ path: url, title: this.name });
+            iframeAdd({ path: this.itemUrls.display, title: this.name });
         },
         onDragStart(evt) {
             evt.dataTransfer.dropEffect = "move";
@@ -184,11 +205,7 @@ export default {
             evt.dataTransfer.setData("text", JSON.stringify([this.item]));
         },
         onEdit() {
-            if (this.item.collection_type) {
-                backboneRoute(`collection/edit/${this.item.id}`);
-            } else {
-                backboneRoute("datasets/edit", { dataset_id: this.item.id });
-            }
+            backboneRoute(this.itemUrls.edit);
         },
         onTags(newTags) {
             this.$emit("tag-change", this.item, newTags);

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

@@ -4,25 +4,27 @@
             v-if="isDataset"
             :disabled="displayDisabled"
             :title="displayButtonTitle"
-            class="px-1"
+            class="display-btn px-1"
             size="sm"
             variant="link"
-            @click.stop="$emit('display')">
+            :href="displayUrl"
+            @click.prevent.stop="$emit('display')">
             <icon icon="eye" />
         </b-button>
         <b-button
             v-if="isHistoryItem"
             :disabled="editDisabled"
             :title="editButtonTitle"
-            class="px-1"
+            class="edit-btn px-1"
             size="sm"
             variant="link"
-            @click.stop="$emit('edit')">
+            :href="editUrl"
+            @click.prevent.stop="$emit('edit')">
             <icon icon="pen" />
         </b-button>
         <b-button
             v-if="isHistoryItem && !isDeleted"
-            class="px-1"
+            class="delete-btn px-1"
             title="Delete"
             size="sm"
             variant="link"
@@ -31,7 +33,7 @@
         </b-button>
         <b-button
             v-if="isHistoryItem && isDeleted"
-            class="px-1"
+            class="undelete-btn px-1"
             title="Undelete"
             size="sm"
             variant="link"
@@ -40,7 +42,7 @@
         </b-button>
         <b-button
             v-if="isHistoryItem && !isVisible"
-            class="px-1"
+            class="unhide-btn px-1"
             title="Unhide"
             size="sm"
             variant="link"
@@ -51,6 +53,7 @@
 </template>
 
 <script>
+import { prependPath } from "utils/redirect.js";
 export default {
     props: {
         isDataset: { type: Boolean, required: true },
@@ -58,6 +61,7 @@ export default {
         isHistoryItem: { type: Boolean, required: true },
         isVisible: { type: Boolean, default: true },
         state: { type: String, default: "" },
+        itemUrls: { type: Object, required: true },
     },
     computed: {
         displayButtonTitle() {
@@ -78,6 +82,12 @@ export default {
         editDisabled() {
             return ["discarded", "new", "upload", "queued", "running", "waiting"].includes(this.state);
         },
+        displayUrl() {
+            return prependPath(this.itemUrls.display);
+        },
+        editUrl() {
+            return prependPath(this.itemUrls.edit);
+        },
     },
 };
 </script>

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

@@ -2,7 +2,14 @@
     <div class="dataset-actions mb-1">
         <div class="clearfix">
             <div class="btn-group float-left">
-                <b-button v-if="showError" class="px-1" title="Error" size="sm" variant="link" @click.stop="onError">
+                <b-button
+                    v-if="showError"
+                    class="px-1"
+                    title="Error"
+                    size="sm"
+                    variant="link"
+                    :href="reportErrorUrl"
+                    @click.prevent.stop="onError">
                     <span class="fa fa-bug" />
                 </b-button>
                 <dataset-download v-if="showDownloads" :item="item" @on-download="onDownload" />
@@ -21,7 +28,8 @@
                     title="Dataset Details"
                     size="sm"
                     variant="link"
-                    @click.stop="onInfo">
+                    :href="showDetailsUrl"
+                    @click.prevent.stop="onInfo">
                     <span class="fa fa-info-circle" />
                 </b-button>
                 <b-button
@@ -30,7 +38,8 @@
                     title="Run Job Again"
                     size="sm"
                     variant="link"
-                    @click.stop="onRerun">
+                    :href="rerunUrl"
+                    @click.prevent.stop="onRerun">
                     <span class="fa fa-redo" />
                 </b-button>
                 <b-button
@@ -39,7 +48,8 @@
                     title="Visualize"
                     size="sm"
                     variant="link"
-                    @click.stop="onVisualize">
+                    :href="visualizeUrl"
+                    @click.prevent.stop="onVisualize">
                     <span class="fa fa-bar-chart-o" />
                 </b-button>
                 <b-button
@@ -62,7 +72,7 @@
 <script>
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import { copy as sendToClipboard } from "utils/clipboard";
-import { absPath } from "utils/redirect";
+import { absPath, prependPath } from "utils/redirect.js";
 import { downloadUrlMixin } from "./mixins.js";
 import DatasetDownload from "./DatasetDownload";
 
@@ -74,6 +84,7 @@ export default {
     props: {
         item: { type: Object, required: true },
         showHighlight: { type: Boolean, default: false },
+        itemUrls: { type: Object, required: true },
     },
     computed: {
         showDownloads() {
@@ -97,6 +108,18 @@ export default {
             // TODO: Check hasViz, if visualizations are activated in the config
             return !this.item.purged && ["ok", "failed_metadata", "error"].includes(this.item.state);
         },
+        reportErrorUrl() {
+            return prependPath(this.itemUrls.reportError);
+        },
+        showDetailsUrl() {
+            return prependPath(this.itemUrls.showDetails);
+        },
+        rerunUrl() {
+            return prependPath(this.itemUrls.rerun);
+        },
+        visualizeUrl() {
+            return prependPath(this.itemUrls.visualize);
+        },
     },
     methods: {
         onCopyLink() {
@@ -107,10 +130,10 @@ export default {
             window.location.href = resource;
         },
         onError() {
-            this.backboneRoute("datasets/error", { dataset_id: this.item.id });
+            this.backboneRoute(this.itemUrls.reportError);
         },
         onInfo() {
-            this.backboneRoute(`datasets/${this.item.id}/details`);
+            this.backboneRoute(this.itemUrls.showDetails);
         },
         onRerun() {
             this.backboneRoute(`root?job_id=${this.item.creating_job}`);
@@ -118,7 +141,7 @@ export default {
         onVisualize() {
             const name = this.item.name || "";
             const title = `Visualization of ${name}`;
-            const path = `visualizations?dataset_id=${this.item.id}`;
+            const path = this.itemUrls.visualize;
             const redirectParams = {
                 path: path,
                 title: title,

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

@@ -21,7 +21,11 @@
                         <span class="value">{{ result.misc_info }}</span>
                     </div>
                 </div>
-                <DatasetActions :item="result" :show-highlight="showHighlight" @toggleHighlights="toggleHighlights" />
+                <DatasetActions
+                    :item="result"
+                    :show-highlight="showHighlight"
+                    :item-urls="itemUrls"
+                    @toggleHighlights="toggleHighlights" />
                 <pre v-if="result.peek" class="dataset-peek p-1" v-html="result.peek" />
             </div>
         </div>
@@ -94,6 +98,7 @@ export default {
     props: {
         dataset: { type: Object, required: true },
         showHighlight: { type: Boolean, default: false },
+        itemUrls: { type: Object, required: true },
     },
     computed: {
         stateText() {

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

@@ -14,12 +14,15 @@
         <template v-slot:button-content>
             <span class="fa fa-save" />
         </template>
-        <b-dropdown-item v-localize @click.stop="onDownload(downloadUrl)"> Download Dataset </b-dropdown-item>
+        <b-dropdown-item v-localize :href="downloadUrl" @click.prevent.stop="onDownload(downloadUrl)">
+            Download Dataset
+        </b-dropdown-item>
         <b-dropdown-item
             v-for="(metaFile, index) of metaFiles"
             :key="index"
             :data-description="`download ${metaFile.file_type}`"
-            @click.stop="onDownload(metaDownloadUrl, metaFile.file_type)">
+            :href="metaDownloadUrl + metaFile.file_type"
+            @click.prevent.stop="onDownload(metaDownloadUrl, metaFile.file_type)">
             Download {{ metaFile.file_type }}
         </b-dropdown-item>
     </b-dropdown>
@@ -29,7 +32,8 @@
         title="Download"
         size="sm"
         variant="link"
-        @click.stop="onDownload(downloadUrl)">
+        :href="downloadUrl"
+        @click.prevent.stop="onDownload(downloadUrl)">
         <span class="fa fa-save" />
     </b-button>
 </template>

client/src/utils/navigation/navigation.yml

@@ -287,9 +287,8 @@ history_panel:
     options_use_legacy_history: 'a[data-description="switch to legacy history view"]'
 
     collection_menu_button: '.collection-menu'
-    collection_menu_edit_attributes:
-      type: xpath
-      selector: '//button[@title="Edit attributes"]'
+    collection_menu_edit_attributes: '.edit-btn'
+
     new_history_button: '.history-new-button'
     multi_view_button: '.history-view-multi-button'
     histories_operation_menu: '[data-description="history options"]'

client/src/utils/redirect.js

@@ -10,15 +10,33 @@ export function reloadPage() {
     window.location.reload();
 }
 
-// Prepends configured appRoot to given url
 const slashCleanup = /(\/)+/g;
+/**
+ * Prepends the configured app root to given url
+ * @param {String} path
+ * @returns The relative URL path with the configured appRoot.
+ */
 export function prependPath(path) {
     const root = getAppRoot();
     return `${root}/${path}`.replace(slashCleanup, "/");
 }
 
+/**
+ * Returns the absolute URL path for this server given a relative path.
+ * @param {String} path
+ * @returns The absolute URL path.
+ */
 export function absPath(path) {
-    const relativePath = prependPath(path);
+    const relativePath = hasRoot(path) ? path : prependPath(path);
     const server = window.location.origin;
     return `${server}/${relativePath}`.replace(slashCleanup, "/");
 }
+
+/**
+ * Checks if the path already has the app root.
+ * @param {String} path
+ * @returns true if the given path starts with the app root.
+ */
+function hasRoot(path) {
+    return path.startsWith(getAppRoot());
+}

config/plugins/tours/core.galaxy_ui.yaml

@@ -92,29 +92,29 @@ steps:
               grey this means you are queued and need to wait until your tool can be started. If your dataset turns into red, an error has occurred. Please report the bug to the Galaxy team with the bug report button."
 
     - title: "View dataset"
-      element: "#current-history-panel div.content-item button[title='Display']"
+      element: "#current-history-panel div.content-item .display-btn"
       intro: "View your dataset by clicking the eye button."
 
     - title: "Rename dataset"
-      element: "#current-history-panel div.content-item button[title='Edit attributes']"
+      element: "#current-history-panel div.content-item .edit-btn"
       intro: "Rename your dataset by clicking the pencil button."
 
     - title: "Dataset information"
       element: "div.content-item .content-title"
       intro: "This is your dataset. You can get more informations and options like different visualizations by clicking on it."
       postclick: true
-  
+
     - title: "Remove dataset"
-      element: "#current-history-panel div.content-item button[title='Delete']"
+      element: "#current-history-panel div.content-item .delete-btn"
       intro: "Delete your dataset by clicking the trash-button."
 
     - title: "Dataset information"
-      element: "#current-history-panel div.content-item button[title='Dataset Details']"
+      element: "#current-history-panel div.content-item .params-btn"
       intro: "Clicking on your dataset provides you with more information regarding your dataset (e.g. filetype or size)."
       preclick: true
 
     - title: "Re-run tool"
-      element: "#current-history-panel div.content-item button[title='Run Job Again']"
+      element: "#current-history-panel div.content-item .rerun-btn"
       intro: "By clicking the reload button, you can re-run your tool again (e.g. with different parameters or on another dataset)."
 
     - title: "Panel collapse"

config/plugins/tours/core.history.yaml

@@ -47,26 +47,26 @@ steps:
       element: "#current-history-panel div.content-item span.datatype"
       intro: "Galaxy has assigned a datatype to your dataset during upload, which you can see here."
 
-    - element: "#current-history-panel div.content-item button[title='Download']"
+    - element: "#current-history-panel div.content-item .download-btn"
       title: "Download your dataset"
       intro: "You can download every dataset by using the floppy disc symbol."
 
-    - element: "#current-history-panel div.content-item button[title='Dataset Details']"
+    - element: "#current-history-panel div.content-item .params-btn"
       title: "Even more information"
       intro: "Get an overview of all metadata associated with your dataset by using the Information symbol."
       preclick: true
 
-    - element: "#current-history-panel div.content-item button[title='Display']"
+    - element: "#current-history-panel div.content-item .display-btn"
       title: "Inspect your data"
       intro: "The eye symbol can be used to look at your data."
       preclick: true
 
-    - element: "#current-history-panel div.content-item button[title='Edit attributes']"
+    - element: "#current-history-panel div.content-item .edit-btn"
       title: "Edit metadata"
       intro: "With the pencil button you can edit metadata attributes of your dataset, like the associated filetype or the dataset name."
       preclick: true
 
-    - element: "#current-history-panel div.content-item button[title='Delete']"
+    - element: "#current-history-panel div.content-item .delete-btn"
       title: "Remove datasets"
       intro: "You can remove a dataset from the history with the trash can symbol."
       postclick: true
@@ -76,7 +76,7 @@ steps:
       intro: "By default your history will hide all deleted datasets from you. You can visualize them by filtering."
       textinsert: "deleted:true"
 
-    - element: "#current-history-panel div.content-item button[title='Undelete']"
+    - element: "#current-history-panel div.content-item .undelete-btn"
       title: "Undeleting a dataset"
       intro: |
             Galaxy datasets are only marked as deleted and can be recovered by clicking this link.
@@ -95,4 +95,3 @@ steps:
 
     - title: "Enjoy your Galaxy Histories"
       intro: "Thanks for taking this tour! Happy research with Galaxy!"
-

config/plugins/tours/core.windows.yaml

@@ -54,7 +54,7 @@ steps:
     - element: "#right"
       intro: "This is your history. It contains all datasets you are currently working with including our uploaded table."
 
-    - element: "#current-history-panel div.content-item button[title='Display']"
+    - element: "#current-history-panel div.content-item .display-btn"
       intro: "Clicking the eye-icon usually displays a dataset in the center panel."
       postclick: true