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 6ff1fce..ec8dd2b 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 1e8e40a..4851dba 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 c3398af..0d1b06b 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 ed19180..dd41506 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 ff259e7..87ce99b 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 9e79dc4..4a144e4 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 f7f1a31..8e4fa41 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,
},
];