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

[Prashant-thakur77]

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:

After images for Mobile users:

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]

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]

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

[Prashant-thakur77]

@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]

@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]

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]

@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]

these are without the styles:

[MisRob]

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]

Sure @MisRob i would love to do it.

[MisRob]

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]

@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]

@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]

@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.

[AllanOXDi]

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

[AllanOXDi]

I have just discovered that the strings are getting cut off for longer titles.

[Prashant-thakur77]

Hi @AllanOXDi This is going to be corrected after we do the kds update mentioned by @MisRob .this is because i have removed the styling from the file where the 5 modal were as the kmodal should not need that once the pr made in kds is merged and we update the studio after that ,when the kds update is done this should work fine.

[MisRob]

Hi @AllanOXDi @Prashant-thakur77 - I hope that the new KDS release what will unblock us here will be this week. Will follow-up with you. Thanks.

[MisRob]

Hi @Prashant-thakur77, we've just installed to Studio's unstable the latest KDS that has your updates needed for this PR. You're welcome to merge/rebase and complete this work now.

[Prashant-thakur77]

@AllanOXDi @MisRob i have Rebased the pr to the latest and checked the working locally.Do tell if any changes are needed :)

[AllanOXDi]

LGTM! Thanks @Prashant-thakur77 , @MisRob will merge it

[MisRob]

Nice work here @Prashant-thakur77 and @AllanOXDi.

I think we just need to improve the testing approach, then I will merge.

[MisRob]

Thanks @Prashant-thakur77. As for me, we're ready for merge, but let's wait for last confirmation from @AllanOXDi.

[AllanOXDi]

Thanks @Prashant-thakur77 and @MisRob looks good to me