diff --git a/context/app/static/js/components/detailPage/ProcessedData/hooks.spec.ts b/context/app/static/js/components/detailPage/ProcessedData/hooks.spec.ts index 6936a01233..d934986388 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/hooks.spec.ts +++ b/context/app/static/js/components/detailPage/ProcessedData/hooks.spec.ts @@ -97,5 +97,5 @@ it('checks if dataset is published', () => { it('counts pipelines and their occurrences', () => { const { pipelinesText, pipelineCountsText } = usePipelineCountsInfo(testDatasets.map((dataset) => dataset._source)); expect(pipelinesText).toBe('Pipelines (2)'); - expect(pipelineCountsText).toBe('Cytokit + SPRM (2), Segmentation Mask'); + expect(pipelineCountsText).toBe('Cytokit + SPRM (2) and Segmentation Mask'); }); diff --git a/context/app/static/js/components/detailPage/ProcessedData/hooks.ts b/context/app/static/js/components/detailPage/ProcessedData/hooks.ts index 1b9d402a81..17a20ac091 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/hooks.ts +++ b/context/app/static/js/components/detailPage/ProcessedData/hooks.ts @@ -1,5 +1,6 @@ import { useMemo } from 'react'; import { ProcessedDatasetInfo, useProcessedDatasets } from 'js/pages/Dataset/hooks'; +import { generateCommaList } from 'js/helpers/functions'; export function createdByCentralProcess(dataset: Pick) { return dataset.creation_action === 'Central Process'; @@ -53,9 +54,9 @@ export function usePipelineCountsInfo(datasets: Pick, ); const pipelinesText = `Pipelines (${Object.keys(pipelineCounts).length})`; - const pipelineCountsText = Object.entries(pipelineCounts) - .map(([pipeline, count]) => (count > 1 ? `${pipeline} (${count})` : pipeline)) - .join(', '); + const pipelineCountsText = generateCommaList( + Object.entries(pipelineCounts).map(([pipeline, count]) => (count > 1 ? `${pipeline} (${count})` : pipeline)), + ); return { pipelinesText,