[Remove Vuetify from Studio] 'Did you forget to sign in' 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 Did you forget to sign in error page in Channels:

PermissionsError.vue is built with Vuetify-based shared/views/errors/AppError.vue and shared/views/ActionLink.vue.

Remove dependencies on Vuetify by:

• Replace AppError by shared/views/errors/StudioAppError.vue (new component with no Vuetify dependencies)
• Replace ActionLink by primary KRouterLink with raised button appearance and 'Back to home' label (similarly to #5296)
  • Text change and button appearance is an intentional visual deviation for the sake of consistency with other error pages

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

How to get there

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

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

• 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

• Link will have a button appearance
• 'Go to home page' link text will be replaced by 'Back to home'

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

[MisRob]

Not yet ready for work - confirmation with designers needed for the suggested button style change.

[MisRob]

^ Confirmed (Slack thread) and ready to be worked on.

[Abhishek-Punhani]

Hi @MisRob , can I work on this issue?

[akolson]

Hi @Abhishek-Punhani! Sure-l'll assign you. Let us know in case you need additional context to resolve the issue. Thank you!

[MisRob]

Closed by #5337