Skip to content

refactor: gate CourseBreadcrumbs on the queries - #2072

Draft
brian-smith-tcril wants to merge 1 commit into
bsmith/course-loaded-sequence-idsfrom
bsmith/breadcrumbs-status-hooks
Draft

brian-smith-tcril wants to merge 1 commit into
bsmith/course-loaded-sequence-idsfrom
bsmith/breadcrumbs-status-hooks

Conversation

@brian-smith-tcril

@brian-smith-tcril brian-smith-tcril commented Sep 16, 2026

Copy link
Copy Markdown
Contributor

Summary

Gate CourseBreadcrumbs on the queries instead of the Redux status strings: useIsCourseLoaded(courseId) and useSequenceMetadata(sequenceId).isSuccess replace the slice's 'loaded' && 'loaded' comparison — both ids were already props. This is layer A4 (of six) of the courseware slice teardown #1976 (plan), stacked on the loaded-gate layer #2071, and deliberately tiny: one consumer whose inputs both exist. Part of #1976 — the teardown's final layer closes it.

With this, the transitional status bridge's only remaining readers are CoursewareContainer and TabPage — exactly the surface of the two teardown layers that follow.

What changed

  • CourseBreadcrumbs.jsx: the two useSelector status reads become the query gates; the useMemo deps follow; react-redux leaves the file. Model reads (useModel/useModels) untouched — read conversions are Dissolve the model-store normalized cache #1977's home.
  • CourseBreadcrumbs.test.jsx: gains the QueryClientProvider the component now needs and async settles on the loaded-gated assertions. Its pre-existing /preview/courses pathname cases now genuinely exercise the preview-keyed sequence query (useSequenceMetadata derives isPreview from the pathname, refactor: derive sequence status from the sequence query #2070).

Testing

npm run types (0 errors), npm run lint (clean), full jest suite green at head (111 suites, 1131 passed / 3 pre-existing skips). Manual pass on tutor local in the details block below — including a note on a pre-existing jump-nav preview-prefix gap observed while testing (untouched by this stack, not filed per review).

Decisions

Full decision log

Decisions — CourseBreadcrumbs onto the query gates (#1976, layer A4)

  1. Pure consumer swap. CourseBreadcrumbs gates its breadcrumb links on
    useIsCourseLoaded(courseId) && useSequenceMetadata(sequenceId).isSuccess
    instead of the slice's 'loaded' && 'loaded' strings — both ids were
    already props. The useMemo deps swap the two strings for the two
    booleans. react-redux leaves the file. Model reads (useModel/
    useModels for the course/sections/sequences) are untouched — Dissolve the model-store normalized cache #1977's
    home.

  2. Kept as its own tiny layer rather than folding into A3: the layer
    boundary is "one consumer, both inputs already exist", and the diff reads
    in one screen.

  3. Tests: the suite gains the QueryClientProvider the component now
    needs and async settles (findAllByTestId/findByText) for the
    loaded-gated assertions. Its pre-existing /preview/courses pathname
    cases now genuinely exercise the preview-keyed sequence query
    (useSequenceMetadata derives isPreview from the pathname);
    initializeTestStore's sequence mock matches either preview param.

  4. Behavior deltas: the standard posture (the component's own query
    subscriptions; results bridge into the model store as before). Otherwise
    faithful: same gate, same render output.

Manual testing

Manual testing — CourseBreadcrumbs onto the query gates (#1976, layer A4)

In-browser verification for layer A4, against tutor local
(http://apps.local.openedx.io:2000/learning, DemoX). This layer claims
zero user-facing change: breadcrumbs gate on the queries instead of the
Redux status strings.

Verify by hand

  • Breadcrumbs renderCourseBreadcrumbs only renders through the
    org.openedx.frontend.learning.course_breadcrumbs.v1 slot, which is empty
    by default: re-inject the default component via env.config.jsx per the
    slot's README first. Then open a unit: the breadcrumb bar shows Course home
    plus the section and sequence crumbs once loaded; the section/sequence
    dropdowns navigate.

Results

The render check passed (2026-09-16, tutor local, DemoX, default breadcrumbs
re-injected via env.config.jsx, run against the local branch @ 05c90e75):
crumbs render once loaded and the dropdowns navigate.

A preview-route check was dropped: with jump nav enabled (the staff/preview
context), crumb clicks go through JumpNavMenuItem.destinationUrl(), which
has never carried the /preview prefix — pre-existing on master (neither
BreadcrumbItem.tsx nor JumpNavMenuItem.jsx changes in this stack), so it
can't verify this layer. Not filed, per review.

🤖 Generated with Claude Code

CourseBreadcrumbs swaps the slice's courseStatus/sequenceStatus strings for
useIsCourseLoaded(courseId) and useSequenceMetadata(sequenceId).isSuccess —
both ids were already props. Model reads are untouched. With this, the
transitional status bridge's only remaining readers are CoursewareContainer
and TabPage.

Part of #1976.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@brian-smith-tcril
brian-smith-tcril added this pull request to stack #2062 September 16, 2026 08:20
@codecov

codecov Bot commented Sep 16, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.77%. Comparing base (05011cb) to head (05c90e7).

Additional details and impacted files
@@                          Coverage Diff                          @@
##           bsmith/course-loaded-sequence-ids    #2072      +/-   ##
=====================================================================
- Coverage                              93.77%   93.77%   -0.01%     
=====================================================================
  Files                                    367      367              
  Lines                                   6039     6038       -1     
  Branches                                1428     1395      -33     
=====================================================================
- Hits                                    5663     5662       -1     
- Misses                                   359      360       +1     
+ Partials                                  17       16       -1     

☔ View full report in Codecov by Harness.
📢 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant