H-3545: make readonly array display in editor the same as in editing …

…mode
hashintel · Feb 7, 2025 · 0417555 · 0417555
1 parent a70f56d
commit 0417555
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/...s/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell.tsx b/...s/[entity-uuid].page/entity-editor/properties-section/property-table/cells/value-cell.tsx
@@ -157,7 +157,7 @@ export const renderValueCell: CustomRenderer<ValueCell> = {
     return undefined;
   },
   provideEditor: ({ data }) => {
-    if (data.readonly) {
+    if (data.readonly && !data.propertyRow.isArray) {
       return {
         disableStyling: true,
         disablePadding: true,

diff --git a/...d].page/entity-editor/properties-section/property-table/cells/value-cell/array-editor.tsx b/...d].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<HTMLDivElement>(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}
         >
           <SortableContext items={items} strategy={verticalListSortingStrategy}>
-            {items.map((item) => (
+            {items.map((item, index) => (
               <SortableRow
                 key={item.id}
+                isLastRow={index === items.length - 1}
                 item={item}
                 onRemove={removeItem}
                 onEditClicked={(id) => setEditingRow(id)}
@@ -320,6 +325,7 @@ export const ArrayEditor: ValueCellEditorComponent = ({
                 selected={selectedRow === item.id}
                 onSelect={toggleSelectedRow}
                 expectedTypes={permittedDataTypes}
+                readonly={readonly}
               />
             ))}
           </SortableContext>
@@ -343,7 +349,7 @@ export const ArrayEditor: ValueCellEditorComponent = ({
         />
       )}
 
-      {!canAddMore && hasConstraints && (
+      {!canAddMore && !readonly && hasConstraints && (
         <ItemLimitInfo min={minItems} max={maxItems} />
       )}
     </GridEditorWrapper>

diff --git a/...y-editor/properties-section/property-table/cells/value-cell/array-editor/sortable-row.tsx b/...y-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)}
     >
-      <Box
-        {...listeners}
-        sx={{
-          cursor: isDragging || isSorting ? "grabbing" : "grab",
-          px: 1.5,
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-        }}
-      >
-        <DragIndicatorIcon sx={{ fontSize: 14, color: "gray.50" }} />
-      </Box>
+      {!readonly && (
+        <Box
+          {...listeners}
+          sx={{
+            cursor: isDragging || isSorting ? "grabbing" : "grab",
+            pl: 1.5,
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <DragIndicatorIcon sx={{ fontSize: 14, color: "gray.50" }} />
+        </Box>
+      )}
 
       <Typography
         variant="smallTextLabels"
         sx={{
           color: "gray.50",
+          ml: 1.5,
           mr: 1,
         }}
       >