feat: library unit page skeleton [FC-0083] #1779

navinkarkera · 2025-04-04T05:58:51Z

Description: Unit page with following features:

View a unit page, which has its own URL
Components appear within a unit as full previews. Their top bar shows type icon and title on the left, and draft status (if any), tag count, overflow menu, and drag handle on the right.
Components have an overflow menu within a unit
Components can be selected within a unit
When components are selected, the standard component sidebar appears. The preview tab is hidden, since component previews are visible in the main content area.
Components within a unit full-page view have hover and selected states
Unit sidebar preview.
Frontend implementation Drag-n-drop components to reorder them in unit.

Current state: Note: drag and drop is not persistent, just the frontend

vokoscreenNG-2025-04-09_18-51-06.webm

Test instructions:

Checkout this PR and feat: post component height to parent window [FC-0083] edx-platform#36477
Follow second step from test instructions of this PR: feat: Update containers in search index on components update/delete [FC-0083] edx-platform#36432 to create a library with new unit and some components under it.
Open the library in frontend.
Select any unit and verify the preview being rendered in the sidebar
Double click on the newly created unit or Open button in unit sidebar to open unit page.
Verify the unit page design and functionality.

openedx-webhooks · 2025-04-04T05:58:54Z

Thanks for the pull request, @navinkarkera!

This repository is currently maintained by @openedx/2u-tnl.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2025-04-09T06:33:37Z

Codecov Report

Attention: Patch coverage is 95.49180% with 11 lines in your changes missing coverage. Please review.

Project coverage is 93.56%. Comparing base (5df7adf) to head (2d4e4b1).
Report is 4 commits behind head on master.

Files with missing lines	Patch %	Lines
src/library-authoring/containers/UnitInfo.tsx	78.94%	4 Missing ⚠️
src/library-authoring/routes.ts	75.00%	3 Missing ⚠️
src/library-authoring/units/LibraryUnitBlocks.tsx	93.18%	3 Missing ⚠️
...library-authoring/component-info/ComponentInfo.tsx	80.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1779      +/-   ##
==========================================
+ Coverage   93.52%   93.56%   +0.03%     
==========================================
  Files        1130     1136       +6     
  Lines       23029    23205     +176     
  Branches     4864     5000     +136     
==========================================
+ Hits        21539    21711     +172     
+ Misses       1422     1418       -4     
- Partials       68       76       +8

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

pomegranited

👍 This works beautifully, thank you @navinkarkera ! I noted a couple things, but nothing that needs to be addressed before merge.

I tested this using a Unit with and without components (responsive iframe sizing works great), non-unit Component sidebar previews and preview modals, and course Unit preview iframes (all still work great).
I read through the code
I checked for accessibility issues by using my keyboard to navigate -- appreciate the visual cues for hover/select unit components!
Includes documentation -- code comments
User-facing strings are extracted for translation

pomegranited · 2025-04-10T04:16:28Z

src/library-authoring/LibraryBlock/LibraryBlock.tsx

 }: LibraryBlockProps) => {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { iframeRef, setIframeRef } = useIframe();


Great cleanup here -- thank you!

pomegranited · 2025-04-10T04:19:26Z

src/library-authoring/common/context/SidebarContext.tsx

+  defaultTab: DefaultTabs;
+  setDefaultTab: (tabs: DefaultTabs) => void;
+  disabledTabs: Array<SidebarInfoTab>;
+  setDisabledTabs: (tabs: ComponentInfoTab[]) => void;


nit: I would have called these "hidden tabs" instead of "disabled".

Updated: c14509d

pomegranited · 2025-04-10T04:24:08Z

src/library-authoring/component-info/ComponentInfo.tsx

@@ -154,6 +156,18 @@ const ComponentInfo = () => {
      });
  }, [publishComponent, showToast, intl]);

