add stories to roles components (#10503)

## Context
Adding stories for roles components. Also moving modules components to
the proper "modules" folder, "pages" folder being only for entry points.

## Test
Run storybook

<img width="1145" alt="Screenshot 2025-02-26 at 13 40 40"
src="https://github.com/user-attachments/assets/bc184ab0-c590-4362-8c5a-1bf5ef176e6c"
/>
<img width="1149" alt="Screenshot 2025-02-26 at 13 40 32"
src="https://github.com/user-attachments/assets/699cd205-31db-45e9-b9c1-caff1832bd47"
/>
<img width="1153" alt="Screenshot 2025-02-26 at 13 40 11"
src="https://github.com/user-attachments/assets/72e45a67-ea89-4999-8b16-6f7d027d07f6"
/>
<img width="471" alt="Screenshot 2025-02-26 at 13 38 16"
src="https://github.com/user-attachments/assets/62676943-9935-42b5-b769-5544f7eed85f"
/>
<img width="472" alt="Screenshot 2025-02-26 at 13 38 12"
src="https://github.com/user-attachments/assets/946baab9-1be4-439e-bf99-0ebeab0995f7"
/>

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -21,7 +21,9 @@ import { mockedViewsData } from '~/testing/mock-data/views';
 import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
 
 import { GET_PUBLIC_WORKSPACE_DATA_BY_DOMAIN } from '@/auth/graphql/queries/getPublicWorkspaceDataByDomain';
+import { GET_ROLES } from '@/settings/roles/graphql/queries/getRolesQuery';
 import { mockedStandardObjectMetadataQueryResult } from '~/testing/mock-data/generated/mock-metadata-query-result';
+import { getRolesMock } from '~/testing/mock-data/roles';
 import { mockedTasks } from '~/testing/mock-data/tasks';
 import {
   getWorkflowMock,
@@ -719,6 +721,13 @@ export const graphqlMocks = {
         },
       });
     }),
+    graphql.query(getOperationName(GET_ROLES) ?? '', () => {
+      return HttpResponse.json({
+        data: {
+          getRoles: getRolesMock(),
+        },
+      });
+    }),
     http.get('https://chat-assets.frontapp.com/v1/chat.bundle.js', () => {
       return HttpResponse.text(
         `

packages/twenty-front/src/testing/mock-data/roles.ts

@@ -0,0 +1,33 @@
+import { Role } from '~/generated/graphql';
+import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
+
+const rolesMock: Role[] = [
+  {
+    __typename: 'Role',
+    id: '1',
+    label: 'Admin',
+    canDestroyAllObjectRecords: true,
+    canReadAllObjectRecords: true,
+    canSoftDeleteAllObjectRecords: true,
+    canUpdateAllObjectRecords: true,
+    canUpdateAllSettings: true,
+    isEditable: false,
+    workspaceMembers: [mockWorkspaceMembers[0]],
+  },
+  {
+    __typename: 'Role',
+    id: '2',
+    label: 'Guest',
+    canDestroyAllObjectRecords: false,
+    canReadAllObjectRecords: false,
+    canSoftDeleteAllObjectRecords: false,
+    canUpdateAllObjectRecords: false,
+    canUpdateAllSettings: false,
+    isEditable: true,
+    workspaceMembers: [mockWorkspaceMembers[1]],
+  },
+];
+
+export const getRolesMock = () => {
+  return rolesMock;
+};