Add object level form to role creation (twentyhq#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 <[email protected]>

Author: 2 people

packages/twenty-front/src/modules/settings/roles/role-assignment/components/stories/SettingsRoleAssignment.stories.tsx

@@ -3,10 +3,9 @@ import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDr
 import { Meta, StoryObj } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { PENDING_ROLE_ID } from '~/pages/settings/roles/SettingsRoleCreate';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { getRolesMock } from '~/testing/mock-data/roles';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 
 const SettingsRoleAssignmentWrapper = (
   args: React.ComponentProps<typeof SettingsRoleAssignment>,
@@ -41,6 +40,6 @@ export const Default: Story = {
 
 export const PendingRole: Story = {
   args: {
-    roleId: PENDING_ROLE_ID,
+    roleId: 'newRoleId',
   },
 };

packages/twenty-front/src/modules/settings/roles/role-permissions/components/SettingsRolePermissions.tsx

@@ -12,26 +12,22 @@ const StyledRolePermissionsContainer = styled.div`
 type SettingsRolePermissionsProps = {
   roleId: string;
   isEditable: boolean;
-  isCreateMode: boolean;
 };
 
 export const SettingsRolePermissions = ({
   roleId,
   isEditable,
-  isCreateMode,
 }: SettingsRolePermissionsProps) => {
   return (
     <StyledRolePermissionsContainer>
       <SettingsRolePermissionsObjectsSection
         roleId={roleId}
         isEditable={isEditable}
       />
-      {!isCreateMode && (
-        <SettingsRolePermissionsObjectLevelSection
-          roleId={roleId}
-          isEditable={isEditable}
-        />
-      )}
+      <SettingsRolePermissionsObjectLevelSection
+        roleId={roleId}
+        isEditable={isEditable}
+      />
       <SettingsRolePermissionsSettingsSection
         roleId={roleId}
         isEditable={isEditable}

packages/twenty-front/src/modules/settings/roles/role-permissions/components/stories/SettingsRolePermissions.stories.tsx

@@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
-import { PENDING_ROLE_ID } from '~/pages/settings/roles/SettingsRoleCreate';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { getRolesMock } from '~/testing/mock-data/roles';
 
@@ -57,7 +56,7 @@ export const ReadOnly: Story = {
 
 export const PendingRole: Story = {
   args: {
-    roleId: PENDING_ROLE_ID,
+    roleId: 'newRoleId',
     isEditable: true,
     isCreateMode: true,
   },

packages/twenty-front/src/modules/settings/roles/role-settings/components/stories/SettingsRoleSettings.stories.tsx

@@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
-import { PENDING_ROLE_ID } from '~/pages/settings/roles/SettingsRoleCreate';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { getRolesMock } from '~/testing/mock-data/roles';
 
@@ -57,7 +56,7 @@ export const ReadOnly: Story = {
 
 export const PendingRole: Story = {
   args: {
-    roleId: PENDING_ROLE_ID,
+    roleId: 'newRoleId',
     isEditable: true,
     isCreateMode: false,
   },