+  const renderTab = React.useCallback((infoTab: ComponentInfoTab, component: React.ReactNode, title: string) => {
+    if (disabledTabs.includes(infoTab)) {
+      // For some reason, returning anything other than empty list breaks the tab style


TODO for later: refactor sidebar Tabs to handle rendering and disabledTabs in one place.

Added todo here: c14509d

pomegranited · 2025-04-10T05:24:54Z

src/library-authoring/routes.ts

@@ -122,18 +127,23 @@ export const useLibraryRoutes = (): LibraryRoutesData => {
      // We're inside the Units tab, so stay there,
      // optionally selecting a unit.
      route = ROUTES.UNITS;


I cannot Open a Unit page from within the Units tab -- works fine from All Content tab.
(Ok to leave this bug for a follow-up PR.)

Fixed it here: a40b18c

ChrisChV

Looks good! Only one nit

ChrisChV · 2025-04-10T20:10:49Z

src/course-unit/xblock-container-iframe/index.tsx

 } from './hooks';
 import {
  XBlockContainerIframeProps,
  AccessManagedXBlockDataTypes,
 } from './types';
 import { formatAccessManagedXBlockData, getIframeUrl, getLegacyEditModalUrl } from './utils';
 import messages from './messages';
+import { useIFrameBehavior } from '../../generic/hooks/useIFrameBehavior';


@navinkarkera Could you update to useIframeBehavior? To keep the same format as useIframeContent and useIframeMessages

Done. 7daad72

bradenmacdonald · 2025-04-11T17:12:49Z

@navinkarkera @ChrisChV I'd like to merge this ASAP. Is it OK to merge even before openedx/edx-platform#36477 is ready, or is it blocked on that PR? It's fine if there's some minor issues with rendering unit contents until the other PR is merged.

navinkarkera · 2025-04-11T17:17:52Z

@bradenmacdonald it depends on the platform PR, so we need to merge it first

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Apr 4, 2025

openedx-webhooks added this to Contributions Apr 4, 2025

github-project-automation bot moved this to Needs Triage in Contributions Apr 4, 2025

navinkarkera changed the title - **feat: library unit page skeleton** feat: library unit page skeleton [FC-0083] Apr 4, 2025

navinkarkera force-pushed the navin/fal-4049/library-unit-page branch 3 times, most recently from f285efc to f33c56b Compare April 7, 2025 15:17

mphilbrick211 added the FC Relates to an Axim Funded Contribution project label Apr 7, 2025

mphilbrick211 moved this from Needs Triage to Ready for Review in Contributions Apr 7, 2025

mphilbrick211 moved this from Ready for Review to Waiting on Author in Contributions Apr 7, 2025

navinkarkera force-pushed the navin/fal-4049/library-unit-page branch 5 times, most recently from 8fe30f4 to f561cfc Compare April 9, 2025 06:15

navinkarkera force-pushed the navin/fal-4049/library-unit-page branch from 7dec047 to 4d8978f Compare April 9, 2025 10:54

navinkarkera mentioned this pull request Apr 9, 2025

feat: post component height to parent window [FC-0083] openedx/edx-platform#36477

Merged

navinkarkera marked this pull request as ready for review April 9, 2025 13:28

pomegranited approved these changes Apr 10, 2025

View reviewed changes

navinkarkera force-pushed the navin/fal-4049/library-unit-page branch from a2f3b19 to a40b18c Compare April 10, 2025 11:02

ChrisChV approved these changes Apr 10, 2025

View reviewed changes

navinkarkera added 7 commits April 11, 2025 12:12

feat: library unit page skeleton

7c52f85

feat: iframe auto height adjust

f843e9f

fixup! feat: iframe auto height adjust

e0ac75d

refactor: iframe ref and event handler

3e26373

feat: component draggable cards

b589401

refactor: unit page style

324b898

feat: component tags and draft status in unit pages

5a6aceb

navinkarkera added 23 commits April 11, 2025 12:14

feat: hover state for components in unit page

a616b50

fix: clicks not being passed to card children when in focus

ba26a9f

fix: drag-n-drop components in unit page

68bca46

feat: open unit page from card

d8cb916

feat: connect sidebar to unit page

52bd445

feat: unit components preview in sidebar

af2f301

feat: open library sidebar on unit info click

bd4a309

chore: fix lint issues

9dda74d

test: fix useIframeBehaviour hook tests

69997ff

fix: compare block preview component

95bb986

fix: useContainer api usage

d6be6fa

test: fix failing tests

42b00b9

test: fix failing tests

d20d3e9

fix: resolve conflicts

0fd119a

fix: failing tests

34b7e6b

test: library unit page

7797aa9

test: fix failing tests

49bba7b

fix: hide open button in unit sidebar if in unit page

a68aec7

fix: unit routes

56003bf

refactor: rename disabledTabs to hiddenTabs

a9b885a

refactor: iframe min height and useIframeBehaviour spelling

7daad72

fix: resolve rebase conflicts

8bb3fd2

refactor: set iframe min height to 200px

ea853aa

navinkarkera force-pushed the navin/fal-4049/library-unit-page branch from c14509d to ea853aa Compare April 11, 2025 06:54

fix: Increate editor minH to 700px to fix advanced editors

2d4e4b1

ChrisChV merged commit a43027b into openedx:master Apr 11, 2025
7 checks passed

github-project-automation bot moved this from Waiting on Author to Done in Contributions Apr 11, 2025

navinkarkera mentioned this pull request Apr 14, 2025

feat: reorder components in unit page [FC-00083] #1816

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: library unit page skeleton [FC-0083] #1779

feat: library unit page skeleton [FC-0083] #1779

navinkarkera commented Apr 4, 2025 •

edited

Loading

openedx-webhooks commented Apr 4, 2025 •

edited

Loading

codecov bot commented Apr 9, 2025 •

edited

Loading

pomegranited left a comment

pomegranited Apr 10, 2025

pomegranited Apr 10, 2025

navinkarkera Apr 10, 2025

pomegranited Apr 10, 2025

navinkarkera Apr 10, 2025

pomegranited Apr 10, 2025

navinkarkera Apr 10, 2025

ChrisChV left a comment

ChrisChV Apr 10, 2025

navinkarkera Apr 11, 2025

bradenmacdonald commented Apr 11, 2025

navinkarkera commented Apr 11, 2025

feat: library unit page skeleton [FC-0083] #1779

feat: library unit page skeleton [FC-0083] #1779

Conversation

navinkarkera commented Apr 4, 2025 • edited Loading

openedx-webhooks commented Apr 4, 2025 • edited Loading

codecov bot commented Apr 9, 2025 • edited Loading

Codecov Report

pomegranited left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChrisChV left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bradenmacdonald commented Apr 11, 2025

navinkarkera commented Apr 11, 2025

navinkarkera commented Apr 4, 2025 •

edited

Loading

openedx-webhooks commented Apr 4, 2025 •

edited

Loading

codecov bot commented Apr 9, 2025 •

edited

Loading