feat: Version 2 Created the plugin slot for UpgradeToCompleteAlert by mshet-sonata-pixel · Pull Request #47 · edx/frontend-app-learning

mshet-sonata-pixel · 2026-03-27T16:04:58Z

No description provided.

Copilot

Pull request overview

Adds a new plugin slot intended to support upgrade-related messaging in the Course Home “Dates” banner area, and wires the Dates tab to render that slot.

Changes:

Added BannerDatesUpgradeSlot with slot ID org.openedx.frontend.learning.banner_dates_upgrade.v1 (+ alias) and documentation.
Updated DatesTab to render the new plugin slot in place of UpgradeToCompleteAlert.
Updated Dates tab tests to reflect the new default rendering behavior (and removed the prior analytics test for the old alert).

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`src/plugin-slots/README.md`	Registers the new slot in the plugin slots index.
`src/plugin-slots/BannerDatesUpgradeSlot/index.tsx`	Introduces the new `PluginSlot` wrapper component for the dates upgrade banner.
`src/plugin-slots/BannerDatesUpgradeSlot/README.md`	Documents the slot’s ID, aliases, and intended usage.
`src/course-home/dates-tab/DatesTab.jsx`	Replaces `UpgradeToCompleteAlert` with `BannerDatesUpgradeSlot`.
`src/course-home/dates-tab/DatesTab.test.jsx`	Updates expectations to no longer render `UpgradeToCompleteAlert` by default and removes the related analytics click test.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-27T16:08:42Z

+          <BannerDatesUpgradeSlot courseId={courseId} />
          <UpgradeToShiftDatesAlert logUpgradeLinkClick={logUpgradeLinkClick} model="dates" />


Swapping UpgradeToCompleteAlert for BannerDatesUpgradeSlot changes the default UX: the upgrade-to-complete banner (and its click analytics) will no longer appear unless a plugin supplies it. If the intent is only to introduce a plugin extension point, consider keeping the existing alert as the slot’s default children (or otherwise preserving the current behavior) and pass through any needed props (e.g., the existing logUpgradeLinkClick).

Suggested change

<BannerDatesUpgradeSlot courseId={courseId} />

<UpgradeToShiftDatesAlert logUpgradeLinkClick={logUpgradeLinkClick} model="dates" />

<BannerDatesUpgradeSlot courseId={courseId}>

<UpgradeToShiftDatesAlert logUpgradeLinkClick={logUpgradeLinkClick} model="dates" />

</BannerDatesUpgradeSlot>

Agree with co-pilot. Let's keep the Alert as the default content for now until we actually remove the component from frontend-app-learning. I know the ticket said to remove it but I think we should reconsider that. We can remove the default via env.config.js instead.

Copilot · 2026-03-27T16:08:43Z

+export const BannerDatesUpgradeSlot = ({
+  courseId,
+}: BannerDatesUpgradeSlotProps) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.banner_dates_upgrade.v1"
+    idAliases={['dates_upgrade_banner_slot']}
+    pluginProps={{
+      courseId,
+    }}
+  />


This slot currently renders no default content and only passes courseId. If it is meant to be the extension point for the existing Upgrade-to-Complete banner, consider rendering the current default alert as PluginSlot children (so behavior stays the same when no plugins are installed) and include any additional pluginProps/callbacks needed to avoid duplicating logic (e.g., the upgrade click analytics handler / upgrade URL).

Copilot · 2026-03-27T16:08:43Z

