Create 0009-discussions-integration.md

* Commits:
  chore(deps): update dependency codecov to v3.8.1

docs/decisions/0009-discussions-integration.md

@@ -0,0 +1,16 @@
+# Discussions Integration
+
+The discussions project will ultimately need to embed code from a separate micro-frontend into frontend-app-learning in order to render in-context discussions.  In-context, in this case, means as a sidebar to unit-level content.  The idea is that the frontend-app-discussions MFE would have routes that render unit-specific discussions forum as a companion/sidebar to the main unit content.  
+
+This ADR describes some design considerations for this integration.
+
+This integration is a forerunner to a broader project around the implementation of "experience plugins" which would allow us to load code across micro-frontends without an iframe.  That said, that project hasn't kicked off yet, so in the meantime we'd like to move forward with a simple iframe-based approach, very similar to how we load the unit content from LMS.  
+
+Furthermore, we will need to revisit this if it ever becomes the case that an LTI-based discussions provider implements in-context discussions.  Our approach should ideally be roughly compatible with LTI concepts and techniques, though I'd strongly suggest we _don't_ build anything LTI-specific for the foreseeable future.
+
+The suggested implementation involves:
+
+- Updating the sequence metadata API to include information about whether a particular unit should load in-context discussions.  For now, this could take the form of a `discussions_url` added to the unit objects inside the `items` array.  Longer term we'll want a way to signal to the frontend-app-learning MFE the plugins that should be available on the page, but that likely will come from some other API.  I don't think we should worry about that broader plugin configuration as part of this.
+- Adding a new `InContextSidebar` React component to frontend-app-learning to house the discussions integration.  The medium to long-term goal is that discussions will not be the only experience plugin loaded in this sidebar, so it would be appropriate to add a thin layer of abstraction between the components that render the discussions iframe and the components that handle the sidebar's behavior.
+- Have the discussions iframe load the page at `discussions_url`
+- If necessary, use a postMessage-based API to communicate into the iframe and pass additional data into it.  I don't know of a use-case for this for the discussions project, but wanted to mention it.  The schema of these messages would ideally be LTI-friendly, though the LTI specification doesn't have a lot to say about a postMessage schema.  This document suggests a reasonable message schema: https://github.com/bracken/lti_messaging

package-lock.json

@@ -5771,22 +5771,22 @@
       "dev": true
     },
     "codecov": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.7.2.tgz",
