[Remove Vuetify from Studio] Channel details in Channels - page layout

[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.

Sub-issue of #5060.

Complexity: Medium

Summary

Migrate page layout of ChannelDetailsModal from Vuetify to Kolibri Design System and create a new shared StudioImmersiveModal component.

Remove dependencies on Vuetify in these specific locations by:

• Create a new shared/views/StudioImmersiveModal
  • Provides FullscreenModal's features but with no Vuetify dependencies
  • Doesn't have all FullscreenModal's features, only those used on the channel details page (e.g. leave out Tabs)
  • Utilizes KToolbar for the toolbar
  • Utilizes StudioOfflineAlert for the offline alert
  • Utilizes StudioPage for the page layout
• Replace FullscreenModal in ChannelDetailsModal by StudioImmersiveModal. Do not change FullscreenModal.
• Use KButton + KDropdownMenu for Download channel summary dropdown
• Use StudioLargeLoader for the loading indicator (will be available after we merge [Remove Vuetify from Studio] Collection channels loader in Channels - New collection #5388)
• Except DetailsPanel , remove other Vuetify components from ChannelDetailsModal (VCard, VLayout, ...)
• Do not refactor inner content of the page (DetailsPanel.vue) - will be resolved in another issue

Ensure page interactions are functional as before. Do not refactor any other areas.

How to get there

• Login as a@a.com with password a

File upload

• Go to Channels > My Channels
• Click the info icon on the Published Channel card

Guidance

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

Out of Scope

• Do not change FullscreenModal
• Do not refactor inner content of the page
• 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 ::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).

[MisRob]

Reserved for @vtushar06 based on previous discussion. @vtushar06 if you'd like to work on this, send a message here. Thank you.

[vtushar06]

Thanks you @MisRob, you are really kind towards to your fellow contributors. Love to work on this.

[anshrajput428]

is this issue still open to work on...then please assign it to me

[vtushar06]

Hii @anshrajput428, thanks for your interest but currently I am working on this issue, can you look into other issue with help wanted labels and also please be patient as our community provide month of time for contributors before unassigning them if inactive, so comment and ask for assignment for issues which are either not assigned or contributor is inactive more than a month and see contributing guidelines