Skip to content

Migrate Studio snackbar to KDS - #6144

Open
Monier-Ayman wants to merge 10 commits into
learningequality:unstablefrom
Monier-Ayman:fix/5955-migrate-snackbar-to-kds
Open

Monier-Ayman wants to merge 10 commits into
learningequality:unstablefrom
Monier-Ayman:fix/5955-migrate-snackbar-to-kds

Conversation

@Monier-Ayman

@Monier-Ayman Monier-Ayman commented Sep 17, 2026 •

Copy link
Copy Markdown

Summary

This PR migrates Studio's snackbar implementation from Vuetify/Vuex to the Kolibri Design System's KSnackbar and useKSnackbar, as part of the effort to remove Vuetify from Studio.

What changed

Snackbar infrastructure

  • Replaced the Vuetify VSnackbar implementation in GlobalSnackbar.vue with KDS KSnackbar.
  • Migrated snackbar state management from the Vuex snackbar module to useKSnackbar.
  • Removed the old shared/vuex/snackbar module.
  • Removed the old useSnackbar composable and its mock.
  • Removed the snackbar module registration from the shared Vuex store.
  • Removed the global VSnackbar registration from shared/app.js.

Snackbar callers

Migrated all existing Studio snackbar callers to useKSnackbar, including:

  • Channel actions and channel management
  • Content node editing and options
  • Clipboard actions
  • Import from Channels
  • Submission and review workflows
  • Move operations
  • Tree and staging views
  • File uploads and progress
  • Trash actions
  • Channel invitations and sharing
  • Account and password settings
  • Storage requests
  • Token copying
  • Error/technical message handling
  • Community library update notifications

Existing snackbar behavior was preserved where applicable, including:

  • Custom messages and durations
  • Auto-dismiss behavior
  • Persistent snackbars
  • Action buttons and callbacks
  • Undo actions
  • Manual dismissal
  • hideCallback behavior
  • Promise-based flows that depended on snackbar dismissal

The existing showSnackbarOnCompleteSync method was kept because its name is part of the surrounding workflow; its snackbar implementation now uses useKSnackbar.

Accessibility

The new KSnackbar implementation uses the accessibility features provided by the Kolibri Design System, including the existing announce and assertive options where appropriate.

Tests

Updated affected tests and mocks to use useKSnackbar instead of the removed snackbar implementation.

The affected test suite was run with Jest in-band:

  • 21 test suites passed
  • 303 tests passed
  • 1 test skipped
  • 0 failures

Also verified with:

git diff --check

with no whitespace errors.

References

Closes #5955

Notes

The old forceReuse option had no actual callers in Studio. The KDS snackbar handles reactive text updates directly, so no additional forceReuse migration was necessary.

This PR is focused on replacing the snackbar infrastructure while preserving the existing user-facing behavior.

AI Usage

I used AI (Antigravity) as a coding assistant while working on this migration. I planned and implemented the changes myself, with AI helping me investigate the existing implementation, work through some of the changes, and review parts of the implementation.

I reviewed and refined all changes myself, verified the behavior against the issue requirements, checked the existing code and history, and ran the affected Jest tests and local pre-commit checks.

@learning-equality-bot

Copy link
Copy Markdown
Contributor

👋 Hi @Monier-Ayman, thanks for contributing!

For the review process to begin, please verify that the following is satisfied:

  • Contribution is aligned with our contributing guidelines

  • Pull request description has correctly filled AI usage section & follows our AI guidance:

    AI guidance

    State explicitly whether you didn't use or used AI & how.

    If you used it, ensure that the PR is aligned with Using AI as well as our DEEP framework. DEEP asks you:

    • Disclose — Be open about when you've used AI for support.
    • Engage critically — Question what is generated. Review code for correctness and unnecessary complexity.
    • Edit — Review and refine AI output. Remove unnecessary code and verify it still works after your edits.
    • Process sharing — Explain how you used the AI so others can learn.

    Examples of good disclosures:

    "I used Claude Code to implement the component, prompting it to follow the pattern in ComponentX. I reviewed the generated code, removed unnecessary error handling, and verified the tests pass."

    "I brainstormed the approach with Gemini, then had it write failing tests for the feature. After reviewing the tests, I used Claude Code to generate the implementation. I refactored the output to reduce verbosity and ran the full test suite."

