Skip to content

Migrate Studio snackbar to KDS - #6144

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

Monier-Ayman wants to merge 2 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

👋 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
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

3 participants