-      "integrity": "sha512-fmCjAkTese29DUX3GMIi4EaKGflHa4K51EoMc29g8fBHawdk/+KEq5CWOeXLdd9+AT7o1wO4DIpp/Z1KCqCz1g==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.8.1.tgz",
+      "integrity": "sha512-Qm7ltx1pzLPsliZY81jyaQ80dcNR4/JpcX0IHCIWrHBXgseySqbdbYfkdiXd7o/xmzQpGRVCKGYeTrHUpn6Dcw==",
       "dev": true,
       "requires": {
         "argv": "0.0.2",
         "ignore-walk": "3.0.3",
-        "js-yaml": "3.13.1",
+        "js-yaml": "3.14.0",
         "teeny-request": "6.0.1",
         "urlgrey": "0.4.4"
       },
       "dependencies": {
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "dev": true,
           "requires": {
             "argparse": "^1.0.7",

package.json

@@ -70,7 +70,7 @@
     "@testing-library/react": "10.3.0",
     "@testing-library/user-event": "12.0.17",
     "axios-mock-adapter": "1.18.2",
-    "codecov": "3.7.2",
+    "codecov": "3.8.1",
     "es-check": "5.1.4",
     "glob": "7.1.6",
     "husky": "3.1.0",

src/course-home/data/__factories__/index.js

@@ -1,3 +1,4 @@
 import './courseHomeMetadata.factory';
 import './datesTabData.factory';
 import './outlineTabData.factory';
+import './progressTabData.factory';

src/course-home/data/__factories__/progressTabData.factory.js

@@ -0,0 +1,71 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+// Sample data helpful when developing & testing, to see a variety of configurations.
+// This set of data may not be realistic, but it is intended to demonstrate many UI results.
+Factory.define('progressTabData')
+  .attrs({
+    certificate_data: null,
+    completion_summary: {
+      complete_count: 1,
+      incomplete_count: 1,
+      locked_count: 0,
+    },
+    course_grade: {
+      percent: 0,
+      is_passing: false,
+    },
+    section_scores: [
+      {
+        display_name: 'First section',
+        subsections: [
+          {
+            assignment_type: 'Homework',
+            display_name: 'First subsection',
+            has_graded_assignment: true,
+            num_points_earned: 0,
+            num_points_possible: 1,
+            percent_graded: 0.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',
+            has_graded_assignment: true,
+            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',
+          },
+        ],
+      },
+    ],
+    enrollment_mode: 'audit',
+    grading_policy: {
+      assignment_policies: [
+        {
+          num_droppable: 1,
+          short_label: 'HW',
+          type: 'Homework',
+          weight: 1,
+        },
+      ],
+      grade_range: {
+        pass: 0.75,
+      },
+    },
+    studio_url: 'http://studio.edx.org/settings/grading/course-v1:edX+Test+run',
+    verification_data: {
+      link: null,
+      status: 'none',
+      status_date: null,
+    },
+  });

src/course-home/data/api.js

@@ -142,8 +142,11 @@ export async function getProgressTabData(courseId) {
   }
 }
 
-export async function getProctoringInfoData(courseId) {
-  const url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;
+export async function getProctoringInfoData(courseId, username) {
+  let url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;
+  if (username) {
+    url += `&username=${encodeURIComponent(username)}`;
+  }
   try {
     const { data } = await getAuthenticatedHttpClient().get(url);
     return data;

src/course-home/outline-tab/OutlineTab.jsx

@@ -39,6 +39,7 @@ function OutlineTab({ intl }) {
   const {
     org,
     title,
+    username,
   } = useModel('courseHomeMeta', courseId);
 
   const {
@@ -204,6 +205,7 @@ function OutlineTab({ intl }) {
           <div className="col col-12 col-md-4">
             <ProctoringInfoPanel
               courseId={courseId}
+              username={username}
             />
             {courseGoalToDisplay && goalOptions && goalOptions.length > 0 && (
               <UpdateGoalSelector

src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx

@@ -9,7 +9,7 @@ import { Button } from '@edx/paragon';
 import messages from '../messages';
 import { getProctoringInfoData } from '../../data/api';
 
-function ProctoringInfoPanel({ courseId, intl }) {
+function ProctoringInfoPanel({ courseId, username, intl }) {
   const [status, setStatus] = useState('');
   const [link, setLink] = useState('');
   const [releaseDate, setReleaseDate] = useState(null);
@@ -74,7 +74,7 @@ function ProctoringInfoPanel({ courseId, intl }) {
   }
 
   useEffect(() => {
-    getProctoringInfoData(courseId)
+    getProctoringInfoData(courseId, username)
       .then(
         response => {
           if (response) {
@@ -172,7 +172,12 @@ function ProctoringInfoPanel({ courseId, intl }) {
 
 ProctoringInfoPanel.propTypes = {
   courseId: PropTypes.string.isRequired,
+  username: PropTypes.string,
   intl: intlShape.isRequired,
 };
 
+ProctoringInfoPanel.defaultProps = {
+  username: null,
+};
+
 export default injectIntl(ProctoringInfoPanel);

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Factory } from 'rosie';
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import MockAdapter from 'axios-mock-adapter';
+
+import {
+  initializeMockApp, logUnhandledRequests, render, screen, act,
+} from '../../setupTest';
+import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';
+import * as thunks from '../data/thunks';
+import initializeStore from '../../store';
+import ProgressTab from './ProgressTab';
+
+initializeMockApp();
+jest.mock('@edx/frontend-platform/analytics');
+
+describe('Progress Tab', () => {
+  let axiosMock;
+
+  const courseId = 'course-v1:edX+Test+run';
+  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+  courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
+  const progressUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
+
+  const store = initializeStore();
+  const defaultMetadata = Factory.build('courseHomeMetadata', { id: courseId });
+  const defaultTabData = Factory.build('progressTabData');
+
+  function setTabData(attributes, options) {
+    const progressTabData = Factory.build('progressTabData', attributes, options);
+    axiosMock.onGet(progressUrl).reply(200, progressTabData);
+  }
+
+  async function fetchAndRender() {
+    await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
+    await act(async () => render(<ProgressTab />, { store }));
+  }
+
+  beforeEach(async () => {
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+    // Set defaults for network requests
+    axiosMock.onGet(courseMetadataUrl).reply(200, defaultMetadata);
+    axiosMock.onGet(progressUrl).reply(200, defaultTabData);
+
+    logUnhandledRequests(axiosMock);
+  });
+
+  describe('Grade Summary', () => {
+    it('renders Grade Summary table when assignment policies are populated', async () => {
+      await fetchAndRender();
+      expect(screen.getByText('Grade summary')).toBeInTheDocument();
+    });
+
+    it('does not render Grade Summary when assignment policies are not populated', async () => {
+      setTabData({
+        grading_policy: {
+          assignment_policies: [],
+        },
+      });
+      await fetchAndRender();
+      expect(screen.queryByText('Grade summary')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Detailed Grades', () => {
+    it('renders Detailed Grades table when section scores are populated', async () => {
+      await fetchAndRender();
+      expect(screen.getByText('Detailed grades')).toBeInTheDocument();
+
+      expect(screen.getByRole('link', { name: 'First subsection' }));
+      expect(screen.getByRole('link', { name: 'Second subsection' }));
+    });
+
+    it('render message when section scores are not populated', async () => {
+      setTabData({
+        section_scores: [],
+      });
+      await fetchAndRender();
+      expect(screen.getByText('Detailed grades')).toBeInTheDocument();
+      expect(screen.getByText('You currently have no graded problem scores.')).toBeInTheDocument();
+    });
+  });
+});

src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { OverlayTrigger, Popover } from '@edx/paragon';
+
+import messages from './messages';
+
+function CompleteDonutSegment({ completePercentage, intl, lockedPercentage }) {
+  const [showCompletePopover, setShowCompletePopover] = useState(false);
+
+  const completeSegmentOffset = (3.6 * completePercentage) / 8;
+  let completeTooltipDegree = completePercentage < 100 ? -completeSegmentOffset : 0;
+
+  const lockedSegmentOffset = lockedPercentage - 75;
+  if (lockedPercentage > 0) {
+    completeTooltipDegree = (lockedSegmentOffset + completePercentage) * -3.6 + 90 + completeSegmentOffset;
+  }
+
+  return (
+    <g
+      className="donut-segment-group"
+      onBlur={() => setShowCompletePopover(false)}
+      onFocus={() => setShowCompletePopover(true)}
+      tabIndex="-1"
+    >
+      <circle
+        className="donut-segment complete-stroke"
+        cx="21"
+        cy="21"
+        r="15.91549430918954"
+        strokeDasharray={`${completePercentage} ${100 - completePercentage}`}
+        strokeDashoffset={lockedSegmentOffset + completePercentage}
+      />
+
+      {/* Tooltip */}
+      <OverlayTrigger
+        show={showCompletePopover}
+        placement="top"
+        overlay={(
+          <Popover aria-hidden="true">
+            <Popover.Content>
+              {intl.formatMessage(messages.completeContentTooltip)}
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        {/* Used to anchor the tooltip within the complete segment's stroke */}
+        <rect x="19" y="3" style={{ transform: `rotate(${completeTooltipDegree}deg)` }} />
+      </OverlayTrigger>
+
+      {/* Segment dividers */}
+      {lockedPercentage > 0 && lockedPercentage < 100 && (
+        <circle
+          className="donut-segment divider-stroke"
+          strokeDasharray="0.3 99.7"
+          strokeDashoffset={0.15 + lockedSegmentOffset}
+        />
+      )}
+      {completePercentage < 100 && lockedPercentage < 100 && lockedPercentage + completePercentage === 100 && (
+        <circle
+          className="donut-segment divider-stroke"
+          strokeDasharray="0.3 99.7"
+          strokeDashoffset="25.15"
+        />
+      )}
+    </g>
+  );
+}
+
+CompleteDonutSegment.propTypes = {
+  completePercentage: PropTypes.number.isRequired,
+  intl: intlShape.isRequired,
+  lockedPercentage: PropTypes.number.isRequired,
+};
+
+export default injectIntl(CompleteDonutSegment);

src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useModel } from '../../../generic/model-store';
+
+import CompleteDonutSegment from './CompleteDonutSegment';
+import IncompleteDonutSegment from './IncompleteDonutSegment';
+import LockedDonutSegment from './LockedDonutSegment';
+import messages from './messages';
+
+function CompletionDonutChart({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    completionSummary: {
+      completeCount,
+      incompleteCount,
+      lockedCount,
+    },
+  } = useModel('progress', courseId);
+
+  const numTotalUnits = completeCount + incompleteCount + lockedCount;
+  const completePercentage = Number(((completeCount / numTotalUnits) * 100).toFixed(0));
+  const lockedPercentage = Number(((lockedCount / numTotalUnits) * 100).toFixed(0));
+  const incompletePercentage = 100 - completePercentage - lockedPercentage;
+
+  return (
+    <>
+      <svg role="img" width="50%" height="100%" viewBox="0 0 42 42" className="donut" style={{ maxWidth: '178px' }} aria-hidden="true">
+        {/* The radius (or "r" attribute) is based off of a circumference of 100 in order to simplify percentage
+            calculations. The subsequent stroke-dasharray values found in each segment should add up to equal 100
+            in order to wrap around the circle once. */}
+        <circle className="donut-hole" fill="#fff" cx="21" cy="21" r="15.91549430918954" />
+        <g className="donut-chart-text">
+          <text x="50%" y="50%" className="donut-chart-number">
+            {completePercentage}%
+          </text>
+          <text x="50%" y="50%" className="donut-chart-label">
+            {intl.formatMessage(messages.donutLabel)}
+          </text>
+        </g>
+        <IncompleteDonutSegment incompletePercentage={incompletePercentage} />
+        <LockedDonutSegment lockedPercentage={lockedPercentage} />
+        <CompleteDonutSegment completePercentage={completePercentage} lockedPercentage={lockedPercentage} />
+      </svg>
+      <div className="sr-only">
+        {intl.formatMessage(messages.percentComplete, { percent: completePercentage })}
+        {intl.formatMessage(messages.percentIncomplete, { percent: incompletePercentage })}
+        {lockedPercentage > 0 && (
+          <>
+            {intl.formatMessage(messages.percentLocked, { percent: lockedPercentage })}
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+CompletionDonutChart.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CompletionDonutChart);

src/course-home/progress-tab/course-completion/CompletionDonutChart.scss

@@ -0,0 +1,74 @@
+.donut rect {
+  fill: transparent;
+  width: 4px;
+  height: 4px;
+  transform-origin: center;
+}
+
+.donut-chart-label {
+  font: {
+    family: $font-family-sans-serif;
+    size: .2rem;
+    weight: $font-weight-normal;
+  }
+  text-anchor: middle;
+}
+
+.donut-chart-number {
+  font: {
+    family: $font-family-monospace;
+    size: .5rem;
+    weight: $font-weight-bold;
+  }
+  line-height: 1rem;
+  text-anchor: middle;
+  -moz-transform: translateY(-0.6em);
+  -ms-transform: translateY(-0.6em);
+  -webkit-transform: translateY(-0.6em);
+  transform: translateY(-0.6em);
+}
+
+.donut-chart-text {
+  fill: $primary-500;
+  -moz-transform: translateY(0.25em);
+  -ms-transform: translateY(0.25em);
+  -webkit-transform: translateY(0.25em);
+  transform: translateY(0.25em);
+}
+
+.donut-ring, .donut-segment {
+  stroke-width: 6px;
+  fill: transparent;
+}
+
+.donut-segment-group {
+  cursor: pointer;
+  pointer-events: visibleStroke;
+
+  &:focus {
+    outline: none;
+
+    circle {
+      stroke-width: 7px;
+    }
+  }
+}
+
+.donut-ring, .donut-segment, .donut-hole {
+  &.complete-stroke {
+    stroke: $info-500;
+  }
+
+  &.divider-stroke {
+    stroke-width: 7px;
+    stroke: white;
+  }
+
+  &.incomplete-stroke {
+    stroke: $light-300;
+  }
+
+  &.locked-stroke {
+    stroke: $primary-500;
+  }
+}

src/course-home/progress-tab/course-completion/CourseCompletion.jsx

@@ -1,35 +1,29 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { useModel } from '../../../generic/model-store';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-function CourseCompletion() {
-  // TODO: AA-720
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
-
-  const {
-    completionSummary: {
-      completeCount,
-      incompleteCount,
-      lockedCount,
-    },
-  } = useModel('progress', courseId);
-
-  const total = completeCount + incompleteCount + lockedCount;
-  const completePercentage = ((completeCount / total) * 100).toFixed(0);
-  const incompletePercentage = ((incompleteCount / total) * 100).toFixed(0);
-  const lockedPercentage = ((lockedCount / total) * 100).toFixed(0);
+import CompletionDonutChart from './CompletionDonutChart';
+import messages from './messages';
 
+function CourseCompletion({ intl }) {
   return (
     <section className="text-dark-700 mb-4 rounded shadow-sm p-4">
-      <h2>Course completion</h2>
-      <p className="small">This represents how much course content you have completed.</p>
-      Complete: {completePercentage}%
-      Incomplete: {incompletePercentage}%
-      Locked: {lockedPercentage}%
+      <div className="row w-100 m-0">
+        <div className="col-12 col-sm-6 col-md-7 p-0">
+          <h2>{intl.formatMessage(messages.courseCompletion)}</h2>
+          <p className="small">
+            {intl.formatMessage(messages.completionBody)}
+          </p>
+        </div>
+        <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
+          <CompletionDonutChart />
+        </div>
+      </div>
     </section>
   );
 }
 
-export default CourseCompletion;
+CourseCompletion.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseCompletion);

src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { OverlayTrigger, Popover } from '@edx/paragon';
+
+import messages from './messages';
+
+function IncompleteDonutSegment({ incompletePercentage, intl }) {
+  const [showIncompletePopover, setShowIncompletePopover] = useState(false);
+
+  const incompleteSegmentOffset = (3.6 * incompletePercentage) / 16;
+  const incompleteTooltipDegree = incompletePercentage < 100 ? incompleteSegmentOffset : 0;
+
+  return (
+    <g
+      className="donut-segment-group"
+      onBlur={() => setShowIncompletePopover(false)}
+      onFocus={() => setShowIncompletePopover(true)}
+      tabIndex="-1"
+    >
+      <circle
+        className="donut-ring incomplete-stroke"
+        cx="21"
+        cy="21"
+        r="15.91549430918954"
+        strokeDasharray={`${incompletePercentage} ${100 - incompletePercentage}`}
+        strokeDashoffset="25"
+      />
+
+      {/* Tooltip */}
+      <OverlayTrigger
+        show={showIncompletePopover}
+        placement="top"
+        overlay={(
+          <Popover aria-hidden="true">
+            <Popover.Content>
+              {intl.formatMessage(messages.incompleteContentTooltip)}
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        {/* Used to anchor the tooltip within the incomplete segment's stroke */}
+        <rect x="19" y="3" style={{ transform: `rotate(${incompleteTooltipDegree}deg)` }} />
+      </OverlayTrigger>
+    </g>
+  );
+}
+
+IncompleteDonutSegment.propTypes = {
+  incompletePercentage: PropTypes.number.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(IncompleteDonutSegment);

src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { OverlayTrigger, Popover } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+function LockedDonutSegment({ intl, lockedPercentage }) {
+  const [showLockedPopover, setShowLockedPopover] = useState(false);
+
+  if (!lockedPercentage > 0) {
+    return null;
+  }
+
+  const iconDegree = lockedPercentage > 8 ? (3.6 * lockedPercentage) / 8 : ((3.6 * lockedPercentage) / 5) * 2;
+
+  return (
+    <g
+      className="donut-segment-group"
+      onBlur={() => setShowLockedPopover(false)}
+      onFocus={() => setShowLockedPopover(true)}
+      tabIndex="-1"
+    >
+      <circle
+        className="donut-segment locked-stroke"
+        cx="21"
+        cy="21"
+        r="15.91549430918954"
+        strokeDasharray={`${lockedPercentage} ${100 - lockedPercentage}`}
+        strokeDashoffset={lockedPercentage - 75}
+      />
+
+      {/* Tooltip */}
+      <OverlayTrigger
+        show={showLockedPopover}
+        placement="top"
+        overlay={(
+          <Popover aria-hidden="true">
+            <Popover.Content>
+              {intl.formatMessage(messages.lockedContentTooltip)}
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        <g
+          width="6"
+          height="21"
+          viewBox="0 0 21 6"
+          style={{
+            transformOrigin: 'center',
+            transform: `rotate(-${iconDegree}deg)`,
+          }}
+        >
+          {/* Locked icon */}
+          <path
+            d="M20 8.00002H17V6.21002C17 3.60002 15.09 1.27002 12.49 1.02002C9.51 0.740018 7 3.08002 7 6.00002V8.00002H4V22H20V8.00002ZM12 17C10.9 17 10 16.1 10 15C10 13.9 10.9 13 12 13C13.1 13 14 13.9 14 15C14 16.1 13.1 17 12 17ZM9 8.00002V6.00002C9 4.34002 10.34 3.00002 12 3.00002C13.66 3.00002 15 4.34002 15 6.00002V8.00002H9Z"
+            fill={lockedPercentage > 5 ? 'white' : 'transparent'}
+            style={{ transform: `scale(0.18) translate(5.8em, .7em) rotate(${iconDegree}deg)` }}
+          />
+        </g>
+      </OverlayTrigger>
+    </g>
+  );
+}
+
+LockedDonutSegment.propTypes = {
+  intl: intlShape.isRequired,
+  lockedPercentage: PropTypes.number.isRequired,
+};
+
+export default injectIntl(LockedDonutSegment);

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

@@ -0,0 +1,42 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  donutLabel: {
+    id: 'progress.completion.donut.label',
+    defaultMessage: 'completed',
+  },
+  completionBody: {
+    id: 'progress.completion.body',
+    defaultMessage: 'This represents how much of the course content you have completed. Note that some content may not yet be released.',
+  },
+  completeContentTooltip: {
+    id: 'progress.completion.tooltip.locked',
+    defaultMessage: 'Content that you have completed.',
+  },
+  courseCompletion: {
+    id: 'progress.completion.header',
+    defaultMessage: 'Course completion',
+  },
+  incompleteContentTooltip: {
+    id: 'progress.completion.tooltip',
+    defaultMessage: 'Content that you have access to and have not completed.',
+  },
+  lockedContentTooltip: {
+    id: 'progress.completion.tooltip.complete',
+    defaultMessage: 'Content that is locked and available only to those who upgrade.',
+  },
+  percentComplete: {
+    id: 'progress.completion.donut.percentComplete',
+    defaultMessage: 'You have completed {percent}% of content in this course.',
+  },
+  percentIncomplete: {
+    id: 'progress.completion.donut.percentIncomplete',
+    defaultMessage: 'You have not completed {percent}% of content in this course that you have access to.',
+  },
+  percentLocked: {
+    id: 'progress.completion.donut.percentLocked',
+    defaultMessage: '{percent}% of content in this course is locked and available only for those who upgrade.',
+  },
+});
+
+export default messages;

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

@@ -31,15 +31,15 @@ function DetailedGrades({ intl }) {
   );
 
   return (
-    <section className="text-dark-700 mb-4">
+    <section className="text-dark-700">
       <h3 className="h4 mb-3">{intl.formatMessage(messages.detailedGrades)}</h3>
       {hasSectionScores && (
         <DetailedGradesTable sectionScores={sectionScores} />
       )}
       {!hasSectionScores && (
-        <p className="small">You currently have no graded problem scores.</p>
+        <p className="small">{intl.formatMessage(messages.detailedGradesEmpty)}</p>
       )}
-      <p className="x-small">
+      <p className="x-small m-0">
         <FormattedMessage
           id="progress.ungradedAlert"
           defaultMessage="For progress on ungraded aspects of the course, view your {outlineLink}."

src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx

@@ -19,7 +19,7 @@ function AssignmentTypeCell({ assignmentType, footnoteMarker, footnoteId }) {
 AssignmentTypeCell.propTypes = {
   assignmentType: PropTypes.string.isRequired,
   footnoteId: PropTypes.string,
-  footnoteMarker: PropTypes.string,
+  footnoteMarker: PropTypes.number,
 };
 
 AssignmentTypeCell.defaultProps = {

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx

@@ -11,7 +11,7 @@ function GradeSummaryHeader({ intl }) {
     <div className="row w-100 m-0 align-items-center">
       <h3 className="h4 mb-3 mr-2">{intl.formatMessage(messages.gradeSummary)}</h3>
       <OverlayTrigger
-        trigger={['hover', 'click']}
+        trigger="click"
         placement="top"
         overlay={(
           <Popover>

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

@@ -17,6 +17,10 @@ const messages = defineMessages({
     id: 'progress.detailedGrades',
     defaultMessage: 'Detailed grades',
   },
+  detailedGradesEmpty: {
+    id: 'progress.detailedGrades.emptyTable',
+    defaultMessage: 'You currently have no graded problem scores.',
+  },
   footnotesTitle: {
     id: 'progress.footnotes.title',
     defaultMessage: 'Grade summary footnotes',

src/i18n/messages/ar.json

@@ -278,7 +278,7 @@
   "learn.course.tabs.navigation.overflow.menu": "المزيد...",
   "learning.offer.screenReaderPrices": "السعر الأصلي: {originalPrice}, سعر الخصم: {discountedPrice}",
   "learning.upgradeButton.screenReaderInlinePrices": "السعر الأصلي: {originalPrice}",
-  "learning.upgradeButton.buttonText": "قم بالترقية ({pricing})",
+  "learning.upgradeButton.buttonText": "Upgrade for {pricing}",
   "masquerade-widget.userName.error.generic": "حدث خطأ؛ يرجى المحاولة مرة أخرى.",
   "masquerade-widget.userName.input.placeholder": "اسم المستخدم أو البريد الإلكتروني",
   "masquerade-widget.userName.input.label": "عرف كهذا المستخدم",

src/i18n/messages/es_419.json

@@ -235,7 +235,7 @@
   "learn.contentLock.goToSection": "Ir a la Sección de Prerrequisitos",
   "learn.lockPaywall.title": "Graded assignments are locked",
   "learn.lockPaywall.content": "Upgrade to gain access to locked features like this one and get the most out of your course.",
-  "learn.lockPaywall.upgrade.link": "Upgrade for {currencySymbol}{price}",
+  "learn.lockPaywall.upgrade.link": "Opción verificada {currencySymbol}{price}",
   "learn.lockPaywall.example.alt": "Certificado de ejemplo",
   "learn.lockPaywall.list.intro": "When you upgrade, you:",
   "learn.lockPaywall.list.bullet1.linktext": "verified certificate",
@@ -278,7 +278,7 @@
   "learn.course.tabs.navigation.overflow.menu": "Más...",
   "learning.offer.screenReaderPrices": "Precio original: {originalPrice}; precio con descuento: {discountedPrice}",
   "learning.upgradeButton.screenReaderInlinePrices": "Precio original: {originalPrice}",
-  "learning.upgradeButton.buttonText": "Mejora ({precio})",
+  "learning.upgradeButton.buttonText": "Upgrade for {pricing}",
   "masquerade-widget.userName.error.generic": "Se ha producido un error. Inténtalo de nuevo.",
   "masquerade-widget.userName.input.placeholder": "Nombre de usuario o correo electrónico",
   "masquerade-widget.userName.input.label": "Hazte pasar por este usuario",

src/i18n/messages/fr.json

@@ -278,7 +278,7 @@
   "learn.course.tabs.navigation.overflow.menu": "More...",
   "learning.offer.screenReaderPrices": "Original price: {originalPrice}, discount price: {discountedPrice}",
   "learning.upgradeButton.screenReaderInlinePrices": "Original price: {originalPrice}",
-  "learning.upgradeButton.buttonText": "Upgrade ({pricing})",
+  "learning.upgradeButton.buttonText": "Upgrade for {pricing}",
   "masquerade-widget.userName.error.generic": "An error has occurred; please try again.",
   "masquerade-widget.userName.input.placeholder": "Username or email",
   "masquerade-widget.userName.input.label": "Masquerade as this user",

src/i18n/messages/zh_CN.json

@@ -278,7 +278,7 @@
   "learn.course.tabs.navigation.overflow.menu": "More...",
   "learning.offer.screenReaderPrices": "Original price: {originalPrice}, discount price: {discountedPrice}",
   "learning.upgradeButton.screenReaderInlinePrices": "Original price: {originalPrice}",
-  "learning.upgradeButton.buttonText": "Upgrade ({pricing})",
+  "learning.upgradeButton.buttonText": "Upgrade for {pricing}",
   "masquerade-widget.userName.error.generic": "An error has occurred; please try again.",
   "masquerade-widget.userName.input.placeholder": "Username or email",
   "masquerade-widget.userName.input.label": "Masquerade as this user",

src/index.scss

@@ -368,6 +368,7 @@
 @import 'course-home/dates-tab/Day.scss';
 @import 'course-home/outline-tab/widgets/UpgradeCard.scss';
 @import 'course-home/outline-tab/widgets/ProctoringInfoPanel.scss';
+@import 'course-home/progress-tab/course-completion/CompletionDonutChart.scss';
 @import 'courseware/course/course-exit/CourseRecommendationsExp/course_recommendations.exp';
 
 /** [MM-P2P] Experiment */