[Remove Vuetify from Studio] Channel not found error 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.

Sub-issue of #5060.

Complexity: Low

Summary

Remove Vuetify from Channel not found error page in Edit channel:

ChannelDeletedError.vue is built with Vuetify-based shared/views/errors/AppError.vue, and VBtn.

Remove dependencies on Vuetify in this specific location by:

• Use ChannelNotFoundError.vue instead for this page (this component gives the same output and has no Vuetify dependencies)
• Remove ChannelDeletedError.vue file

Ensure that the button interaction works exactly as before. Do not modify AppError. Do not refactor any other areas of the codebase.

How to get there

• Login as a@a.com with password a
• Go to Channels > Published Channel
• Copy URL
• Click the "..." dropdown menu in the upper right corner
• Click Delete channel
• Navigate to the copied URL

Guidance

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

Out of Scope

• Do not modify AppError
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Button color change from secondary gray to primary blue
• 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).

[vtushar06]

Hii @MisRob, would you like me to take this up, I would love to resolve this.

[MisRob]

I will assign you @vtushar06, thank you.

[vtushar06]

Hii @MisRob, Just opened PR #5480 which resolves this issue, can you review that out if it make sense.

[MisRob]

Thanks @vtushar06, we will have a look.