Refactor CollectionDescription component props to use HDCASummary

client/src/components/History/Content/Collection/CollectionDescription.test.ts

@@ -0,0 +1,164 @@
+import { mount, type Wrapper } from "@vue/test-utils";
+import { getLocalVue } from "tests/jest/helpers";
+import type Vue from "vue";
+
+import type { HDCASummary } from "@/api";
+
+import CollectionDescription from "./CollectionDescription.vue";
+
+const localVue = getLocalVue();
+
+const defaultTestHDCA: HDCASummary = {
+    id: "test_id",
+    name: "Test Collection",
+    hid: 1,
+    collection_id: "test_collection_id",
+    type: "collection",
+    collection_type: "list",
+    history_content_type: "dataset_collection",
+    element_count: null,
+    create_time: null,
+    update_time: null,
+    deleted: false,
+    visible: true,
+    elements_datatypes: [],
+    history_id: "fake_history_id",
+    model_class: "HistoryDatasetCollectionAssociation",
+    populated_state: "ok",
+    tags: [],
+    url: "fake/url",
+    contents_url: "fake/contents/url",
+};
+
+describe("CollectionDescription", () => {
+    let wrapper: Wrapper<Vue>;
+
+    beforeEach(() => {
+        wrapper = mount(CollectionDescription as object, {
+            propsData: {
+                hdca: defaultTestHDCA,
+            },
+            localVue,
+        });
+    });
+
+    it("should display expected heterogeneous descriptions", async () => {
+        const HETEROGENEOUS_DATATYPES = ["txt", "csv", "tabular"];
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                collection_type: "list",
+                element_count: 1,
+                elements_datatypes: HETEROGENEOUS_DATATYPES,
+            },
+        });
+        expect(wrapper.text()).toBe("a list with 1 dataset");
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 2,
+                collection_type: "paired",
+            },
+        });
+        expect(wrapper.text()).toBe("a pair with 2 datasets");
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 10,
+                collection_type: "list",
+            },
+        });
+        expect(wrapper.text()).toBe("a list with 10 datasets");
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 10,
+                collection_type: "list:paired",
+            },
+        });
+        expect(wrapper.text()).toBe("a list with 10 pairs");
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 10,
+                collection_type: "list:list",
+            },
+        });
+        expect(wrapper.text()).toBe("a list with 10 lists");
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 10,
+                collection_type: "other",
+            },
+        });
+        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({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 1,
+                elements_datatypes: [EXPECTED_HOMOGENEOUS_DATATYPE],
+            },
+        });
+        expect(wrapper.text()).toBe(`a list with 1 ${EXPECTED_HOMOGENEOUS_DATATYPE} dataset`);
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 2,
+                collection_type: "paired",
+                elements_datatypes: [EXPECTED_HOMOGENEOUS_DATATYPE],
+            },
+        });
+        expect(wrapper.text()).toBe(`a pair with 2 ${EXPECTED_HOMOGENEOUS_DATATYPE} datasets`);
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 10,
+                collection_type: "list",
+                elements_datatypes: [EXPECTED_HOMOGENEOUS_DATATYPE],
+            },
+        });
+        expect(wrapper.text()).toBe(`a list with 10 ${EXPECTED_HOMOGENEOUS_DATATYPE} datasets`);
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 10,
+                collection_type: "list:paired",
+                elements_datatypes: [EXPECTED_HOMOGENEOUS_DATATYPE],
+            },
+        });
+        expect(wrapper.text()).toBe(`a list with 10 ${EXPECTED_HOMOGENEOUS_DATATYPE} pairs`);
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 10,
+                collection_type: "list:list",
+                elements_datatypes: [EXPECTED_HOMOGENEOUS_DATATYPE],
+            },
+        });
+        expect(wrapper.text()).toBe(`a list with 10 ${EXPECTED_HOMOGENEOUS_DATATYPE} lists`);
+
+        await wrapper.setProps({
+            hdca: {
+                ...defaultTestHDCA,
+                element_count: 10,
+                collection_type: "other",
+                elements_datatypes: [EXPECTED_HOMOGENEOUS_DATATYPE],
+            },
+        });
+        expect(wrapper.text()).toBe(`a nested list with 10 ${EXPECTED_HOMOGENEOUS_DATATYPE} dataset collections`);
+    });
+});