Also check that issue requirements are satisfied & you ran pre-commit locally.

Pull requests that don't follow the guidelines will be closed.

Reviewer assignment can take up to 2 weeks.

@Monier-Ayman

Copy link
Copy Markdown
Author

Hi @akolson! The PR is ready for review. I’ve completed the migration and verified the affected tests pass. 🙌

@Monier-Ayman
Monier-Ayman force-pushed the fix/5955-migrate-snackbar-to-kds branch from 6194683 to 892fda1 Compare September 17, 2026 18:22
@akolson

akolson commented Sep 24, 2026

Copy link
Copy Markdown
Member

Hi @Monier-Ayman! Sure, I’ll take a look. Also, please be sure to always include the References section in the PR description so the assigned issue and PR can be auto-linked. Thank you!

@pre-commit-ci-lite
pre-commit-ci-lite Bot requested review from a team and rtibbles September 24, 2026 12:19
@learning-equality-bot

Copy link
Copy Markdown
Contributor

📢✨ Before we assign a reviewer, we'll turn on @rtibblesbot to pre-review. Its comments are generated by an LLM, and should be evaluated accordingly.

@rtibblesbot

rtibblesbot commented Sep 29, 2026 •

Copy link
Copy Markdown
Contributor

🟡 Waiting for changes

Outcome: reviewed d7b1c40

Last updated: 2026-10-28 12:52 UTC

@rtibblesbot rtibblesbot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #6144: removing the Vuex snackbar module left consumers behind, and several specs got weaker. Call-site migrations match KDS 5.9.0 useKSnackbar and keep the old 6000 ms timing.

CI failing: Frontend tests, linting and build. Locally, ReviewSubmissionSidePanel.spec.js fails 3 tests. SubmitToCommunityLibrarySidePanel.spec.js fails 1.

Manual QA in the browser passed for trash undo, import/search, sharing, account settings, admin actions and the notifications error, including RTL. Redis MISCONF on the QA stack blocked duplicate, clipboard, quick edit, move and channel list. Those passed in scratch Jest against the real GlobalSnackbar. They still need a browser pass.

  • blocking: unmigrated consumers of the removed store module (baseStore.js)
  • blocking: unused test bindings plus vacuous assertions (studioCopyToken.spec.js, trashModal.spec.js)
  • suggestion: other specs dropped their text assertions
  • suggestion: snackbar options repeated at every call site
  • suggestion: time-limited Cancel/Undo not reachable by keyboard
  • suggestion: no test for GlobalSnackbar wiring

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Ran a phased review pipeline over the pull request diff:

  • Classified the diff to select review passes (core, frontend, backend) and whether manual QA was required
  • Core review pass checked correctness, design, architecture, testing, completeness, and DRY/SRP/Rule-of-Three principles
  • Specialized frontend/backend review passes applied framework-specific lenses where those files changed
  • For UI changes: manual QA and an accessibility audit against a live dev server, when available
  • Checked CI status and linked issue acceptance criteria
  • Synthesized one review from those passes and chose the verdict from the findings, CI status, and QA evidence

Comment thread contentcuration/contentcuration/frontend/shared/vuex/baseStore.js
Comment thread contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue Outdated
@Monier-Ayman

Copy link
Copy Markdown
Author

Hi @rtibblesbot, thanks for the detailed review. I went through the feedback and pushed the fixes.

I fixed the remaining Vuex snackbar usage, restored the snackbar text assertions, added autofocus for the temporary Cancel/Undo actions, kept the 6000ms duration where needed, and fixed the GlobalSnackbar callback/cleanup behavior with tests.

I also cleaned up the unused test variables. The affected tests are now 123/123 passing, ESLint is clean, and git diff --check passes.

Thanks again for pointing these out!

@rtibblesbot rtibblesbot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #6144: 2 of 9 prior findings are still open; 7 are resolved or acknowledged.

CI passing. Manual QA did not run.

