chore: PR feedback 2

openedx · Sep 12, 2024 · ddab547 · ddab547
1 parent 02163e8
commit ddab547
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 59 deletions.
diff --git a/src/components/learner-credit-management/assignment-modal/AssignmentModalmportantDates.jsx b/src/components/learner-credit-management/assignment-modal/AssignmentModalmportantDates.jsx
@@ -1,12 +1,9 @@
-import {
-  Col, Icon, Row, Stack,
-} from '@openedx/paragon';
+import { Icon, Stack } from '@openedx/paragon';
 import { Calendar } from '@openedx/paragon/icons';
 import { defineMessages, useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 
 import dayjs from 'dayjs';
-import { logInfo } from '@edx/frontend-platform/logging';
 import { setStaleCourseStartDates, hasCourseStarted, SHORT_MONTH_DATE_FORMAT } from '../data';
 
 const messages = defineMessages({
@@ -36,17 +33,11 @@ const AssignmentModalImportantDate = ({
   label,
   children,
 }) => (
-  <Row className="course-important-date">
-    <Col>
-      <Stack direction="horizontal" gap={2} className="font-weight-bolder">
-        <Icon size="sm" src={Calendar} />
-        {label}
-      </Stack>
-    </Col>
-    <Col>
-      {children}
-    </Col>
-  </Row>
+  <Stack direction="horizontal" gap={2}>
+    <Icon size="sm" src={Calendar} />
+    <span className="font-weight-bold">{label}:</span>
+    {children}
+  </Stack>
 );
 
 AssignmentModalImportantDate.propTypes = {
@@ -68,10 +59,6 @@ const AssignmentModalImportantDates = ({ courseRun }) => {
 
   // This is an edge case that the user should never enter but covered nonetheless
   if (!enrollByDate && !courseStartDate) {
-    logInfo(`[frontend-app-admin-portal][AssignmentModalImportantDates]
-    Component did not render, no courseRun enrollBy date or courseStart date provided
-    courseRun: ${courseRun}
-    `);
     return null;
   }
 

diff --git a/src/components/learner-credit-management/assignment-modal/NewAssignmentModalDropdown.jsx b/src/components/learner-credit-management/assignment-modal/NewAssignmentModalDropdown.jsx
@@ -2,6 +2,7 @@ import { Dropdown, Stack } from '@openedx/paragon';
 import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from '@edx/frontend-platform/i18n';
+import { useState } from 'react';
 import {
   setStaleCourseStartDates,
   SHORT_MONTH_DATE_FORMAT,
@@ -24,6 +25,13 @@ const NewAssignmentModalDropdown = ({
   id: courseKey, onClick: openAssignmentModal, courseRuns, children,
 }) => {
   const intl = useIntl();
+  const [clickedDropdownItem, setClickedDropdownItem] = useState(null);
+  const getDropdownItemClassName = (courseRun) => {
+    if (clickedDropdownItem && clickedDropdownItem.key === courseRun.key) {
+      return null;
+    }
+    return 'text-muted';
+  };
   return (
     <Dropdown id={courseKey}>
       <Dropdown.Toggle variant="primary" id="assign-by-course-runs-dropdown">
@@ -34,10 +42,16 @@ const NewAssignmentModalDropdown = ({
           {courseRuns.length > 0 ? intl.formatMessage(messages.byDate) : intl.formatMessage(messages.noAvailableDates) }
         </Dropdown.Header>
         {courseRuns.length > 0 && courseRuns.map(courseRun => (
-          <Dropdown.Item key={courseRun.key} id={courseRun.key} onClick={openAssignmentModal}>
+          <Dropdown.Item
+            key={courseRun.key}
+            id={courseRun.key}
+            onClick={openAssignmentModal}
+            onMouseDown={() => setClickedDropdownItem(courseRun)}
+            onMouseUp={() => setClickedDropdownItem(null)}
+          >
             <Stack>
               Enroll by {dayjs(courseRun.enrollBy).format(SHORT_MONTH_DATE_FORMAT)}
-              <span className="small text-muted">
+              <span className={`small ${getDropdownItemClassName(courseRun)}`}>
                 Starts {dayjs(setStaleCourseStartDates({ start: courseRun.start })).format(SHORT_MONTH_DATE_FORMAT)}
               </span>
             </Stack>

diff --git a/src/components/learner-credit-management/cards/BaseCourseCard.jsx b/src/components/learner-credit-management/cards/BaseCourseCard.jsx
@@ -12,14 +12,14 @@ import { camelCaseObject } from '@edx/frontend-platform/utils';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { useCourseCardMetadata } from './data';
+import AssignmentModalImportantDates from '../assignment-modal/AssignmentModalmportantDates';
 
 const BaseCourseCard = ({
   original,
   footerActions: CardFooterActions,
   enterpriseSlug,
   cardClassName,
   courseRun,
-  displayImportantDates,
 }) => {
   const isSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
@@ -28,7 +28,6 @@ const BaseCourseCard = ({
     course: camelCaseObject(original),
     courseRun,
     enterpriseSlug,
-    displayImportantDates,
   });
   const {
     imageSrc,
@@ -67,30 +66,37 @@ const BaseCourseCard = ({
           )}
         />
         <Card.Section>
-          <Badge variant="light">
-            {isExecEdCourseType
-              ? (
-                <FormattedMessage
-                  id="lcm.budget.detail.page.catalog.tab.course.card.executive.education"
-                  defaultMessage="Executive Education"
-                  description="Badge text for Executive Education course"
-                />
-              )
-              : (
-                <FormattedMessage
-                  id="lcm.budget.detail.page.catalog.tab.course.card.course"
-                  defaultMessage="Course"
-                  description="Badge text for Course"
-                />
-              )}
-          </Badge>
+          <Stack gap={4.5}>
+            <div>
+              <Badge variant="light">
+                {isExecEdCourseType
+                  ? (
+                    <FormattedMessage
+                      id="lcm.budget.detail.page.catalog.tab.course.card.executive.education"
+                      defaultMessage="Executive Education"
+                      description="Badge text for Executive Education course"
+                    />
+                  )
+                  : (
+                    <FormattedMessage
+                      id="lcm.budget.detail.page.catalog.tab.course.card.course"
+                      defaultMessage="Course"
+                      description="Badge text for Course"
+                    />
+                  )}
+              </Badge>
+            </div>
+            {courseRun && <AssignmentModalImportantDates courseRun={courseRun} />}
+          </Stack>
         </Card.Section>
+        {CardFooterActions && (
         <Card.Footer
           orientation={isExtraSmall ? 'horizontal' : 'vertical'}
           textElement={footerText}
         >
-          {CardFooterActions && <CardFooterActions course={courseCardMetadata} />}
+          <CardFooterActions course={courseCardMetadata} />
         </Card.Footer>
+        )}
       </Card.Body>
     </Card>
   );
@@ -122,12 +128,10 @@ BaseCourseCard.propTypes = {
   }),
   footerActions: PropTypes.elementType,
   cardClassName: PropTypes.string,
-  displayImportantDates: PropTypes.bool,
 };
 
 BaseCourseCard.defaultProps = {
   courseRun: null,
-  displayImportantDates: false,
 };
 
 export default connect(mapStateToProps)(BaseCourseCard);
diff --git a/src/components/learner-credit-management/cards/data/useCourseCardMetadata.jsx b/src/components/learner-credit-management/cards/data/useCourseCardMetadata.jsx
@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import { AppContext } from '@edx/frontend-platform/react';
 import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
 
+import { defineMessages, useIntl } from '@edx/frontend-platform/i18n';
 import CARD_TEXT from '../../constants';
 import {
   getAssignableCourseRuns,
@@ -13,15 +14,22 @@ import {
   useSubsidyAccessPolicy,
 } from '../../data';
 import { pluralText } from '../../../../utils';
-import AssignmentModalImportantDates from '../../assignment-modal/AssignmentModalmportantDates';
 
 const { ENROLLMENT } = CARD_TEXT;
 
+const messages = defineMessages({
+  courseFooterMessage: {
+    id: 'lcm.budget.detail.page.catalog.tab.course.card.footer-text',
+    defaultMessage: '({courseRuns}) available {pluralText}',
+    description: 'Footer text for a course card result for learner credit management',
+  },
+});
+
 const useCourseCardMetadata = ({
   course,
   enterpriseSlug,
-  courseRun,
 }) => {
+  const intl = useIntl();
   const { config: { ENTERPRISE_LEARNER_PORTAL_URL } } = useContext(AppContext);
   const { subsidyAccessPolicyId } = useBudgetId();
   const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
@@ -67,8 +75,11 @@ const useCourseCardMetadata = ({
     courseRuns,
     subsidyExpirationDatetime: subsidyAccessPolicy.subsidyExpirationDatetime,
   });
-  const availableCourseRunsCount = `(${assignableCourseRuns.length}) available ${pluralText('date', assignableCourseRuns.length)}`;
-  const footerText = courseRun ? <AssignmentModalImportantDates courseRun={courseRun} /> : availableCourseRunsCount;
+  // const footerText = `(${assignableCourseRuns.length}) available ${pluralText('date', assignableCourseRuns.length)}`;
+  const footerText = intl.formatMessage(messages.courseFooterMessage, {
+    courseRuns: assignableCourseRuns.length,
+    pluralText: pluralText('date', assignableCourseRuns.length),
+  });
   return {
     ...course,
     subtitle: partners.map(partner => partner.name).join(', '),

diff --git a/src/components/learner-credit-management/cards/tests/CourseCard.test.jsx b/src/components/learner-credit-management/cards/tests/CourseCard.test.jsx
@@ -326,7 +326,7 @@ describe('Course card works as expected', () => {
       shouldRetryAllocationAfterException: false, // no ability to retry after this error
       courseImportantDates: {
         courseStartDate: futureStartDate,
-        expectedCourseStartText: 'Course starts',
+        expectedCourseStartText: 'Course starts:',
       },
     },
     {
@@ -336,7 +336,7 @@ describe('Course card works as expected', () => {
       shouldRetryAllocationAfterException: false,
       courseImportantDates: {
         courseStartDate: pastStartDate,
-        expectedCourseStartText: 'Course started',
+        expectedCourseStartText: 'Course started:',
       },
     },
     {
@@ -346,7 +346,7 @@ describe('Course card works as expected', () => {
       shouldRetryAllocationAfterException: true,
       courseImportantDates: {
         courseStartDate: futureStartDate,
-        expectedCourseStartText: 'Course starts',
+        expectedCourseStartText: 'Course starts:',
       },
     },
     {
@@ -356,7 +356,7 @@ describe('Course card works as expected', () => {
       shouldRetryAllocationAfterException: false,
       courseImportantDates: {
         courseStartDate: pastStartDate,
-        expectedCourseStartText: 'Course started',
+        expectedCourseStartText: 'Course started:',
       },
     },
     {
@@ -366,7 +366,7 @@ describe('Course card works as expected', () => {
       shouldRetryAllocationAfterException: true,
       courseImportantDates: {
         courseStartDate: futureStartDate,
-        expectedCourseStartText: 'Course starts',
+        expectedCourseStartText: 'Course starts:',
       },
     },
     {
@@ -376,7 +376,7 @@ describe('Course card works as expected', () => {
       shouldRetryAllocationAfterException: false,
       courseImportantDates: {
         courseStartDate: pastStartDate,
-        expectedCourseStartText: 'Course started',
+        expectedCourseStartText: 'Course started:',
       },
     },
     {
@@ -386,7 +386,7 @@ describe('Course card works as expected', () => {
       shouldRetryAllocationAfterException: true,
       courseImportantDates: {
         courseStartDate: futureStartDate,
-        expectedCourseStartText: 'Course starts',
+        expectedCourseStartText: 'Course starts:',
       },
     },
     {
@@ -513,7 +513,7 @@ describe('Course card works as expected', () => {
     expect(assignmentModal.getByText(expectedAvailableBalance)).toBeInTheDocument();
 
     // Verify important dates
-    expect(assignmentModal.getByText('Enroll-by date')).toBeInTheDocument();
+    expect(assignmentModal.getByText('Enroll-by date:')).toBeInTheDocument();
     expect(assignmentModal.getByText(
       dayjs.unix(enrollByTimestamp).format(SHORT_MONTH_DATE_FORMAT),
     )).toBeInTheDocument();

diff --git a/src/index.scss b/src/index.scss
@@ -85,10 +85,6 @@ form {
   font-size: $font-size-base !important;
 }
 
-.assignments-important-dates {
-  width: 300px;
-}
-
 // TODO: Class override should be a contribution to Paragon if not already
 .pgn__card-logo-cap {
   object-fit: scale-down !important;