Skip to content

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

@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 Channel not found error page in Channels:

Image

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

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions