fix: design updates and block actions when masquerading (#24)

src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx

@@ -10,10 +10,11 @@ import messages from './messages';
 export const BeginCourseButton = ({ cardId }) => {
   const { homeUrl } = hooks.useCardCourseRunData(cardId);
   const { hasAccess } = hooks.useCardEnrollmentData(cardId);
+  const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   return (
     <Button
-      disabled={!hasAccess}
+      disabled={isMasquerading || !hasAccess}
       as="a"
       href={homeUrl}
     >

src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx

@@ -10,10 +10,11 @@ import messages from './messages';
 export const ResumeButton = ({ cardId }) => {
   const { resumeUrl } = hooks.useCardCourseRunData(cardId);
   const { hasAccess, isAudit, isAuditAccessExpired } = hooks.useCardEnrollmentData(cardId);
+  const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   return (
     <Button
-      disabled={!hasAccess || (isAudit && isAuditAccessExpired)}
+      disabled={isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired)}
       as="a"
       href={resumeUrl}
     >

src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx

@@ -12,12 +12,13 @@ export const SelectSessionButton = ({ cardId }) => {
   const { resumeUrl } = hooks.useCardCourseRunData(cardId);
   const { hasAccess } = hooks.useCardEnrollmentData(cardId);
   const { canChange, hasSessions } = hooks.useCardEntitlementData(cardId);
+  const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
   const openSessionModal = hooks.useUpdateSelectSessionModalCallback(dispatch, cardId);
   return (
     <Button
-      disabled={!hasAccess || (!canChange || !hasSessions)}
+      disabled={isMasquerading || !hasAccess || (!canChange || !hasSessions)}
       onClick={openSessionModal}
       as="a"
       href={resumeUrl}

src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx

@@ -11,12 +11,13 @@ import messages from './messages';
 export const UpgradeButton = ({ cardId }) => {
   const { upgradeUrl } = hooks.useCardCourseRunData(cardId);
   const { canUpgrade } = hooks.useCardEnrollmentData(cardId);
+  const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   return (
     <Button
       iconBefore={Locked}
       variant="outline-primary"
-      disabled={!canUpgrade}
+      disabled={isMasquerading || !canUpgrade}
       as="a"
       href={upgradeUrl}
     >

src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx

@@ -11,10 +11,11 @@ export const ViewCourseButton = ({ cardId }) => {
   const { marketingUrl } = hooks.useCardCourseRunData(cardId);
   const { hasAccess } = hooks.useCardEnrollmentData(cardId);
   const { isEntitlement, isExpired } = hooks.useCardEntitlementData(cardId);
+  const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   return (
     <Button
-      disabled={!hasAccess || (isEntitlement && isExpired)}
+      disabled={isMasquerading || !hasAccess || (isEntitlement && isExpired)}
       as="a"
       href={marketingUrl}
     >

src/containers/CourseCard/components/CourseCardMenu/index.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Dropdown, Icon, IconButton } from '@edx/paragon';
 import { MoreVert } from '@edx/paragon/icons';
 
+import { hooks as appHooks } from 'data/redux';
 import EmailSettingsModal from 'containers/EmailSettingsModal';
 import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
 import useCourseCardMenuData from './hooks';
@@ -13,6 +14,7 @@ export const CourseCardMenu = ({ cardId }) => {
     emailSettingsModal,
     unenrollModal,
   } = useCourseCardMenuData();
+  const { isMasquerading } = appHooks.useMasqueradeData();
   return (
     <>
       <Dropdown>
@@ -25,8 +27,12 @@ export const CourseCardMenu = ({ cardId }) => {
           alt="Actions dropdown"
         />
         <Dropdown.Menu>
-          <Dropdown.Item onClick={unenrollModal.show}>Unenroll</Dropdown.Item>
-          <Dropdown.Item onClick={emailSettingsModal.show}>Email Settings</Dropdown.Item>
+          <Dropdown.Item disabled={isMasquerading} onClick={unenrollModal.show}>
+            Unenroll
+          </Dropdown.Item>
+          <Dropdown.Item disabled={isMasquerading} onClick={emailSettingsModal.show}>
+            Email Settings
+          </Dropdown.Item>
           <Dropdown.Item href="#/action-3">Share to Facebook</Dropdown.Item>
           <Dropdown.Item href="#/action-3">Share to Twitter</Dropdown.Item>
         </Dropdown.Menu>

src/containers/CourseList/index.jsx

@@ -72,12 +72,15 @@ export const CourseList = () => {
         {visibleList.map(({ cardId }) => (
           <CourseCard key={cardId} cardId={cardId} />
         ))}
-        <Pagination
-          variant="secondary"
-          paginationLabel="Course List"
-          pageCount={numPages}
-          onPageSelect={setPageNumber}
-        />
+        {(numPages > 1) && (
+          <Pagination
+            variant="secondary"
+            paginationLabel="Course List"
+            className="mx-auto"
+            pageCount={numPages}
+            onPageSelect={setPageNumber}
+          />
+        )}
       </div>
     </div>
   );

src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.jsx

@@ -18,7 +18,7 @@ export const AuthenticatedUserDropdown = ({ username }) => {
   const isCollapsed = useIsCollapsed();
 
   return (
-    <Dropdown className="user-dropdown">
+    <Dropdown variant={isCollapsed ? 'light' : 'dark'} className="user-dropdown">
       <Dropdown.Toggle
         as={AvatarButton}
         src={profileImage}

src/data/services/lms/urls.js

@@ -8,7 +8,7 @@ const api = `${baseUrl}/api/`;
 // const init = `${api}learner_home/mock/init`; // mock endpoint for testing
 const init = `${api}learner_home/init`;
 
-const courseUnenroll = `${api}/courses/unenroll`; // TODO: Fix
+const courseUnenroll = `${baseUrl}/change_enrollment`;
 const updateEmailSettings = `${api}/change_email_settings`;
 const entitlementEnrollment = (uuid) => `${api}/entitlements/v1/entitlements/${uuid}/enrollments`;