Skip to content

Conversation

Prashant-thakur77
Copy link
Contributor

@Prashant-thakur77 Prashant-thakur77 commented Oct 1, 2025

Fixes #5410

Summary

Migrated 5 channel action confirmation dialogs from Vuetify to KDS KModal

Changed title of the soft delete button from"Permanently delete channel" to "delete channel" for proper distinction (after confirming from misrob)

After images for Desktop users:

Screenshot From 2025-10-01 17-33-08 Screenshot From 2025-10-01 17-33-20 Screenshot From 2025-10-01 17-33-25 Screenshot From 2025-10-01 17-33-28 Screenshot From 2025-10-01 17-33-31

After images for Mobile users:

Screenshot From 2025-10-01 17-17-06 Screenshot From 2025-10-01 17-17-16 Screenshot From 2025-10-01 17-17-24 Screenshot From 2025-10-01 17-18-05

References

• Parent issue: #5060

Reviewer guidance

Login as [email protected] with password a
Go to Administration > Channels
Click Actions dropdown in the last column of the table
Click Make public / Make private / Delete channel / Restore / Delete pernamently (note that availability of these options depends on channel type).

@Prashant-thakur77
Copy link
Contributor Author

Prashant-thakur77 commented Oct 1, 2025

Hi @MisRob,

I've updated the ChannelActionsDropdown.spec.js tests (Locally) after migrating to KModal as i saw the tests failing.

Changes:
Updated event names from 'confirm' to 'submit' (KModal uses different events).
Added dialog activation steps (KModal uses v-if and needs to be rendered first).
All tests now pass (Only checked by locally running the unit-test file).

Let me know if you have any feedback and then i will update the Pr.

@MisRob
Copy link
Member

MisRob commented Oct 3, 2025

Thank you @Prashant-thakur77, we will assign a reviewer next week.

@MisRob MisRob changed the title [Remove Vuetify from Studio] Delete, restore, and visibility confirmation dialogs in admin channel actions #5410 [Remove Vuetify from Studio] Delete, restore, and visibility confirmation dialogs in admin channel actions Oct 6, 2025
@Prashant-thakur77
Copy link
Contributor Author

@MisRob I would appreciate your guidance on how to set the themeToken.text color for the title in the KModel component. I was able to apply it successfully to the content since it was within a

tag, but I’m a bit unsure about how to correctly apply it to the title text.

@MisRob
Copy link
Member

MisRob commented Oct 6, 2025

@Prashant-thakur77

I would appreciate your guidance on how to set the themeToken.text color for the title in the KModel component.

If you're referring to

::v-deep .title {
    font-weight: bold;
    color: #212121;
    text-align: left;
  }

it's best to not override KModal default. One of the KDS's purposes is consistency, and it is expected that there will be some minor differences compared to the Vuetify version (I know you will see ::v-deep in the codebase, but it's an anti-pattern that shouldn't be used until explicitly agreed and in very rare cases)

@MisRob
Copy link
Member

MisRob commented Oct 6, 2025

So you can just remove the above part from the code :)

Generally tokens can be only applied via computed style or class as described here. But again, here I think you won't need it.

@Prashant-thakur77
Copy link
Contributor Author

@MisRob The issue I’m facing is that when the Delete Channel action is triggered, the text across the entire table turns red. Since the modal is a child of this parent component, the text within the KModal — both the title and content — also inherits the red color when the modal is restored or when Permanently Delete is clicked.

I’ve managed to fix the content color issue by applying inline styles directly to the div, but I’m uncertain about the correct way to set the title text color.

Additionally, since the table components are center-aligned by default, applying a left alignment to the modal text and title seems important — otherwise, both elements appear centered within the modal.

@Prashant-thakur77
Copy link
Contributor Author

these are without the styles:

Screenshot From 2025-10-06 21-23-49 Screenshot From 2025-10-06 21-23-58

@MisRob
Copy link
Member

MisRob commented Oct 7, 2025

That's helpful @Prashant-thakur77, thank you.

It'd be best to fix this right in KModal. It likely inherits these Studio styles because there are no color, alignment, and weight styles set directly on the title from within the modal. Would you be interested in resolving it in KDS repository as part of this work?

@Prashant-thakur77
Copy link
Contributor Author

Sure @MisRob i would love to do it.

@MisRob
Copy link
Member

MisRob commented Oct 7, 2025

Thank you @Prashant-thakur77. So the first step would be to try if this suggestion helps with this Studio use-case.

This is development documentation for KDS. Note that information on linking is obsolete in the dev docs. You can link your local KDS to local Studio with running these commands in Studio: pnpm install file:../kolibri-design-system and then pnpm run devserver. Note that when you make any changes in KDS repository, you will need to stop your Studio devserver and re-run those two commands again for your changes to propagate. Also, this may not work for everyone. In case you experienced any problems, let us know.

@Prashant-thakur77
Copy link
Contributor Author

@MisRob
Just wanted to let you know that I’ve completed my setup and everything is working perfectly. Thank you for your valuable tips — they were a great help!

@Prashant-thakur77
Copy link
Contributor Author

@MisRob I Have resolved the issue and verified the updates in studio and it works fine now.So do i need to create a issue first for this in kds ?

@MisRob
Copy link
Member

MisRob commented Oct 8, 2025

@Prashant-thakur77 Thank you and I'm glad all went well. As for me, you don't need to create a KDS issue. It'd be fine to just open a KDS PR, cross-reference with this PR, and mention @AllanOXDi there who will be reviewing both of them.

Copy link
Member

@AllanOXDi AllanOXDi left a comment

Choose a reason for hiding this comment

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

Hi @Prashant-thakur77 ! Nice work! the use of KModal is solid here . 👏 I just left a few question for you :)

confirmButtonText="Delete"
@confirm="softDeleteHandler"
/>
@submit="softDeleteHandler"
Copy link
Member

Choose a reason for hiding this comment

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

I see that each dialog (restoreDialog, makePublicDialog, etc.) has its own boolean state. Would it make sense to manage these with a single activeDialog state to reduce repetitive v-if checks?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for the insightful review! You're absolutely right about the modal repetition. I think refactoring the component to use a single modal with dynamic content based on the active dialog type would be better.
Uses a single activeDialog state instead of multiple boolean flags might be the approach..I will start the work on it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

<KModal
v-if="activeDialog"
:title="dialogConfig.title"
:submitText="dialogConfig.submitText"
:cancelText="$tr('cancelAction')"
:data-test="dialogConfig.testId"
@submit="handleSubmit"
@cancel="activeDialog = null"
>

{{ dialogConfig.message }}


how will this be for the solution and then i can create a dialogconfig containing all the modal data.but i am thinking to leave the TEXT content in Strs only as it will help for LTR AND RTL support.
I didn't wanted to change the way it was done before for the sake of simplicty that's why i just migrated it to kmodal.But This approach looks better.Let me work on it and i will update it soon.And also should i update the pr after the one in KDS gets merged for the changes to take place?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

And making the changes there will also need for changes in the test file .So should i change that too according to the updated modal format?

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.

[Remove Vuetify from Studio] Delete, restore, and visibility confirmation dialogs in admin channel actions

3 participants