[Remove Vuetify from Studio] Layout and input on the Collection > Select channels page

[MisRob]

🙂 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

Remove Vuetify from the layout and input in the selection list on the Collection > Select channels page.

Complexity: Low

Context

Selection list on the Collection > Select channels page. Note that card is not part of this issue.

The Change

Remove Vuetify from the layout and input in the selection list on the Collection > Select channels page:

• Replace LoadingText by StudioLargeLoader + useKShow with minimum visible time 400ms as per guidance here and here
• Replace Checkbox by KCheckbox (Checkbox was a temporary wrapper around KCheckbox that is not needed anymore)
• Replace VTextField with KTextbox
• Replace VContainer and VLayout with custom styles

Ensure that all interactions are functional as before. Do not refactor channel card or any other areas of the codebase.

How to Get There

• Login as user@a.com with password a
• Go to Channels > Collections
• Click New collection
• Click Select channels

Guidance

• Find detailed guidance with many code examples in KDS documentation
• Read the project for more useful references

Out of Scope

• Do not refactor channel card
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS

Acceptance Criteria

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

General

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• There are no regressions in the printing preview
• There are no ::v-deep or /deep/ selectors.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

• Implementation meets a11y standards
• All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• Mobile experience is reasonable

Unit tests

• If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).

References

Sub-issue of #5060

[Swoyamjeetcodes]

Can I work on this?

[MisRob]

@Swoyamjeetcodes You can skip updating test suite until we merge #5694.

[MisRob]

@Swoyamjeetcodes note the updated comment ^ The PR I mentioned was merged a while ago. Please make sure to fetch the latest unstable before you start your working branch, that way you will have the latest test suite available and are free to update further if needed.

[MisRob]

@Swoyamjeetcodes I had to update the issue ~ we won't refactor cards at this point. There is another related place and we will approach it differently, it will be specified in another issue. However you can still address other areas. Please read through the updated issue. Sorry for unexpected change!

[Swoyamjeetcodes]

@Swoyamjeetcodes I had to update the issue ~ we won't refactor cards at this point. There is another related place and we will approach it differently, it will be specified in another issue. However you can still address other areas. Please read through the updated issue. Sorry for unexpected change!

sure :D

[Swoyamjeetcodes]

@Swoyamjeetcodes note the updated comment ^ The PR I mentioned was merged a while ago. Please make sure to fetch the latest unstable before you start your working branch, that way you will have the latest test suite available and are free to update further if needed.

Absolutely

[MisRob]

Thanks :)