From 20c3ef30f3cb5a44c30a3171a8259c8d3064c224 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 13 May 2024 14:43:49 +0200
Subject: [PATCH] fix: make name validation work properly. (#7042)

Instead of using the `required` attribute, we manually make it
required. This is indicated visually by red error text if the value is
empty (or whitespace only). To indicate to screen readers that it is
required, we add the `aria-required` attribute.

We didn't previously validate if the name
was whitespace only.

Also: if no envs are selected, indicate that all will be included

This prevents this form value from ever being invalid.
---
 .../project/Project/CreateProject/NewProjectForm.tsx          | 4 ++--
 .../src/component/project/Project/hooks/useProjectForm.ts     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx b/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx
index 5227ef8175..e096fb1ecb 100644
--- a/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx
@@ -171,7 +171,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
                 <ProjectNameContainer>
                     <StyledProjectName
                         label='Project name'
-                        required
+                        aria-required
                         value={projectName}
                         onChange={handleProjectNameUpdate}
                         error={Boolean(errors.name)}
@@ -208,7 +208,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
                         label:
                             projectEnvironments.size > 0
                                 ? `${projectEnvironments.size} selected`
-                                : 'Select environments',
+                                : 'All environments',
                         icon: <EnvironmentsIcon />,
                     }}
                     search={{
diff --git a/frontend/src/component/project/Project/hooks/useProjectForm.ts b/frontend/src/component/project/Project/hooks/useProjectForm.ts
index 87a73464c4..be42a7549e 100644
--- a/frontend/src/component/project/Project/hooks/useProjectForm.ts
+++ b/frontend/src/component/project/Project/hooks/useProjectForm.ts
@@ -156,7 +156,7 @@ const useProjectForm = (
     };
 
     const validateName = () => {
-        if (projectName.length === 0) {
+        if (projectName.trim().length === 0) {
             setErrors((prev) => ({ ...prev, name: 'Name can not be empty.' }));
             return false;
         }