Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Remove Vuetify from Studio] Replace LanguageDropdown VAutocomplete with KDS KMultiSelect

Chiusa
  • Qualcosa non va?
#6,142 1 commento 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@adibmbrk ci sta già lavorando.

Dal 17/9/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

community-contribution-in-progress DEV: frontend help wanted

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

  • Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
  • Confirm that you’ve read the guidelines in your comment.

Overview

LanguageDropdown uses the Vuetify component VAutocomplete. Replace it with KMultiSelect from the Kolibri Design System.

Complexity: Medium
Target branch: unstable

Context

File: contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue

The component wraps VAutocomplete in DropdownWrapper. It shows a tooltip on each option. It validates with the Vuetify rules prop. It has style overrides that use ::v-deep.

Six files use this component:

File What it needs
channelEdit/components/edit/DetailsTabView.vue Shows hint text below the field
channelEdit/views/files/supplementaryLists/SupplementaryList.vue Hides languages with excludeLanguages
channelEdit/views/ImportFromChannels/SearchFilters.vue Selects more than one language
channelEdit/views/ImportFromChannels/ChannelList.vue Selects one language
shared/views/channel/ChannelModal.vue Makes the field required
administration/pages/Channels/ChannelTable.vue Reads the languages list from the component with a template ref

Key things to know before you start:

  1. KMultiSelect uses the props invalid and invalidText. It does not use the Vuetify rules prop.
  2. A Vuetify VForm cannot validate a KMultiSelect. ChannelModal needs a language, so it needs another way to validate the field. Studio already has a pattern for this. The field adds a public validate() method, and the parent calls it. ExpandableSelect.vue and MasteryCriteriaGoal.vue both do this. CompletionOptions/index.vue is an example of how a parent calls it.
  3. The languageText method returns early for arrays. A comment explains why. This works around a VAutocomplete behavior.

The tests in shared/views/__tests__/languageDropdown.spec.js use @vue/test-utils, but Studio no longer writes new tests with it.

The Change
  • LanguageDropdown renders KMultiSelect. It keeps the props value, required, excludeLanguages and multiple, so the six files change as little as possible.
  • Search must still find a language by its native name, its English name or its code. Use the searchKeys prop.
  • The accessibility strings in messages come from shared/strings/commonStrings.js. Add a string to $trs only when no shared string exists.
  • Remove DropdownWrapper, the tooltip template and the ::v-deep styles. Set the field width with appearanceOverrides.
  • LanguageDropdown gets a public validate() method that returns the error text, and ChannelModal calls it next to this.$refs.detailsform.validate(). A user must not save a channel without a language.
  • Remove the early return for arrays in languageText and its comment.
  • Remove the Vuetify props from the six files, such as box, hide-details, persistent-hint and dropAbove. KMultiSelect has no hint prop, so DetailsTabView needs another way to show its hint text.
How to Get There
  • Required field: Channel list, open a channel, Edit channel details. Clear the language and save.
  • Hint text: Channel editor, select a resource, Edit, Details tab, Audience, Language.
  • More than one language: Channel editor, Add, Import from channels, Search filters, Language.
  • Hidden languages: Channel editor, select a video or audio resource, Edit, Files, add a caption file.
  • Filter: Administration, Channels, Language filter.
Out of Scope
  • The other Vuetify components in the six files.
  • The VForm in ChannelModal and in DetailsTabView. Only the language field changes.
Acceptance Criteria
General
  • LanguageDropdown.vue renders KMultiSelect. It has no VAutocomplete, no VTooltip and no DropdownWrapper.
  • Single selection and multiple selection both work. The input event sends the same value as before in all six files.
  • excludeLanguages still hides languages.
  • ChannelModal does not save a channel when the language is empty, and the field shows the error text.
  • The language filter in ChannelTable still shows its options.
  • The six files no longer pass Vuetify props to the component.
  • DetailsTabView still shows its hint text.
  • The early return for arrays in languageText is gone.
Accessibility and i18n
  • messages has every key that KMultiSelect needs. Shared strings come from commonStrings.js.
  • Every new text string goes through $trs or a shared translator.
  • A keyboard user can open the list, type to filter it, move through the options, select an option and clear the field.
  • All colors come from theme tokens.
Testing
  • languageDropdown.spec.js uses Vue Testing Library.
  • A test covers the empty language error in ChannelModal.
  • pnpm test passes.
  • pre-commit run --all-files passes.
References

AI usage

I used Claude Code to draft this issue. It read the component and listed the files that use it. I reviewed the file references and edited the text.

Lingua principale
Python
Stelle
191
Fork
308
Merge medio
2g 6h
PR unite (30g)
65

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di learningequality/studio

Tutte le issue di learningequality/studio

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.