@@ -182,8 +182,9 @@ describe('DatesTab', () => {
      axiosMock.onGet(datesUrl).reply(200, datesTabData);
      render(component);

-      await waitFor(() => expect(screen.getByText('You are auditing this course, which means that you are unable to participate in graded assignments. To complete graded assignments as part of this course, you can upgrade today.')).toBeInTheDocument());
-      expect(screen.getByRole('button', { name: 'Upgrade now' })).toBeInTheDocument();
+      await waitFor(() => expect(screen.getByText('We’ve built a suggested schedule to help you stay on track. But don’t worry—it’s flexible so you can learn at your own pace.')).toBeInTheDocument());
+      expect(screen.queryByText('You are auditing this course, which means that you are unable to participate in graded assignments. To complete graded assignments as part of this course, you can upgrade today.')).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Upgrade now' })).not.toBeInTheDocument();


The updated test now asserts that UpgradeToCompleteAlert does not render by default, which reflects a behavioral change (the alert previously rendered for eligible audit learners). If the PR’s scope is just “create a plugin slot”, the test should continue to expect the default alert (potentially rendered as the slot’s fallback) and keep equivalent coverage for the upgrade-button analytics event.

Copilot · 2026-03-27T16:08:43Z

+### Props:
+* `courseId` - The course ID (string)
+
+### Example Usage
+Plugins can inject components here to show upgrade-related alerts and notifications in the dates banner section.


This README describes the slot as enabling upgrade notifications, but it doesn’t clarify whether anything renders by default (without plugins) or how it relates to the existing UpgradeToCompleteAlert behavior. Please document whether the slot includes a default fallback and, if not, note that plugins must provide the entire alert/analytics behavior.

Suggested change

### Props:

* `courseId` - The course ID (string)

### Example Usage

Plugins can inject components here to show upgrade-related alerts and notifications in the dates banner section.

### Default behavior

By default, this slot does not render any UI or trigger any analytics on its own; if no plugins target this slot, nothing additional will appear in the dates banner section.

This slot does not automatically reuse or wrap existing upgrade experiences such as `UpgradeToCompleteAlert`—plugins are responsible for providing the full alert component, user interactions, and any associated tracking or reporting behavior.

### Props:

* `courseId` - The course ID (string)

### Example Usage

Plugins can inject components here to show upgrade-related alerts and notifications in the dates banner section, including any desired visual treatment, call-to-action buttons, and analytics/tracking events.

MaxFrank13 · 2026-03-30T15:11:41Z

We should add screenshots to the README. See this file as an example: https://github.com/edx/frontend-app-learner-dashboard/blob/release-ulmo/src/plugin-slots/WidgetSidebarSlot/README.md

Copilot

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

src/course-home/dates-tab/DatesTab.test.jsx:281

The analytics test for the upgrade button in UpgradeToCompleteAlert was removed. Since BannerDatesUpgradeSlot still renders UpgradeToCompleteAlert by default (and logUpgradeLinkClick still sends the track event), losing this assertion reduces coverage and could hide regressions in upgrade-click tracking on the Dates tab. Consider restoring a test that clicks "Upgrade now" and verifies sendTrackEvent payloads.

    it('sends analytics event onClick of upgrade button in UpgradeToShiftDatesAlert', async () => {
      sendTrackEvent.mockClear();
      datesTabData.datesBannerInfo = {
        contentTypeGatingEnabled: true,
        missedDeadlines: true,
        missedGatedContent: true,
        verifiedUpgradeLink: 'http://localhost:18130/basket/add/?sku=8CF08E5',
      };

      axiosMock.onGet(datesUrl).reply(200, datesTabData);
      render(component);

      const upgradeButton = await waitFor(() => screen.getByRole('button', { name: 'Upgrade to shift due dates' }));
      fireEvent.click(upgradeButton);

      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
        org_key: 'edX',
        courserun_key: courseId,
        linkCategory: 'personalized_learner_schedules',
        linkName: 'dates_upgrade',
        linkType: 'button',
        pageName: 'dates_tab',
      });
    });

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-01T04:57:26Z

+# Banner Dates Upgrade Slot
+
+### Slot ID: `org.openedx.frontend.learning.banner_dates_upgrade.v1`
+


PR title mentions "Version 2", but this slot is introduced as org.openedx.frontend.learning.banner_dates_upgrade.v1 here (and in the code). If the intent is a v2 slot, the ID/docs should be updated accordingly; otherwise consider adjusting the PR title to avoid confusion for plugin integrators.

Copilot AI review requested due to automatic review settings March 27, 2026 16:04

Copilot started reviewing on behalf of mshet-sonata-pixel March 27, 2026 16:05 View session

Copilot AI reviewed Mar 27, 2026

View reviewed changes

mshet-sonata-pixel changed the title ~~feat: Created the plugin slot for UpgradeToCompleteAlert~~ feat: Version 2 Created the plugin slot for UpgradeToCompleteAlert Mar 27, 2026

MaxFrank13 reviewed Mar 30, 2026

View reviewed changes

mshet-sonata-pixel force-pushed the SUBS-173-v22 branch from 77d35e0 to d00008d Compare March 30, 2026 19:46

MaxFrank13 reviewed Mar 31, 2026

View reviewed changes

Comment thread src/plugin-slots/BannerDatesUpgradeSlot/README.md Outdated

MaxFrank13 approved these changes Mar 31, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings April 1, 2026 04:53

Copilot started reviewing on behalf of mshet-sonata-pixel April 1, 2026 04:54 View session

feat: Created the plugin slot for UpgradeToCompleteAlert

d3de574

Copilot AI reviewed Apr 1, 2026

View reviewed changes

mshet-sonata-pixel force-pushed the SUBS-173-v22 branch from df7903d to d3de574 Compare April 1, 2026 04:57

mshet-sonata-pixel merged commit 283be48 into release-teak Apr 1, 2026
4 checks passed

mshet-sonata-pixel deleted the SUBS-173-v22 branch April 1, 2026 05:53

mshet-sonata-pixel restored the SUBS-173-v22 branch May 4, 2026 14:08

mshet-sonata-pixel mentioned this pull request May 4, 2026

feat: Created the plugin slot for UpgradeToCompleteAlert openedx/frontend-app-learning#1909

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Version 2 Created the plugin slot for UpgradeToCompleteAlert#47

feat: Version 2 Created the plugin slot for UpgradeToCompleteAlert#47
mshet-sonata-pixel merged 1 commit into
release-teakfrom
SUBS-173-v22

mshet-sonata-pixel commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

MaxFrank13 Mar 30, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

MaxFrank13 Mar 30, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		<BannerDatesUpgradeSlot courseId={courseId} />
		<UpgradeToShiftDatesAlert logUpgradeLinkClick={logUpgradeLinkClick} model="dates" />

		# Banner Dates Upgrade Slot

		### Slot ID: `org.openedx.frontend.learning.banner_dates_upgrade.v1`

Conversation

mshet-sonata-pixel commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

MaxFrank13 Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

MaxFrank13 Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants