Skip to content

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

Merged
rtibbles merged 3 commits into
learningequality:unstablefrom
Kartikayy007:remove-vuetify-generic-error
Oct 15, 2025
Merged

rtibbles merged 3 commits into
learningequality:unstablefrom
Kartikayy007:remove-vuetify-generic-error

Conversation

@Kartikayy007

Copy link
Copy Markdown
Contributor

Summary

Removed Vuetify dependencies from the GenericError.vue component by replacing them with Kolibri Design System (KDS) components.

Changes Made

  • Replaced AppError with StudioAppError (Vuetify-free version).
  • Replaced VLayout wrapper with KButtonGroup for semantic button grouping.
  • Replaced VBtn components with:
    • KButton (Refresh)
    • KRouterLink (Navigation)
  • Maintained all existing functionality and user interactions.

Manual Verification

  • Modified ChannelListIndex.vue to force display error page (v-if="true").
  • Tested all three buttons:
    • Refresh
    • Back to Home
    • Help report link
  • Verified modal opens when clicking the help link.
  • Checked RTL layout compatibility.

Screenshots

After (with KDS):
Screenshot 2025-08-21 at 1 20 38 PM

References


Reviewer Guidance

How to Test

  1. Edit:
    // contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
    <ChannelListAppError
      v-if="true"
      :error="{ errorType: 'UNKNOWN' }"
    />

@rtibbles rtibbles left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything is looking good, except that the Back to Home button is not functional.

:text="$tr('refreshAction')"
@click="reloadPage"
/>
<KButton

@rtibbles rtibbles Aug 22, 2025 •

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To maintain the link-type behaviour here, this needs to be a KRouterLink instead of a KButton, with the backHomeLink object using v-bind instead:


```suggestion
          <KRouterLink
            v-bind="backHomeLink"
            appearance="raised-button"
            :text="$tr('backToHomeAction')"
          />

Alternatively, if that doesn't play nicely with KButtonGroup you can bind the @click event of the KButton to trigger programmatic navigation with Vue Router https://v3.router.vuejs.org/guide/essentials/navigation.html

@click="$router.push(backHomeLink)"

in place of the v-bind.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

right, ill update it

@MisRob

MisRob commented Sep 10, 2025

Copy link
Copy Markdown
Member

@Kartikayy007 are you still planning to push the requested change?

@rtibbles rtibbles left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Final comment addressed.

@rtibbles
rtibbles merged commit 3e0817f into learningequality:unstable Oct 15, 2025
13 checks passed
@MisRob MisRob changed the title Replace Vuetify (VLayout, VBtn) with KDS components in GenericError.vue [Remove Vuetify from Studio] 'Something went wrong' error page in Channels Oct 20, 2025
AllanOXDi pushed a commit to AllanOXDi/studio that referenced this pull request Nov 20, 2025
…ue (learningequality#5313)

* Replace Vuetify (VLayout, VBtn) with KDS components in GenericError.vue

* Replace KRouterLink with KButton for back navigation in GenericError.vue

* Properly handle back to home.

---------

Co-authored-by: Richard Tibbles <richard@learningequality.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants