feat: option to show/hide ungraded assignment in progress page

test: add tests for show ungraded toggle

.env

@@ -47,3 +47,4 @@ TWITTER_HASHTAG=''
 TWITTER_URL=''
 USER_INFO_COOKIE_NAME=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
+SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''

.env.development

@@ -49,3 +49,4 @@ SESSION_COOKIE_DOMAIN='localhost'
 CHAT_RESPONSE_URL='http://localhost:18000/api/learning_assistant/v1/course_id'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
+SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''

.env.test

@@ -46,3 +46,4 @@ TWITTER_HASHTAG='myedxjourney'
 TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
+SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''

src/course-home/progress-tab/ProgressTab.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Factory } from 'rosie';
-import { getConfig } from '@edx/frontend-platform';
+import { getConfig, setConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { breakpoints } from '@openedx/paragon';
@@ -545,6 +545,111 @@ describe('Progress Tab', () => {
       await fetchAndRender();
       expect(screen.getByText('Grades & Credit')).toBeInTheDocument();
     });
+
+    it('does not render ungraded subsections when SHOW_UNGRADED_ASSIGNMENT_PROGRESS is false', async () => {
+      // The second assignment has has_graded_assignment set to false, so it should not be shown.
+      setTabData({
+        section_scores: [
+          {
+            display_name: 'First section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+                display_name: 'First subsection',
+                learner_has_access: true,
+                has_graded_assignment: true,
+                num_points_earned: 1,
+                num_points_possible: 2,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+              },
+            ],
+          },
+          {
+            display_name: 'Second section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                display_name: 'Second subsection',
+                learner_has_access: true,
+                has_graded_assignment: false,
+                num_points_earned: 1,
+                num_points_possible: 1,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',
+              },
+            ],
+          },
+        ],
+      });
+
+      await fetchAndRender();
+      expect(screen.getByText('First subsection')).toBeInTheDocument();
+      expect(screen.queryByText('Second subsection')).not.toBeInTheDocument();
+    });
+
+    it('renders both graded and ungraded subsections when SHOW_UNGRADED_ASSIGNMENT_PROGRESS is true', async () => {
+      // The second assignment has has_graded_assignment set to false.
+      setConfig({
+        ...getConfig(),
+        SHOW_UNGRADED_ASSIGNMENT_PROGRESS: true,
+      });
+
+      setTabData({
+        section_scores: [
+          {
+            display_name: 'First section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+                display_name: 'First subsection',
+                learner_has_access: true,
+                has_graded_assignment: true,
+                num_points_earned: 1,
+                num_points_possible: 2,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+              },
+            ],
+          },
+          {
+            display_name: 'Second section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                display_name: 'Second subsection',
+                learner_has_access: true,
+                has_graded_assignment: false,
+                num_points_earned: 1,
+                num_points_possible: 1,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',
+              },
+            ],
+          },
+        ],
+      });
+
+      await fetchAndRender();
+      expect(screen.getByText('First subsection')).toBeInTheDocument();
+      expect(screen.getByText('Second subsection')).toBeInTheDocument();
+
+      // reset config for other tests
+      setConfig({
+        ...getConfig(),
+        SHOW_UNGRADED_ASSIGNMENT_PROGRESS: false,
+      });
+    });
   });
 
   describe('Grade Summary', () => {
@@ -821,6 +926,14 @@ describe('Progress Tab', () => {
       expect(screen.getByText('Detailed grades')).toBeInTheDocument();
       expect(screen.getByText('You currently have no graded problem scores.')).toBeInTheDocument();
     });
+
+    it('renders Detailed Grades table when section scores are populated', async () => {
+      await fetchAndRender();
+      expect(screen.getByText('Detailed grades')).toBeInTheDocument();
+
+      expect(screen.getByText('First subsection'));
+      expect(screen.getByText('Second subsection'));
+    });
   });
 
   describe('Certificate Status', () => {

src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
+import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -28,6 +29,11 @@ const DetailedGrades = ({ intl }) => {
   } = useModel('progress', courseId);
 
   const hasSectionScores = sectionScores.length > 0;
+  const showUngradedAssignments = (
+    getConfig().SHOW_UNGRADED_ASSIGNMENT_PROGRESS === 'true'
+    || getConfig().SHOW_UNGRADED_ASSIGNMENT_PROGRESS === true
+  );
+  const emptyTableMsg = showUngradedAssignments ? messages.detailedGradesEmpty : messages.detailedGradesEmptyOnlyGraded;
 
   const logOutlineLinkClick = () => {
     sendTrackEvent('edx.ui.lms.course_progress.detailed_grades.course_outline_link.clicked', {
@@ -65,9 +71,9 @@ const DetailedGrades = ({ intl }) => {
         <DetailedGradesTable />
       )}
       {!hasSectionScores && (
-        <p className="small">{intl.formatMessage(messages.detailedGradesEmpty)}</p>
+        <p className="small">{intl.formatMessage(emptyTableMsg)}</p>
       )}
-      {overviewTabUrl && (
+      {overviewTabUrl && !showUngradedAssignments && (
         <p className="x-small m-0">
           <FormattedMessage
             id="progress.ungradedAlert"

src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
+import { getConfig } from '@edx/frontend-platform';
 import {
   getLocale, injectIntl, intlShape, isRtl,
 } from '@edx/frontend-platform/i18n';
@@ -20,13 +21,18 @@ const DetailedGradesTable = ({ intl }) => {
   } = useModel('progress', courseId);
 
   const isLocaleRtl = isRtl(getLocale());
+  const showUngradedAssignments = (
+    getConfig().SHOW_UNGRADED_ASSIGNMENT_PROGRESS === 'true'
+    || getConfig().SHOW_UNGRADED_ASSIGNMENT_PROGRESS === true
+  );
   return (
     sectionScores.map((chapter) => {
       const subsectionScores = chapter.subsections.filter(
         (subsection) => !!(
-          subsection.hasGradedAssignment
-          && subsection.showGrades
-          && (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)),
+          (showUngradedAssignments || subsection.hasGradedAssignment)
+            && subsection.showGrades
+            && (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)
+        ),
       );
 
       if (subsectionScores.length === 0) {

src/course-home/progress-tab/grades/messages.js

@@ -91,9 +91,14 @@ const messages = defineMessages({
     defaultMessage: 'Detailed grades',
     description: 'Headline for the (detailed grade) section in the progress tab',
   },
-  detailedGradesEmpty: {
+  detailedGradesEmptyOnlyGraded: {
     id: 'progress.detailedGrades.emptyTable',
     defaultMessage: 'You currently have no graded problem scores.',
+    description: 'It indicate that there are no graded problem or assignments to be scored',
+  },
+  detailedGradesEmpty: {
+    id: 'progress.detailedGrades.including-ungraded.emptyTable',
+    defaultMessage: 'You currently have no graded or ungraded problem scores.',
     description: 'It indicate that there are no problem or assignments to be scored',
   },
   footnotesTitle: {

src/index.jsx

@@ -174,6 +174,7 @@ initialize({
         PROCTORED_EXAM_RULES_URL: process.env.PROCTORED_EXAM_RULES_URL || null,
         CHAT_RESPONSE_URL: process.env.CHAT_RESPONSE_URL || null,
         PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL || null,
+        SHOW_UNGRADED_ASSIGNMENT_PROGRESS: process.env.SHOW_UNGRADED_ASSIGNMENT_PROGRESS || false,
       }, 'LearnerAppConfig');
     },
   },