[Remove Vuetify from Studio] Invitations 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: Medium

Summary

Remove Vuetify from 'Invitations' box in Channels > My Channels.

VCard together with channelList/views/Channel/ChannelInvitation.vue built with several Vuetify components is currently used for the invitations box.

Remove dependencies on Vuetify by:

• (1) Create a new StudioRaisedBox to replace VCard
  • A simple wrapper for styling of the elevated area
  • For background, use tokens.surface from KDS palette. For gray text, use tokens.annotation.
  • Use KDS 2dp dropshadow
  • This component will be re-used in another tasks => place it to shared components in shared/views directory
• (2) Remove Vuetify components from ChannelInvitations and instead use the combination of custom Studio implementation and KDS components:
  • KIconButton for Accept / Decline buttons
  • KModal for Declining Invitation confirmation dialog

Then replace this part of code:

studio/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue

Lines 91 to 105 in a8476ad

	<VCard
	v-if="invitationList.length"
	v-show="isChannelList"
	>
	<VList subheader>
	<VSubheader>
	{{ $tr('invitations', { count: invitationList.length }) }}
	</VSubheader>
	<ChannelInvitation
	v-for="invitation in invitationList"
	:key="invitation.id"
	:invitationID="invitation.id"
	/>
	</VList>
	</VCard>

with:

<StudioRaisedBox ...>
  <h3>{{ $tr('invitations', { count: invitationList.length }) }}</h3>
  <ul>
    <ChannelInvitation
      v-for="invitation in invitationList"
      ...
    />
  </ul>
</StudioRaisedBox>

(^ just approximate example, more adjustment may be needed - e.g. making <ul> part of ChannelInvitation could make more sense in migrated implementation)

How to get there

• Login as user@b.com with password b
• Create a new channel
• Share channel with user a@a.com
• Logout
• Login as a@a.com with password a
• Go to Channels > My Channels

Guidance

• Find detailed guidance with many code examples in KDS documentation
• Read the project for more useful references

Out of Scope

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

[MisRob]

Reserved for @yeshwanth235 if you'd be interested in this one, just comment

[yeshwanth235]

Hi @MisRob
I would like to work on this issue. please assign this to me

[MisRob]

Thank you @yeshwanth235

[learning-equality-bot]

Automatically unassigning @yeshwanth235 due to no comments here, or updates on the associated pull request for 1 month. @yeshwanth235, if you're still interested in this issue or already have work in progress, please message us here, and we'll assign you again. Thank you!

[yeshwanth235]

PR has been raised and merged.
So please assign the issue to me. Before the closing the issue

[MisRob]

Closed by #5252. Thanks @yeshwanth235.