Skip to content

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

@MisRob

Description

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

Image

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 [email protected] with password a
  • Go to Channels

Guidance

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions