[Remove Vuetify from Studio] 'Unsaved changes' modal in Channels - New collection

🙂 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 Unsaved changes modal in Channels > Collections > New collection:

MessageDialog.vue built with several Vuetify components is currently used for this modal:

studio/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue

Lines 158 to 180 in a8476ad

    
           <MessageDialog 
        
             v-model="showUnsavedDialog" 
        
             :header="$tr('unsavedChangesHeader')" 
        
             :text="$tr('unsavedChangesText')" 
        
             data-test="dialog-unsaved" 
        
             :data-test-visible="showUnsavedDialog" 
        
           > 
        
             <template #buttons> 
        
               <VSpacer /> 
        
               <VBtn 
        
                 flat 
        
                 @click="confirmCancel" 
        
               > 
        
                 {{ $tr('closeButton') }} 
        
               </VBtn> 
        
               <VBtn 
        
                 color="primary" 
        
                 @click="save" 
        
               > 
        
                 {{ $tr('saveButton') }} 
        
               </VBtn> 
        
             </template> 
        
           </MessageDialog>

Remove dependencies on Vuetify by using KModal instead of MessageDialog.

Do not modify MessageDialog.vue or how it's used at another places.

How to get there

Login as user@a.com with password a
Go to Channels > Collections
Click New collection button
Add some text to Collection name input
Click the close button in the top bar

Guidance

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

Out of Scope

Do not modify MessageDialog.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).

@MisRob

hi @MisRob, can you assign me this issue?

@MisRob

@MisRob please take look

@Kartikayy007

HI @Kartikayy007! Yes--sure. Please feel free to let us know incase you have any questions or comments regarding the issue. Thanks you so much.

Hi! I’ve read the contributing guidelines and would like to work on this issue. I’ll replace MessageDialog with KModal in ChannelSetModal.vue and will follow the acceptance criteria. Could you please assign this to me?

@AvaniNGoswami

Hi @AvaniNGoswami, thanks! We have already received a pull request for this issue, even though it's unclear whether @Kartikayy007 plans to come back to resolve feedback. Let's wait for some time if we hear back.

You're welcome to keep an eye on the list of unassigned help wanted issues. There are none currently, but we add new ones regularly, usually at least once per week.

@MisRob

Hii @MisRob, Can you assign this issue to me if current contributor is not active on this.thanks

@vtushar06

Hi @vtushar06, since @Kartikayy007 didn't respond here, we'd be happy to let you finish that work. Do you think you could push right to #5306 based on review feedback so that the review is not lost?

@MisRob

Yes, sure @MisRob! I’ll continue the work on PR #5306 and push the changes based on the existing review feedback.

@vtushar06

Thank you @vtushar06, that's helpful

@MisRob

Hi @MisRob,

I've addressed all the review feedback from @LianaHarris360:

Removed unnecessary KModal import
Removed KModal from components section
Removed redundant showUnsavedDialog = false

My branch: https://github.com/vtushar06/studio/tree/remove-vuetify-unsaved-modal-5299
Commit: vtushar06@1a368b1

I don't have push access to @Kartikayy007's fork. Should I create a new PR or can a maintainer cherry-pick this commit?

@vtushar06

Ah I didn't realize it @vtushar06. In that case if you wouldn't mind opening a new PR, and cross-referencing them, that'd would be great.

@MisRob

okay @MisRob, will open by today.

Replace Vuetify MessageDialog with KModal in unsaved changes modal (l…

@vtushar06

Thank you @vtushar06

Replace Vuetify MessageDialog with KModal in unsaved changes modal (l…

Navigation Menu

Repository navigation

[Remove Vuetify from Studio] 'Unsaved changes' modal in Channels - New collection #5299

Summary

How to get there

Guidance

Out of Scope

Expected UI/UX changes

Acceptance criteria

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<MessageDialog
	v-model="showUnsavedDialog"
	:header="$tr('unsavedChangesHeader')"
	:text="$tr('unsavedChangesText')"
	data-test="dialog-unsaved"
	:data-test-visible="showUnsavedDialog"
	>
	<template #buttons>
	<VSpacer />
	<VBtn
	flat
	@click="confirmCancel"
	>
	{{ $tr('closeButton') }}
	</VBtn>
	<VBtn
	color="primary"
	@click="save"
	>
	{{ $tr('saveButton') }}
	</VBtn>
	</template>
	</MessageDialog>

[Remove Vuetify from Studio] 'Unsaved changes' modal in Channels - New collection #5299

Description

Summary

How to get there

Guidance

Out of Scope

Expected UI/UX changes

Acceptance criteria

Activity

Kartikayy007 commented on Aug 16, 2025

Kartikayy007 commented on Aug 18, 2025

akolson commented on Aug 18, 2025

AvaniNGoswami commented on Sep 18, 2025

MisRob commented on Sep 23, 2025

vtushar06 commented on Oct 5, 2025

MisRob commented on Oct 6, 2025

vtushar06 commented on Oct 6, 2025

MisRob commented on Oct 6, 2025

vtushar06 commented on Oct 6, 2025

MisRob commented on Oct 6, 2025

vtushar06 commented on Oct 6, 2025

MisRob commented on Oct 7, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions