Merge pull request #13962 from guerler/fix_padding

Fix padding in history content items

client/src/components/History/Content/ContentItem.test.js

@@ -1,16 +1,22 @@
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "jest/helpers";
 import ContentItem from "./ContentItem";
+import { updateContentFields } from "components/History/model/queries";
+
+jest.mock("components/History/model/queries");
 
 const localVue = getLocalVue();
 
+// mock queries
+updateContentFields.mockImplementation(async () => {});
+
 describe("ContentItem", () => {
     let wrapper;
 
     beforeEach(() => {
         wrapper = mount(ContentItem, {
             propsData: {
-                expandDataset: false,
+                expandDataset: true,
                 item: {
                     id: "item_id",
                     some_data: "some_data",
@@ -20,12 +26,16 @@ describe("ContentItem", () => {
                 },
                 id: 1,
                 isDataset: true,
-                isHistoryItem: false,
+                isHistoryItem: true,
                 name: "name",
                 selected: false,
                 selectable: false,
             },
             localVue,
+            stubs: {
+                DatasetDetails: true,
+                vueTagsInput: false,
+            },
         });
     });
 
@@ -40,6 +50,14 @@ describe("ContentItem", () => {
             await tags.at(i).find(".tag-name").trigger("click");
             expect(wrapper.emitted()["tag-click"][i][0]).toBe(`tag${i + 1}`);
         }
+        // close all tags
+        for (let i = 0; i < 3; i++) {
+            const tagRemover = wrapper.find(".ti-icon-close");
+            await tagRemover.trigger("click");
+            expect(wrapper.emitted()["tag-change"][i][1]).not.toContain(`tag${i + 1}`);
+        }
+        await wrapper.setProps({ isHistoryItem: false, item: { tags: [] } });
+        expect(wrapper.find(".alltags").exists()).toBe(false);
         // expansion button
         const $el = wrapper.find(".cursor-pointer");
         $el.trigger("click");

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

@@ -49,14 +49,14 @@
                     @unhide="$emit('unhide')" />
             </div>
         </div>
-        <div class="p-1 alltags">
-            <StatelessTags
-                v-model="tags"
-                :use-toggle-link="false"
-                :disabled="!expandDataset || !isHistoryItem"
-                @tag-click="onTagClick"
-                @input="onTags" />
-        </div>
+        <StatelessTags
+            v-if="!tagsDisabled || hasTags"
+            class="alltags p-1"
+            :value="tags"
+            :use-toggle-link="false"
+            :disabled="tagsDisabled"
+            @tag-click="onTagClick"
+            @input="onTags" />
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
         <div class="detail-animation-wrapper" :class="expandDataset ? '' : 'collapsed'">
             <DatasetDetails v-if="expandDataset" :dataset="item" @edit="onEdit" />
@@ -65,8 +65,7 @@
 </template>
 
 <script>
-import { getAppRoot } from "onload";
-import { backboneRoute, useGalaxy, iframeRedirect } from "components/plugins/legacyNavigation";
+import { backboneRoute, iframeAdd } from "components/plugins/legacyNavigation";
 import { StatelessTags } from "components/Tags";
 import { STATES } from "./model/states";
 import CollectionDescription from "./Collection/CollectionDescription";
@@ -108,6 +107,9 @@ export default {
         contentState() {
             return STATES[this.state] && STATES[this.state];
         },
+        hasTags() {
+            return this.tags && this.tags.length > 0;
+        },
         hasStateIcon() {
             return this.contentState && this.contentState.icon;
         },
@@ -126,6 +128,9 @@ export default {
         tags() {
             return this.item.tags;
         },
+        tagsDisabled() {
+            return !this.expandDataset || !this.isHistoryItem;
+        },
     },
     methods: {
         onClick() {
@@ -136,18 +141,8 @@ export default {
             }
         },
         onDisplay() {
-            const id = this.item.id;
-            useGalaxy((Galaxy) => {
-                const url = `${getAppRoot()}datasets/${id}/display/?preview=True`;
-                if (Galaxy.frame && Galaxy.frame.active) {
-                    Galaxy.frame.add({
-                        title: this.name,
-                        url: url,
-                    });
-                } else {
-                    iframeRedirect(url);
-                }
-            });
+            const url = `datasets/${this.item.id}/display/?preview=True`;
+            iframeAdd({ path: url, title: this.name });
         },
         onDragStart(evt) {
             evt.dataTransfer.dropEffect = "move";
@@ -162,6 +157,7 @@ export default {
             }
         },
         onTags(newTags) {
+            this.$emit("tag-change", this.item, newTags);
             updateContentFields(this.item, { tags: newTags });
         },
         onTagClick(tag) {

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

@@ -99,6 +99,7 @@
                                         :selected="isSelected(item)"
                                         :selectable="showSelection"
                                         @tag-click="onTagClick"
+                                        @tag-change="onTagChange"
                                         @update:expand-dataset="setExpanded(item, $event)"
                                         @update:selected="setSelected(item, $event)"
                                         @view-collection="$emit('view-collection', item)"
@@ -231,6 +232,9 @@ export default {
         setInvisible(item) {
             Vue.set(this.invisible, item.hid, true);
         },
+        onTagChange(item, newTags) {
+            item.tags = newTags;
+        },
         onTagClick(tag) {
             if (this.filterText == "tag=" + tag) {
                 this.filterText = "";