Update org settings > general tab ui

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -10,7 +10,12 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
 import { useUpdateOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name")
+  name: yup.string().required().label("Organization Name"),
+  slug: yup
+      .string()
+      .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
+      .required()
+      .label("Organization Slug")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
@@ -25,40 +30,44 @@ export const OrgNameChangeSection = (): JSX.Element => {
 
   useEffect(() => {
     if (currentOrg) {
-      reset({ name: currentOrg.name });
+      reset({ 
+        name: currentOrg.name,
+        slug: currentOrg.slug
+      });
     }
   }, [currentOrg]);
 
-  const onFormSubmit = async ({ name }: FormData) => {
+  const onFormSubmit = async ({ name, slug }: FormData) => {
     try {
       if (!currentOrg?.id) return;
-      if (name === "") return;
 
-      await mutateAsync({ orgId: currentOrg?.id, name });
+      await mutateAsync({ 
+        orgId: currentOrg?.id, 
+        name,
+        slug
+      });
+      
       createNotification({
-        text: "Successfully renamed organization",
+        text: "Successfully updated organization details",
         type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: "Failed to rename organization",
+        text: "Failed to update organization details",
         type: "error"
       });
     }
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-    >
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Organization Name</p>
-      <div className="mb-2 max-w-md">
+    <form onSubmit={handleSubmit(onFormSubmit)} className="py-4">
+      <div className="">
+        <h2 className="mb-2 text-md text-mineshaft-100">Organization Name</h2>
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
-            <FormControl isError={Boolean(error)} errorText={error?.message}>
+            <FormControl isError={Boolean(error)} errorText={error?.message} className="max-w-md">
               <Input placeholder="Acme Corp" {...field} />
             </FormControl>
           )}
@@ -66,6 +75,19 @@ export const OrgNameChangeSection = (): JSX.Element => {
           name="name"
         />
       </div>
+      <div className="py-4">
+        <h2 className="mb-2 text-md text-mineshaft-100">Organization Slug</h2>
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message} className="max-w-md">
+              <Input placeholder="acme" {...field} />
+            </FormControl>
+          )}
+          control={control}
+          name="slug"
+        />
+      </div>
       <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
         {(isAllowed) => (
           <Button
@@ -81,4 +103,4 @@ export const OrgNameChangeSection = (): JSX.Element => {
       </OrgPermissionCan>
     </form>
   );
-};
+};