From 34cbe0d416b467c95a8a67ab8638a31449ac5da3 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Tue, 25 Nov 2025 21:35:52 +0530
Subject: [PATCH 1/2] fix: secerets mgmt project slug automatic generation

---
 .../EnvironmentSection/AddEnvironmentModal.tsx      | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
index 70c486616..95f1ebd47 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
@@ -1,5 +1,6 @@
 import { Controller, 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";
@@ -31,7 +32,7 @@ type ContentProps = {
 const Content = ({ onComplete }: ContentProps) => {
   const { currentProject } = useProject();
   const { mutateAsync, isPending } = useCreateWsEnvironment();
-  const { control, handleSubmit } = useForm<FormData>({
+  const { control, handleSubmit, setValue } = useForm<FormData>({
     resolver: zodResolver(schema)
   });
 
@@ -52,15 +53,21 @@ const Content = ({ onComplete }: ContentProps) => {
     onComplete(env);
   };
 
+  const handleEnvironmentNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setValue("environmentName", value);
+    setValue("environmentSlug", slugify(value, { lowercase: true }));
+  };
+
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
       <Controller
         control={control}
         defaultValue=""
         name="environmentName"
-        render={({ field, fieldState: { error } }) => (
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
           <FormControl label="Environment Name" isError={Boolean(error)} errorText={error?.message}>
-            <Input {...field} />
+            <Input {...field} onChange={handleEnvironmentNameChange} />
           </FormControl>
         )}
       />

From e0f5900c0a9aaaf28ca50f27ceeb123344e60c66 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Tue, 25 Nov 2025 22:40:26 +0530
Subject: [PATCH 2/2] fix: populate slug conditionally

---
 .../AddEnvironmentModal.tsx                   | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
index 95f1ebd47..5ff1a1535 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
@@ -32,7 +32,13 @@ type ContentProps = {
 const Content = ({ onComplete }: ContentProps) => {
   const { currentProject } = useProject();
   const { mutateAsync, isPending } = useCreateWsEnvironment();
-  const { control, handleSubmit, setValue } = useForm<FormData>({
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    getValues,
+    formState: { dirtyFields }
+  } = useForm<FormData>({
     resolver: zodResolver(schema)
   });
 
@@ -53,9 +59,10 @@ const Content = ({ onComplete }: ContentProps) => {
     onComplete(env);
   };
 
-  const handleEnvironmentNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target;
-    setValue("environmentName", value);
+  const handleEnvironmentNameChange = () => {
+    if (dirtyFields.environmentSlug) return;
+
+    const value = getValues("environmentName");
     setValue("environmentSlug", slugify(value, { lowercase: true }));
   };
 
@@ -67,7 +74,13 @@ const Content = ({ onComplete }: ContentProps) => {
         name="environmentName"
         render={({ field: { onChange, ...field }, fieldState: { error } }) => (
           <FormControl label="Environment Name" isError={Boolean(error)} errorText={error?.message}>
-            <Input {...field} onChange={handleEnvironmentNameChange} />
+            <Input
+              {...field}
+              onChange={(e) => {
+                onChange(e);
+                handleEnvironmentNameChange();
+              }}
+            />
           </FormControl>
         )}
       />