Allow project slug edition and refactor frontend components to reduce duplicated code

backend/src/lib/api-docs/constants.ts

@@ -459,7 +459,8 @@ export const PROJECTS = {
     workspaceId: "The ID of the project to update.",
     name: "The new name of the project.",
     projectDescription: "An optional description label for the project.",
-    autoCapitalization: "Disable or enable auto-capitalization for the project."
+    autoCapitalization: "Disable or enable auto-capitalization for the project.",
+    slug: "An optional slug for the project. (must be unique within the server)"
   },
   GET_KEY: {
     workspaceId: "The ID of the project to get the key from."

backend/src/server/routes/v1/project-router.ts

@@ -307,7 +307,13 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
           .max(256, { message: "Description must be 256 or fewer characters" })
           .optional()
           .describe(PROJECTS.UPDATE.projectDescription),
-        autoCapitalization: z.boolean().optional().describe(PROJECTS.UPDATE.autoCapitalization)
+        autoCapitalization: z.boolean().optional().describe(PROJECTS.UPDATE.autoCapitalization),
+        slug: z
+          .string()
+          .trim()
+          .max(64, { message: "Slug must be 64 characters or fewer" })
+          .optional()
+          .describe(PROJECTS.UPDATE.slug)
       }),
       response: {
         200: z.object({
@@ -325,7 +331,8 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
         update: {
           name: req.body.name,
           description: req.body.description,
-          autoCapitalization: req.body.autoCapitalization
+          autoCapitalization: req.body.autoCapitalization,
+          slug: req.body.slug
         },
         actorAuthMethod: req.permission.authMethod,
         actorId: req.permission.id,

backend/src/services/project/project-service.ts

@@ -563,11 +563,24 @@ export const projectServiceFactory = ({
     });
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Edit, ProjectPermissionSub.Settings);
 
+    if (update.slug) {
+      const existingProject = await projectDAL.findOne({
+        slug: update.slug,
+        orgId: actorOrgId
+      });
+      if (existingProject && existingProject.id !== project.id) {
+        throw new BadRequestError({
+          message: `Failed to update project slug. The project "${existingProject.name}" with the slug "${existingProject.slug}" already exists in your organization. Please choose a unique slug for your project.`
+        });
+      }
+    }
+
     const updatedProject = await projectDAL.updateById(project.id, {
       name: update.name,
       description: update.description,
       autoCapitalization: update.autoCapitalization,
-      enforceCapitalization: update.autoCapitalization
+      enforceCapitalization: update.autoCapitalization,
+      slug: update.slug
     });
 
     return updatedProject;

backend/src/services/project/project-types.ts

@@ -82,6 +82,7 @@ export type TUpdateProjectDTO = {
     name?: string;
     description?: string;
     autoCapitalization?: boolean;
+    slug?: string;
   };
 } & Omit<TProjectPermission, "projectId">;