-
Notifications
You must be signed in to change notification settings - Fork 214
Closed
Labels
DEV: frontendcommunity-contribution-in-progressgood first issueSelf-contained, straightforward, low-complexitySelf-contained, straightforward, low-complexityhelp wantedOpen source contributors welcomeOpen source contributors welcome
Description
🙂 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 toAppError.vue
except that it doesn't useVLayout
and instead achieves error area positioning via its custom CSS. Position the area precisely to be exactly as before. - Then, in
ChannelNotFoundError.vue
, replaceAppError
byStudioAppError
andVBtn
by primaryKRouterLink
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 passworda
- 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).
Metadata
Metadata
Assignees
Labels
DEV: frontendcommunity-contribution-in-progressgood first issueSelf-contained, straightforward, low-complexitySelf-contained, straightforward, low-complexityhelp wantedOpen source contributors welcomeOpen source contributors welcome