feat: show sync button on section/subsections [FC-0097] #2324

ChrisChV · 2025-07-23T21:08:38Z

Description

Adds the sync button on section/subsection cards
Which user roles will this change impact? "Course Author".

Supporting information

Github issue: Course Outline: Add sync indicator to library sections/subsections #2166
Depends on feat: Top-level parent logic in UpstreamLink.ready_to_sync [FC-0097] edx-platform#37217
Internal ticket: FAL-4228

Testing instructions

Create a new library and a new course.
In the library, you need to create this nested structure: Section > Subsection > Unit > Component.
Publish the library.
In the course:
- Import the Section from the library.
- Create a simple Section. In this section:
  - Import the Subsection from the library.
  - Create a simple Subsection. In this subsection:
    - Import the Unit from the library.
    - Create a simple Unit. In this unit:
      - Import the Component from the library.
Go to the library, update the Section name, and publish it.
Go to the course outline. Verify that you can see the sync button in the section card. Sync the section.
Go to the library, update the Subsection name, and publish it.
Go to the course outline. Verify that you can see
- The sync button in the Section card; that is the top-level parent of the subsection.
- The sync button in the Subsection card; that was imported on its own.
Sync all.
Go to the library, update the Unit name, and publish it.
Go to the course outline. Verify that you can see:
- The sync button in the Section card; that is the top-level parent when importing the section.
- The sync button in the Subsection card; that is the top-level parent when importing the subsection.
- The sync button in the Unit card; that was imported on its own.
Go to the library, update the Component name, and publish it.
Go to the course outline. Verify that you can see:
- The sync button in the Section card; that is the top-level parent when importing the section.
- The sync button in the Subsection card; that is the top-level parent when importing the subsection.
- The sync button in the Unit card; that is the top-level parent when importing the unit.
- The sync button in the Component card, which was imported on its own.
Go to the library, update the Subsection name, and publish it.
Go to the course outline. Ignore the changes to the Section card. Verify that the sync button is gone.

Other information

N/A

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).
Deprecated propTypes, defaultProps, and injectIntl patterns are not used 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.
Imports avoid using ../. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

openedx-webhooks · 2025-07-23T21:08:43Z

Thanks for the pull request, @ChrisChV!

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.

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-07-23T21:18:35Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.55%. Comparing base (7825bcd) to head (e2971f0).
⚠️ Report is 5 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2324      +/-   ##
==========================================
+ Coverage   94.50%   94.55%   +0.05%     
==========================================
  Files        1171     1174       +3     
  Lines       25149    25366     +217     
  Branches     5374     5570     +196     
==========================================
+ Hits        23766    23984     +218     
+ Misses       1320     1313       -7     
- Partials       63       69       +6

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

navinkarkera

@ChrisChV Nice work 👍. Just left a suggestion about invalidating course library queries.

navinkarkera · 2025-08-18T05:49:46Z

src/course-outline/section-card/SectionCard.tsx

@@ -148,6 +165,10 @@ const SectionCard = ({
    setIsExpanded((prevState) => containsSearchResult() || prevState);
  }, [locatorId, setIsExpanded]);

+  const handleOnPostChangeSync = useCallback(() => {
+    dispatch(fetchCourseSectionQuery([section.id]));


We need to invalidate course libraries query after syncing changes. Same for Subsection and unit cards.

Vice versa, we need to refetch course section when the sync is performed from course libraries page.

We need to invalidate course libraries query after syncing changes. Same for Subsection and unit cards.

Updated here: 6ebf564
That updates the counter in the warning.

Vice versa, we need to refetch course section when the sync is performed from course libraries page.

I'm not sure this is necessary. Does the course libraries page display any course information?

Does the course libraries page display any course information?

No, just wanted to make sure that the outline is updated and the sync button from the outline is removed. But it seems like the outline is refresh every time, so not needed.

navinkarkera

@ChrisChV Looks good. 👍

I tested this: (Verified sync button in outline)
I read through the code
I checked for accessibility issues
Includes documentation

src/course-outline/CourseOutline.tsx

navinkarkera · 2025-08-20T04:21:47Z

src/course-outline/section-card/SectionCard.tsx

@@ -148,6 +165,10 @@ const SectionCard = ({
    setIsExpanded((prevState) => containsSearchResult() || prevState);
  }, [locatorId, setIsExpanded]);

+  const handleOnPostChangeSync = useCallback(() => {
+    dispatch(fetchCourseSectionQuery([section.id]));


Does the course libraries page display any course information?

No, just wanted to make sure that the outline is updated and the sync button from the outline is removed. But it seems like the outline is refresh every time, so not needed.

bradenmacdonald

LGTM

src/course-libraries/utils.tsx

src/course-outline/section-card/SectionCard.test.tsx

feat: show sync button on section/subsections

515f9b1

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

openedx-webhooks added this to Contributions Jul 23, 2025

ChrisChV changed the title ~~feat: show sync button on section/subsections~~ feat: show sync button on section/subsections [FC-0097] Jul 23, 2025

github-project-automation bot moved this to Needs Triage in Contributions Jul 23, 2025

ChrisChV marked this pull request as draft July 23, 2025 21:08

mphilbrick211 added the FC Relates to an Axim Funded Contribution project label Jul 28, 2025

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Jul 28, 2025

ChrisChV added 2 commits August 16, 2025 12:02

Merge branch 'master' into chris/FAL-4228-sync-section-subsections

ac58188

refactor: Rename to isContainer in blockSyncData

3b25a68

ChrisChV mentioned this pull request Aug 16, 2025

feat: Top-level parent logic in UpstreamLink.ready_to_sync [FC-0097] openedx/edx-platform#37217

Merged

ChrisChV marked this pull request as ready for review August 16, 2025 18:52

refactor: Update downstream_list url

08afd0d

navinkarkera suggested changes Aug 18, 2025

View reviewed changes

ChrisChV added 2 commits August 19, 2025 13:32

Merge branch 'master' into chris/FAL-4228-sync-section-subsections

da252f1

feat: Add reload links in section, subsection and units

6ebf564

navinkarkera approved these changes Aug 20, 2025

View reviewed changes

refactor: use useParams() to get courseId

46dc4ca

ChrisChV requested a review from bradenmacdonald August 20, 2025 17:26

style: fix broken coverage

b47249c

bradenmacdonald approved these changes Aug 20, 2025

View reviewed changes

src/course-libraries/utils.tsx Outdated Show resolved Hide resolved

src/course-outline/section-card/SectionCard.test.tsx Outdated Show resolved Hide resolved

bradenmacdonald mentioned this pull request Aug 20, 2025

refactor: minor typing improvements #2395

Merged

ChrisChV added 2 commits August 21, 2025 15:02

style: Fix nits on the code

942b25d

style: Fix coverage

e2971f0

ChrisChV enabled auto-merge (squash) August 21, 2025 21:35

ChrisChV merged commit 0c88fd6 into openedx:master Aug 21, 2025
7 checks passed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: show sync button on section/subsections [FC-0097] #2324

feat: show sync button on section/subsections [FC-0097] #2324

Uh oh!

ChrisChV commented Jul 23, 2025 •

edited

Loading

Uh oh!

openedx-webhooks commented Jul 23, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jul 23, 2025 •

edited

Loading

Uh oh!

navinkarkera left a comment

Uh oh!

navinkarkera Aug 18, 2025

Uh oh!

ChrisChV Aug 19, 2025

Uh oh!

navinkarkera Aug 20, 2025

Uh oh!

navinkarkera left a comment

Uh oh!

Uh oh!

navinkarkera Aug 20, 2025

Uh oh!

bradenmacdonald left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: show sync button on section/subsections [FC-0097] #2324

feat: show sync button on section/subsections [FC-0097] #2324

Uh oh!

Conversation

ChrisChV commented Jul 23, 2025 • 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 Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

navinkarkera left a comment

Choose a reason for hiding this comment

Uh oh!

navinkarkera Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

ChrisChV Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

navinkarkera Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

navinkarkera left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

navinkarkera Aug 20, 2025

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!

Uh oh!

Uh oh!

ChrisChV commented Jul 23, 2025 •

edited

Loading

openedx-webhooks commented Jul 23, 2025 •

edited

Loading

codecov bot commented Jul 23, 2025 •

edited

Loading