[Remove Vuetify from Studio] 'Page 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 Page not found error page in Channels:

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

Remove dependencies on Vuetify by:

• Replace AppError by shared/views/errors/StudioAppError.vue (new component with no Vuetify dependencies)
• Replace VBtn by primary KRouterLink with raised button appearance

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

How to get there

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

  <ChannelListAppError
    v-if="true"
    :error="{ errorType: 'PAGE_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

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

Note on scope

• Affected component is also used in Administration and Channel edit

[Kartikayy007]

@MisRob I've read the Contributing guidelines i'll love to work upon this issue, please assign

[rtibbles]

Hi @Kartikayy007 - I've assigned you to the other issue you requested for now, we can revisit this one once you've found your feet there!

[vtushar06]

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

[rtibbles]

Great, I'll assign you here.

[vtushar06]

hii @rtibbles, can you check #5314 which will close this issue. thanks