improvement: Slug Validation Errors (#2788)

* improvement: Slug Validation Errors

frontend/src/views/Settings/OrgSettingsPage/components/OrgWorkflowIntegrationTab/SlackIntegrationForm.tsx

@@ -2,7 +2,6 @@ import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
-import slugify from "@sindresorhus/slugify";
 import axios from "axios";
 import { z } from "zod";
 
@@ -15,6 +14,7 @@ import {
   useGetSlackIntegrationById,
   useUpdateSlackIntegration
 } from "@app/hooks/api";
+import { slugSchema } from "@app/lib/schemas";
 
 type Props = {
   id?: string;
@@ -22,13 +22,7 @@ type Props = {
 };
 
 const slackFormSchema = z.object({
-  slug: z
-    .string()
-    .trim()
-    .min(1)
-    .refine((v) => slugify(v) === v, {
-      message: "Alias must be a valid slug"
-    }),
+  slug: slugSchema({ min: 1, field: "Alias" }),
   description: z.string().optional()
 });
 

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx

@@ -31,7 +31,7 @@ type Props = {
 };
 
 const formSchema = z.object({
-  slug: slugSchema,
+  slug: slugSchema(),
   name: z.string().trim().min(1),
   permissions: projectRoleFormSchema.shape.permissions
 });

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx

@@ -32,7 +32,7 @@ const formSchema = z.object({
   environments: z
     .object({
       name: z.string().trim().min(1),
-      slug: slugSchema
+      slug: slugSchema({ min: 1, max: 32 })
     })
     .array()
 });

frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx

@@ -1,6 +1,5 @@
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import slugify from "@sindresorhus/slugify";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
@@ -18,17 +17,10 @@ import {
   useCreateProjectTemplate,
   useUpdateProjectTemplate
 } from "@app/hooks/api/projectTemplates";
+import { slugSchema } from "@app/lib/schemas";
 
 const formSchema = z.object({
-  name: z
-    .string()
-    .trim()
-    .min(1)
-    .max(32)
-    .toLowerCase()
-    .refine((v) => slugify(v) === v, {
-      message: "Name must be in slug format"
-    }),
+  name: slugSchema({ min: 1, max: 32, field: "Name" }),
   description: z.string().max(500).optional()
 });