feat: add status text to units

openedx · Jan 25, 2024 · 5f6da66 · 5f6da66
1 parent 3c25546
commit 5f6da66
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 35 deletions.
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
@@ -363,6 +363,8 @@ const CourseOutline = ({ courseId }) => {
                                             unit={unit}
                                             subsection={subsection}
                                             section={section}
+                                            isSelfPaced={statusBarData.isSelfPaced}
+                                            isCustomRelativeDatesActive={isCustomRelativeDatesActive}
                                             index={unitIndex}
                                             canMoveItem={canMoveItem(subsection.childInfo.children)}
                                             savingStatus={savingStatus}

diff --git a/src/course-outline/unit-card/UnitCard.jsx b/src/course-outline/unit-card/UnitCard.jsx
@@ -9,12 +9,15 @@ import CardHeader from '../card-header/CardHeader';
 import BaseTitleWithStatusBadge from '../card-header/BaseTitleWithStatusBadge';
 import ConditionalSortableElement from '../drag-helper/ConditionalSortableElement';
 import TitleLink from '../card-header/TitleLink';
+import XBlockStatus from '../xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
 
 const UnitCard = ({
   unit,
   subsection,
   section,
+  isSelfPaced,
+  isCustomRelativeDatesActive,
   index,
   canMoveItem,
   onOpenPublishModal,
@@ -146,6 +149,13 @@ const UnitCard = ({
           namePrefix={namePrefix}
           actions={actions}
         />
+        <div className="unit-card__content item-children" data-testid="unit-card__content">
+          <XBlockStatus
+            isSelfPaced={isSelfPaced}
+            isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+            item={unit}
+          />
+        </div>
       </div>
     </ConditionalSortableElement>
   );
@@ -193,6 +203,8 @@ UnitCard.propTypes = {
   index: PropTypes.number.isRequired,
   canMoveItem: PropTypes.func.isRequired,
   onOrderChange: PropTypes.func.isRequired,
+  isSelfPaced: PropTypes.bool.isRequired,
+  isCustomRelativeDatesActive: PropTypes.bool.isRequired,
 };
 
 export default UnitCard;
diff --git a/src/course-outline/unit-card/UnitCard.scss b/src/course-outline/unit-card/UnitCard.scss
@@ -1,10 +1,6 @@
 .unit-card {
   flex-grow: 1;
 
-  .unit-card__content {
-    margin: $spacer;
-  }
-
   .item-card-header__badge-status {
     background: $light-100;
   }

diff --git a/src/course-outline/xblock-status/XBlockStatus.jsx b/src/course-outline/xblock-status/XBlockStatus.jsx
@@ -45,6 +45,7 @@ const XBlockStatus = ({
   } = item;
 
   const isInstructorPaced = !isSelfPaced;
+  const isVertical = category === COURSE_BLOCK_NAMES.vertical.id;
   const statusMessages = [];
 
   let releaseLabel = messages.unscheduledLabel;
@@ -83,12 +84,12 @@ const XBlockStatus = ({
 
   if (!staffOnlyMessage) {
     const { selectedPartitionIndex, selectedGroupsLabel } = userPartitionInfo;
-    if (selectedPartitionIndex !== -1 && !isNaN(selectedPartitionIndex) && category === COURSE_BLOCK_NAMES.vertical.id) {
+    if (selectedPartitionIndex !== -1 && !isNaN(selectedPartitionIndex) && isVertical) {
       statusMessages.push({
         icon: GroupsIcon,
         text: intl.formatMessage(messages.restrictedUnitAccess, { selectedGroupsLabel }),
       });
-    } else if (hasPartitionGroupComponents && category === COURSE_BLOCK_NAMES.vertical.id) {
+    } else if (hasPartitionGroupComponents && isVertical) {
       statusMessages.push({
         icon: GroupsIcon,
         text: intl.formatMessage(messages.restrictedUnitAccessToSomeContent),
@@ -97,16 +98,14 @@ const XBlockStatus = ({
   }
 
   const releaseStatusDiv = () => (
-    <>
+    <div className="d-flex align-items-center">
       <span className="sr-only status-release-label">
         {intl.formatMessage(messages.releaseStatusScreenReaderTitle)}
       </span>
-      <div className="d-flex align-items-center">
-        <Icon className="mr-1" size="sm" src={ClockIcon} />
-        {intl.formatMessage(releaseLabel)}
-        {releaseDate && releaseDate}
-      </div>
-    </>
+      <Icon className="mr-1" size="sm" src={ClockIcon} />
+      {intl.formatMessage(releaseLabel)}
+      {releaseDate && releaseDate}
+    </div>
   )
 
   const gradingTypeDiv = () => (
@@ -121,15 +120,15 @@ const XBlockStatus = ({
     </div>
   )
 
-  const dueDateDiv = () => (
-    <>
-      {dueDate && isInstructorPaced && (
+  const dueDateDiv = () => {
+    if (dueDate && isInstructorPaced) {
+      return (
         <div className="status-grading-date">
           {intl.formatMessage(messages.dueLabel)} {dueDate}
         </div>
-      )}
-    </>
-  )
+      )
+    }
+  }
 
   const selfPacedRelativeDueWeeksDiv = () => (
     <div className="d-flex align-items-center">
@@ -141,7 +140,7 @@ const XBlockStatus = ({
   )
 
   const explanatoryMessageDiv = () => (
-      <span>{explanatoryMessage}</span>
+    <span>{explanatoryMessage}</span>
   )
 
   const renderGradingTypeAndDueDate = () => {
@@ -202,34 +201,36 @@ const XBlockStatus = ({
     if (gradingPolicyMismatch) {
       return (
         <div
-          className="grading-mismatch-alert d-inline-flex p-4 mt-2 rounded shadow"
+          className="grading-mismatch-alert d-flex align-items-center p-4 mt-2 rounded shadow"
         >
           <Icon className="mr-1 text-warning" size="lg" src={WarningIcon} />
           {intl.formatMessage(messages.gradingPolicyMismatchText, { gradingType })}
         </div>
       )
-    } else {
-      return null;
     }
   }
 
   const renderStatusMessages = () => {
-    return (
-      <>
-        {statusMessages.map(({ icon, text }) => (
-          <div className="d-flex align-items-center border-top border-light pt-1 mt-2 text-dark">
-            <Icon className="mr-1" size="sm" src={icon} />
-            {text}
-          </div>
-        ))}
-      </>
-    )
+    if (statusMessages.length > 0) {
+      return (
+        <div className="border-top border-light mt-2 text-dark">
+          {statusMessages.map(({ icon, text }) => (
+            <div className="d-flex align-items-center pt-1">
+              <Icon className="mr-1" size="sm" src={icon} />
+              {text}
+            </div>
+          ))}
+        </div>
+      )
+    }
   }
 
   return (
     <div className="text-secondary-400 x-small mb-1">
-      {explanatoryMessage ? explanatoryMessageDiv(): isInstructorPaced && releaseStatusDiv()}
-      {renderGradingTypeAndDueDate()}
+      {!isVertical && (
+        explanatoryMessage ? explanatoryMessageDiv(): isInstructorPaced && releaseStatusDiv()
+      )}
+      {!isVertical && renderGradingTypeAndDueDate()}
       {hideAfterDue && hideAfterDueMessage()}
       {renderStatusMessages()}
       {renderGradingPolicyAlert()}