feat: Add sidebar and library dropdown filter [FC-0114] #2778

navinkarkera · 2026-01-01T07:21:42Z

Description

In addition to changes in #2775 (comment), this PR adds following:

Adds library dropdown filter and collections dropdown filter in add sidebar. Allows authors to filter containers by selected libraries and collections.

Useful information to include:

Which user roles will this change impact? "Course Author".

Screenshots

Supporting information

Course Outline: Filter by Library (Add Sidebar) #2633
Course Outline: Add Sidebar basics (Add button Flow) #2629
Private-ref: https://tasks.opencraft.com/browse/FAL-4298
Built on top of feat: Add Sidebar for course outline [FC-0114] #2775

Testing instructions

Use the new library dropdown filter in add sidebar.
Verify the containers are being filtered.
Verify the label changes based on number of libraries selected.

Other information

Requirement not clear for collections filter.

Best Practices Checklist

We're trying to move away from some deprecated patterns in this codebase. Please
check if your PR meets these recommendations before asking for a review:

Any new files are using TypeScript (.ts, .tsx).
Avoid propTypes and defaultProps in any new or modified code.
Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
All new i18n messages in messages.ts files have a description for translators to use.
Avoid using ../ in import paths. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

openedx-webhooks · 2026-01-01T07:21:48Z

Thanks for the pull request, @navinkarkera!

This repository is currently maintained by @bradenmacdonald.

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.

Details

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 · 2026-01-01T07:32:37Z

Codecov Report

❌ Patch coverage is 96.57658% with 19 lines in your changes missing coverage. Please review.
✅ Project coverage is 95.04%. Comparing base (a7cbfea) to head (71a2195).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
src/CourseAuthoringContext.tsx	86.66%	6 Missing ⚠️
src/course-outline/outline-sidebar/AddSidebar.tsx	95.06%	4 Missing ⚠️
src/course-outline/utils.tsx	81.81%	2 Missing ⚠️
src/library-authoring/LibraryAuthoringPage.tsx	93.10%	2 Missing ⚠️
...ary-authoring/collections/CollectionInfoHeader.tsx	83.33%	1 Missing ⚠️
...ry-authoring/collections/LibraryCollectionPage.tsx	90.00%	1 Missing ⚠️
src/library-authoring/data/api.ts	87.50%	1 Missing ⚠️
src/library-authoring/data/apiHooks.ts	94.11%	1 Missing ⚠️
...brary-authoring/library-filters/SidebarFilters.tsx	94.11%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2778      +/-   ##
==========================================
+ Coverage   94.99%   95.04%   +0.05%     
==========================================
  Files        1256     1264       +8     
  Lines       28800    29123     +323     
  Branches     6538     6648     +110     
==========================================
+ Hits        27358    27681     +323     
+ Misses       1384     1372      -12     
- Partials       58       70      +12

☔ 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.

rpenido

LGTM 👍
Thank you for your work, @navinkarkera!

I tested this using the instructions from the PR
I read through the code
I checked for accessibility issues
Includes documentation

rpenido · 2026-01-02T17:20:21Z

src/library-authoring/library-filters/LibraryDropdownFilter.test.tsx

+    await waitFor(() => expect(mockApi).toHaveBeenLastCalledWith({
+      pagination: false,
+      search: 'Test Library',
+    }), { timeout: 600 });


Out of curiosity: why do we need this timeout here?

@rpenido We delay request to backend by 500ms everytime user types something to avoid sending request on each character change by using debounce here. So we need to wait for atleast 500ms in the tests.

bradenmacdonald

Thanks for those changes!

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

rpenido

Thank you for your work, @navinkarkera! Kudos for the great refactor here

I left some comments (optional) and a minor bug that I found.

src/course-outline/outline-sidebar/AddSidebar.tsx

rpenido · 2026-01-08T21:57:14Z

src/library-authoring/add-content/AddContent.tsx

