diff --git a/client/src/components/History/Content/Collection/CollectionDescription.test.js b/client/src/components/History/Content/Collection/CollectionDescription.test.js
index 50c9f7729b8..9a485b7ea1e 100644
--- a/client/src/components/History/Content/Collection/CollectionDescription.test.js
+++ b/client/src/components/History/Content/Collection/CollectionDescription.test.js
@@ -11,23 +11,50 @@ describe("CollectionDescription", () => {
wrapper = mount(CollectionDescription, {
propsData: {
collectionType: "list",
- elementCount: 10,
},
localVue,
});
});
- it("check basics", async () => {
- const details = wrapper.findAll("span");
- expect(details.at(0).text()).toBe("a list");
- expect(details.at(1).text()).toBe("with 10 items");
- await wrapper.setProps({ elementCount: 1 });
- expect(details.at(1).text()).toBe("with 1 item");
- await wrapper.setProps({ collectionType: "paired" });
- expect(details.at(0).text()).toBe("a dataset pair");
+ it("should display expected heterogeneous descriptions", async () => {
+ const HETEROGENEOUS_DATATYPES = ["txt", "csv", "tabular"];
+ await wrapper.setProps({ elementCount: 1, elementsDatatypes: HETEROGENEOUS_DATATYPES });
+ expect(wrapper.text()).toBe("a list with 1 dataset");
+
+ await wrapper.setProps({ elementCount: 2, collectionType: "paired" });
+ expect(wrapper.text()).toBe("a pair with 2 datasets");
+
+ await wrapper.setProps({ elementCount: 10, collectionType: "list" });
+ expect(wrapper.text()).toBe("a list with 10 datasets");
+
await wrapper.setProps({ collectionType: "list:paired" });
- expect(details.at(0).text()).toBe("a list of pairs");
+ expect(wrapper.text()).toBe("a list with 10 pairs");
+
+ await wrapper.setProps({ collectionType: "list:list" });
+ expect(wrapper.text()).toBe("a list with 10 lists");
+
await wrapper.setProps({ collectionType: "other" });
- expect(details.at(0).text()).toBe("a nested list");
+ expect(wrapper.text()).toBe("a nested list with 10 dataset collections");
+ });
+
+ it("should display expected homogeneous descriptions", async () => {
+ const EXPECTED_HOMOGENEOUS_DATATYPE = "tabular";
+ await wrapper.setProps({ elementCount: 1, elementsDatatypes: [EXPECTED_HOMOGENEOUS_DATATYPE] });
+ expect(wrapper.text()).toBe(`a list with 1 ${EXPECTED_HOMOGENEOUS_DATATYPE} dataset`);
+
+ await wrapper.setProps({ elementCount: 2, collectionType: "paired" });
+ expect(wrapper.text()).toBe(`a pair with 2 ${EXPECTED_HOMOGENEOUS_DATATYPE} datasets`);
+
+ await wrapper.setProps({ elementCount: 10, collectionType: "list" });
+ expect(wrapper.text()).toBe(`a list with 10 ${EXPECTED_HOMOGENEOUS_DATATYPE} datasets`);
+
+ await wrapper.setProps({ collectionType: "list:paired" });
+ expect(wrapper.text()).toBe(`a list with 10 ${EXPECTED_HOMOGENEOUS_DATATYPE} pairs`);
+
+ await wrapper.setProps({ collectionType: "list:list" });
+ expect(wrapper.text()).toBe(`a list with 10 ${EXPECTED_HOMOGENEOUS_DATATYPE} lists`);
+
+ await wrapper.setProps({ collectionType: "other" });
+ expect(wrapper.text()).toBe(`a nested list with 10 ${EXPECTED_HOMOGENEOUS_DATATYPE} dataset collections`);
});
});
diff --git a/client/src/components/History/Content/Collection/CollectionDescription.vue b/client/src/components/History/Content/Collection/CollectionDescription.vue
index b1cfcc3e732..faa2fd5947a 100644
--- a/client/src/components/History/Content/Collection/CollectionDescription.vue
+++ b/client/src/components/History/Content/Collection/CollectionDescription.vue
@@ -1,8 +1,6 @@
- a {{ collectionLabel | localize }}
- with 1 item
- with {{ elementCount }} items
+ a {{ collectionLabel }} with {{ elementCount }}{{ homogeneousDatatype }} {{ pluralizedItem }}
@@ -10,21 +8,55 @@
export default {
props: {
collectionType: { type: String, required: true },
- elementCount: { type: Number, required: true },
+ elementCount: { type: Number, required: false, default: undefined },
+ elementsDatatypes: { type: Array, required: false, default: () => [] },
},
data() {
return {
labels: {
list: "list",
- paired: "dataset pair",
- "list:paired": "list of pairs",
+ "list:paired": "list",
+ "list:list": "list",
+ paired: "pair",
},
};
},
computed: {
+ /**@return {String} */
collectionLabel() {
return this.labels[this.collectionType] || "nested list";
},
+ /**@return {Boolean} */
+ hasSingleElement() {
+ return this.elementCount === 1;
+ },
+ /**@return {Boolean} */
+ isHomogeneous() {
+ return this.elementsDatatypes.length === 1;
+ },
+ /**@return {String} */
+ homogeneousDatatype() {
+ return this.isHomogeneous ? ` ${this.elementsDatatypes[0]}` : "";
+ },
+ /**@return {String} */
+ pluralizedItem() {
+ if (this.collectionType === "list:list") {
+ return this.pluralize("list");
+ }
+ if (this.collectionType === "list:paired") {
+ return this.pluralize("pair");
+ }
+ if (!Object.keys(this.labels).includes(this.collectionType)) {
+ //Any other kind of nested collection
+ return this.pluralize("dataset collection");
+ }
+ return this.pluralize("dataset");
+ },
+ },
+ methods: {
+ pluralize(word) {
+ return this.hasSingleElement ? word : `${word}s`;
+ },
},
};
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 52ef4928ffe..640637a45aa 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -32,7 +32,8 @@