Skip to content

Conversation

rishabhjain1712
Copy link

@rishabhjain1712 rishabhjain1712 commented Oct 11, 2025

Fixes #5441

Screenshot from 2025-10-11 21-16-38 Screenshot from 2025-10-11 21-18-08 Screenshot from 2025-10-11 21-18-19

Summary

This PR refactors the User Privilege Modal to remove dependency on Vuetify (v-dialog, v-form, etc.) and migrate it to use Kolibri Design System (KDS) components such as KModal, KTextbox, and KButton.

  • Replaced v-dialog with KModal for modal rendering.
  • Removed v-form in favor of generateFormMixin for validation handling.
  • Updated modal actions (Add/Remove privilege, Cancel) to work with KDS event handling (@submit, @cancel).
  • Ensured all existing logic (confirmAction, close, onSubmit) and state management remain functional.
  • Confirmed that the modal opens and closes correctly, validates input, and performs privilege actions as before.
  • Minor visual differences are expected due to use of KDS, but no functional regressions.

Manual Verification

  • Opened the User Privilege Modal in the Admin > Users section.

  • Verified that:

    • Modal renders without freezing or layout issues.
    • Input field validation works correctly via generateFormMixin.
    • “Cancel” and “Add/Remove Privilege” buttons perform expected actions.
    • Confirmed no console errors and all API calls are working.

Screenshots:
(Already included above 👆)


References

Reviewer Guidance

To test these changes:

  1. Navigate to the User Management section in the app.

  2. Open a user’s privilege modal.

  3. Verify:

    • Modal opens normally with no freezing.
    • Input validation behaves as expected.
    • Cancel and Confirm buttons close or submit the modal correctly.
    • Snackbar notifications appear after successful actions.
  4. Ensure no UI regressions or console errors occur.

@rishabhjain1712 rishabhjain1712 changed the title Refactor UserPrivilegeModal to use KModal and generateFormMixin Refactor UserPrivilegeModal to use KModal instead of Vuetify MessageDialog (#5441) Oct 11, 2025
this.dialog = false;
})
.catch(() => {
this.showSnackbar({ text: this.$tr('ErrorMessage') });
Copy link
Member

Choose a reason for hiding this comment

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

Just quickly from the code I don't think that snackbar was displayed before or was it? Please double-check, and if that's the case, remove this logic.

Copy link
Author

Choose a reason for hiding this comment

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

Sure, actually I was referring to changeUserPassword.vue so added it. Will remove

@MisRob MisRob changed the title Refactor UserPrivilegeModal to use KModal instead of Vuetify MessageDialog (#5441) [Remove Vuetify from Studio] Add / remove admin privileges dialogs Oct 15, 2025
@MisRob
Copy link
Member

MisRob commented Oct 15, 2025

Thank you @rishabhjain1712, we will assign a reviewer next week.

Meanwhile see my note on user experience, and also I noticed that tests check is failing - needs to be fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Remove Vuetify from Studio] Add / remove admin privileges dialogs

3 participants