feat: [FC-0044] Unit page - render xblock component

.env

@@ -42,3 +42,4 @@ INVITE_STUDENTS_EMAIL_TO=''
 AI_TRANSLATIONS_BASE_URL=''
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=''
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=null

.env.development

@@ -45,3 +45,4 @@ INVITE_STUDENTS_EMAIL_TO="[email protected]"
 AI_TRANSLATIONS_BASE_URL='http://localhost:18760'
 ENABLE_HOME_PAGE_COURSE_API_V2=false
 ENABLE_CHECKLIST_QUALITY=true
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=/xblock-bootstrap.html

.env.test

@@ -36,3 +36,4 @@ BBB_LEARN_MORE_URL=''
 INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_HOME_PAGE_COURSE_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true
+SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL=/xblock-bootstrap.html

package.json

@@ -109,6 +109,7 @@
     "@testing-library/user-event": "^13.2.1",
     "axios": "^0.28.0",
     "axios-mock-adapter": "1.22.0",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "fetch-mock-jest": "^1.5.1",
     "glob": "7.2.3",

src/course-unit/CourseUnit.jsx

@@ -2,10 +2,16 @@
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { Container, Layout, Stack } from '@openedx/paragon';
+import {
+  Container, Layout, Stack, Button,
+} from '@openedx/paragon';
 import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
 import { DraggableList, ErrorAlert } from '@edx/frontend-lib-content-components';
-import { Warning as WarningIcon } from '@openedx/paragon/icons';
+import {
+  Warning as WarningIcon,
+  ArrowDropDown as ArrowDownIcon,
+  ArrowDropUp as ArrowUpIcon,
+} from '@openedx/paragon/icons';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 
 import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
@@ -60,6 +66,9 @@
     courseVerticalChildren,
     handleXBlockDragAndDrop,
     canPasteComponent,
+    isXBlocksExpanded,
+    isXBlocksRendered,
+    handleExpandAll,
   } = useCourseUnit({ courseId, blockId });
 
   const initialXBlocksData = useMemo(() => courseVerticalChildren.children ?? [], [courseVerticalChildren.children]);
