[Remove Vuetify from Studio] 'Something went wrong' error page in Channels #5297

🙂 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 Something went wrong error page in Channels:

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

Remove dependencies on Vuetify by:

• Replace AppError by shared/views/errors/StudioAppError.vue (new component with no Vuetify dependencies)
• Replace buttons by KButton and KRouterLink
• Replace VLayout wrapper around buttons by KButtonGroup

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

How to get there

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

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

• 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

Note on scope

• Affected component is also used in Administration and Channel edit

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