Add SelfPacedProgressTable to My PL LandingPage component

apps/i18n/common/en_us.json

@@ -1936,6 +1936,7 @@
   "plLandingTabRPCenter": "My Regional Partner Center",
   "plLandingTabWorkshopOrganizerCenter": "My Workshop Organizer Center",
   "plLandingTabInstructorCenter": "My Instructor Center",
+  "plLandingSelfPacedProgressHeading": "Self-Paced Professional Learning Courses",
   "plLandingGettingStartedHeading": "Getting started with Professional Learning",
   "plLandingGettingStartedSubHeading": "Code.org Professional Learning",
   "plLandingGettingStartedDescription": "Help today's students become tomorrow's superheroes with professional learning that meets your needs. We offer different kinds of professional learning to meet your needs.",
@@ -1946,7 +1947,7 @@
   "plLandingStaticPLMidHighDesc": "Our engaging workshops are for new and experienced computer science teachers! In this program, you will explore the curriculum and learning tools, experience the course as a teacher and a learner and collaborate with fellow teachers.",
   "plLandingStaticPLMidHighButton": "Learn more about workshops",
   "plLandingStaticPLSelfPacedOverline": "Self-paced / Online",
-  "plLandingStaticPLSelfPacedHeading": "Self Paced Professional Learning",
+  "plLandingStaticPLSelfPacedHeading": "Self-Paced Professional Learning",
   "plLandingStaticPLSelfPacedDesc": "Through reading, viewing videos, completing interactive puzzles, and reflecting on your learning, you will develop your own understanding while preparing to teach computer science in your classroom.",
   "plLandingStaticPLSelfPacedButton": "Start professional learning courses",
   "plSectionsJoined": "Professional Learning Sections I've Joined",

apps/src/code-studio/pd/professional_learning_landing/LandingPage.jsx

@@ -8,10 +8,12 @@ import {pegasus} from '@cdo/apps/lib/util/urlHelpers';
 import {Heading2} from '@cdo/apps/componentLibrary/typography';
 import ProfessionalLearningCourseProgress from './ProfessionalLearningCourseProgress';
 import {EnrolledWorkshops} from './EnrolledWorkshops';
+import SelfPacedProgressTable from './SelfPacedProgressTable';
 import HeaderBannerNoImage from '@cdo/apps/templates/HeaderBannerNoImage';
 import TwoColumnActionBlock from '@cdo/apps/templates/studioHomepages/TwoColumnActionBlock';
 import ActionBlocksWrapper from '@cdo/apps/templates/studioHomepages/ActionBlocksWrapper';
 import style from './landingPage.module.scss';
+import './tableStyles.scss';
 import Tabs from '@cdo/apps/componentLibrary/tabs';
 
 const getAvailableTabs = () => {
@@ -73,6 +75,7 @@ export default function LandingPage({
           text: i18n.plLandingGettingStartedButton(),
         },
       ]}
+      marginBottom={'0'}
     />
   );
 
