[permissions] QA fixes (#13698)

In this PR

- Introduction of readableFields and updatableFields in
objectMetadataItem selector to ease filtering from a developer
experience perspective ( + to help developers think to do it). In
discussion @lucasbordeau @charlesBochet
- Remove non-updatable field from CSV import process (@etiennejouan)
- QA fix / Non-readable fields should not show on show page
- QA fix / It should not be offered to create a kanban view on a
non-readable field
- QA fix / It should not be offered to create view groups on a
non-readable field
- QA fix / Rating field should have a readonly mode

---------

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

packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/__tests__/useObjectOptionsForTable.test.tsx

@@ -1,19 +1,35 @@
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useObjectOptionsForTable } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForTable';
+import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
+import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { DropResult, ResponderProvided } from '@hello-pangea/dnd';
 import { renderHook } from '@testing-library/react';
 import { act } from 'react';
 import { RecoilRoot } from 'recoil';
 
 describe('useObjectOptionsForTable', () => {
-  const initialRecoilState = [
-    { fieldMetadataId: 'field1', isVisible: true, position: 0 },
-    { fieldMetadataId: 'field2', isVisible: true, position: 1 },
-    { fieldMetadataId: 'field3', isVisible: true, position: 2 },
-    { fieldMetadataId: 'field4', isVisible: true, position: 3 },
-    { fieldMetadataId: 'field5', isVisible: true, position: 4 },
-  ];
+  const fieldMetadataItems = [
+    { id: 'id-1', name: 'field1' },
+    { id: 'id-2', name: 'field2' },
+    { id: 'id-3', name: 'field3' },
+    { id: 'id-4', name: 'field4' },
+    { id: 'id-5', name: 'field5' },
+  ] as FieldMetadataItem[];
+
+  const columnDefinitionsWithMetadata = fieldMetadataItems.map(
+    (field, index) => ({
+      fieldMetadataId: field.id,
+      isVisible: true,
+      position: index + 1,
+      metadata: {
+        fieldName: field.name,
+      },
+    }),
+  );
 
   const renderWithRecoil = () =>
     renderHook(() => useObjectOptionsForTable('instance-id', 'object-id'), {
@@ -27,8 +43,18 @@ describe('useObjectOptionsForTable', () => {
                 tableColumnsComponentState.atomFamily({
                   instanceId: 'instance-id',
                 }),
-                initialRecoilState as any,
+                columnDefinitionsWithMetadata as ColumnDefinition<FieldMetadata>[],
               );
+              set(objectMetadataItemsState, [
+                {
+                  id: 'object-id',
+                  nameSingular: 'Object',
+                  namePlural: 'Objects',
+                  fields: fieldMetadataItems,
+                  readableFields: fieldMetadataItems,
+                  updatableFields: fieldMetadataItems,
+                } as ObjectMetadataItem,
+              ]);
             }}
           >
             {children}
@@ -43,7 +69,7 @@ describe('useObjectOptionsForTable', () => {
     const dropResult = {
       source: { droppableId: 'droppable', index: 2 },
       destination: { droppableId: 'droppable', index: 3 },
-      draggableId: 'field3',
+      draggableId: 'field2',
       type: 'TYPE',
       mode: 'FLUID',
       reason: 'DROP',
@@ -60,28 +86,43 @@ describe('useObjectOptionsForTable', () => {
 
     expect(result.current.visibleTableColumns).toEqual([
       {
-        fieldMetadataId: 'field1',
+        fieldMetadataId: 'id-1',
         isVisible: true,
+        metadata: {
+          fieldName: 'field1',
+        },
         position: 0,
       },
       {
-        fieldMetadataId: 'field3',
+        fieldMetadataId: 'id-3',
         isVisible: true,
+        metadata: {
+          fieldName: 'field3',
+        },
         position: 1,
       },
       {
-        fieldMetadataId: 'field2',
+        fieldMetadataId: 'id-2',
         isVisible: true,
+        metadata: {
+          fieldName: 'field2',
+        },
         position: 2,
       },
       {
-        fieldMetadataId: 'field4',
+        fieldMetadataId: 'id-4',
         isVisible: true,
+        metadata: {
+          fieldName: 'field4',
+        },
         position: 3,
       },
       {
-        fieldMetadataId: 'field5',
+        fieldMetadataId: 'id-5',
         isVisible: true,
+        metadata: {
+          fieldName: 'field5',
+        },
         position: 4,
       },
     ]);

packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/__tests__/useSearchRecordGroupField.test.tsx

@@ -23,13 +23,16 @@ describe('useSearchRecordGroupField', () => {
     });
 
   it('filters fields correctly based on input', () => {
+    const fields = [
+      { type: FieldMetadataType.SELECT, label: 'First' },
+      { type: FieldMetadataType.SELECT, label: 'Second' },
+      { type: FieldMetadataType.TEXT, label: 'Third' },
+    ];
     const mockContextValue = {
       objectMetadataItem: {
-        fields: [
-          { type: FieldMetadataType.SELECT, label: 'First' },
-          { type: FieldMetadataType.SELECT, label: 'Second' },
-          { type: FieldMetadataType.TEXT, label: 'Third' },
-        ],
+        fields,
+        readableFields: fields,
+        updatableFields: fields,
       },
     };
 
@@ -45,13 +48,16 @@ describe('useSearchRecordGroupField', () => {
   });
 
   it('returns all select fields when search input is empty', () => {
+    const fields = [
+      { type: FieldMetadataType.SELECT, label: 'First' },
+      { type: FieldMetadataType.SELECT, label: 'Second' },
+      { type: FieldMetadataType.TEXT, label: 'Third' },
+    ];
     const mockContextValue = {
       objectMetadataItem: {
-        fields: [
-          { type: FieldMetadataType.SELECT, label: 'First' },
-          { type: FieldMetadataType.SELECT, label: 'Second' },
-          { type: FieldMetadataType.TEXT, label: 'Third' },
-        ],
+        fields,
+        readableFields: fields,
+        updatableFields: fields,
       },
     };
 

packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/useSearchRecordGroupField.ts

@@ -14,12 +14,12 @@ export const useSearchRecordGroupField = () => {
     const searchInputLowerCase =
       recordGroupFieldSearchInput.toLocaleLowerCase();
 
-    return objectMetadataItem.fields.filter(
+    return objectMetadataItem.readableFields.filter(
       (field) =>
         field.type === FieldMetadataType.SELECT &&
         field.label.toLocaleLowerCase().includes(searchInputLowerCase),
     );
-  }, [objectMetadataItem.fields, recordGroupFieldSearchInput]);
+  }, [objectMetadataItem.readableFields, recordGroupFieldSearchInput]);
 
   return {
     recordGroupFieldSearchInput,