Still open:

  • studioCopyToken.spec.js:79,90 — mockStore is still destructured and unused. Drop it; it no longer blocks.
  • useCommunityLibraryUpdates.js:178 — the error snackbar still dismisses at the 5000 ms default. Add duration: 6000, as NotificationsModal/index.vue does.

New suggestions are inline:

  • GlobalSnackbar calls hideCallback twice.
  • Its spec mocks the composable.
  • The EditSourceModal text assertions never run.
Prior-finding status

RESOLVED — contentcuration/contentcuration/frontend/shared/vuex/baseStore.js:52 — removing module left unmigrated consumers
UNADDRESSED — contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/tests/studioCopyToken.spec.js:90 — mockStore unused
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/views/trash/tests/trashModal.spec.js — dispatchSpy unused
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/tests/EditTitleDescriptionModal.spec.js — snackbar text not checked
UNADDRESSED — contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js:178 — 5000 ms duration
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue:604 — Cancel unreachable by keyboard
RESOLVED — contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue — callback wiring untested
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue — deferral unneeded
ACKNOWLEDGED — contentcuration/contentcuration/frontend/shared/composables/useToken.js:42 — setup-time useKSnackbar() fixes TDZ (praise)


@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Ran an automatic code-only delta review triggered by new commits on a previously reviewed PR:

  • Retrieved prior bot reviews via the GitHub API
  • Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
  • Only raised NEW findings for newly introduced code
  • Core review pass only — specialized frontend/backend lenses and manual QA run when a review is explicitly requested
  • Synthesized one review from the passes and chose the verdict from the findings, CI status, and QA evidence

Comment thread contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue Outdated
@rtibblesbot
rtibblesbot dismissed their stale review October 2, 2026 14:38

Superseded by my review of 7f8524b: no blocking findings remain.

@Monier-Ayman

Copy link
Copy Markdown
Author

@rtibblesbot Thanks for the review! I addressed all the points you mentioned and pushed the fixes in f5c91a024.

I removed the unused mockStore, added the 6000ms duration, fixed the GlobalSnackbar callback handling and tests, and fixed the async assertions in EditSourceModal.

I also ran the affected tests and ESLint, and everything passed.

@rtibblesbot rtibblesbot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #6144: all 13 prior findings resolved or acknowledged. Two new test-value suggestions inline.

CI passing. Manual QA did not run. The UI is untested.

Prior-finding status

RESOLVED — contentcuration/contentcuration/frontend/shared/vuex/baseStore.js:52 — Removing module leaves unmigrated consumers
RESOLVED — contentcuration/contentcuration/frontend/shared/views/StudioCopyToken/tests/studioCopyToken.spec.js — mockStore now unused
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/views/trash/tests/trashModal.spec.js — dispatchSpy now unused
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/tests/EditTitleDescriptionModal.spec.js — Test no longer checks snackbar text
RESOLVED — contentcuration/contentcuration/frontend/shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js:178 — Snackbar dismisses after 5000 ms
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue:604 — Keyboard users can't reach Cancel before it expires
RESOLVED — contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue — Nothing tests callback wiring
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue — Deferral isn't needed
ACKNOWLEDGED — contentcuration/contentcuration/frontend/shared/composables/useToken.js:42 — useKSnackbar() at setup fixes latent TDZ bug
RESOLVED — contentcuration/contentcuration/frontend/shared/views/GlobalSnackbar.vue — hideCallback runs twice on close
RESOLVED — contentcuration/contentcuration/frontend/shared/views/tests/GlobalSnackbar.spec.js — Spec can't catch double hideCallback
RESOLVED — contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/tests/EditSourceModal.spec.js — Assertion runs after the test has passed
ACKNOWLEDGED — contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue:917 — autofocus: true on Undo/Cancel snackbars


@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Ran an automatic code-only delta review triggered by new commits on a previously reviewed PR:

  • Retrieved prior bot reviews via the GitHub API
  • Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
  • Only raised NEW findings for newly introduced code
  • Core review pass only — specialized frontend/backend lenses and manual QA run when a review is explicitly requested
  • Synthesized one review from the passes and chose the verdict from the findings, CI status, and QA evidence

@Monier-Ayman

