Merge branch 'master' into hu/ent-6501

src/components/ContentHighlights/ContentHighlightCardContainer.jsx

@@ -1,25 +1,26 @@
-import React from 'react';
-import { CardGrid } from '@edx/paragon';
-import { camelCaseObject } from '@edx/frontend-platform';
-import ContentHighlightSetCard from './ContentHighlightSetCard';
-import { TEST_COURSE_HIGHLIGHTS_DATA } from './data/constants';
+import React, { useContext } from 'react';
+import { Stack } from '@edx/paragon';
 
-const ContentHighlightCardContainer = () => (
-  <CardGrid
-    columnSizes={{
-      xs: 12,
-      lg: 6,
-      xl: 4,
-    }}
-  >
-    {camelCaseObject(TEST_COURSE_HIGHLIGHTS_DATA).map(({ title, uuid, isPublished }) => (
-      <ContentHighlightSetCard
-        key={uuid}
-        title={title}
-        highlightUUID={uuid}
-        isPublished={isPublished}
+import { useHighlightSetsForCuration } from './data/hooks';
+import { EnterpriseAppContext } from '../EnterpriseApp/EnterpriseAppContextProvider';
+import HighlightSetSection from './HighlightSetSection';
+
+const ContentHighlightCardContainer = () => {
+  const { enterpriseCuration: { enterpriseCuration } } = useContext(EnterpriseAppContext);
+  const highlightSets = useHighlightSetsForCuration(enterpriseCuration);
+
+  return (
+    <Stack gap={4}>
+      <HighlightSetSection
+        title="Published"
+        highlightSets={highlightSets.published}
       />
-    ))}
-  </CardGrid>
-);
+      <HighlightSetSection
+        title="Drafts"
+        highlightSets={highlightSets.draft}
+      />
+    </Stack>
+  );
+};
+
 export default ContentHighlightCardContainer;

src/components/ContentHighlights/ContentHighlightCardItem.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { FOOTER_TEXT_BY_CONTENT_TYPE } from './data/constants';
 
 const ContentHighlightCardItem = ({ title, type, authoringOrganizations }) => (
-  <Card isClickable>
+  <Card>
     <Card.ImageCap
       src="https://source.unsplash.com/360x200/?nature,flower"
       srcAlt=""

src/components/ContentHighlights/ContentHighlightSet.jsx

@@ -3,12 +3,10 @@ import ContentHighlightsCardItemContainer from './ContentHighlightsCardItemsCont
 import CurrentContentHighlightItemsHeader from './CurrentContentHighlightItemsHeader';
 
 const ContentHighlightSet = () => (
-  <>
-    <Container fluid className="mt-5">
-      <CurrentContentHighlightItemsHeader />
-      <ContentHighlightsCardItemContainer />
-    </Container>
-  </>
+  <Container fluid className="mt-5">
+    <CurrentContentHighlightItemsHeader />
+    <ContentHighlightsCardItemContainer />
+  </Container>
 );
 
 export default ContentHighlightSet;

src/components/ContentHighlights/ContentHighlightSetCard.jsx

@@ -1,17 +1,19 @@
-import React, {
-  useMemo, useContext,
-} from 'react';
-import { Card, Badge, Stack } from '@edx/paragon';
+import React, { useContext } from 'react';
+import { Card } from '@edx/paragon';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { ROUTE_NAMES } from '../EnterpriseApp/constants';
-import { HIGHLIGHT_CARD_BADGE_STATUS } from './data/constants';
 import { ContentHighlightsContext } from './ContentHighlightsContext';
 import { toggleStepperModalAction } from './data/actions';
 
 const ContentHighlightSetCard = ({
-  title, highlightUUID, isPublished, enterpriseSlug,
+  imageCapSrc,
+  title,
+  highlightUUID,
+  isPublished,
+  enterpriseSlug,
+  itemCount,
 }) => {
   const history = useHistory();
   /* Stepper Draft Logic (See Hook) - Start */
@@ -24,25 +26,17 @@ const ContentHighlightSetCard = ({
     }
     return dispatch(toggleStepperModalAction({ isOpen: true }));
   };
-  // TODO: Bring logic one level up to abstract different sections for draft vs published
-  const badgeData = useMemo(() => ({
-    variant: isPublished ? HIGHLIGHT_CARD_BADGE_STATUS.PUBLISHED.variant : HIGHLIGHT_CARD_BADGE_STATUS.DRAFT.variant,
-    label: isPublished ? HIGHLIGHT_CARD_BADGE_STATUS.PUBLISHED.label : HIGHLIGHT_CARD_BADGE_STATUS.DRAFT.label,
-  }), [isPublished]);
+
   return (
     <Card
       isClickable
       onClick={handleHighlightSetClick}
     >
-      <Stack className="justify-content-between p-4" direction="horizontal">
-        <Card.Header
-          className="p-0"
-          title={title}
-        />
-        <Badge className="align-self-end" variant={badgeData.variant}>
-          {badgeData.label}
-        </Badge>
-      </Stack>
+      <Card.ImageCap src={imageCapSrc} srcAlt="" />
+      <Card.Header title={title} />
+      <Card.Section>
+        {itemCount} items
+      </Card.Section>
     </Card>
   );
 };
@@ -52,6 +46,8 @@ ContentHighlightSetCard.propTypes = {
   highlightUUID: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
   isPublished: PropTypes.bool.isRequired,
+  itemCount: PropTypes.number.isRequired,
+  imageCapSrc: PropTypes.string.isRequired,
 };
 
 const mapStateToProps = state => ({

src/components/ContentHighlights/ContentHighlightsCardItemsContainer.jsx

@@ -6,12 +6,11 @@ import ContentHighlightCardItem from './ContentHighlightCardItem';
 import { TEST_COURSE_HIGHLIGHTS_DATA } from './data/constants';
 
 const ContentHighlightsCardItemsContainer = () => {
-  const { highlightUUID } = useParams();
+  const { highlightUUID } = useParams(); // eslint-disable-line
   const [highlightCourses] = useState(
-    camelCaseObject(TEST_COURSE_HIGHLIGHTS_DATA).filter(
-      highlight => highlight.uuid === highlightUUID,
-    )[0]?.highlightedContent,
+    camelCaseObject(TEST_COURSE_HIGHLIGHTS_DATA)[0]?.highlightedContent,
   );
+
   if (!highlightCourses) {
     return null;
   }

src/components/ContentHighlights/ContentHighlightsContext.jsx

@@ -6,6 +6,7 @@ import {
   initialContentHighlightsState,
 } from './data/reducer';
 
+
 export const ContentHighlightsContext = createContext({});
 
 const ContentHighlightsContextProvider = ({ children }) => {

src/components/ContentHighlights/ContentHighlightsDashboard.jsx

@@ -1,62 +1,40 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Container } from '@edx/paragon';
 import ZeroStateHighlights from './ZeroState';
 import CurrentContentHighlights from './CurrentContentHighlights';
 import ContentHighlightHelmet from './ContentHighlightHelmet';
-// import { TEST_COURSE_HIGHLIGHTS_DATA } from './data/constants';
+import { EnterpriseAppContext } from '../EnterpriseApp/EnterpriseAppContextProvider';
 
-const ContentHighlightsDashboard = ({ highlightSets }) => {
+const ContentHighlightsDashboardBase = ({ children }) => (
+  <Container fluid className="my-5">
+    <ContentHighlightHelmet title="Highlights" />
+    {children}
+  </Container>
+);
+
+ContentHighlightsDashboardBase.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+const ContentHighlightsDashboard = () => {
+  const { enterpriseCuration: { enterpriseCuration } } = useContext(EnterpriseAppContext);
+  const highlightSets = enterpriseCuration?.highlightSets;
   const hasContentHighlights = highlightSets?.length > 0;
-  /* uncomment out import and 1 of the following conditions to test behavior */
-  // const hasContentHighlights = TEST_COURSE_HIGHLIGHTS_DATA.length > 0;
-  // const hasContentHighlights = false;
+
   if (!hasContentHighlights) {
     return (
-      <Container fluid className="mt-5">
-        <ContentHighlightHelmet title="Highlights" />
+      <ContentHighlightsDashboardBase>
         <ZeroStateHighlights />
-      </Container>
+      </ContentHighlightsDashboardBase>
     );
   }
 
   return (
-    <Container fluid className="mt-5">
-      <ContentHighlightHelmet title="Highlights" />
+    <ContentHighlightsDashboardBase>
       <CurrentContentHighlights />
-    </Container>
+    </ContentHighlightsDashboardBase>
   );
 };
 
-ContentHighlightsDashboard.propTypes = {
-  highlightSets: PropTypes.arrayOf(
-    PropTypes.shape({
-      uuid: PropTypes.string,
-      title: PropTypes.string,
-      isPublished: PropTypes.bool,
-      enterpriseCuration: PropTypes.string,
-      highlightedContent: PropTypes.arrayOf(
-        PropTypes.shape({
-          uuid: PropTypes.string,
-          contentKey: PropTypes.string,
-          contentType: PropTypes.string,
-          title: PropTypes.string,
-          cardImageUrl: PropTypes.string,
-          authoringOrganizations: PropTypes.arrayOf(
-            PropTypes.shape({
-              uuid: PropTypes.string,
-              name: PropTypes.string,
-              logoImageUrl: PropTypes.string,
-            }),
-          ),
-        }),
-      ),
-    }),
-  ),
-};
-
-ContentHighlightsDashboard.defaultProps = {
-  highlightSets: null,
-};
-
 export default ContentHighlightsDashboard;

src/components/ContentHighlights/CurrentContentHighlightHeader.jsx

@@ -2,17 +2,19 @@ import React, { useContext } from 'react';
 import {
   Button, ActionRow,
 } from '@edx/paragon';
+import { Add } from '@edx/paragon/icons';
 import ContentHighlightStepper from './HighlightStepper/ContentHighlightStepper';
 import { ContentHighlightsContext } from './ContentHighlightsContext';
 import { toggleStepperModalAction } from './data/actions';
 
 const CurrentContentHighlightHeader = () => {
   const { dispatch, stepperModal: { isOpen } } = useContext(ContentHighlightsContext);
+
   return (
     <>
-      <ActionRow className="mb-4.5">
+      <ActionRow>
         <h2 className="m-0">
-          Active Highlights
+          Highlight collections
         </h2>
         <ActionRow.Spacer />
         <Button

src/components/ContentHighlights/CurrentContentHighlightItemsHeader.jsx

@@ -1,18 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, ActionRow } from '@edx/paragon';
 import { useParams } from 'react-router-dom';
-import { TEST_COURSE_HIGHLIGHTS_DATA } from './data/constants';
 import ContentHighlightHelmet from './ContentHighlightHelmet';
 
 const CurrentContentHighlightItemsHeader = () => {
   const { highlightUUID } = useParams();
-  const [highlightTitle] = useState(TEST_COURSE_HIGHLIGHTS_DATA.filter(
-    highlights => highlights.uuid === highlightUUID,
-  )[0].title);
 
-  if (!highlightTitle) {
-    return null;
-  }
+  const highlightTitle = highlightUUID;
 
   const titleName = `${highlightTitle} - Highlights`;
 

src/components/ContentHighlights/CurrentContentHighlights.jsx

@@ -7,7 +7,7 @@ import ContentHighlightCardContainer from './ContentHighlightCardContainer';
 import CurrentContentHighlightHeader from './CurrentContentHighlightHeader';
 
 const CurrentContentHighlights = () => (
-  <Stack>
+  <Stack gap={3}>
     <CurrentContentHighlightHeader />
     <ContentHighlightCardContainer />
   </Stack>

src/components/ContentHighlights/HighlightSetSection.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CardGrid } from '@edx/paragon';
+
+import ContentHighlightSetCard from './ContentHighlightSetCard';
+
+const HighlightSetSection = ({
+  title: sectionTitle,
+  highlightSets,
+}) => {
+  if (highlightSets.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h3 className="mb-3">{sectionTitle}</h3>
+      <CardGrid
+        columnSizes={{
+          xs: 12,
+          lg: 6,
+          xl: 4,
+        }}
+      >
+        {highlightSets.map(({
+          title,
+          uuid,
+          isPublished,
+          highlightedContentUuids,
+        }) => (
+          <ContentHighlightSetCard
+            key={uuid}
+            title={title}
+            highlightUUID={uuid}
+            isPublished={isPublished}
+            itemCount={highlightedContentUuids.length}
+            imageCapSrc="https://source.unsplash.com/360x200/?cat,dog"
+          />
+        ))}
+      </CardGrid>
+    </div>
+  );
+};
+
+HighlightSetSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  highlightSets: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    uuid: PropTypes.string.isRequired,
+    isPublished: PropTypes.bool.isRequired,
+    highlightedContentUuids: PropTypes.arrayOf(PropTypes.string).isRequired,
+  })).isRequired,
+};
+
+export default HighlightSetSection;

src/components/ContentHighlights/data/constants.js

@@ -9,17 +9,14 @@ export const STEPPER_STEP_TEXT = {
   confirmContent: 'Confirm your Content',
   confirmHighlight: 'Confirm your Highlight',
 };
+
 // Default footer values based on API response for ContentHighlightCardItem
 export const FOOTER_TEXT_BY_CONTENT_TYPE = {
   course: 'Course',
   program: 'Program',
   learnerpathway: 'Pathway',
 };
-// badge status for published vs unpublished highlight cards
-export const HIGHLIGHT_CARD_BADGE_STATUS = {
-  PUBLISHED: { label: 'Published', variant: 'primary' },
-  DRAFT: { label: 'Draft', variant: 'light' },
-};
+
 /*eslint-disable*/
 // Test Data for Content Highlights
 export const TEST_COURSE_HIGHLIGHTS_DATA = [
@@ -52,7 +49,7 @@ export const TEST_COURSE_HIGHLIGHTS_DATA = [
                 },
                 {
                   title: 'Science',
-                  content_type: 'Pathway',
+                  content_type: 'Learnerpathway',
                   uuid: '2',
                   content_key: 'edX+DemoX',
                   authoring_organizations: 

src/components/ContentHighlights/data/hooks.js

@@ -0,0 +1 @@
+