Skip to content

Commit

Permalink
feat: [FC-0070] rendering library content in unit page
Browse files Browse the repository at this point in the history
  • Loading branch information
ihor-romaniuk committed Nov 6, 2024
1 parent c917065 commit 89a6473
Show file tree
Hide file tree
Showing 33 changed files with 1,435 additions and 1,248 deletions.
1 change: 1 addition & 0 deletions src/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export const COURSE_BLOCK_NAMES = ({
chapter: { id: 'chapter', name: 'Section' },
sequential: { id: 'sequential', name: 'Subsection' },
vertical: { id: 'vertical', name: 'Unit' },
libraryContent: { id: 'library_content', name: 'Library content' },
component: { id: 'component', name: 'Component' },
});

Expand Down
2 changes: 1 addition & 1 deletion src/course-team/CourseTeam.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ describe('<CourseTeam />', () => {
});

it('should delete user', async () => {
`cleanup();`
cleanup();
axiosMock
.onGet(getCourseTeamApiUrl(courseId))
.reply(200, courseTeamMock);
Expand Down
84 changes: 52 additions & 32 deletions src/course-unit/CourseUnit.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import ProcessingNotification from '../generic/processing-notification';
import { SavingErrorAlert } from '../generic/saving-error-alert';
import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
import Loading from '../generic/Loading';
import { COURSE_BLOCK_NAMES } from '../constants';
import AddComponent from './add-component/AddComponent';
import HeaderTitle from './header-title/HeaderTitle';
import Breadcrumbs from './breadcrumbs/Breadcrumbs';
Expand All @@ -44,6 +45,7 @@ const CourseUnit = ({ courseId }) => {
isLoading,
sequenceId,
unitTitle,
unitCategory,
errorMessage,
sequenceStatus,
savingStatus,
Expand All @@ -68,6 +70,19 @@ const CourseUnit = ({ courseId }) => {
handleNavigateToTargetUnit,
} = useCourseUnit({ courseId, blockId });

const isUnitVerticalType = unitCategory === COURSE_BLOCK_NAMES.vertical.id;
const isUnitLibraryType = unitCategory === COURSE_BLOCK_NAMES.libraryContent.id;

const unitLayout = [{ span: 12 }, { span: 0 }];
const defaultLayout = {
lg: [{ span: 8 }, { span: 4 }],
md: [{ span: 8 }, { span: 4 }],
sm: [{ span: 8 }, { span: 3 }],
xs: [{ span: 9 }, { span: 3 }],
xl: [{ span: 9 }, { span: 3 }],
};
const layoutGrid = isUnitLibraryType ? { lg: unitLayout } : defaultLayout;

useEffect(() => {
document.title = getPageHeadTitle('', unitTitle);
}, [unitTitle]);
Expand Down Expand Up @@ -139,30 +154,30 @@ const CourseUnit = ({ courseId }) => {
/>
)}
breadcrumbs={(
<Breadcrumbs />
<Breadcrumbs
courseId={courseId}
sequenceId={sequenceId}
/>
)}
headerActions={(
<HeaderNavigations
unitCategory={unitCategory}
headerNavigationsActions={headerNavigationsActions}
/>
)}
/>
<Sequence
courseId={courseId}
sequenceId={sequenceId}
unitId={blockId}
handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
showPasteUnit={showPasteUnit}
/>
<Layout
lg={[{ span: 8 }, { span: 4 }]}
md={[{ span: 8 }, { span: 4 }]}
sm={[{ span: 8 }, { span: 3 }]}
xs={[{ span: 9 }, { span: 3 }]}
xl={[{ span: 9 }, { span: 3 }]}
>
{isUnitVerticalType && (
<Sequence
courseId={courseId}
sequenceId={sequenceId}
unitId={blockId}
handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
showPasteUnit={showPasteUnit}
/>
)}
<Layout {...layoutGrid}>
<Layout.Element>
{currentlyVisibleToStudents && (
{!currentlyVisibleToStudents && (
<AlertMessage
className="course-unit__alert"
title={intl.formatMessage(messages.alertUnpublishedVersion)}
Expand All @@ -177,11 +192,13 @@ const CourseUnit = ({ courseId }) => {
/>
)}
<XBlockContainerIframe blockId={blockId} />
<AddComponent
blockId={blockId}
handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
/>
{showPasteXBlock && canPasteComponent && (
{isUnitVerticalType && (
<AddComponent
blockId={blockId}
handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
/>
)}
{showPasteXBlock && canPasteComponent && isUnitVerticalType && (
<PasteComponent
clipboardData={sharedClipboardData}
onClick={handleCreateNewCourseXBlock}
Expand All @@ -197,18 +214,21 @@ const CourseUnit = ({ courseId }) => {
</Layout.Element>
<Layout.Element>
<Stack gap={3}>
<Sidebar data-testid="course-unit-sidebar">
<PublishControls blockId={blockId} />
</Sidebar>
{getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true'
&& (
<Sidebar className="tags-sidebar">
<TagsSidebarControls />
</Sidebar>
{isUnitVerticalType && (
<>
<Sidebar data-testid="course-unit-sidebar">
<PublishControls blockId={blockId} />
</Sidebar>
{getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
<Sidebar className="tags-sidebar">
<TagsSidebarControls />
</Sidebar>
)}
<Sidebar data-testid="course-unit-location-sidebar">
<LocationInfo />
</Sidebar>
</>
)}
<Sidebar data-testid="course-unit-location-sidebar">
<LocationInfo />
</Sidebar>
</Stack>
</Layout.Element>
</Layout>
Expand Down
4 changes: 4 additions & 0 deletions src/course-unit/CourseUnit.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
@import "./header-title/HeaderTitle";
@import "./move-modal";

.course-unit {
min-width: 900px;
}

.course-unit__alert {
margin-bottom: 1.75rem;
}
14 changes: 7 additions & 7 deletions src/course-unit/CourseUnit.test.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import MockAdapter from 'axios-mock-adapter';
import {
act, render, waitFor, fireEvent, within, screen,
act, render, waitFor, fireEvent, within,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { IntlProvider } from '@edx/frontend-platform/i18n';
Expand Down Expand Up @@ -803,7 +803,7 @@ describe('<CourseUnit />', () => {
axiosMock
.onPost(getXBlockBaseApiUrl(courseUnitIndexMock.id), {
publish: null,
metadata: { visible_to_staff_only: true, group_access: { 50: [2] } },
metadata: { visible_to_staff_only: true, group_access: { 50: [2] }, discussion_enabled: true },
})
.reply(200, { dummy: 'value' });
axiosMock
Expand Down Expand Up @@ -1145,8 +1145,8 @@ describe('<CourseUnit />', () => {
id: requestData.currentParentLocator,
category: 'vertical',
hasChildren: true,
}
}
},
},
},
origin: '*',
});
Expand All @@ -1169,7 +1169,7 @@ describe('<CourseUnit />', () => {
window.dispatchEvent(messageEvent);

expect(getByText(
moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title)
moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title),
)).toBeInTheDocument();
expect(getByRole('button', { name: moveModalMessages.moveModalSubmitButton.defaultMessage })).toBeInTheDocument();
expect(getByRole('button', { name: moveModalMessages.moveModalCancelButton.defaultMessage })).toBeInTheDocument();
Expand All @@ -1193,7 +1193,7 @@ describe('<CourseUnit />', () => {
window.dispatchEvent(messageEvent);

expect(getByText(
moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title)
moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title),
)).toBeInTheDocument();

const currentSection = courseOutlineInfoMock.child_info.children[1];
Expand All @@ -1211,7 +1211,7 @@ describe('<CourseUnit />', () => {
fireEvent.click(currentSubsectionText);

const currentComponentLocationText = getByText(
moveModalMessages.moveModalOutlineItemCurrentComponentLocationText.defaultMessage
moveModalMessages.moveModalOutlineItemCurrentComponentLocationText.defaultMessage,
);
expect(currentComponentLocationText).toBeInTheDocument();
});
Expand Down
Loading

0 comments on commit 89a6473

Please sign in to comment.