-      openComponentEditor('', (data) => data && linkComponent(data.id), blockType);
-    } else {
+      openComponentEditor?.('', (data) => data && linkComponent(data.id), blockType);
+    } else if (libraryId) {


libraryId should always be defined here. The type inference is not getting it?

@rpenido We were using useOptionalLibraryContext(), so libraryId could be undefined. But I tested now with normal useLibraryContext and it seems to be working fine without errors as the AddContent component is not displayed anywhere via ComponentPicker.

rpenido · 2026-01-08T22:22:29Z

src/generic/sidebar/index.scss

+    overflow-y: auto;
+    min-height: 100vh;
+    height: 100%;
+    max-height: 300vh;


Do we need this to solve any specific issue?
Couldn't we let the sidebar take all the height?

Suggested change

max-height: 300vh;

Yes, if we have a lot of library content, the sidebar becomes very long. So I limited it to 3 times of viewport with scroll.

rpenido · 2026-01-08T22:34:59Z

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

+
+export function useOptionalLibraryContext(): Partial<LibraryContextData> {
+  const ctx = useContext(LibraryContext);
+  return ctx || {};


Trying to add from an empty library was showing the Add component button:

I think it is safe to always return readOnly: true if we don't have the library context here (we will be probably inside a picker)

Suggested change

return ctx || {};

return ctx || { readOnly: true };

Nice catch! Thanks!

ChrisChV

@navinkarkera The code looks good! Very nice work!

bradenmacdonald · 2026-01-09T19:15:27Z

@navinkarkera @ChrisChV This is causing problems with the sidebar for me.

Before	After (sidebar at bottom)	After (sidebar too wide)

Also, what's the plan for when the sidebar is at the bottom of the screen? It seems unusable when it's at the very bottom of the outline, and the upper "change sidebar" button doesn't seem to do anything if you can't even see the sidebar. I'm not sure what the point is of making it responsive like this.

openedx-webhooks added open-source-contribution PR author is not from Axim or 2U core contributor PR author is a Core Contributor (who may or may not have write access to this repo). labels Jan 1, 2026

openedx-webhooks added this to Contributions Jan 1, 2026

github-project-automation bot moved this to Needs Triage in Contributions Jan 1, 2026

rpenido approved these changes Jan 2, 2026

View reviewed changes

mphilbrick211 added the FC Relates to an Axim Funded Contribution project label Jan 5, 2026

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Jan 5, 2026

navinkarkera force-pushed the navin/fal-4298/filter-libraries-dropdown branch from 368ada5 to 469e469 Compare January 7, 2026 14:56

navinkarkera mentioned this pull request Jan 7, 2026

feat: Add Sidebar for course outline [FC-0114] #2775

Closed

7 tasks

bradenmacdonald reviewed Jan 7, 2026

View reviewed changes

src/library-authoring/common/context/LibraryContext.tsx Outdated Show resolved Hide resolved

src/library-authoring/common/context/LibraryContext.tsx Outdated Show resolved Hide resolved

navinkarkera force-pushed the navin/fal-4298/filter-libraries-dropdown branch from 638c09c to 07773d1 Compare January 8, 2026 05:11

navinkarkera marked this pull request as ready for review January 8, 2026 16:07

rpenido suggested changes Jan 8, 2026

View reviewed changes

navinkarkera added 15 commits January 9, 2026 11:38

feat: add sidebar in course outline

cdd52b7

feat: sidebar filter

b214470

feat: add new tab section in sidebar

a1af0d0

refactor: to typescript

eec0813

refactor: move functions into context from hooks

a988c53

feat: add item to last parent block

ba7fd3c

feat: adjust things as per design

667902e

fix: lint and typing issues

e41e765

test: fix tests

465c1dd

test: add tests

db15cdb

refactor: make components run without library id if not required

2c13a5a

fix: maintain query positions

a9247b6

chore: apply review suggestions

5a42e7d

chore: update imports

b4df4ae

feat: library filter in add sidebar

b5f95f8

navinkarkera added 20 commits January 9, 2026 11:38

fixup! feat: library filter in add sidebar

7bb0f2f

feat: libray items

4a2bf91

fix: lint and type issues

b30d9d7

test: add tests

d1c7986

refactor: library context

8ce03d3

refactor: rename component picker

d3a0056

refactor: split component picker

94cff6a

refactor: move multiple library context into its own context

0736eec

refactor: create separate context for showOnlyPublished filter

eebf2c4

fix: component picker use in library

e2c4049

chore: remove unused type

13180a9

fix: tests

322b853

refactor: add sidebar style

3dce41a

feat: persist library selection

a129442

feat: collection dropdown filter

ce9c286

test: collections filter

fa71d87

fix: collections filter overlay

49a7533

fix: tooltip

04d8673

refactor: apply review suggestions

f46bd96

fix: failing tests

71a2195

navinkarkera force-pushed the navin/fal-4298/filter-libraries-dropdown branch from f710585 to 71a2195 Compare January 9, 2026 06:08

navinkarkera changed the title ~~feat: library dropdown filter in add sidebar~~ feat: Add sidebar and library dropdown filter Jan 9, 2026

navinkarkera changed the title ~~feat: Add sidebar and library dropdown filter~~ feat: Add sidebar and library dropdown filter [FC-0014] Jan 9, 2026

navinkarkera changed the title ~~feat: Add sidebar and library dropdown filter [FC-0014]~~ feat: Add sidebar and library dropdown filter [FC-0114] Jan 9, 2026

ChrisChV approved these changes Jan 9, 2026

View reviewed changes

ChrisChV merged commit 3c22e4b into openedx:master Jan 9, 2026
7 checks passed

github-project-automation bot moved this from Waiting on Author to Done in Contributions Jan 9, 2026

bradenmacdonald deleted the navin/fal-4298/filter-libraries-dropdown branch January 9, 2026 19:13

feat: Add sidebar and library dropdown filter [FC-0114] #2778

feat: Add sidebar and library dropdown filter [FC-0114] #2778

Conversation

navinkarkera commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Supporting information

Testing instructions

Other information

Best Practices Checklist

Uh oh!

openedx-webhooks commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

rpenido left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bradenmacdonald left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rpenido left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChrisChV left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bradenmacdonald commented Jan 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

navinkarkera commented Jan 1, 2026 •

edited

Loading

openedx-webhooks commented Jan 1, 2026 •

edited

Loading

codecov bot commented Jan 1, 2026 •

edited

Loading

ChrisChV left a comment •

edited

Loading