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