chore: update to paragon 17.0.0

- Drop our custom breakpoints (identical to paragon's)
- Drop our custom useWindowSize (and adapt to paragon's version
  not providing a size initially at component mount)
- Drop our dependency on react-responsive
- Drop our dependency on react-break

src/courseware/course/sequence/Sequence.jsx

@@ -12,10 +12,10 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import { history } from '@edx/frontend-platform';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
+import { breakpoints, useWindowSize } from '@edx/paragon';
 
 import PageLoading from '../../../generic/PageLoading';
 import { UserMessagesContext, ALERT_TYPES } from '../../../generic/user-messages';
-import useWindowSize, { responsiveBreakpoints } from '../../../generic/tabs/useWindowSize';
 import { useModel } from '../../../generic/model-store';
 
 import CourseLicense from '../course-license';
@@ -53,7 +53,7 @@ function Sequence({
   const unit = useModel('units', unitId);
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
   const sequenceMightBeUnit = useSelector(state => state.courseware.sequenceMightBeUnit);
-  const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < responsiveBreakpoints.small.minWidth;
+  const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
 
   const handleNext = () => {
     const nextIndex = sequence.unitIds.indexOf(unitId) + 1;

src/courseware/course/sequence/Sequence.test.jsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import { Factory } from 'rosie';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { breakpoints } from '@edx/paragon';
 import {
   loadUnit, render, screen, fireEvent, waitFor, initializeTestStore,
 } from '../../../setupTest';
 import Sequence from './Sequence';
 import { fetchSequenceFailure } from '../../data/slice';
-import useWindowSize from '../../../generic/tabs/useWindowSize';
 
 jest.mock('@edx/frontend-platform/analytics');
-jest.mock('../../../generic/tabs/useWindowSize');
-useWindowSize.mockReturnValue({ width: 1200 });
 
 describe('Sequence', () => {
   let mockData;
@@ -36,6 +34,10 @@ describe('Sequence', () => {
     };
   });
 
+  beforeEach(() => {
+    global.innerWidth = breakpoints.extraLarge.minWidth;
+  });
+
   it('renders correctly without data', async () => {
     const testStore = await initializeTestStore({ excludeFetchCourse: true, excludeFetchSequence: true }, false);
     render(<Sequence {...mockData} {...{ unitId: undefined, sequenceId: undefined }} />, { store: testStore });
@@ -406,7 +408,7 @@ describe('Sequence', () => {
     });
 
     it('does not render notification tray in sequence by default if in responsive view', async () => {
-      useWindowSize.mockReturnValue({ width: 991 });
+      global.innerWidth = breakpoints.medium.maxWidth;
       const { container } = render(<Sequence {...mockData} />);
       // unable to test the absence of 'Notifications' by finding it by text, using the class of the tray instead:
       expect(container).not.toHaveClass('notification-tray-container');

src/courseware/course/sequence/lock-paywall/LockPaywall.jsx

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert, breakpoints, useWindowSize } from '@edx/paragon';
 import { Locked } from '@edx/paragon/icons';
 import messages from './messages';
 import certificateLocked from '../../../../generic/assets/edX_locked_certificate.png';
 import { useModel } from '../../../../generic/model-store';
-import useWindowSize, { responsiveBreakpoints } from '../../../../generic/tabs/useWindowSize';
 import { UpgradeButton } from '../../../../generic/upgrade-button';
 import {
   VerifiedCertBullet,
@@ -31,15 +30,14 @@ function LockPaywall({
 
   // the following variables are set and used for resposive layout to work with
   // whether the NotificationTray is open or not and if there's an offer with longer text
-  const shouldDisplayBulletPointsBelowCertificate = useWindowSize().width
-    <= responsiveBreakpoints.large.minWidth;
-  const shouldDisplayGatedContentOneColumn = useWindowSize().width <= responsiveBreakpoints.extraLarge.minWidth
+  const shouldDisplayBulletPointsBelowCertificate = useWindowSize().width <= breakpoints.large.minWidth;
+  const shouldDisplayGatedContentOneColumn = useWindowSize().width <= breakpoints.extraLarge.minWidth
     && notificationTrayVisible;
-  const shouldDisplayGatedContentTwoColumns = useWindowSize().width < responsiveBreakpoints.large.minWidth
+  const shouldDisplayGatedContentTwoColumns = useWindowSize().width < breakpoints.large.minWidth
     && notificationTrayVisible;
-  const shouldDisplayGatedContentTwoColumnsHalf = useWindowSize().width <= responsiveBreakpoints.large.minWidth
+  const shouldDisplayGatedContentTwoColumnsHalf = useWindowSize().width <= breakpoints.large.minWidth
     && !notificationTrayVisible;
-  const shouldWrapTextOnButton = useWindowSize().width > responsiveBreakpoints.extraSmall.minWidth;
+  const shouldWrapTextOnButton = useWindowSize().width > breakpoints.extraSmall.minWidth;
 
   if (!verifiedMode) {
     return null;

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@edx/paragon';
+import { breakpoints, Button, useWindowSize } from '@edx/paragon';
 import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
 import classNames from 'classnames';
 import {
@@ -17,7 +17,6 @@ import SequenceNavigationTabs from './SequenceNavigationTabs';
 import { useSequenceNavigationMetadata } from './hooks';
 import { useModel } from '../../../../generic/model-store';
 import { LOADED } from '../../../data/slice';
-import useWindowSize, { responsiveBreakpoints } from '../../../../generic/tabs/useWindowSize';
 
 import messages from './messages';
 /** [MM-P2P] Experiment */
@@ -44,7 +43,7 @@ function SequenceNavigation({
     sequence.gatedContent !== undefined && sequence.gatedContent.gated
   ) : undefined;
 
-  const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < responsiveBreakpoints.small.minWidth;
+  const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
 
   const renderUnitButtons = () => {
     if (isLocked) {