slice-machine-ui 2.16.2-alpha.jp-cr-ui-multiple-improvements-rendering-logic.1 → 2.16.2-alpha.jp-cr-ui-multiple-improvements-rendering-logic.3

package/src/features/customTypes/fields/ContentRelationshipFieldPicker.tsx

@@ -7,14 +7,15 @@ import {
   TreeViewSection,
 } from "@prismicio/editor-ui";
 import {
+  CustomType,
+  Group,
   Link,
   LinkConfig,
-  UID,
+  NestableWidget,
 } from "@prismicio/types-internal/lib/customtypes";
 import { useSelector } from "react-redux";
 
-import { CustomTypeSM, TabFields } from "@/legacy/lib/models/common/CustomType";
-import { GroupSM } from "@/legacy/lib/models/common/Group";
+import { CustomTypes } from "@/legacy/lib/models/common/CustomType";
 import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
 import { isValidObject } from "@/utils/isValidObject";
 
@@ -270,10 +271,10 @@ export function ContentRelationshipFieldPicker(
 }
 
 interface TreeViewCustomTypeProps {
-  customType: CustomTypeSM;
+  customType: CustomType;
   fieldCheckMap: PickerCustomType;
   onChange: (newValue: PickerCustomType) => void;
-  customTypes: CustomTypeSM[];
+  customTypes: CustomType[];
 }
 
 function TreeViewCustomType(props: TreeViewCustomTypeProps) {
@@ -293,116 +294,115 @@ function TreeViewCustomType(props: TreeViewCustomTypeProps) {
       )}
       badge={customType.format === "page" ? "Page type" : "Custom type"}
     >