Copy link
Copy Markdown
Author

@rtibblesbot Thanks for the review! I addressed the two suggestions:

  • Updated GlobalSnackbar tests to verify the actual KSnackbar props.
  • Updated EditSourceModal tests to trigger the submit event and wait for flushPromises(), and removed the duplicate test.

The affected tests are passing.

@rtibblesbot rtibblesbot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #6144: all 15 prior findings resolved. CI passing. Manual QA did not run. The UI is unverified.

Prior-finding status

RESOLVED — shared/vuex/baseStore.js:52 — Removing module leaves unmigrated consumers
RESOLVED — shared/views/StudioCopyToken/tests/studioCopyToken.spec.js — unused mockStore
RESOLVED — channelEdit/views/trash/tests/trashModal.spec.js — unused dispatchSpy
RESOLVED — QuickEditModal/tests/EditTitleDescriptionModal.spec.js — snackbar text unchecked
RESOLVED — useCommunityLibraryUpdates.js:178 — 5000 ms vs 6000 ms duration
RESOLVED — SubmitToCommunityLibrarySidePanel/index.vue:604 — Cancel unreachable by keyboard
RESOLVED — shared/views/GlobalSnackbar.vue:15 — callback wiring untested
RESOLVED — channelEdit/views/CurrentTopicView.vue — unneeded hideCallback deferral
RESOLVED — useToken.js:42 — praise: useKSnackbar() at setup fixes TDZ bug
RESOLVED — shared/views/GlobalSnackbar.vue — hideCallback runs twice on close
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — mock can't catch double hideCallback
RESOLVED — QuickEditModal/tests/EditSourceModal.spec.js — assertion runs after test completes
RESOLVED — QuickEditModal/tests/EditSourceModal.spec.js — duplicate imported-node test
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — :text assertion reads back the ref
RESOLVED — CurrentTopicView.vue:917 — praise: autofocus: true on Undo/Cancel


@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Ran an automatic code-only delta review triggered by new commits on a previously reviewed PR:

  • Retrieved prior bot reviews via the GitHub API
  • Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
  • Only raised NEW findings for newly introduced code
  • Core review pass only — specialized frontend/backend lenses and manual QA run when a review is explicitly requested
  • Synthesized one review from the passes and chose the verdict from the findings, CI status, and QA evidence

@Monier-Ayman

Copy link
Copy Markdown
Author

@rtibblesbot Could you please run the review/checks again on the latest commit? I’ve fixed the formatting issues and pushed the update. Thanks!

@rtibblesbot

Copy link
Copy Markdown
Contributor

Thanks @Monier-Ayman — the re-review picks up new commits automatically; the status comment above updates when it runs. CI shows no checks on fdf4611 yet, likely because workflows on fork PRs need a maintainer to approve them.

@rtibblesbot rtibblesbot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #6144: all 16 prior findings resolved. The new commits are formatting only. No new findings. CI passing. UI unverified: manual QA did not run.

Prior-finding status

RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — assertion passes with :text binding deleted
RESOLVED — channelEdit/components/QuickEditModal/tests/EditSourceModal.spec.js — duplicate imported-node test
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js:56 — praise: real useKSnackbar singleton with toHaveBeenCalledTimes(1)
RESOLVED — shared/vuex/baseStore.js:52 — removing module leaves three unmigrated consumers
RESOLVED — shared/views/StudioCopyToken/tests/studioCopyToken.spec.js — unused mockStore
RESOLVED — channelEdit/views/trash/tests/trashModal.spec.js — unused dispatchSpy
RESOLVED — channelEdit/components/QuickEditModal/tests/EditTitleDescriptionModal.spec.js — no longer checks snackbar text
RESOLVED — shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js:178 — 5000 ms duration
RESOLVED — channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue:604 — keyboard users can't reach Cancel
RESOLVED — shared/views/GlobalSnackbar.vue:15 — callback wiring untested
RESOLVED — channelEdit/views/CurrentTopicView.vue — deferral not needed
RESOLVED — shared/composables/useToken.js:42 — praise: setup-time useKSnackbar() fixes TDZ bug
RESOLVED — shared/views/GlobalSnackbar.vue — hideCallback runs twice on close
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — spec mocks useKSnackbar, can't catch double call
RESOLVED — channelEdit/components/QuickEditModal/tests/EditSourceModal.spec.js — assertion runs after synchronous test ends
RESOLVED — channelEdit/views/CurrentTopicView.vue:917 — praise: autofocus: true on Undo/Cancel snackbars