@@ -93,6 +96,10 @@ export default function LandingPage({
     />
   );
 
+  const RenderSelfPacedProgressTable = () => {
+    return <SelfPacedProgressTable plCoursesStarted={plCoursesStarted} />;
+  };
+
   const RenderStaticRecommendedPL = () => {
     const actionBlocks = [
       {
@@ -151,6 +158,12 @@ export default function LandingPage({
         {showGettingStartedBanner && RenderGettingStartedBanner()}
         {lastWorkshopSurveyUrl && RenderLastWorkshopSurveyBanner()}
         <EnrolledWorkshops />
+        {plCoursesStarted?.length >= 1 && (
+          <section>
+            <Heading2>{i18n.plLandingSelfPacedProgressHeading()}</Heading2>
+            {RenderSelfPacedProgressTable()}
+          </section>
+        )}
         {deeperLearningCourseData?.length >= 1 && (
           <div>
             <Heading2>Online Professional Learning Courses</Heading2>

apps/src/code-studio/pd/professional_learning_landing/SelfPacedProgressTable.jsx

@@ -39,7 +39,7 @@ const CourseRow = ({
             {percent_completed}% {i18n.selfPacedPlCompleted()}
           </BodyThreeText>
           {/* Progress bar */}
-          <div className={styles.progressBar}>
+          <div className={styles.progressBar} data-testid="progress-bar">
             <span
               className={styles.progressBarFill}
               style={{width: `${percent_completed}%`}}

apps/src/code-studio/pd/professional_learning_landing/SelfPacedProgressTable.story.jsx

@@ -1,34 +1,11 @@
 import React from 'react';
 import SelfPacedProgressTable from './SelfPacedProgressTable';
+import {selfPacedCourseConstants} from './constants';
 
 export default {
   component: SelfPacedProgressTable,
 };
 
-const plCoursesStarted = [
-  {
-    name: '#',
-    title: 'Course is in progress',
-    current_lesson_name: 'Current lesson name',
-    percent_completed: 10,
-    finish_url: '',
-  },
-  {
-    name: '#',
-    title: 'Course is in progress and has unit certificates',
-    current_lesson_name: 'Current lesson name',
-    percent_completed: 45,
-    finish_url: '#',
-  },
-  {
-    name: '#',
-    title: 'Course is complete',
-    current_lesson_name: 'Current lesson name',
-    percent_completed: 100,
-    finish_url: '#',
-  },
-];
-
 export const Basic = () => {
-  return <SelfPacedProgressTable plCoursesStarted={plCoursesStarted} />;
+  return <SelfPacedProgressTable plCoursesStarted={selfPacedCourseConstants} />;
 };

apps/src/code-studio/pd/professional_learning_landing/constants.js

@@ -0,0 +1,23 @@
+export const selfPacedCourseConstants = [
+  {
+    name: '#',
+    title: 'Course is in progress',
+    current_lesson_name: 'Current lesson name',
+    percent_completed: 10,
+    finish_url: '',
+  },
+  {
+    name: '#',
+    title: 'Course is in progress and has unit certificates',
+    current_lesson_name: 'Current lesson name',
+    percent_completed: 45,
+    finish_url: '#',
+  },
+  {
+    name: '#',
+    title: 'Course is complete',
+    current_lesson_name: 'Current lesson name',
+    percent_completed: 100,
+    finish_url: '#',
+  },
+];

apps/src/code-studio/pd/professional_learning_landing/landingPage.module.scss

@@ -10,11 +10,12 @@ main.wrapper {
 }
 
 section {
-  padding: 4rem 1rem 0 1rem !important;
+  padding: 4rem 0 0 !important;
 }
 
 .headerContainer {
   background-color: color.$light_gray_50;
+  padding: 0 1rem;
 }
 
 .headerWithoutTabsContainer {

apps/src/code-studio/pd/professional_learning_landing/selfPacedProgressTable.module.scss

@@ -17,6 +17,7 @@ table.selfPacedProgressTable {
   height: 0.5rem;
   border-radius: 1rem;
   margin-block-start: 0.25rem;
+  overflow: hidden;
 
   .progressBarFill {
     display: block;

apps/test/unit/code-studio/pd/professional_learning_landing/landingPageTest.js

@@ -3,22 +3,23 @@ import {render, screen} from '@testing-library/react';
 import i18n from '@cdo/locale';
 import {expect} from '../../../../util/reconfiguredChai';
 import LandingPage from '@cdo/apps/code-studio/pd/professional_learning_landing/LandingPage';
+import {selfPacedCourseConstants} from '@cdo/apps/code-studio/pd/professional_learning_landing/constants.js';
 
 const DEFAULT_PROPS = {
   lastWorkshopSurveyUrl: 'url',
   lastWorkshopSurveyCourse: 'CS Fundamentals',
   deeperLearningCourseData: [{data: 'oh yeah'}],
   currentYearApplicationId: 2024,
   workshopsAsParticipant: [{data: 'workshops'}],
-  plCoursesStarted: [{data: 'courses'}],
+  plCoursesStarted: selfPacedCourseConstants,
 };
 
 describe('LandingPage', () => {
   function renderDefault(propOverrides = {}) {
     render(<LandingPage {...DEFAULT_PROPS} {...propOverrides} />);
   }
 
-  it('page shows a getting started banner for a new teacher without an existing application, upcoming workshop, or pl course', () => {
+  it('page shows a getting started banner for a new teacher without an existing application, upcoming workshop, self-paced courses, or pl course', () => {
     renderDefault({
       lastWorkshopSurveyUrl: null,
       lastWorkshopSurveyCourse: null,
@@ -30,6 +31,8 @@ describe('LandingPage', () => {
     screen.getByText(i18n.plLandingGettingStartedHeading());
     expect(screen.queryByText(i18n.plLandingStartSurvey())).to.not.exist;
     screen.getByTestId('enrolled-workshops-loader');
+    expect(screen.queryByText(i18n.plLandingSelfPacedProgressHeading())).to.not
+      .exist;
     expect(screen.queryByText('Online Professional Learning Courses')).to.not
       .exist;
     screen.getByText(i18n.plLandingStaticPLMidHighHeading());
@@ -41,6 +44,7 @@ describe('LandingPage', () => {
       .exist;
     screen.getByText(i18n.plLandingStartSurvey());
     screen.getByTestId('enrolled-workshops-loader');
+    screen.getByText(i18n.plLandingSelfPacedProgressHeading());
     screen.getByText('Online Professional Learning Courses');
     screen.getByText(i18n.plLandingStaticPLMidHighHeading());
   });
@@ -51,11 +55,12 @@ describe('LandingPage', () => {
       .exist;
     screen.getByText(i18n.plLandingStartSurvey());
     screen.getByTestId('enrolled-workshops-loader');
+    screen.getByText(i18n.plLandingSelfPacedProgressHeading());
     screen.getByText('Online Professional Learning Courses');
     screen.getByText(i18n.plLandingStaticPLMidHighHeading());
   });
 
-  it('page shows upcoming workshops and plc enrollments but no survey banner if no pending survey exists', () => {
+  it('page shows upcoming workshops, self-paced courses, and plc enrollments but no survey banner if no pending survey exists', () => {
     renderDefault({
       lastWorkshopSurveyUrl: null,
       lastWorkshopSurveyCourse: null,
@@ -64,7 +69,21 @@ describe('LandingPage', () => {
       .exist;
     expect(screen.queryByText(i18n.plLandingStartSurvey())).to.not.exist;
     screen.getByTestId('enrolled-workshops-loader');
+    screen.getByText(i18n.plLandingSelfPacedProgressHeading());
     screen.getByText('Online Professional Learning Courses');
     screen.getByText(i18n.plLandingStaticPLMidHighHeading());
   });
+
+  it('page shows self-paced progress table if enrolled in self-paced courses', () => {
+    renderDefault();
+    screen.getByText(i18n.plLandingSelfPacedProgressHeading());
+    expect(screen.getAllByTestId('progress-bar').length).to.equal(2);
+    expect(screen.getByText(i18n.selfPacedPlCompleted()));
+    expect(
+      screen.getAllByText(i18n.selfPacedPlContinueCourse()).length
+    ).to.equal(2);
+    expect(
+      screen.getAllByText(i18n.selfPacedPlPrintCertificates()).length
+    ).to.equal(2);
+  });
 });