Implement name validation before server calls on Org creation #18815
Conversation
Siddhant-K-code
changed the title
| value={projectName} | ||
| error={badProjectName} | ||
| onChange={setProjectName} | ||
| placeholder="My Project" |
There was a problem hiding this comment.
Did you see a case where the name was empty?
| const createTeam = async (event: FormEvent) => { | ||
| event.preventDefault(); | ||
|
|
||
| /* Basic name validation before sending to the server to save time & API calls */ |
There was a problem hiding this comment.
It's fast enough and not worth maintaining validation logic twice.
There was a problem hiding this comment.
Thanks @Siddhant-K-code for caring about the UX!
We want to avoid maintaining validation logic and error messages twice, unless there is a good reason. In this case, the UI feedback seems absolutely fine as it is. So I'd rather not add code unnecessarily. Let me know if I have missed something. 🙏
|
Absolutely, I'll proceed to close the PR. The main goal was to initiate communication with the server only after conducting fundamental validation on the frontend. However, I understand your concern regarding the management of duplicates. The primary reference for this was: gitpod/components/dashboard/src/projects/ProjectSettings.tsx Lines 51 to 55 in 1b68720 |
|
Thanks! We should definitely be more consistent and rely on server-side validation as much as reasonable. |
Description
This PR addresses the need for adding a basic organization name validation before making server calls during the organization creation process.
Impact
The goal is to optimize server load and elevate user experience by confirming that only valid organization names are processed. Currently, calls are made to the createTeam endpoint even when the name is empty. This approach allows users to promptly receive basic error messages for issues like empty fields and character limits, instead of sending a request to the server and then displaying the error on the UI, a process that typically takes approximately 1.2 seconds for updates.
Summary generated by Copilot
🤖 Generated by Copilot at b21dc8e
Added placeholders and validation for team and project names. This enhances the usability and feedback of the dashboard UI.
Related Issue(s)
Fixes #
How to test
Create organizationwhen input box is empty & see error message 👀Documentation
Preview status
Gitpod was successfully deployed to your preview environment.
Build Options
Build
Run the build with werft instead of GHA
Run Leeway with
--dont-testPublish
Installer
Add desired feature flags to the end of the line above, space separated
Preview Environment / Integration Tests
If enabled this will build
install/previewIf enabled this will create the environment on GCE infra
Valid options are
all,workspace,webapp,ide,jetbrains,vscode,ssh. If enabled,with-previewandwith-large-vmwill be enabled./hold