Written by rtibblesbot, an LLM-based coding agent.

@akolson

akolson commented Oct 19, 2026

Copy link
Copy Markdown
Member

Hi @AlexVelezLl! Could you please take a look at this?

@AlexVelezLl

Copy link
Copy Markdown
Member

Hey @Monier-Ayman! Seems like there are some failing checks, could you take a look at them, please? 👐

@akolson

akolson commented Oct 27, 2026

Copy link
Copy Markdown
Member

Hey @Monier-Ayman! Could you please review and address the feedback provided? If we don't hear back from you, we'll assume you're unable to proceed with the requested changes, and the issue will be unassigned from you and the PR probably closed.

@Monier-Ayman

Copy link
Copy Markdown
Author

Yes, of course @akolson ! I’ll take a look at the feedback and work on the requested changes. Thanks for the reminder!

- Drop explicit duration: 6000 and autoDismiss: true across all call sites to use KDS defaults
- Remove duration: null from persistent snackbar callers
- Remove color: 'error' from StagingTreePage
- Set announce: false for ChannelSetModal
- Migrate upstream Organization views from deprecated useSnackbar to useKSnackbar
- Remove useKSnackbar jest mocks across 18 test specs and assert against real composable
- Assert snackbar text in studioCopyToken.spec.js and clean up mockStore
- Rewrite GlobalSnackbar.spec.js with Vue Testing Library
- Rename test descriptions still referencing showSnackbarSimple
@Monier-Ayman

Copy link
Copy Markdown
Author

Hi @AlexVelezLl, @akolson

I have merged the latest upstream/unstable into this branch and addressed all the review feedback:

  1. Rely on KDS Defaults:

    • Removed explicit duration: 6000 and autoDismiss: true across all call sites so the KDS default duration and behavior are respected.
    • Removed redundant duration: null from persistent snackbar callers (autoDismiss: false).
    • Removed the unsupported color: 'error' option in StagingTreePage/index.vue.
    • Updated ChannelSetModal.vue to use announce: false.
  2. Upstream Organization Views Integration:

    • Migrated the newly merged Organization components (InviteOrganizationUserForm.vue, OrganizationDetailsTab.vue, OrganizationUsersTable.vue, and StudioMyOrganizations.vue) from the deprecated useSnackbar composable to KDS useKSnackbar.
  3. Test Suite Refactoring & Mock Cleanup:

    • Removed jest.mock('kolibri-design-system/lib/composables/useKSnackbar') across all test specs, testing directly against the real singleton composable and resetting state with clearSnackbar() in beforeEach.
    • Added snackbar message text assertions to studioCopyToken.spec.js and cleaned up unused mockStore.
    • Rewrote GlobalSnackbar.spec.js using @testing-library/vue instead of @vue/test-utils.
    • Renamed test descriptions still referencing the legacy showSnackbarSimple.
  4. Verification & Code Quality:

    • All modified files have been formatted with kolibri-format.
    • All affected Jest test suites pass locally with 0 failures.

Please take another look when you have a moment. Thanks!

@rtibblesbot rtibblesbot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #6144: 16 of 16 prior findings resolved; one new suggestion inline.

CI passing. Manual QA did not run, so the UI is unverified.

Prior-finding status

RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — :text assertion passes without the binding
RESOLVED — QuickEditModal/tests/EditSourceModal.spec.js — duplicate of :261
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js:56 — praise: real useKSnackbar singleton
RESOLVED — shared/vuex/baseStore.js:52 — unmigrated consumers of removed module
RESOLVED — StudioCopyToken/tests/studioCopyToken.spec.js — unused mockStore
RESOLVED — trash/tests/trashModal.spec.js — unused dispatchSpy
RESOLVED — QuickEditModal/tests/EditTitleDescriptionModal.spec.js — snackbar text not checked
RESOLVED — NotificationsModal/composables/useCommunityLibraryUpdates.js:178 — 5000 ms duration
RESOLVED — SubmitToCommunityLibrarySidePanel/index.vue:601 — Cancel unreachable by keyboard
RESOLVED — shared/views/GlobalSnackbar.vue:15 — callback wiring untested
RESOLVED — channelEdit/views/CurrentTopicView.vue — unneeded deferral
RESOLVED — shared/composables/useToken.js:42 — praise: TDZ fix
RESOLVED — shared/views/GlobalSnackbar.vue — hideCallback runs twice
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — mock hides double hideCallback
RESOLVED — QuickEditModal/tests/EditSourceModal.spec.js — assertion runs after test finishes
RESOLVED — channelEdit/views/CurrentTopicView.vue:916 — praise: autofocus: true

Next step: Needs a full code review by a human engineer, then manual QA once that reviewer sets Needs QA.

  • The author is outside the team: confirm this should be built at all.
  • User-visible files changed: contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue, contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue, contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue, contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue, contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue….
  • Check that snackbars still auto-dismiss after about 6 s now that explicit duration/autoDismiss rely on the KDS defaults, and that the "creating copies" snackbars stay up.
  • Check that the Organization views' snackbars appear and are announced to screen readers.

Written by rtibblesbot, an LLM-based coding agent.

…l specs

- Make EditAudienceModal tests async and await flushPromises() instead of requestAnimationFrame
- Call useKSnackbar().clearSnackbar() in beforeEach across QuickEditModal specs to prevent state leakage
- Trigger KModal events via findComponent to correctly invoke modal actions
@Monier-Ayman

Copy link
Copy Markdown
Author

@rtibblesbot Done in commit ce53d03. Made the tests in EditAudienceModal.spec.js async and replaced requestAnimationFrame with await flushPromises(). Also added useKSnackbar().clearSnackbar() in beforeEach across the QuickEditModal specs to ensure clean state isolation between tests.

@learning-equality-bot

Copy link
Copy Markdown
Contributor

📢✨ Before we assign a reviewer, we'll turn on @rtibblesbot to pre-review. Its comments are generated by an LLM, and should be evaluated accordingly.

@akolson

akolson commented Oct 28, 2026

Copy link
Copy Markdown
Member

@AlexVelezLl, any other thoughts on this?

@rtibblesbot rtibblesbot left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #6144: no new findings. 11 of 17 prior findings resolved; 6 acknowledged. CI pending.

Prior-finding status

RESOLVED — shared/views/tests/GlobalSnackbar.spec.js — :text assertion passes without the binding
RESOLVED — channelEdit/components/QuickEditModal/tests/EditSourceModal.spec.js — test duplicates :261
RESOLVED — shared/views/tests/GlobalSnackbar.spec.js:56 — praise: real useKSnackbar singleton
RESOLVED — shared/vuex/baseStore.js:52 — unmigrated consumers of removed module
RESOLVED — shared/views/StudioCopyToken/tests/studioCopyToken.spec.js — unused mockStore
RESOLVED — channelEdit/views/trash/tests/trashModal.spec.js — unused dispatchSpy
RESOLVED — channelEdit/components/QuickEditModal/tests/EditTitleDescriptionModal.spec.js — snackbar text not checked
ACKNOWLEDGED — shared/views/NotificationsModal/composables/useCommunityLibraryUpdates.js:178 — 5000 ms duration
ACKNOWLEDGED — channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue:601 — keyboard reach of Cancel
ACKNOWLEDGED — shared/views/GlobalSnackbar.vue:15 — callback wiring untested
ACKNOWLEDGED — channelEdit/views/CurrentTopicView.vue — deferral unneeded
RESOLVED — shared/composables/useToken.js:42 — praise: TDZ fix
ACKNOWLEDGED — shared/views/GlobalSnackbar.vue — hideCallback runs twice on close
ACKNOWLEDGED — shared/views/tests/GlobalSnackbar.spec.js — mock cannot catch double hideCallback
RESOLVED — channelEdit/components/QuickEditModal/tests/EditSourceModal.spec.js — assertion after test completes
RESOLVED — channelEdit/views/CurrentTopicView.vue:916 — praise: autofocus on Undo/Cancel
RESOLVED — channelEdit/components/QuickEditModal/tests/EditAudienceModal.spec.js — assertion can never fail

