slice-machine-ui 2.17.0 → 2.17.1-alpha.jp-cr-ui-nested-ct-remove-section.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,11 +261,11 @@ 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 })
     : {};
 
   function onCustomTypesChange(id: string, newCustomType: PickerCustomType) {
@@ -274,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),
+      );
     }
   }
 
@@ -409,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>
@@ -463,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>
@@ -529,7 +533,7 @@ function TreeViewCustomType(props: TreeViewCustomTypeProps) {
   } = props;
 
   const renderedFields = getCustomTypeStaticFields(customType).map(
-    ({ fieldId, field }) => {
+    ([fieldId, field]) => {
       // Group field
 
       if (field.type === "Group") {
@@ -661,93 +665,89 @@ function TreeViewContentRelationshipField(
     allCustomTypes,
   );
 
-  if (resolvedCustomTypes.length === 0) return null;
+  if (resolvedCustomTypes.length !== 1) return null;
 
-  return (
-    <TreeViewSection
-      title={fieldId}
-      subtitle={getPickedFieldsLabel(
-        countPickedFields(crFieldsCheckMap).pickedFields,
-      )}
-    >
-      {resolvedCustomTypes.map((customType) => {
-        if (typeof customType === "string") return null;
+  const [customType] = resolvedCustomTypes;
+
+  if (typeof customType === "string") return null;
+
+  const onNestedCustomTypeChange = (
+    newNestedCustomTypeFields: PickerNestedCustomTypeValue,
+  ) => {
+    onCrFieldChange({
+      ...crFieldsCheckMap,
+      [customType.id]: newNestedCustomTypeFields,
+    });
+  };
+
+  const nestedCtFieldsCheckMap = crFieldsCheckMap[customType.id] ?? {};
 
-        const onNestedCustomTypeChange = (
-          newNestedCustomTypeFields: PickerNestedCustomTypeValue,
+  const renderedFields = getCustomTypeStaticFields(customType).map(
+    ([fieldId, field]) => {
+      // Group field
+
+      if (field.type === "Group") {
+        const onGroupFieldsChange = (
+          newGroupFields: PickerLeafGroupFieldValue,
         ) => {
-          onCrFieldChange({
-            ...crFieldsCheckMap,
-            [customType.id]: newNestedCustomTypeFields,
+          onNestedCustomTypeChange({
+            ...nestedCtFieldsCheckMap,
+            [fieldId]: { type: "group", value: newGroupFields },
           });
         };
 
-        const nestedCtFieldsCheckMap = crFieldsCheckMap[customType.id] ?? {};
-
-        const renderedFields = getCustomTypeStaticFields(customType).map(
-          ({ fieldId, field }) => {
-            // Group field
-
-            if (field.type === "Group") {
-              const onGroupFieldsChange = (
-                newGroupFields: PickerLeafGroupFieldValue,
-              ) => {
-                onNestedCustomTypeChange({
-                  ...nestedCtFieldsCheckMap,
-                  [fieldId]: { type: "group", value: newGroupFields },
-                });
-              };
-
-              const groupFieldCheckMap = nestedCtFieldsCheckMap[fieldId] ?? {};
-
-              return (
-                <TreeViewLeafGroupField
-                  key={fieldId}
-                  group={field}
-                  groupId={fieldId}
-                  onChange={onGroupFieldsChange}
-                  fieldCheckMap={
-                    groupFieldCheckMap.type === "group"
-                      ? groupFieldCheckMap.value
-                      : {}
-                  }
-                />
-              );
+        const groupFieldCheckMap = nestedCtFieldsCheckMap[fieldId] ?? {};
+
+        return (
+          <TreeViewLeafGroupField
+            key={fieldId}
+            group={field}
+            groupId={fieldId}
+            onChange={onGroupFieldsChange}
+            fieldCheckMap={
+              groupFieldCheckMap.type === "group"
+                ? groupFieldCheckMap.value
+                : {}
             }
+          />
+        );
+      }
 
-            // Regular field
+      // Regular field
 
-            const onCheckedChange = (newChecked: boolean) => {
-              onNestedCustomTypeChange({
-                ...nestedCtFieldsCheckMap,
-                [fieldId]: { type: "checkbox", value: newChecked },
-              });
-            };
-
-            return (
-              <TreeViewCheckbox
-                key={fieldId}
-                title={fieldId}
-                checked={nestedCtFieldsCheckMap[fieldId]?.value === true}
-                onCheckedChange={onCheckedChange}
-              />
-            );
-          },
-        );
+      const onCheckedChange = (newChecked: boolean) => {
+        onNestedCustomTypeChange({
+          ...nestedCtFieldsCheckMap,
+          [fieldId]: { type: "checkbox", value: newChecked },
+        });
+      };
 
-        return (
-          <TreeViewSection
-            key={customType.id}
-            title={customType.id}
-            subtitle={getPickedFieldsLabel(
-              countPickedFields(nestedCtFieldsCheckMap).pickedFields,
-            )}
-            badge={getTypeFormatLabel(customType.format)}
-          >
-            {renderedFields.length > 0 ? renderedFields : <NoFieldsAvailable />}
-          </TreeViewSection>
-        );
-      })}
+      return (
+        <TreeViewCheckbox
+          key={fieldId}
+          title={fieldId}
+          checked={nestedCtFieldsCheckMap[fieldId]?.value === true}
+          onCheckedChange={onCheckedChange}
+        />
+      );
+    },
+  );
+
+  return (
+    <TreeViewSection
+      key={customType.id}
+      // @ts-expect-error - TODO: Fix this when we are able to release editor packages
+      title={
+        <Text>
+          {fieldId} <Text color="grey11">→ {customType.id}</Text>
+        </Text>
+      }
+      subtitle={getPickedFieldsLabel(
+        countPickedFields(nestedCtFieldsCheckMap).pickedFields,
+      )}
+      badge={getTypeFormatLabel(customType.format)}
+    >
+      {renderedFields.length > 0 ? renderedFields : <NoFieldsAvailable />}
     </TreeViewSection>
   );
 }
@@ -901,7 +901,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. */
@@ -913,14 +913,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)) ?? [],
   );
 
@@ -932,10 +932,10 @@ function useCustomTypes(value: LinkCustomtypes | undefined): {
 
 function resolveContentRelationshipCustomTypes(
   linkCustomtypes: LinkCustomtypes,
-  localCustomTypes: CustomType[],
+  allCustomTypes: CustomType[],
 ): CustomType[] {
   return linkCustomtypes.flatMap((linkCustomtype) => {
-    return localCustomTypes.find((ct) => ct.id === getId(linkCustomtype)) ?? [];
+    return allCustomTypes.find((ct) => ct.id === getId(linkCustomtype)) ?? [];
   });
 }
 
@@ -943,92 +943,281 @@ 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) => {
-    if (typeof customType === "string") return customTypes;
-
-    customTypes[customType.id] = customType.fields.reduce<PickerCustomType>(
-      (customTypeFields, field) => {
-        if (typeof field === "string") {
+export function convertLinkCustomtypesToFieldCheckMap(args: {
+  linkCustomtypes: LinkCustomtypes;
+  allCustomTypes?: CustomType[];
+}): PickerCustomTypes {
+  const { linkCustomtypes, allCustomTypes } = args;
+
+  // If allCustomTypes is undefined, avoid checking if the fields exist.
+  const shouldValidate = allCustomTypes !== undefined;
+
+  const checkMap = linkCustomtypes.reduce<PickerCustomTypes>(
+    (customTypes, customType) => {
+      if (typeof customType === "string") return customTypes;
+
+      let ctFlatFieldMap: Record<string, NestableWidget | Group> = {};
+
+      if (shouldValidate) {
+        const existingCt = allCustomTypes.find((c) => c.id === customType.id);
+        // Exit early if the custom type doesn't exist
+        if (!existingCt) return customTypes;
+
+        ctFlatFieldMap = getCustomTypeStaticFieldsMap(existingCt);
+      }
+
+      const customTypeFields = customType.fields.reduce<PickerCustomType>(
+        (fields, field) => {
+          // Check if the field exists (only if validating)
+          const existingField = ctFlatFieldMap[getId(field)];
+          if (shouldValidate && existingField === undefined) return fields;
+
           // Regular field
-          customTypeFields[field] = { type: "checkbox", value: true };
-        } else if ("fields" in field && field.fields !== undefined) {
+          if (typeof field === "string") {
+            // Check if the field matched the existing one in the custom type (only if validating)
+            if (
+              shouldValidate &&
+              existingField !== undefined &&
+              existingField.type === "Group"
+            ) {
+              return fields;
+            }
+
+            fields[field] = { type: "checkbox", value: true };
+            return fields;
+          }
+
           // Group field
-          customTypeFields[field.id] = createGroupFieldCheckMap(field);
-        } else if ("customtypes" in field && field.customtypes !== undefined) {
+          if ("fields" in field && field.fields !== undefined) {
+            // Check if the field matched the existing one in the custom type (only if validating)
+            if (
+              shouldValidate &&
+              existingField !== undefined &&
+              existingField.type !== "Group"
+            ) {
+              return fields;
+            }
+
+            const groupFieldCheckMap = createGroupFieldCheckMap({
+              group: field,
+              allCustomTypes,
+              ctFlatFieldMap,
+            });
+
+            if (groupFieldCheckMap) {
+              fields[field.id] = groupFieldCheckMap;
+            }
+
+            return fields;
+          }
+
           // Content relationship field
-          customTypeFields[field.id] =
-            createContentRelationshipFieldCheckMap(field);
-        }
+          if ("customtypes" in field && field.customtypes !== undefined) {
+            // Check if the field matched the existing one in the custom type (only if validating)
+            if (
+              shouldValidate &&
+              existingField !== undefined &&
+              !isContentRelationshipField(existingField)
+            ) {
+              return fields;
+            }
 
-        return customTypeFields;
-      },
-      {},
-    );
-    return customTypes;
-  }, {});
+            const crFieldCheckMap = createContentRelationshipFieldCheckMap({
+              field,
+              allCustomTypes,
+            });
+
+            if (crFieldCheckMap) {
+              fields[field.id] = crFieldCheckMap;
+            }
+
+            return fields;
+          }
+
+          return fields;
+        },
+        {},
+      );
+
+      if (Object.keys(customTypeFields).length > 0) {
+        customTypes[customType.id] = customTypeFields;
+      }
+
+      return customTypes;
+    },
+    {},
+  );
+
+  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: Record<string, NestableWidget | Group>;
+}): PickerFirstLevelGroupField | undefined {
+  const { group, ctFlatFieldMap, allCustomTypes } = args;
+
+  // If allCustomTypes is undefined, avoid checking if the fields exist.
+  const shouldValidate = allCustomTypes !== undefined;
+
+  const fieldEntries = group.fields.reduce<PickerFirstLevelGroupFieldValue>(
+    (fields, field) => {
+      // Check if the field exists (only if validating)
+      const existingField = getGroupFieldFromMap(
+        ctFlatFieldMap,
+        group.id,
+        getId(field),
+      );
+      if (shouldValidate && !existingField) return fields;
+
+      // Regular field
+      if (typeof field === "string") {
+        // Check if the field matched the existing one in the custom type (only if validating)
+        if (
+          shouldValidate &&
+          existingField !== undefined &&
+          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 (only if validating)
+        if (
+          shouldValidate &&
+          existingField !== undefined &&
+          !isContentRelationshipField(existingField)
+        ) {
+          return fields;
+        }
+
+        const crFieldCheckMap = createContentRelationshipFieldCheckMap({
+          field,
+          allCustomTypes,
+        });
+
+        if (crFieldCheckMap) {
+          fields[field.id] = crFieldCheckMap;
+        }
+
+        return fields;
+      }
+
+      return fields;
+    },
+    {},
+  );
+
+  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;
 
-  for (const customType of field.customtypes) {
-    if (typeof customType === "string") continue;
+  // If allCustomTypes is undefined, avoid checking if the fields exists.
+  const shouldValidate = allCustomTypes !== undefined;
 
-    crFieldCustomTypes[customType.id] ??= {};
-    const customTypeFields = crFieldCustomTypes[customType.id];
+  const fieldEntries =
+    field.customtypes.reduce<PickerContentRelationshipFieldValue>(
+      (customTypes, customType) => {
+        if (typeof customType === "string") return customTypes;
 
-    for (const nestedField of customType.fields) {
-      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,
+        let ctFlatFieldMap: Record<string, NestableWidget | Group> = {};
+
+        if (shouldValidate) {
+          const existingCt = allCustomTypes.find((c) => c.id === customType.id);
+          // Exit early if the custom type doesn't exist
+          if (!existingCt) return customTypes;
+
+          ctFlatFieldMap = getCustomTypeStaticFieldsMap(existingCt);
+        }
+
+        const ctFields = customType.fields.reduce<PickerNestedCustomTypeValue>(
+          (nestedFields, nestedField) => {
+            // Regular field
+            if (typeof nestedField === "string") {
+              const existingField = ctFlatFieldMap[nestedField];
+
+              // Check if the field matched the existing one in the custom type (only if validating)
+              if (
+                shouldValidate &&
+                (existingField === undefined || existingField.type === "Group")
+              ) {
+                return nestedFields;
+              }
+
+              nestedFields[nestedField] = { type: "checkbox", value: true };
+              return nestedFields;
+            }
+
+            if ("fields" in nestedField && nestedField.fields !== undefined) {
+              // Group field
+              const groupFields =
+                nestedField.fields.reduce<PickerLeafGroupFieldValue>(
+                  (groupFields, groupField) => {
+                    const existingField = getGroupFieldFromMap(
+                      ctFlatFieldMap,
+                      nestedField.id,
+                      groupField,
+                    );
+
+                    // Check if the field matched the existing one in the custom type (only if validating)
+                    if (
+                      shouldValidate &&
+                      (existingField === undefined ||
+                        existingField.type === "Group")
+                    ) {
+                      return groupFields;
+                    }
+
+                    groupFields[groupField] = { type: "checkbox", value: true };
+                    return groupFields;
+                  },
+                  {},
+                );
+
+              if (Object.keys(groupFields).length > 0) {
+                nestedFields[nestedField.id] = {
+                  type: "group",
+                  value: groupFields,
+                };
+              }
+            }
+
+            return nestedFields;
+          },
+          {},
         );
 
-        if (groupFieldsEntries.length > 0) {
-          customTypeFields[nestedField.id] = {
-            type: "group",
-            value: Object.fromEntries(groupFieldsEntries),
-          };
+        if (Object.keys(ctFields).length > 0) {
+          customTypes[customType.id] = ctFields;
         }
-      }
-    }
-  }
 
-  return crField;
+        return customTypes;
+      },
+      {},
+    );
+
+  if (Object.keys(fieldEntries).length === 0) return undefined;
+
+  return {
+    type: "contentRelationship",
+    value: fieldEntries,
+  };
 }
 
 /**
@@ -1037,27 +1226,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);
     });
@@ -1229,6 +1413,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).
@@ -1237,34 +1425,65 @@ 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
   );
 }
 
-function getCustomTypeStaticFields(customType: CustomType) {
+/**
+ * Flattens all custom type tabs and fields into an array of [fieldId, field] tuples.
+ * Also filters out invalid fields.
+ */
+function getCustomTypeStaticFields(
+  customType: CustomType,
+): [fieldId: string, field: NestableWidget | Group][] {
   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 Object.entries(tabFields).flatMap<[string, NestableWidget | Group]>(
+      ([fieldId, field]) => {
+        return isValidField(fieldId, field) ? [[fieldId, field]] : [];
+      },
+    );
   });
 }
 
+/**
+ * Flattens all custom type tabs and fields into a map of field ids to fields.
+ * Also filters out invalid fields.
+ */
+function getCustomTypeStaticFieldsMap(
+  customType: CustomType,
+): Record<string, NestableWidget | Group> {
+  return Object.fromEntries(getCustomTypeStaticFields(customType));
+}
+
+function getGroupFieldFromMap(
+  flattenFields: Record<string, NestableWidget | Group>,
+  groupId: string,
+  fieldId: string,
+) {
+  const group = flattenFields[groupId];
+  if (group === undefined || group.type !== "Group") return undefined;
+  return group.config?.fields?.[fieldId];
+}
+
+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]) => {