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

🙂 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

The minutes dropdown in ActivityDuration uses the Vuetify component VAutocomplete. Replace it with KMultiSelect in single selection mode.

Complexity: Low
Target branch: unstable

Context

File: contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/ActivityDuration.vue

The component shows one of three inputs. The dropdown appears only for "Short activity" and "Long activity". The other two are a number text field and read-only text. Only the dropdown changes in this task.

The options are a plain list of numbers. Short activity uses [5, 10, 15, 20, 25, 30]. Long activity uses [40, 50, 60, 70, 80, 90, 100, 110, 120].

A slider next to the dropdown uses the same value. The user picks minutes, and the component sends seconds to its parent.

Two finished examples of the same change:

• LanguageFilter.vue
• CategoryOptions.vue

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

The Change

• The dropdown renders KMultiSelect with :multiple="false". The options stay a plain list of numbers, so the component needs no itemText and no itemValue.
• The error messages in minutesRules move to the invalid and invalidText props.
• The accessibility strings in messages come from shared/strings/commonStrings.js.
• Remove DropdownWrapper. Set the field width with appearanceOverrides.
• The dropdown and the slider still show the same value, and the component still sends seconds.

How to Get There

1. Open channel editor, select any resource, Edit, Completion
2. Set "Duration" to "Short activity". The dropdown appears next to the slider.
3. Set "Duration" to "Long activity" for the second list of numbers.
4. Set "Duration" to "Exact time" to see the other two inputs.

Out of Scope

• The number text field and the read-only text in the same file.
• The slider and its styles.
• The layout components in the same file.
• The other dropdowns in CompletionOptions/index.vue.

Acceptance Criteria

General

• The minutes dropdown renders KMultiSelect with :multiple="false". The file has no VAutocomplete and no DropdownWrapper.
• The component still sends the duration in seconds.
• The slider changes the dropdown value, and the dropdown changes the slider value.
• A value outside the allowed range shows the same error text as before.
• The number text field and the read-only text do not change.

Accessibility and i18n

• messages has every key that KMultiSelect needs. Shared strings come from commonStrings.js.
• A screen reader announces the "Minutes" label with the field.
• A keyboard user can open the list, move through the options and select an option.
• All colors come from theme tokens.

Testing

• activityDuration.spec.js uses Vue Testing Library.
• pnpm test passes, including completionOptions.spec.js.
• pre-commit run --all-files passes.

References

References

• KMultiSelect documentation. Read the single selection example and the primitive values example.
• contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue

AI usage

I used Claude Code to draft this issue. It read the component and found the three inputs, the number lists and the link between the dropdown and the slider. I reviewed and edited the issue for accuracy.