feat(spx-gui): support editing user display name in profile modal

[aofei]

Update UpdateSignedInUserParams to accept displayName in addition to description, requiring at least one of the two fields to align with the updated PUT /user API.

In EditProfileModal, the display name field is now editable instead of being a disabled input showing user.displayName. Add validation to ensure the display name is not blank, and trim whitespace before submitting.

[gemini-code-assist]

Summary of Changes

Hello @aofei, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user profile editing experience by enabling users to update their display name directly within the EditProfileModal. This change involves updating the API type definition to support displayName modifications, integrating the display name into the form with appropriate validation, and making the corresponding UI field editable, aligning with an updated backend API.

Highlights

• API Type Update: The UpdateSignedInUserParams type was updated to allow for the modification of a user's displayName, in addition to their description, requiring at least one of these fields.
• Editable Display Name: The user's display name field in the EditProfileModal is now editable, moving from a disabled input to a fully functional one.
• Display Name Validation: A new validation rule was added to ensure the display name is not blank, and leading/trailing whitespace is trimmed before submission.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• spx-gui/src/apis/user.ts
  • Modified the UpdateSignedInUserParams type to accept displayName and description as optional but requiring at least one of them.
• spx-gui/src/components/community/user/EditProfileModal.vue
  • Added displayName to the useForm hook, initialized with the user's current display name and a new validation function.
  • Introduced validateDisplayName function to check for non-blank display names.
  • Updated handleSubmit to include the trimmed displayName when calling updateProfile.
  • Changed the UITextInput for the user's name from a disabled field displaying user.displayName to an editable field bound to form.value.displayName.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully implements the feature to allow users to edit their display name. The changes to the API type UpdateSignedInUserParams correctly enforce that at least one field is provided for an update. The UI changes in EditProfileModal.vue enable the editing functionality and add appropriate validation. I have one minor suggestion to improve data consistency by trimming whitespace from the description field before submission, just as is done for displayName.

[Copilot]

Pull request overview

This PR enables users to edit their display name in the profile modal, extending the existing profile editing functionality which previously only allowed editing the description field. The changes align the TypeScript API types with the backend's PUT /user endpoint requirements.

Changes:

• Updated UpdateSignedInUserParams to use a discriminated union type requiring at least one of displayName or description
• Made the display name field editable in the EditProfileModal with validation for blank values
• Added whitespace trimming for display name on submission

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
spx-gui/src/apis/user.ts	Updated type definition to support optional displayName and description fields with at least one required
spx-gui/src/components/community/user/EditProfileModal.vue	Made display name field editable with validation, added trimming on submit

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[xgopilot]

Code Review Summary

The implementation successfully enables display name editing with proper i18n support and type safety. The code follows project conventions and is well-structured.

Key Strengths:

• Type-safe union type implementation mirrors backend API requirements
• Proper XSS protection via Vue's auto-escaping
• Clean integration with existing form validation patterns

Action Items:
Three inline comments posted addressing validation completeness, documentation, and data handling consistency. The most critical issue is adding maximum length validation for the display name field to prevent potential security and UX issues.