client/src/components/History/Content/Collection/CollectionDescription.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import type { JobStateSummary } from "./JobStateSummary";
+import type { HDCASummary } from "@/api";
+
+import { JobStateSummary } from "./JobStateSummary";
 
 import CollectionProgress from "./CollectionProgress.vue";
 
 interface Props {
-    elementCount?: number;
-    elementsDatatypes?: string[];
-    jobStateSummary: JobStateSummary;
-    collectionType: string;
+    hdca: HDCASummary;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-    elementCount: undefined,
-    elementsDatatypes: undefined,
-});
+const props = defineProps<Props>();
 
 const labels = new Map([
     ["list", "list"],
@@ -25,41 +21,45 @@ const labels = new Map([
     ["paired", "pair"],
 ]);
 
+const jobStateSummary = computed(() => {
+    return new JobStateSummary(props.hdca);
+});
+
 const collectionLabel = computed(() => {
-    const collectionType = props.collectionType;
+    const collectionType = props.hdca.collection_type;
     return labels.get(collectionType) ?? "nested list";
 });
 const hasSingleElement = computed(() => {
-    return props.elementCount === 1;
+    return props.hdca.element_count === 1;
 });
 const isHomogeneous = computed(() => {
-    return props.elementsDatatypes?.length === 1;
+    return props.hdca.elements_datatypes.length === 1;
 });
 const homogeneousDatatype = computed(() => {
-    return isHomogeneous.value ? ` ${props.elementsDatatypes?.[0]}` : "";
+    return isHomogeneous.value ? ` ${props.hdca.elements_datatypes[0]}` : "";
 });
 const pluralizedItem = computed(() => {
-    if (props.collectionType === "list:list") {
+    if (props.hdca.collection_type === "list:list") {
         return pluralize("list");
     }
-    if (props.collectionType === "list:paired") {
+    if (props.hdca.collection_type === "list:paired") {
         return pluralize("pair");
     }
-    if (props.collectionType === "list:paired_or_unpaired") {
+    if (props.hdca.collection_type === "list:paired_or_unpaired") {
         if (!hasSingleElement.value) {
             return "paired and unpaired datasets";
         } else {
             return "dataset pair or unpaired dataset";
         }
     }
-    if (props.collectionType === "paired_or_unpaired") {
+    if (props.hdca.collection_type === "paired_or_unpaired") {
         if (!hasSingleElement.value) {
             return "dataset pair";
         } else {
             return "unpaired dataset";
         }
     }
-    if (!labels.has(props.collectionType)) {
+    if (!labels.has(props.hdca.collection_type)) {
         return pluralize("dataset collection");
     }
     return pluralize("dataset");
@@ -72,11 +72,12 @@ function pluralize(word: string) {
 
 <template>
     <div>
-        <span v-if="collectionType == 'paired_or_unpaired'" class="description mt-1 mb-1">
-            a <b>{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
+        <span v-if="hdca.collection_type == 'paired_or_unpaired'" class="description mt-1 mb-1">
+            a <b v-if="isHomogeneous">{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
         </span>
         <span v-else class="description mt-1 mb-1">
-            a {{ collectionLabel }} with {{ elementCount || 0 }}<b>{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
+            a {{ collectionLabel }} with {{ hdca.element_count || 0
+            }}<b v-if="isHomogeneous">{{ homogeneousDatatype }}</b> {{ pluralizedItem }}
         </span>
 
         <CollectionProgress v-if="jobStateSummary.size != 0" :summary="jobStateSummary" />

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

@@ -19,7 +19,6 @@ import { useEntryPointStore } from "@/stores/entryPointStore";
 import { useEventStore } from "@/stores/eventStore";
 import { clearDrag } from "@/utils/setDrag";
 
-import { JobStateSummary } from "./Collection/JobStateSummary";
 import { getContentItemState, type StateMap, STATES } from "./model/states";
 
 import CollectionDescription from "./Collection/CollectionDescription.vue";
@@ -90,12 +89,8 @@ const eventStore = useEventStore();
 const contentItem = ref<HTMLElement | null>(null);
 const subItemsVisible = ref(false);
 
-const jobState = computed(() => {
-    return new JobStateSummary(props.item);
-});
-
 const itemIsRunningInteractiveTool = computed(() => {
-    // If our datset id is in the entrypOintStore it's a running it
+    // If our dataset id is in the entrypOintStore it's a running it
     return !isCollection.value && entryPointStore.entryPointsForHda(props.item.id).length > 0;
 });
 
@@ -443,13 +438,7 @@ function unexpandedClick(event: Event) {
         </div>
         <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
         <span @click.stop="unexpandedClick">
-            <CollectionDescription
-                v-if="!isDataset"
-                class="px-2 pb-2 cursor-pointer"
-                :job-state-summary="jobState"
-                :collection-type="item.collection_type"
-                :element-count="item.element_count"
-                :elements-datatypes="item.elements_datatypes" />
+            <CollectionDescription v-if="!isDataset" class="px-2 pb-2 cursor-pointer" :hdca="item" />
             <StatelessTags
                 v-if="!tagsDisabled || hasTags"
                 class="px-2 pb-2"

client/src/components/History/CurrentCollection/CollectionDetails.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
-
 import type { HDCASummary } from "@/api";
-import { JobStateSummary } from "@/components/History/Content/Collection/JobStateSummary.js";
 
 import CollectionDescription from "@/components/History/Content/Collection/CollectionDescription.vue";
 import DetailsLayout from "@/components/History/Layout/DetailsLayout.vue";
@@ -12,11 +9,7 @@ interface Props {
     writeable: boolean;
 }
 
-const props = defineProps<Props>();
-
-const jobState = computed(() => {
-    return new JobStateSummary(props.dsc);
-});
+defineProps<Props>();
 </script>
 
 <template>
@@ -27,11 +20,7 @@ const jobState = computed(() => {
         :show-annotation="false"
         @save="$emit('update:dsc', $event)">
         <template v-slot:description>
-            <CollectionDescription
-                :job-state-summary="jobState"
-                :collection-type="dsc.collection_type"
-                :element-count="dsc.element_count ?? undefined"
-                :elements-datatypes="dsc.elements_datatypes" />
+            <CollectionDescription :hdca="dsc" />
         </template>
     </DetailsLayout>
 </template>