-
Notifications
You must be signed in to change notification settings - Fork 230
[Remove Vuetify from Studio] Delete, restore, and visibility confirmation dialogs in admin channel actions #5416
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: unstable
Are you sure you want to change the base?
Conversation
…d classes to content and title for proper behaviour
Hi @MisRob, I've updated the ChannelActionsDropdown.spec.js tests (Locally) after migrating to KModal as i saw the tests failing. Changes: Let me know if you have any feedback and then i will update the Pr. |
Thank you @Prashant-thakur77, we will assign a reviewer next week. |
@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. |
If you're referring to
it's best to not override |
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. |
@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. |
That's helpful @Prashant-thakur77, thank you. It'd be best to fix this right in |
Sure @MisRob i would love to do it. |
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: |
@MisRob |
@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 ? |
@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. |
There was a problem hiding this 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 :)
...ntcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
Outdated
Show resolved
Hide resolved
confirmButtonText="Delete" | ||
@confirm="softDeleteHandler" | ||
/> | ||
@submit="softDeleteHandler" |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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?
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).