feat: xblock status component

feat: add custom relative dates flag to state refactor: add gated status type refactor: alert style feat: add status text to units test: add tests fix: lint issues refactor: break up xblock status component fix: selector for isCustomRelativeDatesActive fix: prereq default value
openedx · Feb 5, 2024 · 9623fc2 · 9623fc2
1 parent 056a15b
commit 9623fc2
Show file tree

Hide file tree

Showing 27 changed files with 1,181 additions and 57 deletions.
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
@@ -55,6 +55,7 @@ const CourseOutline = ({ courseId }) => {
     statusBarData,
     courseActions,
     sectionsList,
+    isCustomRelativeDatesActive,
     isLoading,
     isReIndexShow,
     showErrorAlert,
@@ -311,6 +312,8 @@ const CourseOutline = ({ courseId }) => {
                                 section={section}
                                 index={sectionIndex}
                                 canMoveItem={canMoveItem(sections)}
+                                isSelfPaced={statusBarData.isSelfPaced}
+                                isCustomRelativeDatesActive={isCustomRelativeDatesActive}
                                 savingStatus={savingStatus}
                                 onOpenHighlightsModal={handleOpenHighlightsModal}
                                 onOpenPublishModal={openPublishModal}
@@ -334,6 +337,8 @@ const CourseOutline = ({ courseId }) => {
                                       subsection={subsection}
                                       index={subsectionIndex}
                                       canMoveItem={canMoveItem(section.childInfo.children)}
+                                      isSelfPaced={statusBarData.isSelfPaced}
+                                      isCustomRelativeDatesActive={isCustomRelativeDatesActive}
                                       savingStatus={savingStatus}
                                       onOpenPublishModal={openPublishModal}
                                       onOpenDeleteModal={openDeleteModal}
@@ -358,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/CourseOutline.scss b/src/course-outline/CourseOutline.scss
@@ -9,3 +9,4 @@
 @import "./publish-modal/PublishModal";
 @import "./configure-modal/ConfigureModal";
 @import "./drag-helper/ConditionalSortableElement";
+@import "./xblock-status/XBlockStatus";
diff --git a/src/course-outline/card-header/CardHeader.scss b/src/course-outline/card-header/CardHeader.scss
@@ -1,7 +1,6 @@
 .item-card-header {
   display: flex;
   align-items: center;
-  margin-right: -.5rem;
 
   .item-card-header__title-btn {
     justify-content: flex-start;

diff --git a/src/course-outline/card-header/messages.js b/src/course-outline/card-header/messages.js
@@ -9,6 +9,10 @@ const messages = defineMessages({
     id: 'course-authoring.course-outline.card.status-badge.live',
     defaultMessage: 'Live',
   },
+  statusBadgeGated: {
+    id: 'course-authoring.course-outline.card.status-badge.gated',
+    defaultMessage: 'Gated',
+  },
   statusBadgePublishedNotLive: {
     id: 'course-authoring.course-outline.card.status-badge.published-not-live',
     defaultMessage: 'Published not live',

diff --git a/src/course-outline/constants.js b/src/course-outline/constants.js
@@ -1,5 +1,6 @@
 export const ITEM_BADGE_STATUS = /** @type {const} */ ({
   live: 'live',
+  gated: 'gated',
   publishedNotLive: 'published_not_live',
   unpublishedChanges: 'unpublished_changes',
   staffOnly: 'staff_only',

diff --git a/src/course-outline/data/selectors.js b/src/course-outline/data/selectors.js
@@ -7,3 +7,4 @@ export const getCurrentItem = (state) => state.courseOutline.currentItem;
 export const getCurrentSection = (state) => state.courseOutline.currentSection;
 export const getCurrentSubsection = (state) => state.courseOutline.currentSubsection;
 export const getCourseActions = (state) => state.courseOutline.actions;
+export const getCustomRelativeDatesActiveFlag = (state) => state.courseOutline.isCustomRelativeDatesActive;
diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
@@ -28,6 +28,7 @@ const slice = createSlice({
       videoSharingOptions: VIDEO_SHARING_OPTIONS.perVideo,
     },
     sectionsList: [],
+    isCustomRelativeDatesActive: false,
     currentSection: {},
     currentSubsection: {},
     currentItem: {},
@@ -42,6 +43,7 @@ const slice = createSlice({
     fetchOutlineIndexSuccess: (state, { payload }) => {
       state.outlineIndexData = payload;
       state.sectionsList = payload.courseStructure?.childInfo?.children || [];
+      state.isCustomRelativeDatesActive = payload.isCustomRelativeDatesActive;
     },
     updateOutlineIndexLoadingStatus: (state, { payload }) => {
       state.loadingStatus = {

diff --git a/src/course-outline/drag-helper/ConditionalSortableElement.jsx b/src/course-outline/drag-helper/ConditionalSortableElement.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row } from '@edx/paragon';
+import { Col, Row } from '@edx/paragon';
 import { SortableItem } from '@edx/frontend-lib-content-components';
 
 const ConditionalSortableElement = ({
@@ -24,9 +24,9 @@ const ConditionalSortableElement = ({
         id={id}
         componentStyle={style}
       >
-        <div className="extend-margin">
+        <Col className="extend-margin px-0">
           {children}
-        </div>
+        </Col>
       </SortableItem>
     );
   }
@@ -36,7 +36,9 @@ const ConditionalSortableElement = ({
       style={style}
       className="mx-0"
     >
-      {children}
+      <Col className="px-0">
+        {children}
+      </Col>
     </Row>
   );
 };

diff --git a/src/course-outline/drag-helper/ConditionalSortableElement.scss b/src/course-outline/drag-helper/ConditionalSortableElement.scss
@@ -1,7 +1,4 @@
 .extend-margin {
-  display: flex;
-  flex-grow: 1;
-
   .item-children {
     margin-right: -2.75rem;
   }

diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -21,6 +21,7 @@ import {
   getCurrentItem,
   getCurrentSection,
   getCurrentSubsection,
+  getCustomRelativeDatesActiveFlag,
 } from './data/selectors';
 import {
   addNewSectionQuery,
@@ -62,6 +63,7 @@ const useCourseOutline = ({ courseId }) => {
   const currentItem = useSelector(getCurrentItem);
   const currentSection = useSelector(getCurrentSection);
   const currentSubsection = useSelector(getCurrentSubsection);
+  const isCustomRelativeDatesActive = useSelector(getCustomRelativeDatesActiveFlag);
 
   const [isEnableHighlightsModalOpen, openEnableHighlightsModal, closeEnableHighlightsModal] = useToggle(false);
   const [isSectionsExpanded, setSectionsExpanded] = useState(true);
@@ -242,6 +244,7 @@ const useCourseOutline = ({ courseId }) => {
     courseActions,
     savingStatus,
     sectionsList,
+    isCustomRelativeDatesActive,
     isLoading: outlineIndexLoadingStatus === RequestStatus.IN_PROGRESS,
     isReIndexShow: Boolean(reindexLink),
     showSuccessAlert,

diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
@@ -14,11 +14,14 @@ import CardHeader from '../card-header/CardHeader';
 import BaseTitleWithStatusBadge from '../card-header/BaseTitleWithStatusBadge';
 import ConditionalSortableElement from '../drag-helper/ConditionalSortableElement';
 import TitleButton from '../card-header/TitleButton';
+import XBlockStatus from '../xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
 import messages from './messages';
 
 const SectionCard = ({
   section,
+  isSelfPaced,
+  isCustomRelativeDatesActive,
   children,
   index,
   canMoveItem,
@@ -60,7 +63,6 @@ const SectionCard = ({
     highlights,
     actions: sectionActions,
     isHeaderVisible = true,
-    explanatoryMessage = '',
   } = section;
 
   // re-create actions object for customizations
@@ -174,18 +176,24 @@ const SectionCard = ({
             />
           )}
           <div className="section-card__content" data-testid="section-card__content">
-            {explanatoryMessage && <p className="text-secondary-400 x-small mb-1">{explanatoryMessage}</p>}
-            <div className="outline-section__status">
+            <div className="outline-section__status mb-1">
               <Button
-                className="section-card__highlights"
+                className="p-0 bg-transparent"
                 data-destid="section-card-highlights-button"
                 variant="tertiary"
                 onClick={handleOpenHighlightsModal}
               >
-                <Badge className="highlights-badge">{highlights.length}</Badge>
+                <Badge className="mr-1 d-flex justify-content-center align-items-center highlights-badge">
+                  {highlights.length}
+                </Badge>
                 <p className="m-0 text-black">{messages.sectionHighlightsBadge.defaultMessage}</p>
               </Button>
             </div>
+            <XBlockStatus
+              isSelfPaced={isSelfPaced}
+              isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+              blockData={section}
+            />
           </div>
           {isExpanded && (
             <div
@@ -226,7 +234,6 @@ SectionCard.propTypes = {
     visibilityState: PropTypes.string.isRequired,
     highlights: PropTypes.arrayOf(PropTypes.string).isRequired,
     shouldScroll: PropTypes.bool,
-    explanatoryMessage: PropTypes.string,
     actions: PropTypes.shape({
       deletable: PropTypes.bool.isRequired,
       draggable: PropTypes.bool.isRequired,
@@ -235,6 +242,8 @@ SectionCard.propTypes = {
     }).isRequired,
     isHeaderVisible: PropTypes.bool,
   }).isRequired,
+  isSelfPaced: PropTypes.bool.isRequired,
+  isCustomRelativeDatesActive: PropTypes.bool.isRequired,
   children: PropTypes.node,
   onOpenHighlightsModal: PropTypes.func.isRequired,
   onOpenPublishModal: PropTypes.func.isRequired,

diff --git a/src/course-outline/section-card/SectionCard.scss b/src/course-outline/section-card/SectionCard.scss
@@ -13,26 +13,15 @@
     color: $headings-color;
   }
 
-  .section-card__highlights {
-    display: flex;
-    align-items: center;
-    gap: .5rem;
-    padding: 0;
-    background: transparent;
 
-    &::before {
-      display: none;
-    }
+  .highlights-badge {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 1.375rem;
+    font-size: 1rem;
+  }
 
-    .highlights-badge {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 1.75rem;
-      height: 1.75rem;
-      border-radius: 1.375rem;
-      font-size: 1.125rem;
-      font-weight: 700;
-    }
+  .section-card__content {
+    margin-left: 1.7rem;
   }
 }
diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -12,12 +12,15 @@ import CardHeader from '../card-header/CardHeader';
 import BaseTitleWithStatusBadge from '../card-header/BaseTitleWithStatusBadge';
 import ConditionalSortableElement from '../drag-helper/ConditionalSortableElement';
 import TitleButton from '../card-header/TitleButton';
+import XBlockStatus from '../xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
 import messages from './messages';
 
 const SubsectionCard = ({
   section,
   subsection,
+  isSelfPaced,
+  isCustomRelativeDatesActive,
   children,
   index,
   canMoveItem,
@@ -136,26 +139,35 @@ const SubsectionCard = ({
     >
       <div className="subsection-card" data-testid="subsection-card" ref={currentRef}>
         {isHeaderVisible && (
-          <CardHeader
-            title={displayName}
-            status={subsectionStatus}
-            hasChanges={hasChanges}
-            onClickMenuButton={handleClickMenuButton}
-            onClickPublish={onOpenPublishModal}
-            onClickEdit={openForm}
-            onClickDelete={onOpenDeleteModal}
-            onClickMoveUp={handleSubsectionMoveUp}
-            onClickMoveDown={handleSubsectionMoveDown}
-            onClickConfigure={onOpenConfigureModal}
-            isFormOpen={isFormOpen}
-            closeForm={closeForm}
-            onEditSubmit={handleEditSubmit}
-            isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
-            onClickDuplicate={onDuplicateSubmit}
-            titleComponent={titleComponent}
-            namePrefix={namePrefix}
-            actions={actions}
-          />
+          <>
+            <CardHeader
+              title={displayName}
+              status={subsectionStatus}
+              hasChanges={hasChanges}
+              onClickMenuButton={handleClickMenuButton}
+              onClickPublish={onOpenPublishModal}
+              onClickEdit={openForm}
+              onClickDelete={onOpenDeleteModal}
+              onClickMoveUp={handleSubsectionMoveUp}
+              onClickMoveDown={handleSubsectionMoveDown}
+              onClickConfigure={onOpenConfigureModal}
+              isFormOpen={isFormOpen}
+              closeForm={closeForm}
+              onEditSubmit={handleEditSubmit}
+              isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
+              onClickDuplicate={onDuplicateSubmit}
+              titleComponent={titleComponent}
+              namePrefix={namePrefix}
+              actions={actions}
+            />
+            <div className="subsection-card__content item-children" data-testid="subsection-card__content">
+              <XBlockStatus
+                isSelfPaced={isSelfPaced}
+                isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+                blockData={subsection}
+              />
+            </div>
+          </>
         )}
         {isExpanded && (
           <div
@@ -211,6 +223,8 @@ SubsectionCard.propTypes = {
     isHeaderVisible: PropTypes.bool,
   }).isRequired,
   children: PropTypes.node,
+  isSelfPaced: PropTypes.bool.isRequired,
+  isCustomRelativeDatesActive: PropTypes.bool.isRequired,
   onOpenPublishModal: PropTypes.func.isRequired,
   onEditSubmit: PropTypes.func.isRequired,
   savingStatus: PropTypes.string.isRequired,

diff --git a/src/course-outline/subsection-card/SubsectionCard.scss b/src/course-outline/subsection-card/SubsectionCard.scss
@@ -16,4 +16,8 @@
     line-height: $headings-line-height;
     color: $headings-color;
   }
+
+  .subsection-card__content {
+    margin-left: 1.7rem;
+  }
 }
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}
+            blockData={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;
   }