-      {customType.tabs
-        .flatMap((tab) => tab.value)
-        .map((field) => {
-          if (isUidField(field)) return null;
-
-          // Group field
+      {mapCustomTypeStaticFields(customType, ({ fieldId, field }) => {
+        // Group field
 
-          if (isGroupField(field)) {
-            const onGroupFieldChange = (
-              newGroupFields: PickerFirstLevelGroupFieldValue,
-            ) => {
-              onCustomTypeChange({
-                ...customTypeFieldsCheckMap,
-                [field.key]: { type: "group", value: newGroupFields },
-              });
-            };
-
-            const groupFieldCheckMap =
-              customTypeFieldsCheckMap[field.key] ?? {};
-
-            return (
-              <TreeViewFirstLevelGroupField
-                key={field.key}
-                group={field}
-                onChange={onGroupFieldChange}
-                fieldCheckMap={
-                  groupFieldCheckMap.type === "group"
-                    ? groupFieldCheckMap.value
-                    : {}
-                }
-                customTypes={customTypes}
-              />
-            );
-          }
+        if (isGroupField(field)) {
+          const onGroupFieldChange = (
+            newGroupFields: PickerFirstLevelGroupFieldValue,
+          ) => {
+            onCustomTypeChange({
+              ...customTypeFieldsCheckMap,
+              [fieldId]: { type: "group", value: newGroupFields },
+            });
+          };
 
-          // Content relationship field
+          const groupFieldCheckMap = customTypeFieldsCheckMap[fieldId] ?? {};
 
-          if (isContentRelationshipField(field)) {
-            const onContentRelationshipFieldChange = (
-              newCrFields: PickerContentRelationshipFieldValue,
-            ) => {
-              onCustomTypeChange({
-                ...customTypeFieldsCheckMap,
-                [field.key]: {
-                  type: "contentRelationship",
-                  value: newCrFields,
-                },
-              });
-            };
-
-            const crFieldCheckMap = customTypeFieldsCheckMap[field.key] ?? {};
-
-            return (
-              <TreeViewContentRelationshipField
-                key={field.key}
-                field={field}
-                onChange={onContentRelationshipFieldChange}
-                fieldCheckMap={
-                  crFieldCheckMap.type === "contentRelationship"
-                    ? crFieldCheckMap.value
-                    : {}
-                }
-                customTypes={customTypes}
-              />
-            );
-          }
+          return (
+            <TreeViewFirstLevelGroupField
+              key={fieldId}
+              group={field}
+              groupId={fieldId}
+              onChange={onGroupFieldChange}
+              fieldCheckMap={
+                groupFieldCheckMap.type === "group"
+                  ? groupFieldCheckMap.value
+                  : {}
+              }
+              customTypes={customTypes}
+            />
+          );
+        }
 
-          // Regular field
+        // Content relationship field
 
-          const onCheckedChange = (newValue: boolean) => {
+        if (isContentRelationshipField(field)) {
+          const onContentRelationshipFieldChange = (
+            newCrFields: PickerContentRelationshipFieldValue,
+          ) => {
             onCustomTypeChange({
               ...customTypeFieldsCheckMap,
-              [field.key]: { type: "checkbox", value: newValue },
+              [fieldId]: {
+                type: "contentRelationship",
+                value: newCrFields,
+              },
             });
           };
 
+          const crFieldCheckMap = customTypeFieldsCheckMap[fieldId] ?? {};
+
           return (
-            <TreeViewCheckbox
-              key={field.key}
-              title={field.key}
-              checked={customTypeFieldsCheckMap[field.key]?.value === true}
-              onCheckedChange={onCheckedChange}
+            <TreeViewContentRelationshipField
+              key={fieldId}
+              field={field}
+              fieldId={fieldId}
+              onChange={onContentRelationshipFieldChange}
+              fieldCheckMap={
+                crFieldCheckMap.type === "contentRelationship"
+                  ? crFieldCheckMap.value
+                  : {}
+              }
+              customTypes={customTypes}
             />
           );
-        })}
+        }
+
+        // Regular field
+
+        const onCheckedChange = (newValue: boolean) => {
+          onCustomTypeChange({
+            ...customTypeFieldsCheckMap,
+            [fieldId]: { type: "checkbox", value: newValue },
+          });
+        };
+
+        return (
+          <TreeViewCheckbox
+            key={fieldId}
+            title={fieldId}
+            checked={customTypeFieldsCheckMap[fieldId]?.value === true}
+            onCheckedChange={onCheckedChange}
+          />
+        );
+      })}
     </TreeViewSection>
   );
 }
 
 interface TreeViewContentRelationshipFieldProps {
-  field: { key: string; value: Link };
+  fieldId: string;
+  field: Link;
   fieldCheckMap: PickerContentRelationshipFieldValue;
   onChange: (newValue: PickerContentRelationshipFieldValue) => void;
-  customTypes: CustomTypeSM[];
+  customTypes: CustomType[];
 }
 
 function TreeViewContentRelationshipField(
   props: TreeViewContentRelationshipFieldProps,
 ) {
   const {
-    field: crField,
+    field,
+    fieldId,
     fieldCheckMap: crFieldsCheckMap,
     onChange: onCrFieldChange,
     customTypes,
   } = props;
 
-  if (!crField.value.config?.customtypes) return null;
+  if (!field.config?.customtypes) return null;
 
   const resolvedCustomTypes = resolveContentRelationshipCustomTypes(
-    crField.value.config.customtypes,
+    field.config.customtypes,
     customTypes,
   );
 
@@ -410,7 +410,7 @@ function TreeViewContentRelationshipField(
 
   return (
     <TreeViewSection
-      title={crField.key}
+      title={fieldId}
       subtitle={getExposedFieldsLabel(countPickedFields(crFieldsCheckMap))}
     >
       {resolvedCustomTypes.map((customType) => {
@@ -436,58 +436,55 @@ function TreeViewContentRelationshipField(
             )}
             badge={customType.format === "page" ? "Page type" : "Custom type"}
           >
-            {customType.tabs
-              .flatMap((tab) => tab.value)
-              .map((field) => {
-                if (isUidField(field)) return null;
-
-                // Group field
-
-                if (isGroupField(field)) {
-                  const onGroupFieldsChange = (
-                    newGroupFields: PickerLeafGroupFieldValue,
-                  ) => {
-                    onNestedCustomTypeChange({
-                      ...nestedCtFieldsCheckMap,
-                      [field.key]: { type: "group", value: newGroupFields },
-                    });
-                  };
-
-                  const groupFieldCheckMap =
-                    nestedCtFieldsCheckMap[field.key] ?? {};
-
-                  return (
-                    <TreeViewLeafGroupField
-                      key={field.key}
-                      group={field}
-                      onChange={onGroupFieldsChange}
-                      fieldCheckMap={
-                        groupFieldCheckMap.type === "group"
-                          ? groupFieldCheckMap.value
-                          : {}
-                      }
-                    />
-                  );
-                }
-
-                // Regular field
-
-                const onCheckedChange = (newChecked: boolean) => {
+            {mapCustomTypeStaticFields(customType, ({ fieldId, field }) => {
+              // Group field
+
+              if (isGroupField(field)) {
+                const onGroupFieldsChange = (
+                  newGroupFields: PickerLeafGroupFieldValue,
+                ) => {
                   onNestedCustomTypeChange({
                     ...nestedCtFieldsCheckMap,
-                    [field.key]: { type: "checkbox", value: newChecked },
+                    [fieldId]: { type: "group", value: newGroupFields },
                   });
                 };
 
+                const groupFieldCheckMap =
+                  nestedCtFieldsCheckMap[fieldId] ?? {};
+
                 return (
-                  <TreeViewCheckbox
-                    key={field.key}
-                    title={field.key}
-                    checked={nestedCtFieldsCheckMap[field.key]?.value === true}
-                    onCheckedChange={onCheckedChange}
+                  <TreeViewLeafGroupField
+                    key={fieldId}
+                    group={field}
+                    groupId={fieldId}
+                    onChange={onGroupFieldsChange}
+                    fieldCheckMap={
+                      groupFieldCheckMap.type === "group"
+                        ? groupFieldCheckMap.value
+                        : {}
+                    }
                   />
                 );
-              })}
+              }
+
+              // 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}
+                />
+              );
+            })}
           </TreeViewSection>
         );
       })}
@@ -496,7 +493,8 @@ function TreeViewContentRelationshipField(
 }
 
 interface TreeViewLeafGroupFieldProps {
-  group: { key: string; value: GroupSM };
+  group: Group;
+  groupId: string;
   fieldCheckMap: PickerLeafGroupFieldValue;
   onChange: (newValue: PickerLeafGroupFieldValue) => void;
 }
@@ -504,32 +502,33 @@ interface TreeViewLeafGroupFieldProps {
 function TreeViewLeafGroupField(props: TreeViewLeafGroupFieldProps) {
   const {
     group,
+    groupId,
     fieldCheckMap: groupFieldsCheckMap,
     onChange: onGroupFieldChange,
   } = props;
 
-  if (!group.value.config?.fields) return null;
+  if (!group.config?.fields) return null;
 
   return (
     <TreeViewSection
-      key={group.key}
-      title={group.key}
+      key={groupId}
+      title={groupId}
       subtitle={getExposedFieldsLabel(countPickedFields(groupFieldsCheckMap))}
       badge="Group"
     >
-      {group.value.config?.fields.map((field) => {
+      {mapGroupFields(group, ({ fieldId }) => {
         const onCheckedChange = (newChecked: boolean) => {
           onGroupFieldChange({
             ...groupFieldsCheckMap,
-            [field.key]: { type: "checkbox", value: newChecked },
+            [fieldId]: { type: "checkbox", value: newChecked },
           });
         };
 
         return (
           <TreeViewCheckbox
-            key={field.key}
-            title={field.key}
-            checked={groupFieldsCheckMap[field.key]?.value === true}
+            key={fieldId}
+            title={fieldId}
+            checked={groupFieldsCheckMap[fieldId]?.value === true}
             onCheckedChange={onCheckedChange}
           />
         );
@@ -539,10 +538,11 @@ function TreeViewLeafGroupField(props: TreeViewLeafGroupFieldProps) {
 }
 
 interface TreeViewFirstLevelGroupFieldProps {
-  group: { key: string; value: GroupSM };
+  group: Group;
+  groupId: string;
   fieldCheckMap: PickerFirstLevelGroupFieldValue;
   onChange: (newValue: PickerFirstLevelGroupFieldValue) => void;
-  customTypes: CustomTypeSM[];
+  customTypes: CustomType[];
 }
 
 function TreeViewFirstLevelGroupField(
@@ -550,35 +550,37 @@ function TreeViewFirstLevelGroupField(
 ) {
   const {
     group,
+    groupId,
     fieldCheckMap: groupFieldsCheckMap,
     onChange: onGroupFieldChange,
     customTypes,
   } = props;
 
-  if (!group.value.config?.fields) return null;
+  if (!group.config?.fields) return null;
 
   return (
-    <TreeViewSection key={group.key} title={group.key} badge="Group">
-      {group.value.config.fields.map((field) => {
+    <TreeViewSection key={groupId} title={groupId} badge="Group">
+      {mapGroupFields(group, ({ fieldId, field }) => {
         if (isContentRelationshipField(field)) {
           const onContentRelationshipFieldChange = (
             newCrFields: PickerContentRelationshipFieldValue,
           ) => {
             onGroupFieldChange({
               ...groupFieldsCheckMap,
-              [field.key]: {
+              [fieldId]: {
                 type: "contentRelationship",
                 value: newCrFields,
               },
             });
           };
 
-          const crFieldCheckMap = groupFieldsCheckMap[field.key] ?? {};
+          const crFieldCheckMap = groupFieldsCheckMap[fieldId] ?? {};
 
           return (
             <TreeViewContentRelationshipField
-              key={field.key}
+              key={fieldId}
               field={field}
+              fieldId={fieldId}
               fieldCheckMap={
                 crFieldCheckMap.type === "contentRelationship"
                   ? crFieldCheckMap.value
@@ -593,15 +595,15 @@ function TreeViewFirstLevelGroupField(
         const onCheckedChange = (newChecked: boolean) => {
           onGroupFieldChange({
             ...groupFieldsCheckMap,
-            [field.key]: { type: "checkbox", value: newChecked },
+            [fieldId]: { type: "checkbox", value: newChecked },
           });
         };
 
         return (
           <TreeViewCheckbox
-            key={field.key}
-            title={field.key}
-            checked={groupFieldsCheckMap[field.key]?.value === true}
+            key={fieldId}
+            title={fieldId}
+            checked={groupFieldsCheckMap[fieldId]?.value === true}
             onCheckedChange={onCheckedChange}
           />
         );
@@ -619,14 +621,14 @@ function getExposedFieldsLabel(count: number) {
  * Gets all the existing local custom types from the store, filters and sorts
  * them.
  */
-function useCustomTypes(): CustomTypeSM[] {
+function useCustomTypes(): CustomType[] {
   const allCustomTypes = useSelector(selectAllCustomTypes);
-  const localCustomTypes = allCustomTypes.flatMap<CustomTypeSM>((ct) => {
+  const localCustomTypes = allCustomTypes.flatMap<CustomType>((ct) => {
     // In the store we have remote and local custom types, we want to show
     // the local ones, so that the user is able to create a content
     // relationship with custom types present on the user's computer (pushed
     // or not).
-    return "local" in ct ? ct.local : [];
+    return "local" in ct ? CustomTypes.fromSM(ct.local) : [];
   });
 
   localCustomTypes.sort((a, b) => a.id.localeCompare(b.id));
@@ -636,9 +638,9 @@ function useCustomTypes(): CustomTypeSM[] {
 
 function resolveContentRelationshipCustomTypes(
   customTypes: LinkCustomtypes,
-  localCustomTypes: CustomTypeSM[],
-): CustomTypeSM[] {
-  const fields = customTypes.flatMap<CustomTypeSM>((customType) => {
+  localCustomTypes: CustomType[],
+): CustomType[] {
+  const fields = customTypes.flatMap<CustomType>((customType) => {
     if (typeof customType === "string") return [];
     return localCustomTypes.find((ct) => ct.id === customType.id) ?? [];
   });
@@ -846,29 +848,54 @@ function isCheckboxValue(value: unknown): value is PickerCheckboxField {
   return "type" in value && value.type === "checkbox";
 }
 
-function isGroupField(
-  field: TabFields[number],
-): field is { key: string; value: GroupSM } {
-  return field.value.type === "Group";
+function isGroupField(field: NestableWidget | Group): field is Group {
+  return field.type === "Group";
 }
 
 function isContentRelationshipField(
-  field: TabFields[number],
-): field is { key: string; value: Link } {
+  field: NestableWidget | Group,
+): field is Link {
   return (
-    field.value.type === "Link" &&
-    field.value.config?.select === "document" &&
-    field.value.config?.customtypes !== undefined
+    field.type === "Link" &&
+    field.config?.select === "document" &&
+    field.config?.customtypes !== undefined
   );
 }
 
-function isUidField(
-  field: TabFields[number],
-): field is { key: string; value: UID } {
-  // 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.
-  return field.key === "uid" && field.value.type === "UID";
+function mapCustomTypeStaticFields<T>(
+  customType: CustomType,
+  callback: (args: { fieldId: string; field: NestableWidget | Group }) => T,
+): T[] {
+  const fields: T[] = [];
+  for (const [_, tabFields] of Object.entries(customType.json)) {
+    for (const [fieldId, field] of Object.entries(tabFields)) {
+      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")
+      ) {
+        fields.push(
+          callback({ fieldId, field: field as NestableWidget | Group }),
+        );
+      }
+    }
+  }
+  return fields;
+}
+
+function mapGroupFields<T>(
+  group: Group,
+  callback: (args: { fieldId: string; field: NestableWidget }) => T,
+): T[] {
+  if (!group.config?.fields) return [];
+  const fields: T[] = [];
+  for (const [fieldId, field] of Object.entries(group.config.fields)) {
+    fields.push(callback({ fieldId, field: field as NestableWidget }));
+  }
+  return fields;
 }