[Remove Vuetify from Studio] 'Channel not found' error page in Channels

[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 Channels:

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

Remove dependencies on Vuetify by:

• Create a new component, shared/views/errors/StudioAppError.vue, that is identical to AppError.vue except that it doesn't use VLayout and instead achieves error area positioning via its custom CSS. Position the area precisely to be exactly as before.
• Then, in ChannelNotFoundError.vue, replace AppError by StudioAppError and VBtn by primary KRouterLink with raised button appearance

Do not modify AppError.vue and do not refactor any other areas than ChannelNotFoundError.vue

How to get there

• In ChannelListIndex, temporarily update the condition that displays the error to:

    <ChannelListAppError
      v-if="true"
      :error="{ errorType: 'CHANNEL_NOT_FOUND' }"
    />
  

• Login as user@a.com with password a
• Go to Channels

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.vue
• 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

General

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• 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]

As per previous conversation, possibly reserved for @vtushar06 - please message us here if you'd like to get assigned. First, I recommend you try to find this place and also have a look and KRouterLink documentation page.

[vtushar06]

Hi @MisRob, thanks for flagging this! I’d love to take this one up. I’ve gone through the description and KRouterLink documentation.
thanks

[LianaHarris360]

Hi @vtushar06 I'll go ahead and assign you!

[vtushar06]

thanks @LianaHarris360 and @MisRob for assignment. love to contribute in this.

[vtushar06]

Hi @MisRob and @LianaHarris360,
I’ve completed the changes as discussed Before opening the PR, I wanted to confirm if everything looks good on your end.

These changes are form new file StudioAppError.vue which matches previous content of AppError.vue .

Also, while testing, I noticed a minor padding issue on the Content Library page. Would you like me to address that in this PR, or should we track it separately? or Leave it as it is .

Thanks!

[MisRob]

Hi @vtushar06, thank you - this looks good to me as far as I can say now. You're welcome to open a pull request.

I noticed a minor padding issue on the Content Library page

I think we will skip it for now - there will be new layout components that should address it as we continue the migration.

[vtushar06]

okay sure @MisRob, Opening concise PR as guided. Thanks

[vtushar06]

Hi @MisRob,
PR #5242 is ready for review. Let me know if any changes are needed. Thanks!

[MisRob]

Closed by #5242