@@ -73,6 +82,10 @@
     setUnitXBlocks(courseVerticalChildren.children);
   }, [courseVerticalChildren.children]);
 
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, []);
+
   const {
     isShow: isShowProcessingNotification,
     title: processingNotificationTitle,
@@ -141,6 +154,7 @@
               {currentlyVisibleToStudents && (
                 <AlertMessage
                   className="course-unit__alert"
+                  data-testid="course-unit-unpublished-alert"
                   title={intl.formatMessage(messages.alertUnpublishedVersion)}
                   variant="warning"
                   icon={WarningIcon}
@@ -158,26 +172,42 @@
                   setState={setUnitXBlocks}
                   updateOrder={finalizeXBlockOrder}
                 >
+                  {unitXBlocks.length ? (
+                    <Button
+                      variant="outline-primary"
+                      iconBefore={isXBlocksExpanded ? ArrowUpIcon : ArrowDownIcon}
+                      onClick={handleExpandAll}
+                    >
+                      {isXBlocksExpanded
+                        ? intl.formatMessage(messages.collapseAllButton)
+                        : intl.formatMessage(messages.expandAllButton)}
+                    </Button>
+                  ) : null}
                   <SortableContext
                     id="root"
                     items={unitXBlocks}
                     strategy={verticalListSortingStrategy}
                   >
                     {unitXBlocks.map(({
-                      name, id, blockType: type, shouldScroll, userPartitionInfo, validationMessages,
+                      name, id, blockType: type, renderError, shouldScroll,
+                      userPartitionInfo, validationMessages, actions,
                     }) => (
                       <CourseXBlock
                         id={id}
                         key={id}
                         title={name}
                         type={type}
+                        renderError={renderError}
                         blockId={blockId}
                         validationMessages={validationMessages}
                         shouldScroll={shouldScroll}
                         handleConfigureSubmit={handleConfigureSubmit}
                         unitXBlockActions={unitXBlockActions}
                         data-testid="course-xblock"
                         userPartitionInfo={userPartitionInfo}
+                        actions={actions}
+                        isXBlocksExpanded={isXBlocksExpanded}
+                        isXBlocksRendered={isXBlocksRendered}
                       />
                     ))}
                   </SortableContext>

src/course-unit/CourseUnit.test.jsx

@@ -520,10 +520,10 @@ describe('<CourseUnit />', () => {
   });
 
   it('should display a warning alert for unpublished course unit version', async () => {
-    const { getByRole } = render(<RootWrapper />);
+    const { getByTestId } = render(<RootWrapper />);
 
     await waitFor(() => {
-      const unpublishedAlert = getByRole('alert', { class: 'course-unit-unpublished-alert' });
+      const unpublishedAlert = getByTestId('course-unit-unpublished-alert');
       expect(unpublishedAlert).toHaveTextContent(messages.alertUnpublishedVersion.defaultMessage);
       expect(unpublishedAlert).toHaveClass('alert-warning');
     });
@@ -542,7 +542,7 @@ describe('<CourseUnit />', () => {
     await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
 
     await waitFor(() => {
-      const unpublishedAlert = queryByRole('alert', { class: 'course-unit-unpublished-alert' });
+      const unpublishedAlert = queryByRole('alert', { name: messages.alertUnpublishedVersion });
       expect(unpublishedAlert).toBeNull();
     });
   });
@@ -594,6 +594,7 @@ describe('<CourseUnit />', () => {
             block_id: '1234567890',
             block_type: 'drag-and-drop-v2',
             user_partition_info: {},
+            actions: courseVerticalChildrenMock.children[0].actions,
           },
         ],
       });
@@ -966,6 +967,55 @@ describe('<CourseUnit />', () => {
     )).toBeInTheDocument();
   });
 
+  it('should hide action buttons when their corresponding properties are set to false', async () => {
+    const {
+      getByText,
+      getAllByLabelText,
+      queryByRole,
+    } = render(<RootWrapper />);
+
+    const convertedXBlockActions = camelCaseObject(courseVerticalChildrenMock.children[0].actions);
+
+    const updatedXBlockActions = Object.keys(convertedXBlockActions).reduce((acc, key) => {
+      acc[key] = false;
+      return acc;
+    }, {});
+
+    axiosMock
+      .onGet(getCourseVerticalChildrenApiUrl(blockId))
+      .reply(200, {
+        children: [
+          {
+            ...courseVerticalChildrenMock.children[0],
+            actions: updatedXBlockActions,
+          },
+        ],
+      });
+
+    await executeThunk(fetchCourseVerticalChildrenData(blockId), store.dispatch);
+
+    await waitFor(() => {
+      expect(getByText(unitDisplayName)).toBeInTheDocument();
+      const [xblockActionBtn] = getAllByLabelText(courseXBlockMessages.blockActionsDropdownAlt.defaultMessage);
+      userEvent.click(xblockActionBtn);
+      const deleteBtn = queryByRole('button', { name: courseXBlockMessages.blockLabelButtonDelete.defaultMessage });
+      const duplicateBtn = queryByRole('button', { name: courseXBlockMessages.blockLabelButtonDuplicate.defaultMessage });
+      const moveBtn = queryByRole('button', { name: courseXBlockMessages.blockLabelButtonMove.defaultMessage });
+      const copyToClipboardBtn = queryByRole('button', { name: courseXBlockMessages.blockLabelButtonCopyToClipboard.defaultMessage });
+      const manageAccessBtn = queryByRole('button', { name: courseXBlockMessages.blockLabelButtonManageAccess.defaultMessage });
+      // ToDo: uncomment next lines when manage tags will be realized
+      // eslint-disable-next-line max-len
+      // const manageTagsBtn = queryByRole('button', { name: courseXBlockMessages.blockLabelButtonManageTags.defaultMessage });
+
+      expect(deleteBtn).not.toBeInTheDocument();
+      expect(duplicateBtn).not.toBeInTheDocument();
+      expect(moveBtn).not.toBeInTheDocument();
+      expect(copyToClipboardBtn).not.toBeInTheDocument();
+      expect(manageAccessBtn).not.toBeInTheDocument();
+      // expect(manageTagsBtn).not.toBeInTheDocument();
+    });
+  });
+
   it('should toggle visibility from header configure modal and update course unit state accordingly', async () => {
     const { getByRole, getByTestId } = render(<RootWrapper />);
     let courseUnitSidebar;
@@ -1152,6 +1202,7 @@ describe('<CourseUnit />', () => {
                 selected_partition_index: -1,
                 selected_groups_label: '',
               },
+              actions: courseVerticalChildrenMock.children[0].actions,
             },
           ],
         });
@@ -1499,4 +1550,35 @@ describe('<CourseUnit />', () => {
       expect(xBlock1).toBe(xBlock2);
     });
   });
+
+  it('should expand xblocks when "Expand all" button is clicked', async () => {
+    const { getByRole, getAllByTestId } = render(<RootWrapper />);
+
+    axiosMock
+      .onGet(getCourseVerticalChildrenApiUrl(blockId))
+      .reply(200, courseVerticalChildrenMock);
+
+    await executeThunk(fetchCourseVerticalChildrenData(blockId), store.dispatch);
+
+    const expandAllXBlocksBtn = getByRole('button', { name: messages.expandAllButton.defaultMessage });
+    const unitXBlocks = getAllByTestId('course-xblock');
+
+    unitXBlocks.forEach((unitXBlock) => {
+      const unitXBlockContentSections = unitXBlock.querySelectorAll('.pgn__card-section');
+      expect(unitXBlockContentSections).toHaveLength(0);
+    });
+
+    userEvent.click(expandAllXBlocksBtn);
+
+    await waitFor(() => {
+      const collapseAllXBlocksBtn = getByRole('button', { name: messages.collapseAllButton.defaultMessage });
+      expect(collapseAllXBlocksBtn).toBeInTheDocument();
+
+      unitXBlocks.forEach((unitXBlock) => {
+        const unitXBlockContentSections = unitXBlock.querySelectorAll('.pgn__card-section');
+        // xblock content appears inside the xblock element
+        expect(unitXBlockContentSections.length).toBeGreaterThan(0);
+      });
+    });
+  });
 });

src/course-unit/__mocks__/courseVerticalChildren.js

@@ -9,6 +9,7 @@ module.exports = {
         can_duplicate: true,
         can_move: true,
         can_manage_access: true,
+        can_manage_tags: true,
         can_delete: true,
       },
       user_partition_info: {
@@ -80,6 +81,7 @@ module.exports = {
         can_duplicate: true,
         can_move: true,
         can_manage_access: true,
+        can_manage_tags: true,
         can_delete: true,
       },
       user_partition_info: {