Add object level form to role creation (#12826)

## Context
- Add object-level form to role creation
- Add isSaving props for save button isLoading state
<img width="594" alt="Screenshot 2025-06-24 at 15 03 59"
src="https://github.com/user-attachments/assets/77d9d399-4e1a-4e35-be45-c19100ef06c1"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/pages/settings/roles/SettingsRoleCreate.tsx

@@ -1,15 +1,16 @@
 import { SettingsRolesQueryEffect } from '@/settings/roles/components/SettingsRolesQueryEffect';
 import { SettingsRole } from '@/settings/roles/role/components/SettingsRole';
 import { SettingsRoleCreateEffect } from '@/settings/roles/role/components/SettingsRoleCreateEffect';
-
-export const PENDING_ROLE_ID = 'pending-role-id';
+import { v4 } from 'uuid';
 
 export const SettingsRoleCreate = () => {
+  const newRoleId = v4();
+
   return (
     <>
       <SettingsRolesQueryEffect />
-      <SettingsRoleCreateEffect roleId={PENDING_ROLE_ID} />
-      <SettingsRole roleId={PENDING_ROLE_ID} isCreateMode={true} />
+      <SettingsRoleCreateEffect roleId={newRoleId} />
+      <SettingsRole roleId={newRoleId} isCreateMode={true} />
     </>
   );
 };

packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx

@@ -3,21 +3,29 @@ import { SettingsRole } from '@/settings/roles/role/components/SettingsRole';
 import { SettingsRoleEditEffect } from '@/settings/roles/role/components/SettingsRoleEditEffect';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Navigate, useParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
+import { settingsPersistedRoleFamilyState } from '~/modules/settings/roles/states/settingsPersistedRoleFamilyState';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsRoleEdit = () => {
   const { roleId } = useParams();
 
+  const persistedRole = useRecoilValue(
+    settingsPersistedRoleFamilyState(roleId ?? ''),
+  );
+
   if (!isDefined(roleId)) {
     return <Navigate to={getSettingsPath(SettingsPath.Roles)} />;
   }
 
+  const isCreateMode = !isDefined(persistedRole?.id);
+
   return (
     <>
       <SettingsRolesQueryEffect />
       <SettingsRoleEditEffect roleId={roleId} />
-      <SettingsRole roleId={roleId} isCreateMode={false} />
+      <SettingsRole roleId={roleId} isCreateMode={isCreateMode} />
     </>
   );
 };