diff --git a/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell.tsx b/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell.tsx index 411c6da841c..a6f8867d9b5 100644 --- a/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell.tsx +++ b/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell.tsx @@ -157,7 +157,7 @@ export const renderValueCell: CustomRenderer = { return undefined; }, provideEditor: ({ data }) => { - if (data.readonly) { + if (data.readonly && !data.propertyRow.isArray) { return { disableStyling: true, disablePadding: true, diff --git a/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell/array-editor.tsx b/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell/array-editor.tsx index 585a0255843..4c0a0bdf2d8 100644 --- a/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell/array-editor.tsx +++ b/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell/array-editor.tsx @@ -52,6 +52,9 @@ export const ArrayEditor: ValueCellEditorComponent = ({ onChange, }) => { const listWrapperRef = useRef(null); + + const { readonly } = cell.data; + const { value: propertyValue, valueMetadata, @@ -291,7 +294,8 @@ export const ArrayEditor: ValueCellEditorComponent = ({ updateItem(index, value); }; - const canAddMore = isNumber(maxItems) ? items.length < maxItems : true; + const canAddMore = + !readonly && (isNumber(maxItems) ? items.length < maxItems : true); const isAddingDraft = editingRow === DRAFT_ROW_KEY; const hasConstraints = minItems !== undefined || maxItems !== undefined; @@ -308,9 +312,10 @@ export const ArrayEditor: ValueCellEditorComponent = ({ onDragEnd={handleDragEnd} > - {items.map((item) => ( + {items.map((item, index) => ( setEditingRow(id)} @@ -320,6 +325,7 @@ export const ArrayEditor: ValueCellEditorComponent = ({ selected={selectedRow === item.id} onSelect={toggleSelectedRow} expectedTypes={permittedDataTypes} + readonly={readonly} /> ))} @@ -343,7 +349,7 @@ export const ArrayEditor: ValueCellEditorComponent = ({ /> )} - {!canAddMore && hasConstraints && ( + {!canAddMore && !readonly && hasConstraints && ( )} diff --git a/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell/array-editor/sortable-row.tsx b/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell/array-editor/sortable-row.tsx index 9d2d5b11be3..8d5d09110b2 100644 --- a/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell/array-editor/sortable-row.tsx +++ b/apps/hash-frontend/src/pages/@/[shortname]/entities/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell/array-editor/sortable-row.tsx @@ -32,11 +32,14 @@ interface SortableRowProps { onEditClicked?: (id: string) => void; editing: boolean; expectedTypes: ClosedDataTypeDefinition[]; + isLastRow: boolean; onSaveChanges: (index: number, value: unknown) => void; onDiscardChanges: () => void; + readonly: boolean; } export const SortableRow = ({ + isLastRow, item, onRemove, selected, @@ -45,6 +48,7 @@ export const SortableRow = ({ onSaveChanges, onDiscardChanges, editing, + readonly, }: SortableRowProps) => { const { id, value, index, dataType } = item; const { @@ -80,7 +84,7 @@ export const SortableRow = ({ const { arrayEditException } = editorSpec; const shouldShowActions = - !isDragging && !isSorting && (hovered || selected || editing); + !readonly && !isDragging && !isSorting && (hovered || selected || editing); if (prevEditing !== editing) { setPrevEditing(editing); @@ -177,7 +181,7 @@ export const SortableRow = ({ minHeight: 48, display: "flex", alignItems: "center", - borderBottom: "1px solid", + borderBottom: isLastRow ? "none" : "1px solid", borderColor: isDragging ? "transparent" : "gray.20", position: "relative", outline: "none", @@ -186,23 +190,26 @@ export const SortableRow = ({ onMouseLeave={() => setHovered(false)} onClick={() => onSelect?.(id)} > - - - + {!readonly && ( + + + + )}