Make workflow objects read only in frontend (twentyhq#7545)

Expected behavior: - workflows can be added and deleted. Only name field is editable - versions and runs cannot be added nor deleted. No fields are editable Added two new utils for those needs: - `isReadOnlyObject` the similar logic between remote objects, versions and runs - `isFieldReadonlyFromObjectMetadataName` to easily block field edition from object context
harshit078 · Oct 14, 2024 · 693d457 · 693d457
1 parent c609d11
commit 693d457
Show file tree

Hide file tree

Showing 16 changed files with 190 additions and 112 deletions.
diff --git a/packages/twenty-front/src/modules/action-menu/hooks/useComputeActionsBasedOnContextStore.tsx b/packages/twenty-front/src/modules/action-menu/hooks/useComputeActionsBasedOnContextStore.tsx
@@ -3,6 +3,7 @@ import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
 import { DELETE_MAX_COUNT } from '@/object-record/constants/DeleteMaxCount';
 import { useDeleteTableData } from '@/object-record/record-index/options/hooks/useDeleteTableData';
 import {
@@ -55,12 +56,13 @@ export const useComputeActionsBasedOnContextStore = ({
     filename: `${objectMetadataItem.nameSingular}.csv`,
   });
 
-  const isRemoteObject = objectMetadataItem.isRemote;
+  const isRemote = objectMetadataItem.isRemote;
 
   const numberOfSelectedRecords = contextStoreTargetedRecordIds.length;
 
   const canDelete =
-    !isRemoteObject && numberOfSelectedRecords < DELETE_MAX_COUNT;
+    !isObjectMetadataReadOnly(objectMetadataItem) &&
+    numberOfSelectedRecords < DELETE_MAX_COUNT;
 
   const menuActions: ActionMenuEntry[] = useMemo(
     () =>
@@ -125,7 +127,7 @@ export const useComputeActionsBasedOnContextStore = ({
   return {
     availableActionsInContext: [
       ...menuActions,
-      ...(!isRemoteObject && isFavorite && hasOnlyOneRecordSelected
+      ...(!isRemote && isFavorite && hasOnlyOneRecordSelected
         ? [
             {
               label: 'Remove from favorites',
@@ -134,7 +136,7 @@ export const useComputeActionsBasedOnContextStore = ({
             },
           ]
         : []),
-      ...(!isRemoteObject && !isFavorite && hasOnlyOneRecordSelected
+      ...(!isRemote && !isFavorite && hasOnlyOneRecordSelected
         ? [
             {
               label: 'Add to favorites',

diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectIsRemote.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectIsRemote.ts
diff --git a/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts b/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts
@@ -31,4 +31,5 @@ export enum CoreObjectNameSingular {
   Workflow = 'workflow',
   MessageChannelMessageAssociation = 'messageChannelMessageAssociation',
   WorkflowVersion = 'workflowVersion',
+  WorkflowRun = 'workflowRun',
 }
diff --git a/packages/twenty-front/src/modules/object-metadata/utils/isObjectMetadataReadOnly.ts b/packages/twenty-front/src/modules/object-metadata/utils/isObjectMetadataReadOnly.ts
@@ -0,0 +1,8 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { isWorkflowSubObjectMetadata } from '@/object-metadata/utils/isWorkflowSubObjectMetadata';
+
+export const isObjectMetadataReadOnly = (
+  objectMetadataItem: Pick<ObjectMetadataItem, 'isRemote' | 'nameSingular'>,
+) =>
+  objectMetadataItem.isRemote ||
+  isWorkflowSubObjectMetadata(objectMetadataItem.nameSingular);
diff --git a/packages/twenty-front/src/modules/object-metadata/utils/isWorkflowSubObjectMetadata.ts b/packages/twenty-front/src/modules/object-metadata/utils/isWorkflowSubObjectMetadata.ts
@@ -0,0 +1,7 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+
+export const isWorkflowSubObjectMetadata = (
+  objectMetadataNameSingular?: string,
+) =>
+  objectMetadataNameSingular === CoreObjectNameSingular.WorkflowVersion ||
+  objectMetadataNameSingular === CoreObjectNameSingular.WorkflowRun;
diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldReadOnly.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldReadOnly.ts
@@ -3,14 +3,16 @@ import { useContext } from 'react';
 import { isFieldActor } from '@/object-record/record-field/types/guards/isFieldActor';
 import { isFieldRichText } from '@/object-record/record-field/types/guards/isFieldRichText';
 import { FieldContext } from '../contexts/FieldContext';
+import { isFieldMetadataReadOnly } from '../utils/isFieldMetadataReadOnly';
 
 export const useIsFieldReadOnly = () => {
   const { fieldDefinition } = useContext(FieldContext);
 
+  const { metadata } = fieldDefinition;
+
   return (
-    fieldDefinition.metadata.fieldName === 'noteTargets' ||
-    fieldDefinition.metadata.fieldName === 'taskTargets' ||
     isFieldActor(fieldDefinition) ||
-    isFieldRichText(fieldDefinition)
+    isFieldRichText(fieldDefinition) ||
+    isFieldMetadataReadOnly(metadata)
   );
 };
diff --git a/...ages/twenty-front/src/modules/object-record/record-field/utils/isFieldMetadataReadOnly.ts b/...ages/twenty-front/src/modules/object-record/record-field/utils/isFieldMetadataReadOnly.ts
@@ -0,0 +1,19 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { isWorkflowSubObjectMetadata } from '@/object-metadata/utils/isWorkflowSubObjectMetadata';
+import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+
+export const isFieldMetadataReadOnly = (fieldMetadata: FieldMetadata) => {
+  if (
+    fieldMetadata.fieldName === 'noteTargets' ||
+    fieldMetadata.fieldName === 'taskTargets'
+  ) {
+    return true;
+  }
+
+  return (
+    isWorkflowSubObjectMetadata(fieldMetadata.objectMetadataNameSingular) ||
+    (fieldMetadata.objectMetadataNameSingular ===
+      CoreObjectNameSingular.Workflow &&
+      fieldMetadata.fieldName !== 'name')
+  );
+};
diff --git a/.../twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx b/.../twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
@@ -2,6 +2,7 @@ import { useRecoilValue } from 'recoil';
 import { useIcons } from 'twenty-ui';
 
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
 import { RecordIndexPageKanbanAddButton } from '@/object-record/record-index/components/RecordIndexPageKanbanAddButton';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
@@ -30,8 +31,11 @@ export const RecordIndexPageHeader = () => {
 
   const recordIndexViewType = useRecoilValue(recordIndexViewTypeState);
 
-  const isTable =
-    recordIndexViewType === ViewType.Table && !objectMetadataItem?.isRemote;
+  const shouldDisplayAddButton = objectMetadataItem
+    ? !isObjectMetadataReadOnly(objectMetadataItem)
+    : false;
+
+  const isTable = recordIndexViewType === ViewType.Table;
 
   const pageHeaderTitle =
     objectMetadataItem?.labelPlural ?? capitalize(objectNamePlural);
@@ -43,11 +47,12 @@ export const RecordIndexPageHeader = () => {
   return (
     <PageHeader title={pageHeaderTitle} Icon={Icon}>
       <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
-      {isTable ? (
-        <PageAddButton onClick={handleAddButtonClick} />
-      ) : (
-        <RecordIndexPageKanbanAddButton />
-      )}
+      {shouldDisplayAddButton &&
+        (isTable ? (
+          <PageAddButton onClick={handleAddButtonClick} />
+        ) : (
+          <RecordIndexPageKanbanAddButton />
+        ))}
     </PageHeader>
   );
 };
diff --git a/...cord/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/...cord/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
@@ -24,6 +24,7 @@ import {
 } from '@/object-record/record-field/contexts/FieldContext';
 import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
 import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { isFieldMetadataReadOnly } from '@/object-record/record-field/utils/isFieldMetadataReadOnly';
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
 import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
@@ -180,6 +181,8 @@ export const RecordDetailRelationRecordsListItem = ({
     [isExpanded],
   );
 
+  const canEdit = !isFieldMetadataReadOnly(fieldDefinition.metadata);
+
   return (
     <>
       <RecordValueSetterEffect recordId={relationRecord.id} />
@@ -195,37 +198,39 @@ export const RecordDetailRelationRecordsListItem = ({
             accent="tertiary"
           />
         </StyledClickableZone>
-        <DropdownScope dropdownScopeId={dropdownScopeId}>
-          <Dropdown
-            dropdownId={dropdownScopeId}
-            dropdownPlacement="right-start"
-            clickableComponent={
-              <LightIconButton
-                className="displayOnHover"
-                Icon={IconDotsVertical}
-                accent="tertiary"
-              />
-            }
-            dropdownComponents={
-              <DropdownMenuItemsContainer>
-                <MenuItem
-                  LeftIcon={IconUnlink}
-                  text="Detach"
-                  onClick={handleDetach}
+        {canEdit && (
+          <DropdownScope dropdownScopeId={dropdownScopeId}>
+            <Dropdown
+              dropdownId={dropdownScopeId}
+              dropdownPlacement="right-start"
+              clickableComponent={
+                <LightIconButton
+                  className="displayOnHover"
+                  Icon={IconDotsVertical}
+                  accent="tertiary"
                 />
-                {!isAccountOwnerRelation && (
+              }
+              dropdownComponents={
+                <DropdownMenuItemsContainer>
                   <MenuItem
-                    LeftIcon={IconTrash}
-                    text="Delete"
-                    accent="danger"
-                    onClick={handleDelete}
+                    LeftIcon={IconUnlink}
+                    text="Detach"
+                    onClick={handleDetach}
                   />
-                )}
-              </DropdownMenuItemsContainer>
-            }
-            dropdownHotkeyScope={{ scope: dropdownScopeId }}
-          />
-        </DropdownScope>
+                  {!isAccountOwnerRelation && (
+                    <MenuItem
+                      LeftIcon={IconTrash}
+                      text="Delete"
+                      accent="danger"
+                      onClick={handleDelete}
+                    />
+                  )}
+                </DropdownMenuItemsContainer>
+              }
+              dropdownHotkeyScope={{ scope: dropdownScopeId }}
+            />
+          </DropdownScope>
+        )}
       </StyledListItem>
       <AnimatedEaseInOut isOpen={isExpanded}>
         <PropertyBox>

diff --git a/...bject-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx b/...bject-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
@@ -12,6 +12,7 @@ import { usePersistField } from '@/object-record/record-field/hooks/usePersistFi
 import { RelationFromManyFieldInputMultiRecordsEffect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect';
 import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput';
 import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { isFieldMetadataReadOnly } from '@/object-record/record-field/utils/isFieldMetadataReadOnly';
 import { RecordDetailRelationRecordsList } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsList';
 import { RecordDetailSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailSection';
 import { RecordDetailSectionHeader } from '@/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader';
@@ -158,6 +159,8 @@ export const RecordDetailRelationSection = ({
       recordId,
     });
 
+  const canEdit = !isFieldMetadataReadOnly(fieldDefinition.metadata);
+
   if (loading) return null;
 
   return (
@@ -178,49 +181,51 @@ export const RecordDetailRelationSection = ({
         hideRightAdornmentOnMouseLeave={!isDropdownOpen && !isMobile}
         areRecordsAvailable={relationRecords.length > 0}
         rightAdornment={
-          <DropdownScope dropdownScopeId={dropdownId}>
-            <StyledAddDropdown
-              dropdownId={dropdownId}
-              dropdownPlacement="right-start"
-              onClose={handleCloseRelationPickerDropdown}
-              clickableComponent={
-                <LightIconButton
-                  className="displayOnHover"
-                  Icon={isToOneObject ? IconPencil : IconPlus}
-                  accent="tertiary"
-                />
-              }
-              dropdownComponents={
-                <RelationPickerScope relationPickerScopeId={dropdownId}>
-                  {isToOneObject ? (
-                    <SingleEntitySelectMenuItemsWithSearch
-                      EmptyIcon={IconForbid}
-                      onEntitySelected={handleRelationPickerEntitySelected}
-                      selectedRelationRecordIds={relationRecordIds}
-                      relationObjectNameSingular={
-                        relationObjectMetadataNameSingular
-                      }
-                      relationPickerScopeId={dropdownId}
-                      onCreate={createNewRecordAndOpenRightDrawer}
-                    />
-                  ) : (
-                    <>
-                      <ObjectMetadataItemsRelationPickerEffect />
-                      <RelationFromManyFieldInputMultiRecordsEffect />
-                      <MultiRecordSelect
+          canEdit && (
+            <DropdownScope dropdownScopeId={dropdownId}>
+              <StyledAddDropdown
+                dropdownId={dropdownId}
+                dropdownPlacement="right-start"
+                onClose={handleCloseRelationPickerDropdown}
+                clickableComponent={
+                  <LightIconButton
+                    className="displayOnHover"
+                    Icon={isToOneObject ? IconPencil : IconPlus}
+                    accent="tertiary"
+                  />
+                }
+                dropdownComponents={
+                  <RelationPickerScope relationPickerScopeId={dropdownId}>
+                    {isToOneObject ? (
+                      <SingleEntitySelectMenuItemsWithSearch
+                        EmptyIcon={IconForbid}
+                        onEntitySelected={handleRelationPickerEntitySelected}
+                        selectedRelationRecordIds={relationRecordIds}
+                        relationObjectNameSingular={
+                          relationObjectMetadataNameSingular
+                        }
+                        relationPickerScopeId={dropdownId}
                         onCreate={createNewRecordAndOpenRightDrawer}
-                        onChange={updateRelation}
-                        onSubmit={closeDropdown}
                       />
-                    </>
-                  )}
-                </RelationPickerScope>
-              }
-              dropdownHotkeyScope={{
-                scope: dropdownId,
-              }}
-            />
-          </DropdownScope>
+                    ) : (
+                      <>
+                        <ObjectMetadataItemsRelationPickerEffect />
+                        <RelationFromManyFieldInputMultiRecordsEffect />
+                        <MultiRecordSelect
+                          onCreate={createNewRecordAndOpenRightDrawer}
+                          onChange={updateRelation}
+                          onSubmit={closeDropdown}
+                        />
+                      </>
+                    )}
+                  </RelationPickerScope>
+                }
+                dropdownHotkeyScope={{
+                  scope: dropdownId,
+                }}
+              />
+            </DropdownScope>
+          )
         }
       />
       {showContent()}

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
@@ -70,7 +70,9 @@ export const RecordTable = ({
           <RecordTableEmptyState />
         ) : (
           <StyledTable className="entity-table-cell">
-            <RecordTableHeader />
+            <RecordTableHeader
+              objectMetadataNameSingular={objectNameSingular}
+            />
             <RecordTableBody />
           </StyledTable>
         )}

diff --git a/...t/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyState.tsx b/...t/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyState.tsx
@@ -1,4 +1,3 @@
-import { useObjectIsRemote } from '@/object-metadata/hooks/useObjectIsRemote';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableEmptyStateNoRecordAtAll } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordAtAll';
@@ -18,7 +17,7 @@ export const RecordTableEmptyState = () => {
   const { totalCount } = useFindManyRecords({ objectNameSingular, limit: 1 });
   const noRecordAtAll = totalCount === 0;
 
-  const isRemote = useObjectIsRemote(objectMetadataItem);
+  const isRemote = objectMetadataItem.isRemote;
 
   const isSoftDeleteActive = useRecoilValue(isSoftDeleteActiveState);