feat: front end can create projects without ids (#7009)

This PR updates the new project creation form to not include the project
ID in the payload (because it's generated by the back end now).

frontend/src/component/project/Project/CreateProject/CreateProject.tsx

@@ -68,14 +68,16 @@ const CreateProject = () => {
         e.preventDefault();
         clearErrors();
         const validName = validateName();
-        const validId = await validateProjectId();
+        const validId = useNewProjectForm || (await validateProjectId());
 
         if (validName && validId) {
-            const payload = getCreateProjectPayload();
+            const payload = getCreateProjectPayload({
+                omitId: useNewProjectForm,
+            });
             try {
-                await createProject(payload);
+                const createdProject = await createProject(payload);
                 refetchUser();
-                navigate(`/projects/${projectId}`, { replace: true });
+                navigate(`/projects/${createdProject.id}`, { replace: true });
                 setToastData({
                     title: 'Project created',
                     text: 'Now you can add toggles to this project',
@@ -99,7 +101,11 @@ const CreateProject = () => {
         return `curl --location --request POST '${uiConfig.unleashUrl}/api/admin/projects' \\
 --header 'Authorization: INSERT_API_KEY' \\
 --header 'Content-Type: application/json' \\
---data-raw '${JSON.stringify(getCreateProjectPayload(), undefined, 2)}'`;
+--data-raw '${JSON.stringify(
+            getCreateProjectPayload({ omitId: useNewProjectForm }),
+            undefined,
+            2,
+        )}'`;
     };
 
     const handleCancel = () => {

frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx

@@ -1,5 +1,4 @@
 import { Typography, styled } from '@mui/material';
-import { v4 as uuidv4 } from 'uuid';
 import Input from 'component/common/Input/Input';
 import type { ProjectMode } from '../hooks/useProjectEnterpriseSettingsForm';
 import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
@@ -133,7 +132,6 @@ export const NewProjectForm: React.FC<FormProps> = ({
     setProjectName,
     setProjectDesc,
     setProjectStickiness,
-    // setProjectChangeRequestConfiguration,
     updateProjectChangeRequestConfig,
     setFeatureLimit,
     errors,
@@ -151,12 +149,6 @@ export const NewProjectForm: React.FC<FormProps> = ({
     ) => {
         const input = e.target.value;
         setProjectName(input);
-
-        // todo: handle this in a real manner. This is a hack for now.
-        const maybeProjectId = input
-            ? `${encodeURIComponent(input.trim())}-${uuidv4().slice(-12)}`
-            : '';
-        setProjectId(maybeProjectId);
     };
 
     const projectModeOptions = [

frontend/src/component/project/Project/hooks/useProjectForm.ts

@@ -94,7 +94,7 @@ const useProjectForm = (
         setProjectMode(initialProjectMode);
     }, [initialProjectMode]);
 
-    const getCreateProjectPayload = () => {
+    const getCreateProjectPayload = (options?: { omitId?: boolean }) => {
         const environmentsPayload =
             projectEnvironments.size > 0
                 ? { environments: [...projectEnvironments] }
@@ -107,23 +107,21 @@ const useProjectForm = (
             requiredApprovals,
         }));
 
+        const ossPayload = {
+            ...(options?.omitId ? {} : { id: projectId }),
+            name: projectName,
+            description: projectDesc,
+            defaultStickiness: projectStickiness,
+            ...environmentsPayload,
+        };
+
         return isEnterprise()
             ? {
-                  id: projectId,
+                  ...ossPayload,
-                  name: projectName,
-                  description: projectDesc,
-                  defaultStickiness: projectStickiness,
                   mode: projectMode,
-                  ...environmentsPayload,
                   changeRequestEnvironments,
               }
-            : {
+            : ossPayload;
-                  id: projectId,
-                  name: projectName,
-                  description: projectDesc,
-                  defaultStickiness: projectStickiness,
-                  ...environmentsPayload,
-              };
     };
 
     const getEditProjectPayload = () => {

frontend/src/hooks/api/actions/useProjectApi/useProjectApi.ts

@@ -4,6 +4,7 @@ import type {
     CreateProjectSchema,
     UpdateProjectSchema,
     UpdateProjectEnterpriseSettingsSchema,
+    ProjectCreatedSchema,
 } from 'openapi';
 import useAPI from '../useApi/useApi';
 
@@ -18,7 +19,9 @@ const useProjectApi = () => {
         propagateErrors: true,
     });
 
-    const createProject = async (payload: CreateProjectSchema) => {
+    const createProject = async (
+        payload: CreateProjectSchema,
+    ): Promise<ProjectCreatedSchema> => {
         const path = `api/admin/projects`;
         const req = createRequest(path, {
             method: 'POST',
@@ -27,7 +30,7 @@ const useProjectApi = () => {
 
         const res = await makeRequest(req.caller, req.id);
 
-        return res;
+        return res.json();
     };
 
     const validateId = async (id: CreateProjectSchema['id']) => {