fix: handle skip and slash in environment slug

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

@@ -22,7 +22,10 @@ export const registerProjectEnvRouter = async (server: FastifyZodProvider) => {
       }),
       body: z.object({
         name: z.string().trim(),
-        slug: z.string().trim()
+        slug: z
+          .string()
+          .regex(/^[^./]*$/g)
+          .trim()
       }),
       response: {
         200: z.object({
@@ -77,7 +80,11 @@ export const registerProjectEnvRouter = async (server: FastifyZodProvider) => {
         id: z.string().trim()
       }),
       body: z.object({
-        slug: z.string().trim().optional(),
+        slug: z
+          .string()
+          .regex(/^[^./]*$/g)
+          .trim()
+          .optional(),
         name: z.string().trim().optional(),
         position: z.number().optional()
       }),

frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx

@@ -17,6 +17,7 @@ type Props = {
 };
 
 // TODO: Migrate to better form management and validation. Preferable react-hook-form + yup
+// We should remove this?
 /**
  * The dialog modal for when the user wants to create a new workspace
  * @param {*} param0

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -115,7 +115,6 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     });
 
     useEffect(() => {
-
       let currentEnvironment = propEnvironment;
       let currentSecretPath = propSecretPath || "/";
 
@@ -134,7 +133,13 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         currentSecretPath = `/${folderPaths?.join("/")}` || "/";
       }
 
-      if (!currentEnvironment || !decryptFileKey || !currentSecretPath || !currentWorkspace || !referenceKey) {
+      if (
+        !currentEnvironment ||
+        !decryptFileKey ||
+        !currentSecretPath ||
+        !currentWorkspace ||
+        !referenceKey
+      ) {
         // this need to clean up?
         setListReference(currentListReference);
         return;
@@ -142,8 +147,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       setSecretPath(currentSecretPath);
       setEnvironment(currentEnvironment);
       setShowReferencePopup(true);
-      
+    }, [referenceKey]);
-    }, [referenceKey])
 
     useEffect(() => {
       const currentListReference: ReferenceType[] = [];
@@ -195,7 +199,6 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         setLastSelectionIndex(pos);
         setReferenceKey(match?.[2]);
       }
-
       setShowReferencePopup(!!match);
     }
 
@@ -224,11 +227,10 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         setValue(newValue);
         // TODO: there should be a better way to do
         onChange?.({ target: { value: newValue } } as any);
+        setCaretPos(currCaretPos);
 
         if (event.currentTarget) {
-          setCaretPos(currCaretPos);
           setTimeout(() => {
-            // on next tick
             referencePopup(newValue, currCaretPos);
           }, 200);
 
@@ -277,25 +279,28 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       ];
 
       let oldReferenceStr = oldReference.slice(2, -1);
+      let currentPath = type === "environment" ? slug! : name;
+      currentPath = currentPath.replace(/\./g, "\\.");
 
       let replaceReference = "";
       let offset = 3;
       switch (type) {
         case "folder":
-          replaceReference = `${oldReferenceStr}${name}.`;
+          replaceReference = `${oldReferenceStr}${currentPath}.`;
           offset -= 1;
           break;
         case "secret": {
           if (oldReferenceStr.indexOf(".") === -1) oldReferenceStr = "";
-          replaceReference = `${oldReferenceStr}${name}`;
+          replaceReference = `${oldReferenceStr}${currentPath}`;
           break;
         }
         case "environment":
-          replaceReference = `${slug}.`;
+          replaceReference = `${currentPath}.`;
           offset -= 1;
           break;
         default:
       }
+      replaceReference = replaceReference.replace(/[//]/g, "");
       newValue = `${start}$\{${replaceReference}}${end}`;
       setValue(newValue);
       // TODO: there should be a better way to do

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx

@@ -16,7 +16,7 @@ type Props = {
 
 const schema = yup.object({
   environmentName: yup.string().label("Environment Name").required(),
-  environmentSlug: yup.string().label("Environment Slug").required()
+  environmentSlug: yup.string().label("Environment Slug").matches(/^[^./]*$/g, { message: "Invalid [.] or [/] not allowed"}).required()
 });
 
 export type FormData = yup.InferType<typeof schema>;

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx

@@ -16,7 +16,7 @@ type Props = {
 
 const schema = yup.object({
   name: yup.string().label("Environment Name").required(),
-  slug: yup.string().label("Environment Slug").required()
+  slug: yup.string().label("Environment Slug").matches(/^[^./]*$/g, { message: "Invalid [.] or [/] not allowed"}).required()
 });
 
 export type FormData = yup.InferType<typeof schema>;