[FE] Improve Read-only field behavior (#10382)

Fixes https://github.com/twentyhq/core-team-issues/issues/235

packages/twenty-front/src/modules/activities/notes/components/Notes.tsx

@@ -81,17 +81,19 @@ export const Notes = ({
         title="All"
         notes={notes}
         button={
-          <Button
+          !hasObjectReadOnlyPermission && (
-            Icon={IconPlus}
+            <Button
-            size="small"
+              Icon={IconPlus}
-            variant="secondary"
+              size="small"
-            title="Add note"
+              variant="secondary"
-            onClick={() =>
+              title="Add note"
-              openCreateActivity({
+              onClick={() =>
-                targetableObjects: [targetableObject],
+                openCreateActivity({
-              })
+                  targetableObjects: [targetableObject],
-            }
+                })
-          ></Button>
+              }
+            />
+          )
         }
       />
     </StyledNotesContainer>

packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx

@@ -4,6 +4,7 @@ import { Button, IconPlus } from 'twenty-ui';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission';
 
 export const AddTaskButton = ({
   activityTargetableObjects,
@@ -14,8 +15,13 @@ export const AddTaskButton = ({
     activityObjectNameSingular: CoreObjectNameSingular.Task,
   });
 
-  if (!isNonEmptyArray(activityTargetableObjects)) {
+  const hasObjectReadOnlyPermission = useHasObjectReadOnlyPermission();
-    return <></>;
+
+  if (
+    !isNonEmptyArray(activityTargetableObjects) ||
+    hasObjectReadOnlyPermission
+  ) {
+    return null;
   }
 
   return (
@@ -29,6 +35,6 @@ export const AddTaskButton = ({
           targetableObjects: activityTargetableObjects,
         })
       }
-    ></Button>
+    />
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx

@@ -4,6 +4,7 @@ import { BORDER_COMMON, ThemeContext } from 'twenty-ui';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
+import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
 import { CellHotkeyScopeContext } from '@/object-record/record-table/contexts/CellHotkeyScopeContext';
 import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
@@ -15,11 +16,13 @@ import {
 const StyledBaseContainer = styled.div<{
   hasSoftFocus: boolean;
   fontColorExtraLight: string;
+  fontColorMedium: string;
   backgroundColorTransparentSecondary: string;
+  isReadOnly: boolean;
 }>`
   align-items: center;
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: ${({ isReadOnly }) => (isReadOnly ? 'default' : 'pointer')};
   display: flex;
   height: 32px;
   position: relative;
@@ -28,11 +31,20 @@ const StyledBaseContainer = styled.div<{
   background: ${({ hasSoftFocus, backgroundColorTransparentSecondary }) =>
     hasSoftFocus ? backgroundColorTransparentSecondary : 'none'};
 
-  border-radius: ${({ hasSoftFocus }) =>
+  border-radius: ${({ hasSoftFocus, isReadOnly }) =>
-    hasSoftFocus ? BORDER_COMMON.radius.sm : 'none'};
+    hasSoftFocus && !isReadOnly ? BORDER_COMMON.radius.sm : 'none'};
 
-  outline: ${({ hasSoftFocus, fontColorExtraLight }) =>
+  outline: ${({
-    hasSoftFocus ? `1px solid ${fontColorExtraLight}` : 'none'};
+    hasSoftFocus,
+    fontColorExtraLight,
+    fontColorMedium,
+    isReadOnly,
+  }) =>
+    hasSoftFocus
+      ? isReadOnly
+        ? `1px solid ${fontColorMedium}`
+        : `1px solid ${fontColorExtraLight}`
+      : 'none'};
 `;
 
 export const RecordTableCellBaseContainer = ({
@@ -44,6 +56,7 @@ export const RecordTableCellBaseContainer = ({
   const { openTableCell } = useOpenRecordTableCellFromCell();
   const { theme } = useContext(ThemeContext);
 
+  const isReadOnly = useIsFieldValueReadOnly();
   const { hasSoftFocus, cellPosition } = useContext(RecordTableCellContext);
 
   const { onMoveSoftFocusToCell, onCellMouseEnter } =
@@ -83,7 +96,9 @@ export const RecordTableCellBaseContainer = ({
           theme.background.transparent.secondary
         }
         fontColorExtraLight={theme.font.color.extraLight}
+        fontColorMedium={theme.border.color.medium}
         hasSoftFocus={hasSoftFocus}
+        isReadOnly={isReadOnly}
       >
         {children}
       </StyledBaseContainer>

packages/twenty-front/src/modules/settings/roles/hooks/useHasObjectReadOnlyPermission.ts

@@ -15,6 +15,10 @@ export const useHasObjectReadOnlyPermission = () => {
   }
 
   if (!isDefined(currentUserWorkspace?.objectRecordsPermissions)) {
+    return false;
+  }
+
+  if (currentUserWorkspace?.objectRecordsPermissions.length === 0) {
     return true;
   }