slice-machine-ui 2.16.2-alpha.jp-cr-empty-customtypes.1 → 2.16.2-alpha.jp-cr-ui-fix-invalid-fields-checked.1

package/src/features/builder/fields/contentRelationship/ContentRelationshipFieldPicker.tsx

@@ -22,6 +22,7 @@ import {
 } from "@prismicio/editor-ui";
 import {
   CustomType,
+  DynamicWidget,
   Group,
   Link,
   LinkConfig,
@@ -260,20 +261,13 @@ export function ContentRelationshipFieldPicker(
 function ContentRelationshipFieldPickerContent(
   props: ContentRelationshipFieldPickerProps,
 ) {
-  const { value, onChange } = props;
-  const { allCustomTypes, pickedCustomTypes } = useCustomTypes(value);
+  const { value: linkCustomtypes, onChange } = props;
+  const { allCustomTypes, pickedCustomTypes } = useCustomTypes(linkCustomtypes);
 
-  const fieldCheckMap = value
-    ? convertLinkCustomtypesToFieldCheckMap(value)
+  const fieldCheckMap = linkCustomtypes
+    ? convertLinkCustomtypesToFieldCheckMap({ linkCustomtypes, allCustomTypes })
     : {};
 
-  useEffect(() => {
-    // Make sure the field has a customtypes property. We did not create it
-    // before for new Content Relationship fields, but now we do, and we want to
-    // correct most of the cases where it's missing.
-    if (!value) onChange([]);
-  }, [value]);
-
   function onCustomTypesChange(id: string, newCustomType: PickerCustomType) {
     // The picker does not handle strings (custom type ids), as it's only meant
     // to pick fields from custom types (objects). So we need to merge it with
@@ -281,22 +275,24 @@ function ContentRelationshipFieldPickerContent(
     // represent new types added without any picked fields.
     onChange(
       mergeAndConvertCheckMapToLinkCustomtypes({
-        existingLinkCustomtypes: value,
-        previousPickerCustomtypes: fieldCheckMap,
-        customTypeId: id,
+        fieldCheckMap,
         newCustomType,
+        linkCustomtypes,
+        customTypeId: id,
       }),
     );
   }
 
   function addCustomType(id: string) {
-    const newFields = value ? [...value, id] : [id];
+    const newFields = linkCustomtypes ? [...linkCustomtypes, id] : [id];
     onChange(newFields);
   }
 
   function removeCustomType(id: string) {
-    if (value) {
-      onChange(value.filter((existingCt) => getId(existingCt) !== id));
+    if (linkCustomtypes) {
+      onChange(
+        linkCustomtypes.filter((existingCt) => getId(existingCt) !== id),
+      );
     }
   }
 
@@ -416,8 +412,9 @@ function ContentRelationshipFieldPickerContent(
             rel="noopener noreferrer"
             style={{ color: "inherit", textDecoration: "underline" }}
           >
-            Please provide your feedback here.
+            Please provide your feedback here
           </a>
+          .
         </Text>
       </Box>
     </Box>
@@ -470,20 +467,20 @@ function AddTypeButton(props: AddTypeButtonProps) {
     </Button>
   );
 
-  const disabledButton = (
-    <Box>
-      <Tooltip
-        content="No type available"
-        side="bottom"
-        align="start"
-        disableHoverableContent
-      >
-        {triggerButton}
-      </Tooltip>
-    </Box>
-  );
-
-  if (allCustomTypes.length === 0) return disabledButton;
+  if (allCustomTypes.length === 0) {
+    return (
+      <Box>
+        <Tooltip
+          content="No type available"
+          side="bottom"
+          align="start"
+          disableHoverableContent
+        >
+          {triggerButton}
+        </Tooltip>
+      </Box>
+    );
+  }
 
   return (
     <Box>
@@ -908,7 +905,7 @@ function getTypeFormatLabel(format: CustomType["format"]) {
 }
 
 /** Retrieves all existing page & custom types. */
-function useCustomTypes(value: LinkCustomtypes | undefined): {
+function useCustomTypes(linkCustomtypes: LinkCustomtypes | undefined): {
   /** Every existing custom type, used to discover nested custom types down the tree and the add type dropdown. */
   allCustomTypes: CustomType[];
   /** The custom types that are already picked. */
@@ -920,14 +917,14 @@ function useCustomTypes(value: LinkCustomtypes | undefined): {
     void revalidateGetCustomTypes();
   }, []);
 
-  if (!value) {
+  if (!linkCustomtypes) {
     return {
       allCustomTypes,
       pickedCustomTypes: [],
     };
   }
 
-  const pickedCustomTypes = value.flatMap(
+  const pickedCustomTypes = linkCustomtypes.flatMap(
     (pickedCt) => allCustomTypes.find((ct) => ct.id === getId(pickedCt)) ?? [],
   );
 
@@ -950,92 +947,212 @@ function resolveContentRelationshipCustomTypes(
  * Converts a Link config `customtypes` ({@link LinkCustomtypes}) structure into
  * picker fields check map ({@link PickerCustomTypes}).
  */
-export function convertLinkCustomtypesToFieldCheckMap(
-  customTypes: LinkCustomtypes,
-): PickerCustomTypes {
-  return customTypes.reduce<PickerCustomTypes>((customTypes, customType) => {
+export function convertLinkCustomtypesToFieldCheckMap(args: {
+  linkCustomtypes: LinkCustomtypes;
+  allCustomTypes?: CustomType[];
+}): PickerCustomTypes {
+  const { linkCustomtypes, allCustomTypes } = args;
+
+  const checkMap = linkCustomtypes.reduce((customTypes, customType) => {
     if (typeof customType === "string") return customTypes;
 
-    customTypes[customType.id] = customType.fields.reduce<PickerCustomType>(
-      (customTypeFields, field) => {
-        if (typeof field === "string") {
-          // Regular field
-          customTypeFields[field] = { type: "checkbox", value: true };
-        } else if ("fields" in field && field.fields !== undefined) {
-          // Group field
-          customTypeFields[field.id] = createGroupFieldCheckMap(field);
-        } else if ("customtypes" in field && field.customtypes !== undefined) {
-          // Content relationship field
-          customTypeFields[field.id] =
-            createContentRelationshipFieldCheckMap(field);
+    const existingCt = allCustomTypes?.find((ct) => ct.id === customType.id);
+    if (allCustomTypes && !existingCt) return customTypes;
+
+    const ctFlatFieldMap = getCustomTypeFlatFieldMap(existingCt);
+
+    const customTypeFields = customType.fields.reduce((fields, field) => {
+      // Check if the field exists
+      const existingField = ctFlatFieldMap.get(getId(field));
+      if (allCustomTypes && !existingField) return fields;
+
+      // Regular field
+      if (typeof field === "string") {
+        // Check if the field matched the existing one in the custom type
+        if (allCustomTypes && existingField && existingField.type === "Group") {
+          return fields;
         }
 
-        return customTypeFields;
-      },
-      {},
-    );
+        fields[field] = { type: "checkbox", value: true };
+        return fields;
+      }
+
+      // Group field
+      if ("fields" in field && field.fields !== undefined) {
+        // Check if the field matched the existing one in the custom type
+        if (allCustomTypes && existingField && existingField.type !== "Group") {
+          return fields;
+        }
+
+        const groupFieldCheckMap = createGroupFieldCheckMap({
+          group: field,
+          allCustomTypes,
+          ctFlatFieldMap,
+        });
+
+        if (groupFieldCheckMap) {
+          fields[field.id] = groupFieldCheckMap;
+        }
+
+        return fields;
+      }
+
+      // Content relationship field
+      if ("customtypes" in field && field.customtypes !== undefined) {
+        // Check if the field matched the existing one in the custom type
+        if (
+          allCustomTypes &&
+          existingField &&
+          !isContentRelationshipField(existingField)
+        ) {
+          return fields;
+        }
+
+        const crFieldCheckMap = createContentRelationshipFieldCheckMap({
+          field,
+          allCustomTypes,
+        });
+
+        if (crFieldCheckMap) {
+          fields[field.id] = crFieldCheckMap;
+        }
+
+        return fields;
+      }
+
+      return fields;
+    }, {} as PickerCustomType);
+
+    if (Object.keys(customTypeFields).length > 0) {
+      customTypes[customType.id] = customTypeFields;
+    }
+
     return customTypes;
-  }, {});
+  }, {} as PickerCustomTypes);
+
+  return checkMap;
 }
 
-function createGroupFieldCheckMap(
-  group: LinkCustomtypesGroupFieldValue,
-): PickerFirstLevelGroupField {
-  return {
-    type: "group",
-    value: group.fields.reduce<PickerFirstLevelGroupFieldValue>(
-      (fields, field) => {
-        if (typeof field === "string") {
-          // Regular field
-          fields[field] = { type: "checkbox", value: true };
-        } else if ("customtypes" in field && field.customtypes !== undefined) {
-          // Content relationship field
-          fields[field.id] = createContentRelationshipFieldCheckMap(field);
-        }
+function createGroupFieldCheckMap(args: {
+  group: LinkCustomtypesGroupFieldValue;
+  allCustomTypes?: CustomType[];
+  ctFlatFieldMap: CustomTypeFlatFieldMap;
+}): PickerFirstLevelGroupField | undefined {
+  const { group, ctFlatFieldMap, allCustomTypes } = args;
 
+  const fieldEntries = group.fields.reduce((fields, field) => {
+    // Check if the field exists
+    const existingField = ctFlatFieldMap.get(`${group.id}.${getId(field)}`);
+    if (allCustomTypes && !existingField) return fields;
+
+    // Regular field
+    if (typeof field === "string") {
+      // Check if the field matched the existing one in the custom type
+      if (allCustomTypes && existingField && existingField.type === "Group") {
         return fields;
-      },
-      {},
-    ),
+      }
+
+      fields[field] = { type: "checkbox", value: true };
+      return fields;
+    }
+
+    // Content relationship field
+    if ("customtypes" in field && field.customtypes !== undefined) {
+      // Check if the field matched the existing one in the custom type
+      if (
+        allCustomTypes &&
+        existingField &&
+        !isContentRelationshipField(existingField)
+      ) {
+        return fields;
+      }
+
+      const crFieldCheckMap = createContentRelationshipFieldCheckMap({
+        field,
+        allCustomTypes,
+      });
+
+      if (crFieldCheckMap) {
+        fields[field.id] = crFieldCheckMap;
+      }
+
+      return fields;
+    }
+
+    return fields;
+  }, {} as PickerFirstLevelGroupFieldValue);
+
+  if (Object.keys(fieldEntries).length === 0) return undefined;
+
+  return {
+    type: "group",
+    value: fieldEntries,
   };
 }
 
-function createContentRelationshipFieldCheckMap(
-  field: LinkCustomtypesContentRelationshipFieldValue,
-): PickerContentRelationshipField {
-  const crField: PickerContentRelationshipField = {
-    type: "contentRelationship",
-    value: {},
-  };
-  const crFieldCustomTypes = crField.value;
+function createContentRelationshipFieldCheckMap(args: {
+  field: LinkCustomtypesContentRelationshipFieldValue;
+  allCustomTypes?: CustomType[];
+}): PickerContentRelationshipField | undefined {
+  const { field, allCustomTypes } = args;
+
+  const fieldEntries = field.customtypes.reduce((customTypes, customType) => {
+    if (typeof customType === "string") return customTypes;
 
-  for (const customType of field.customtypes) {
-    if (typeof customType === "string") continue;
+    const existingCt = allCustomTypes?.find((ct) => ct.id === customType.id);
+    if (allCustomTypes && !existingCt) return customTypes;
 
-    crFieldCustomTypes[customType.id] ??= {};
-    const customTypeFields = crFieldCustomTypes[customType.id];
+    const ctFlatFieldMap = getCustomTypeFlatFieldMap(existingCt);
 
-    for (const nestedField of customType.fields) {
+    const ctFields = customType.fields.reduce((nestedFields, nestedField) => {
+      // Regular field
       if (typeof nestedField === "string") {
-        // Regular field
-        customTypeFields[nestedField] = { type: "checkbox", value: true };
-      } else {
-        // Group field
-        const groupFieldsEntries = nestedField.fields.map(
-          (field) => [field, { type: "checkbox", value: true }] as const,
-        );
+        // Check if the field matched the existing one in the custom type
+        if (allCustomTypes && !ctFlatFieldMap.has(nestedField)) {
+          return nestedFields;
+        }
+
+        nestedFields[nestedField] = { type: "checkbox", value: true };
+        return nestedFields;
+      }
 
-        if (groupFieldsEntries.length > 0) {
-          customTypeFields[nestedField.id] = {
-            type: "group",
-            value: Object.fromEntries(groupFieldsEntries),
-          };
+      // Group field
+      const groupFields = nestedField.fields.reduce((fields, field) => {
+        // Check if the field matched the existing one in the custom type
+        if (
+          allCustomTypes &&
+          !ctFlatFieldMap.has(`${nestedField.id}.${field}`)
+        ) {
+          return fields;
         }
+
+        fields[field] = { type: "checkbox", value: true };
+        return fields;
+      }, {} as PickerLeafGroupFieldValue);
+
+      if (Object.keys(groupFields).length > 0) {
+        nestedFields[nestedField.id] = {
+          type: "group",
+          value: groupFields,
+        };
       }
+
+      return nestedFields;
+    }, {} as PickerNestedCustomTypeValue);
+
+    if (Object.keys(ctFields).length > 0) {
+      customTypes[customType.id] = ctFields;
     }
-  }
 
-  return crField;
+    return customTypes;
+  }, {} as PickerContentRelationshipFieldValue);
+
+  if (Object.keys(fieldEntries).length === 0) return undefined;
+
+  return {
+    type: "contentRelationship",
+    value: fieldEntries,
+  };
 }
 
 /**
@@ -1044,27 +1161,22 @@ function createContentRelationshipFieldCheckMap(
  * made correctly and that the order is preserved.
  */
 function mergeAndConvertCheckMapToLinkCustomtypes(args: {
-  existingLinkCustomtypes: LinkCustomtypes | undefined;
-  previousPickerCustomtypes: PickerCustomTypes;
+  linkCustomtypes: LinkCustomtypes | undefined;
+  fieldCheckMap: PickerCustomTypes;
   newCustomType: PickerCustomType;
   customTypeId: string;
 }): LinkCustomtypes {
-  const {
-    existingLinkCustomtypes,
-    previousPickerCustomtypes,
-    newCustomType,
-    customTypeId,
-  } = args;
+  const { linkCustomtypes, fieldCheckMap, newCustomType, customTypeId } = args;
 
   const result: NonReadonly<LinkCustomtypes> = [];
   const pickerLinkCustomtypes = convertFieldCheckMapToLinkCustomtypes({
-    ...previousPickerCustomtypes,
+    ...fieldCheckMap,
     [customTypeId]: newCustomType,
   });
 
-  if (!existingLinkCustomtypes) return pickerLinkCustomtypes;
+  if (!linkCustomtypes) return pickerLinkCustomtypes;
 
-  for (const existingLinkCt of existingLinkCustomtypes) {
+  for (const existingLinkCt of linkCustomtypes) {
     const existingPickerLinkCt = pickerLinkCustomtypes.find((ct) => {
       return getId(ct) === getId(existingLinkCt);
     });
@@ -1236,6 +1348,10 @@ export function countPickedFields(
   );
 }
 
+function isContentRelationshipField(field: DynamicWidget): field is Link {
+  return field.type === "Link" && field.config?.select === "document";
+}
+
 /**
  * Check if the field is a Content Relationship Link with a **single** custom
  * type. CRs with multiple custom types are not currently supported (legacy).
@@ -1244,34 +1360,78 @@ function isContentRelationshipFieldWithSingleCustomtype(
   field: NestableWidget | Group,
 ): field is Link {
   return !!(
-    field.type === "Link" &&
-    field.config?.select === "document" &&
+    isContentRelationshipField(field) &&
     field.config?.customtypes &&
     field.config.customtypes.length === 1
   );
 }
 
+type CustomTypeFlatFieldMap = {
+  get: (fieldId: string) => DynamicWidget | undefined;
+  has: (fieldId: string) => boolean;
+};
+
+/**
+ * Util that flattens a custom type's fields into a map of field ids to fields and
+ * returns functions to get and check if a field exists by key.
+ * For group fields, the key is separated by a dot (e.g. "group.fieldId").
+ */
+function getCustomTypeFlatFieldMap(
+  customType: CustomType | undefined,
+): CustomTypeFlatFieldMap {
+  if (!customType) return { get: () => undefined, has: () => false };
+
+  const ctFieldMap = Object.values(customType.json).reduce((acc, tabFields) => {
+    for (const [fieldId, field] of Object.entries(tabFields)) {
+      if (!isValidField(fieldId, field)) continue;
+
+      if (field.type === "Group") {
+        acc.set(fieldId, field);
+
+        if (!field.config?.fields) continue;
+
+        for (const [groupId, group] of Object.entries(field.config.fields)) {
+          if (!isValidField(groupId, group)) continue;
+          acc.set(`${fieldId}.${groupId}`, group);
+        }
+      } else {
+        acc.set(fieldId, field);
+      }
+    }
+    return acc;
+  }, new Map<string, DynamicWidget>());
+
+  return {
+    get: (fieldId) => ctFieldMap.get(fieldId),
+    has: (fieldId) => ctFieldMap.has(fieldId),
+  };
+}
+
 function getCustomTypeStaticFields(customType: CustomType) {
   return Object.values(customType.json).flatMap((tabFields) => {
     return Object.entries(tabFields).flatMap(([fieldId, field]) => {
-      if (
-        field.type !== "Slices" &&
-        field.type !== "Choice" &&
-        // Filter out uid fields because it's a special field returned by the
-        // API and is not part of the data object in the document.
-        // We also filter by key "uid", because (as of the time of writing
-        // this), creating any field with that API id will result in it being
-        // used for metadata.
-        (field.type !== "UID" || fieldId !== "uid")
-      ) {
-        return { fieldId, field: field as NestableWidget | Group };
-      }
-
-      return [];
+      return isValidField(fieldId, field) ? { fieldId, field } : [];
     });
   });
 }
 
+function isValidField(
+  fieldId: string,
+  field: DynamicWidget,
+): field is NestableWidget | Group {
+  return (
+    field.type !== "Slices" &&
+    field.type !== "Choice" &&
+    // We don't display uid fields because they're a special field returned by
+    // the API and they're not included in the document data object.
+    // We also filter by key "uid", because (as of the time of writing this)
+    // creating any field with that API id will result in it being used for
+    // metadata, regardless of its type.
+    field.type !== "UID" &&
+    fieldId !== "uid"
+  );
+}
+
 function getGroupFields(group: Group) {
   if (!group.config?.fields) return [];
   return Object.entries(group.config.fields).map(([fieldId, field]) => {