Next step: Needs a full code review by a human engineer, then manual QA once that reviewer sets Needs QA.

  • The author is outside the team: confirm this should be built at all.
  • User-visible files changed: contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue, contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue, contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue, contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue, contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue….
  • Decide whether the acknowledged double hideCallback call on close in GlobalSnackbar.vue is acceptable, since clipboard and undo changeTracker.cleanUp() now depend on it.
  • Confirm the useKSnackbar migration pattern and the removal of the Vuex snackbar module are what other code should copy.
  • Decide whether to fix or drop ImportFromChannelsModal's beforeRouteUpdate clear; it never runs, because the modal is not a route component (same as on base).
QA captures (43)

Edit a resource's audience via the quick-edit Audience modal (select resource, choose role and For beginners, save) — "Changes saved" snackbar appears once, the modal closes, and the new role/beginner values persist after reopening

Step Screenshot
Audience modal coach beginners Audience modal coach beginners
Audience modal initial Audience modal initial
Audience persisted after reload Audience persisted after reload
Changes saved snackbar Changes saved snackbar
Keyboard save snackbar Keyboard save snackbar
Snackbar small screen Snackbar small screen
1-audience-save-flow.webm

Edit categories or another boolean-map field (e.g. levels) via its quick-edit modal on one and on multiple selected resources, save — single "Changes saved" snackbar, values applied to every selected node, no stale snackbar left from a previous edit

Step Screenshot
Multi categories mixed modal Multi categories mixed modal
Multi categories saved snackbar Multi categories saved snackbar
Multi levels modal Multi levels modal
Multi levels saved snackbar Multi levels saved snackbar
Single categories saved snackbar Single categories saved snackbar
2-multi-categories-save.webm

Edit language via the quick-edit Language modal on a topic with "apply to all descendants" and on a single resource, save — snackbar text, modal closes, language shown on the node and its children

Step Screenshot
Child video language fr Child video language fr
Rtl saved snackbar Rtl saved snackbar
Single resource edit panel language Single resource edit panel language
Single resource modal es Single resource modal es
Single resource saved snackbar Single resource saved snackbar
Topic modal fr descendants Topic modal fr descendants
Topic saved snackbar Topic saved snackbar
3-single-resource-language-save.webm
3-topic-language-descendants-save.webm

Open Import from other channels, search, apply a saved search or browse into a channel, then move between search results, browse and review pages — any snackbar shown earlier (e.g. saved-search confirmation) is cleared on route change and the import flow still completes with the imported-items snackbar in the channel

Step Screenshot
After import tree After import tree
Import browse Import browse
Review selections Review selections
Saved searches modal with snackbar Saved searches modal with snackbar
Search deleted snackbar Search deleted snackbar
Search saved snackbar Search saved snackbar
4-saved-search-snackbar-route-change.webm

Move resources to trash, open the trash modal, restore one item and permanently delete another — snackbar text for each action, list updates, restored node reappears in the tree

Step Screenshot
Delete confirm Delete confirm
Delete snackbar empty trash Delete snackbar empty trash
Go to location Go to location
Removed snackbar single Removed snackbar single
Removed snackbar toolbar Removed snackbar toolbar
Restore snackbar Restore snackbar
Restored in tree Restored in tree
Trash modal two items Trash modal two items
5-trash-restore-delete.webm

From My channels, delete an editable channel and remove a view-only channel from the list — confirmation modal, success snackbar text for each, card disappears from the list

Step Screenshot
Channel removed snackbar Channel removed snackbar
Delete confirm modal Delete confirm modal
Remove confirm modal Remove confirm modal
6-delete-channel.webm
6-remove-view-only-channel.webm

Written by rtibblesbot, an LLM-based coding agent.

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.

[Remove Vuetify from Studio] Migrate Studio's GlobalSnackbar and vuex/snackbar to KDS KSnackbar + useKSnackbar

4 participants