Skip to content

Commit

Permalink
feat: xblock status component
Browse files Browse the repository at this point in the history
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
  • Loading branch information
navinkarkera committed Jan 31, 2024
1 parent b56b5d9 commit 9a6ae9a
Show file tree
Hide file tree
Showing 22 changed files with 1,137 additions and 56 deletions.
7 changes: 7 additions & 0 deletions src/course-outline/CourseOutline.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const CourseOutline = ({ courseId }) => {
statusBarData,
courseActions,
sectionsList,
isCustomRelativeDatesActive,
isLoading,
isReIndexShow,
showErrorAlert,
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/course-outline/CourseOutline.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@
@import "./publish-modal/PublishModal";
@import "./configure-modal/ConfigureModal";
@import "./drag-helper/ConditionalSortableElement";
@import "./xblock-status/XBlockStatus";
1 change: 0 additions & 1 deletion src/course-outline/card-header/CardHeader.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.item-card-header {
display: flex;
align-items: center;
margin-right: -.5rem;

.item-card-header__title-btn {
justify-content: flex-start;
Expand Down
4 changes: 4 additions & 0 deletions src/course-outline/card-header/messages.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions src/course-outline/constants.js
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
1 change: 1 addition & 0 deletions src/course-outline/data/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
2 changes: 2 additions & 0 deletions src/course-outline/data/slice.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const slice = createSlice({
videoSharingOptions: VIDEO_SHARING_OPTIONS.perVideo,
},
sectionsList: [],
isCustomRelativeDatesActive: false,
currentSection: {},
currentSubsection: {},
currentItem: {},
Expand All @@ -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 = {
Expand Down
10 changes: 6 additions & 4 deletions src/course-outline/drag-helper/ConditionalSortableElement.jsx
Original file line number Diff line number Diff line change
@@ -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 = ({
Expand All @@ -24,9 +24,9 @@ const ConditionalSortableElement = ({
id={id}
componentStyle={style}
>
<div className="extend-margin">
<Col className="extend-margin px-0">
{children}
</div>
</Col>
</SortableItem>
);
}
Expand All @@ -36,7 +36,9 @@ const ConditionalSortableElement = ({
style={style}
className="mx-0"
>
{children}
<Col className="px-0">
{children}
</Col>
</Row>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
.extend-margin {
display: flex;
flex-grow: 1;

.item-children {
margin-right: -2.75rem;
}
Expand Down
3 changes: 3 additions & 0 deletions src/course-outline/hooks.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
getCurrentItem,
getCurrentSection,
getCurrentSubsection,
getCustomRelativeDatesActiveFlag,
} from './data/selectors';
import {
addNewSectionQuery,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -242,6 +244,7 @@ const useCourseOutline = ({ courseId }) => {
courseActions,
savingStatus,
sectionsList,
isCustomRelativeDatesActive,
isLoading: outlineIndexLoadingStatus === RequestStatus.IN_PROGRESS,
isReIndexShow: Boolean(reindexLink),
showSuccessAlert,
Expand Down
19 changes: 14 additions & 5 deletions src/course-outline/section-card/SectionCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -60,7 +63,6 @@ const SectionCard = ({
highlights,
actions: sectionActions,
isHeaderVisible = true,
explanatoryMessage = '',
} = section;

// re-create actions object for customizations
Expand Down Expand Up @@ -174,15 +176,21 @@ const SectionCard = ({
/>
)}
<div className="section-card__content" data-testid="section-card__content">
{explanatoryMessage && <p className="text-secondary-400 x-small mb-1">{explanatoryMessage}</p>}
<XBlockStatus
isSelfPaced={isSelfPaced}
isCustomRelativeDatesActive={isCustomRelativeDatesActive}
blockData={section}
/>
<div className="outline-section__status">
<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>
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
27 changes: 8 additions & 19 deletions src/course-outline/section-card/SectionCard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
54 changes: 34 additions & 20 deletions src/course-outline/subsection-card/SubsectionCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions src/course-outline/subsection-card/SubsectionCard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,8 @@
line-height: $headings-line-height;
color: $headings-color;
}

.subsection-card__content {
margin-left: 1.7rem;
}
}
12 changes: 12 additions & 0 deletions src/course-outline/unit-card/UnitCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -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;
4 changes: 0 additions & 4 deletions src/course-outline/unit-card/UnitCard.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
.unit-card {
flex-grow: 1;

.unit-card__content {
margin: $spacer;
}

.item-card-header__badge-status {
background: $light-100;
}
Expand Down
Loading

0 comments on commit 9a6ae9a

Please sign in to comment.