frontend: Sanitize Projects' names as we type

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

Author: joaquimrocha

frontend/src/components/project/NewProjectPopup.tsx

@@ -105,7 +105,7 @@ function ProjectFromExistingNamespace({ onBack }: { onBack: () => void }) {
   const { t } = useTranslation();
   const history = useHistory();
 
-  const [name, setName] = useState('');
+  const [projectName, setProjectName] = useState('');
   const [selectedClusters, setSelectedClusters] = useState<string[]>([]);
   const [selectedNamespace, setSelectedNamespace] = useState<string>();
   const [typedNamespace, setTypedNamespace] = useState('');
@@ -118,7 +118,8 @@ function ProjectFromExistingNamespace({ onBack }: { onBack: () => void }) {
     clusters: selectedClusters,
   });
 
-  const isReadyToCreate = selectedClusters.length && (selectedNamespace || typedNamespace) && name;
+  const isReadyToCreate =
+    selectedClusters.length && (selectedNamespace || typedNamespace) && projectName;
 
   /**
    * Creates or updates namespaces for the proejct
@@ -133,7 +134,7 @@ function ProjectFromExistingNamespace({ onBack }: { onBack: () => void }) {
         await maybeExistingNamespace.patch({
           metadata: {
             labels: {
-              [PROJECT_ID_LABEL]: toKubernetesName(name),
+              [PROJECT_ID_LABEL]: projectName,
             },
           },
         });
@@ -145,15 +146,15 @@ function ProjectFromExistingNamespace({ onBack }: { onBack: () => void }) {
             metadata: {
               name: toKubernetesName(typedNamespace),
               labels: {
-                [PROJECT_ID_LABEL]: toKubernetesName(name),
+                [PROJECT_ID_LABEL]: projectName,
               },
             } as any,
           } as KubeObjectInterface;
           await apply(namespace, cluster);
         }
       }
 
-      history.push(createRouteURL('projectDetails', { name: toKubernetesName(name) }));
+      history.push(createRouteURL('projectDetails', { name: projectName }));
     } catch (e: any) {
       setError(e);
     } finally {
@@ -184,11 +185,36 @@ function ProjectFromExistingNamespace({ onBack }: { onBack: () => void }) {
           </Trans>
         </Typography>
         <TextField
-          label={t('Name')}
-          variant="outlined"
-          size="small"
-          value={name}
-          onChange={e => setName(e.target.value)}
+          label={t('translation|Project Name')}
+          value={projectName}
+          onChange={event => {
+            const inputValue = event.target.value.toLowerCase();
+            setProjectName(inputValue);
+          }}
+          onBlur={event => {
+            // Convert to Kubernetes name when user finishes typing (loses focus)
+            const converted = toKubernetesName(event.target.value);
+            setProjectName(converted);
+          }}
+          onKeyDown={event => {
+            // Convert spaces to dashes immediately when space is pressed
+            if (event.key === ' ') {
+              event.preventDefault();
+              const target = event.target as HTMLInputElement;
+              const start = target.selectionStart || 0;
+              const end = target.selectionEnd || 0;
+              const currentValue = projectName;
+              const newValue = currentValue.substring(0, start) + '-' + currentValue.substring(end);
+              setProjectName(newValue);
+              // Set cursor position after the inserted dash
+              setTimeout(() => {
+                target.setSelectionRange(start + 1, start + 1);
+              }, 0);
+            }
+          }}
+          helperText={t('translation|Enter a name for your new project.')}
+          autoComplete="off"
+          fullWidth
         />
         <Autocomplete
           fullWidth

frontend/src/components/project/projectUtils.ts

@@ -204,7 +204,8 @@ export const defaultApiResources = (() => {
 export const toKubernetesName = (name: string): string => {
   const converted = name
     .toLowerCase()
-    .replace(/[^a-z0-9-]/g, '-') // Replace non-alphanumeric chars with dashes
+    .replace(/\s+/g, '-') // Replace spaces with dashes
+    .replace(/[^a-z0-9-]/g, '-') // Replace other non-alphanumeric chars with dashes
     .replace(/-+/g, '-') // Replace multiple dashes with single dash
     .replace(/^-+|-+$/g, '') // Remove leading/trailing dashes
     .substring(0, 63); // Ensure max 63 characters for DNS-1123 compliance

frontend/src/i18n/locales/de/translation.json

@@ -477,6 +477,8 @@
   "Preemption Policy": "Preemtions-Policy",
   "Create new project": "",
   "To create a new project pick which clusters you want to include and then select existing or create a new namespace": "",
+  "Project Name": "",
+  "Enter a name for your new project.": "",
   "Clusters": "",
   "Select one or more clusters for this project": "",
   "No available clusters": "",
@@ -496,7 +498,6 @@
   "Create new Project from YAML": "",
   "Project name": "",
   "Give your project a descriptive name": "",
-  "Project Name": "",
   "Enter a name": "",
   "Select cluster for this project": "",
   "Upload files(s)": "",

frontend/src/i18n/locales/en/translation.json

@@ -477,6 +477,8 @@
   "Preemption Policy": "Preemption Policy",
   "Create new project": "Create new project",
   "To create a new project pick which clusters you want to include and then select existing or create a new namespace": "To create a new project pick which clusters you want to include and then select existing or create a new namespace",
+  "Project Name": "Project Name",
+  "Enter a name for your new project.": "Enter a name for your new project.",
   "Clusters": "Clusters",
   "Select one or more clusters for this project": "Select one or more clusters for this project",
   "No available clusters": "No available clusters",
@@ -496,7 +498,6 @@
   "Create new Project from YAML": "Create new Project from YAML",
   "Project name": "Project name",
   "Give your project a descriptive name": "Give your project a descriptive name",
-  "Project Name": "Project Name",
   "Enter a name": "Enter a name",
   "Select cluster for this project": "Select cluster for this project",
   "Upload files(s)": "Upload files(s)",

frontend/src/i18n/locales/es/translation.json

@@ -479,6 +479,8 @@
   "Preemption Policy": "Política de \"Preemption\"",
   "Create new project": "",
   "To create a new project pick which clusters you want to include and then select existing or create a new namespace": "",
+  "Project Name": "",
+  "Enter a name for your new project.": "",
   "Clusters": "",
   "Select one or more clusters for this project": "",
   "No available clusters": "",
@@ -498,7 +500,6 @@
   "Create new Project from YAML": "",
   "Project name": "",
   "Give your project a descriptive name": "",
-  "Project Name": "",
   "Enter a name": "",
   "Select cluster for this project": "",
   "Upload files(s)": "",

frontend/src/i18n/locales/fr/translation.json

@@ -479,6 +479,8 @@
   "Preemption Policy": "Politique de préemption",
   "Create new project": "",
   "To create a new project pick which clusters you want to include and then select existing or create a new namespace": "",
+  "Project Name": "",
+  "Enter a name for your new project.": "",
   "Clusters": "",
   "Select one or more clusters for this project": "",
   "No available clusters": "",
@@ -498,7 +500,6 @@
   "Create new Project from YAML": "",
   "Project name": "",
   "Give your project a descriptive name": "",
-  "Project Name": "",
   "Enter a name": "",
   "Select cluster for this project": "",
   "Upload files(s)": "",

frontend/src/i18n/locales/hi/translation.json

@@ -477,6 +477,8 @@
   "Preemption Policy": "",
   "Create new project": "",
   "To create a new project pick which clusters you want to include and then select existing or create a new namespace": "",
+  "Project Name": "",
+  "Enter a name for your new project.": "",
   "Clusters": "",
   "Select one or more clusters for this project": "",
   "No available clusters": "",
@@ -496,7 +498,6 @@
   "Create new Project from YAML": "",
   "Project name": "",
   "Give your project a descriptive name": "",
-  "Project Name": "",
   "Enter a name": "",
   "Select cluster for this project": "",
   "Upload files(s)": "",

frontend/src/i18n/locales/it/translation.json

@@ -479,6 +479,8 @@
   "Preemption Policy": "Politica di Preemption",
   "Create new project": "",
   "To create a new project pick which clusters you want to include and then select existing or create a new namespace": "",
+  "Project Name": "",
+  "Enter a name for your new project.": "",
   "Clusters": "",
   "Select one or more clusters for this project": "",
   "No available clusters": "",
@@ -498,7 +500,6 @@
   "Create new Project from YAML": "",
   "Project name": "",
   "Give your project a descriptive name": "",
-  "Project Name": "",
   "Enter a name": "",
   "Select cluster for this project": "",
   "Upload files(s)": "",

frontend/src/i18n/locales/ja/translation.json

@@ -475,6 +475,8 @@
   "Preemption Policy": "プリエンプションポリシー",
   "Create new project": "",
   "To create a new project pick which clusters you want to include and then select existing or create a new namespace": "",
+  "Project Name": "",
+  "Enter a name for your new project.": "",
   "Clusters": "",
   "Select one or more clusters for this project": "",
   "No available clusters": "",
@@ -494,7 +496,6 @@
   "Create new Project from YAML": "",
   "Project name": "",
   "Give your project a descriptive name": "",
-  "Project Name": "",
   "Enter a name": "",
   "Select cluster for this project": "",
   "Upload files(s)": "",

frontend/src/i18n/locales/ko/translation.json

@@ -475,6 +475,8 @@
   "Preemption Policy": "선점 정책",
   "Create new project": "",
   "To create a new project pick which clusters you want to include and then select existing or create a new namespace": "",
+  "Project Name": "",
+  "Enter a name for your new project.": "",
   "Clusters": "",
   "Select one or more clusters for this project": "",
   "No available clusters": "",
@@ -494,7 +496,6 @@
   "Create new Project from YAML": "",
   "Project name": "",
   "Give your project a descriptive name": "",
-  "Project Name": "",
   "Enter a name": "",
   "Select cluster for this project": "",
   "Upload files(s)": "",