diff --git a/src/skills-builder/skills-builder-modal/view-results/ProductCardGrid.jsx b/src/skills-builder/skills-builder-modal/view-results/ProductCardGrid.jsx index 6ff1fced..ec8dd2b4 100644 --- a/src/skills-builder/skills-builder-modal/view-results/ProductCardGrid.jsx +++ b/src/skills-builder/skills-builder-modal/view-results/ProductCardGrid.jsx @@ -21,16 +21,17 @@ const ProductCardGrid = ({ handleCourseCardClick={handleCourseCardClick} rec={rec} productType={productTypeName} - indexInList={index} + position={index} /> )) ) : ( - productTypeRecommendations?.slice(0, 4).map(rec => ( + productTypeRecommendations?.slice(0, 4).map((rec, index) => ( )) )} diff --git a/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx b/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx index 1e8e40a0..4851dba2 100644 --- a/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx +++ b/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import cardImageCapFallbackSrc from '../../images/card-imagecap-fallback.png'; const RecommendationCard = ({ - rec, productType, handleCourseCardClick, indexInList, + rec, productType, handleCourseCardClick, position, }) => { const { card_image_url: cardImageUrl, @@ -17,6 +17,7 @@ const RecommendationCard = ({ organization_logo_override: organizationLogoOverride, partner, title, + uuid, } = rec; const schoolName = organizationShortCodeOverride @@ -25,6 +26,9 @@ const RecommendationCard = ({ const schoolLogoUrl = organizationLogoOverride || owners[0].logoImageUrl; + // If this label changes, make sure to duplicate the change in extractProductKeys.js + const productLabel = courseKey || `${title} [${uuid}]`; + return ( handleCourseCardClick(courseKey, productType, indexInList)} + onClick={() => handleCourseCardClick(productLabel, productType, position)} > { const { expandedList } = state; const { id: jobId, name: jobName, recommendations } = selectedRecommendations; - const handleCourseCardClick = (courseKey, productTypeName, index) => { + const handleCourseCardClick = (productLabel, productTypeName, index) => { // check to see if the grid of recommendations for this product line has been expanded if (expandedList.includes(productTypeName)) { // fire expanded click event @@ -22,9 +22,9 @@ const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => { app_name: 'skills_builder', category: 'skills_builder', page: 'skills_builder', - courserun_key: courseKey, + label: productLabel, product_line: productTypeName, - index_in_list: index, + position: index, selected_recommendations: { job_id: jobId, job_name: jobName, @@ -41,8 +41,9 @@ const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => { app_name: 'skills_builder', category: 'skills_builder', page: 'skills_builder', - courserun_key: courseKey, + label: productLabel, product_line: productTypeName, + position: index, selected_recommendations: { job_id: jobId, job_name: jobName, diff --git a/src/skills-builder/skills-builder-modal/view-results/ViewResults.jsx b/src/skills-builder/skills-builder-modal/view-results/ViewResults.jsx index c3398afb..0d1b06b8 100644 --- a/src/skills-builder/skills-builder-modal/view-results/ViewResults.jsx +++ b/src/skills-builder/skills-builder-modal/view-results/ViewResults.jsx @@ -49,7 +49,7 @@ const ViewResults = () => { selected_recommendations: { job_id: results[0].id, job_name: results[0].name, - /* We extract the title and course key into an array of objects */ + /* Extract a product label, title, and position for each recommendation */ product_keys: extractProductKeys(results[0].recommendations), }, is_default: true, diff --git a/src/skills-builder/skills-builder-modal/view-results/test/ViewResults.test.jsx b/src/skills-builder/skills-builder-modal/view-results/test/ViewResults.test.jsx index ed191802..dd415060 100644 --- a/src/skills-builder/skills-builder-modal/view-results/test/ViewResults.test.jsx +++ b/src/skills-builder/skills-builder-modal/view-results/test/ViewResults.test.jsx @@ -124,7 +124,8 @@ describe('view-results', () => { app_name: 'skills_builder', category: 'skills_builder', page: 'skills_builder', - courserun_key: 'MONS101', + label: 'MONS101', + position: 0, product_line: '2U_degree', selected_recommendations: { job_id: 0, diff --git a/src/skills-builder/test/__mocks__/jobSkills.mockData.js b/src/skills-builder/test/__mocks__/jobSkills.mockData.js index ff259e76..87ce99bb 100644 --- a/src/skills-builder/test/__mocks__/jobSkills.mockData.js +++ b/src/skills-builder/test/__mocks__/jobSkills.mockData.js @@ -72,24 +72,24 @@ export const mockData = { useAlgoliaSearch: [{}, {}, {}], productKeys: { course: [ - { title: 'Mining with the Mons', courserun_key: 'MONS101' }, - { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' }, + { title: 'Mining with the Mons', label: 'MONS101', position: 0 }, + { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 }, ], '2U_degree': [ - { title: 'Mining with the Mons', courserun_key: 'MONS101' }, - { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' }, + { title: 'Mining with the Mons', label: 'MONS101', position: 0 }, + { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 }, ], program: [ - { title: 'Mining with the Mons', courserun_key: 'MONS101' }, - { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' }, + { title: 'Mining with the Mons', label: 'MONS101', position: 0 }, + { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 }, ], boot_camp: [ - { title: 'Mining with the Mons', courserun_key: 'MONS101' }, - { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' }, + { title: 'Mining with the Mons', label: 'MONS101', position: 0 }, + { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 }, ], executive_education: [ - { title: 'Mining with the Mons', courserun_key: 'MONS101' }, - { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' }, + { title: 'Mining with the Mons', label: 'MONS101', position: 0 }, + { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 }, ], }, }; diff --git a/src/skills-builder/utils/extractProductKeys.js b/src/skills-builder/utils/extractProductKeys.js index 9e79dc41..4a144e40 100644 --- a/src/skills-builder/utils/extractProductKeys.js +++ b/src/skills-builder/utils/extractProductKeys.js @@ -15,7 +15,7 @@ import { productTypeNames } from '../skills-builder-modal/view-results/data/cons * @return * @typedef productKeys - an object with a key for each product line * @type {object} -* @property {array[object]} product_line - each object contains a title and product key +* @property {array[object]} product_line - each object contains a title, product label, and its position in the list */ export const extractProductKeys = (recommendations, expandedList = []) => ( Object.fromEntries( @@ -30,10 +30,12 @@ export const extractProductKeys = (recommendations, expandedList = []) => ( return [ type, // create an array of objects for each product line - // each object contains a title and product key, rather than the entire response from Algolia (rec) - recommendationsRefinedList?.map(rec => ({ + // each object contains a title, product label, and position - rather than the entire response from Algolia + recommendationsRefinedList?.map((rec, index) => ({ title: rec.title, - courserun_key: rec.active_run_key, + // If this label changes, make sure to duplicate the change in RecommendationCard.jsx + label: rec.active_run_key || `${rec.title} [${rec.uuid}]`, + position: index, })), ]; }), diff --git a/src/skills-builder/utils/tests/extractProductKeys.test.js b/src/skills-builder/utils/tests/extractProductKeys.test.js index f7f1a314..8e4fa41b 100644 --- a/src/skills-builder/utils/tests/extractProductKeys.test.js +++ b/src/skills-builder/utils/tests/extractProductKeys.test.js @@ -12,15 +12,17 @@ const mockRecommendations = Object.fromEntries( )), ); -// When the values are extracted, each course should only have two values: title and courserun_key +// When the values are extracted, each course should only have: title, label, and position const expectedCourseData = [ { title: 'Mining with the Mons', - courserun_key: 'MONS101', + label: 'MONS101', + position: 0, }, { title: 'The Art of Warren Upkeep', - courserun_key: 'WAR101', + label: 'WAR101', + position: 1, }, ];