slice-machine-ui 2.16.2-beta.14 → 2.16.2-beta.16

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

@@ -532,7 +532,7 @@ function TreeViewCustomType(props: TreeViewCustomTypeProps) {
     ({ fieldId, field }) => {
       // Group field
 
-      if (isGroupField(field)) {
+      if (field.type === "Group") {
         const onGroupFieldChange = (
           newGroupFields: PickerFirstLevelGroupFieldValue,
         ) => {
@@ -560,9 +560,9 @@ function TreeViewCustomType(props: TreeViewCustomTypeProps) {
         );
       }
 
-      // Content relationship field
+      // Content relationship field with custom types
 
-      if (isContentRelationshipField(field)) {
+      if (isContentRelationshipFieldWithSingleCustomtype(field)) {
         const onContentRelationshipFieldChange = (
           newCrFields: PickerContentRelationshipFieldValue,
         ) => {
@@ -614,23 +614,23 @@ function TreeViewCustomType(props: TreeViewCustomTypeProps) {
   );
 
   const exposedFieldsCount = countPickedFields(customTypeFieldsCheckMap);
+
   return (
     <TreeViewSection
       key={customType.id}
       title={customType.id}
       subtitle={
-        exposedFieldsCount > 0
-          ? getExposedFieldsLabel(exposedFieldsCount)
+        exposedFieldsCount.pickedFields > 0
+          ? getPickedFieldsLabel(
+              exposedFieldsCount.pickedFields,
+              "returned in the API",
+            )
           : "(No fields returned in the API)"
       }
       badge={getTypeFormatLabel(customType.format)}
       defaultOpen
     >
-      {renderedFields.length > 0 ? (
-        renderedFields
-      ) : (
-        <Text color="grey11">No available fields to select</Text>
-      )}
+      {renderedFields.length > 0 ? renderedFields : <NoFieldsAvailable />}
     </TreeViewSection>
   );
 }
@@ -666,7 +666,9 @@ function TreeViewContentRelationshipField(
   return (
     <TreeViewSection
       title={fieldId}
-      subtitle={getExposedFieldsLabel(countPickedFields(crFieldsCheckMap))}
+      subtitle={getPickedFieldsLabel(
+        countPickedFields(crFieldsCheckMap).pickedFields,
+      )}
     >
       {resolvedCustomTypes.map((customType) => {
         if (typeof customType === "string") return null;
@@ -686,7 +688,7 @@ function TreeViewContentRelationshipField(
           ({ fieldId, field }) => {
             // Group field
 
-            if (isGroupField(field)) {
+            if (field.type === "Group") {
               const onGroupFieldsChange = (
                 newGroupFields: PickerLeafGroupFieldValue,
               ) => {
@@ -733,18 +735,16 @@ function TreeViewContentRelationshipField(
           },
         );
 
-        if (renderedFields.length === 0) return null;
-
         return (
           <TreeViewSection
             key={customType.id}
             title={customType.id}
-            subtitle={getExposedFieldsLabel(
-              countPickedFields(nestedCtFieldsCheckMap),
+            subtitle={getPickedFieldsLabel(
+              countPickedFields(nestedCtFieldsCheckMap).pickedFields,
             )}
             badge={getTypeFormatLabel(customType.format)}
           >
-            {renderedFields}
+            {renderedFields.length > 0 ? renderedFields : <NoFieldsAvailable />}
           </TreeViewSection>
         );
       })}
@@ -752,6 +752,10 @@ function TreeViewContentRelationshipField(
   );
 }
 
+function NoFieldsAvailable() {
+  return <Text color="grey11">No available fields to select</Text>;
+}
+
 interface TreeViewLeafGroupFieldProps {
   group: Group;
   groupId: string;
@@ -787,16 +791,16 @@ function TreeViewLeafGroupField(props: TreeViewLeafGroupFieldProps) {
     );
   });
 
-  if (renderedFields.length === 0) return null;
-
   return (
     <TreeViewSection
       key={groupId}
       title={groupId}
-      subtitle={getExposedFieldsLabel(countPickedFields(groupFieldsCheckMap))}
+      subtitle={getPickedFieldsLabel(
+        countPickedFields(groupFieldsCheckMap).pickedFields,
+      )}
       badge="Group"
     >
-      {renderedFields}
+      {renderedFields.length > 0 ? renderedFields : <NoFieldsAvailable />}
     </TreeViewSection>
   );
 }
@@ -820,74 +824,76 @@ function TreeViewFirstLevelGroupField(
     allCustomTypes,
   } = props;
 
-  if (!group.config?.fields) return null;
+  const renderedFields = getGroupFields(group).map(({ fieldId, field }) => {
+    // Content relationship field with custom types
+
+    if (isContentRelationshipFieldWithSingleCustomtype(field)) {
+      const onContentRelationshipFieldChange = (
+        newCrFields: PickerContentRelationshipFieldValue,
+      ) => {
+        onGroupFieldChange({
+          ...groupFieldsCheckMap,
+          [fieldId]: {
+            type: "contentRelationship",
+            value: newCrFields,
+          },
+        });
+      };
+
+      const crFieldCheckMap = groupFieldsCheckMap[fieldId] ?? {};
+
+      return (
+        <TreeViewContentRelationshipField
+          key={fieldId}
+          field={field}
+          fieldId={fieldId}
+          fieldCheckMap={
+            crFieldCheckMap.type === "contentRelationship"
+              ? crFieldCheckMap.value
+              : {}
+          }
+          onChange={onContentRelationshipFieldChange}
+          allCustomTypes={allCustomTypes}
+        />
+      );
+    }
+
+    // Regular field
+
+    const onCheckedChange = (newChecked: boolean) => {
+      onGroupFieldChange({
+        ...groupFieldsCheckMap,
+        [fieldId]: { type: "checkbox", value: newChecked },
+      });
+    };
+
+    return (
+      <TreeViewCheckbox
+        key={fieldId}
+        title={fieldId}
+        checked={groupFieldsCheckMap[fieldId]?.value === true}
+        onCheckedChange={onCheckedChange}
+      />
+    );
+  });
 
   return (
     <TreeViewSection
       key={groupId}
       title={groupId}
-      subtitle={getExposedFieldsLabel(countPickedFields(groupFieldsCheckMap))}
+      subtitle={getPickedFieldsLabel(
+        countPickedFields(groupFieldsCheckMap).pickedFields,
+      )}
       badge="Group"
     >
-      {getGroupFields(group).map(({ fieldId, field }) => {
-        if (isContentRelationshipField(field)) {
-          const onContentRelationshipFieldChange = (
-            newCrFields: PickerContentRelationshipFieldValue,
-          ) => {
-            onGroupFieldChange({
-              ...groupFieldsCheckMap,
-              [fieldId]: {
-                type: "contentRelationship",
-                value: newCrFields,
-              },
-            });
-          };
-
-          const crFieldCheckMap = groupFieldsCheckMap[fieldId] ?? {};
-
-          return (
-            <TreeViewContentRelationshipField
-              key={fieldId}
-              field={field}
-              fieldId={fieldId}
-              fieldCheckMap={
-                crFieldCheckMap.type === "contentRelationship"
-                  ? crFieldCheckMap.value
-                  : {}
-              }
-              onChange={onContentRelationshipFieldChange}
-              allCustomTypes={allCustomTypes}
-            />
-          );
-        }
-
-        const onCheckedChange = (newChecked: boolean) => {
-          onGroupFieldChange({
-            ...groupFieldsCheckMap,
-            [fieldId]: { type: "checkbox", value: newChecked },
-          });
-        };
-
-        return (
-          <TreeViewCheckbox
-            key={fieldId}
-            title={fieldId}
-            checked={groupFieldsCheckMap[fieldId]?.value === true}
-            onCheckedChange={onCheckedChange}
-          />
-        );
-      })}
+      {renderedFields.length > 0 ? renderedFields : <NoFieldsAvailable />}
     </TreeViewSection>
   );
 }
 
-function getExposedFieldsLabel(count: number) {
+function getPickedFieldsLabel(count: number, suffix = "selected") {
   if (count === 0) return undefined;
-  return `(${count} ${pluralize(
-    count,
-    "field",
-    "fields",
-  )} returned in the API)`;
+  return `(${count} ${pluralize(count, "field", "fields")} ${suffix})`;
 }
 
 function getTypeFormatLabel(format: CustomType["format"]) {
@@ -925,22 +931,19 @@ function useCustomTypes(value: LinkCustomtypes | undefined): {
 }
 
 function resolveContentRelationshipCustomTypes(
-  customTypes: LinkCustomtypes,
+  linkCustomtypes: LinkCustomtypes,
   localCustomTypes: CustomType[],
 ): CustomType[] {
-  const fields = customTypes.flatMap<CustomType>((customType) => {
-    if (typeof customType === "string") return [];
-    return localCustomTypes.find((ct) => ct.id === customType.id) ?? [];
+  return linkCustomtypes.flatMap((linkCustomtype) => {
+    return localCustomTypes.find((ct) => ct.id === getId(linkCustomtype)) ?? [];
   });
-
-  return fields;
 }
 
 /**
  * Converts a Link config `customtypes` ({@link LinkCustomtypes}) structure into
  * picker fields check map ({@link PickerCustomTypes}).
  */
-function convertLinkCustomtypesToFieldCheckMap(
+export function convertLinkCustomtypesToFieldCheckMap(
   customTypes: LinkCustomtypes,
 ): PickerCustomTypes {
   return customTypes.reduce<PickerCustomTypes>((customTypes, customType) => {
@@ -1162,39 +1165,82 @@ function createContentRelationshipLinkCustomtypes(
   );
 }
 
+type CountPickedFieldsResult = {
+  pickedFields: number;
+  nestedPickedFields: number;
+};
+
 /**
  * Generic recursive function that goes down the fields check map and counts all
  * the properties that are set to true, which correspond to selected fields.
  *
+ * Distinguishes between all picked fields and nested picked fields within a
+ * content relationship field.
+ *
  * It's not type safe, but checks the type of the values at runtime so that
  * it only recurses into valid objects, and only counts checkbox fields.
  */
-function countPickedFields(
+export function countPickedFields(
   fields: Record<string, unknown> | undefined,
-): number {
-  if (!fields) return 0;
-  return Object.values(fields).reduce<number>((count, value) => {
-    if (!isValidObject(value)) return count;
-    if (isCheckboxValue(value)) return count + (value.value ? 1 : 0);
-    return count + countPickedFields(value);
-  }, 0);
-}
-function isCheckboxValue(value: unknown): value is PickerCheckboxField {
-  if (!isValidObject(value)) return false;
-  return "type" in value && value.type === "checkbox";
-}
+  isNested = false,
+): CountPickedFieldsResult {
+  if (!fields) return { pickedFields: 0, nestedPickedFields: 0 };
 
-function isGroupField(field: NestableWidget | Group): field is Group {
-  return field.type === "Group";
+  return Object.values(fields).reduce<CountPickedFieldsResult>(
+    (result, value) => {
+      if (!isValidObject(value)) return result;
+
+      if ("type" in value && value.type === "checkbox") {
+        const isChecked = Boolean(value.value);
+        if (!isChecked) return result;
+
+        return {
+          pickedFields: result.pickedFields + 1,
+          nestedPickedFields: result.nestedPickedFields + (isNested ? 1 : 0),
+        };
+      }
+
+      if ("type" in value && value.type === "contentRelationship") {
+        const { pickedFields, nestedPickedFields } = countPickedFields(
+          value,
+          true,
+        );
+
+        return {
+          pickedFields: result.pickedFields + pickedFields,
+          nestedPickedFields: result.nestedPickedFields + nestedPickedFields,
+        };
+      }
+
+      const { pickedFields, nestedPickedFields } = countPickedFields(
+        value,
+        isNested,
+      );
+
+      return {
+        pickedFields: result.pickedFields + pickedFields,
+        nestedPickedFields: result.nestedPickedFields + nestedPickedFields,
+      };
+    },
+    {
+      pickedFields: 0,
+      nestedPickedFields: 0,
+    },
+  );
 }
 
-function isContentRelationshipField(
+/**
+ * Check if the field is a Content Relationship Link with a **single** custom
+ * type. CRs with multiple custom types are not currently supported (legacy).
+ */
+function isContentRelationshipFieldWithSingleCustomtype(
   field: NestableWidget | Group,
 ): field is Link {
-  return (
+  return !!(
     field.type === "Link" &&
     field.config?.select === "document" &&
-    field.config?.customtypes !== undefined
+    field.config?.customtypes &&
+    field.config.customtypes.length === 1
   );
 }
 
@@ -1225,6 +1271,7 @@ function getGroupFields(group: Group) {
     return { fieldId, field: field as NestableWidget };
   });
 }
+
 /** If it's a string, return it, otherwise return the `id` property. */
 function getId<T extends string | { id: string }>(customType: T): string {
   if (typeof customType === "string") return customType;

package/src/features/builder/fields/contentRelationship/__tests__/ContentRelationshipFieldPicker.test.ts

@@ -0,0 +1,265 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  convertLinkCustomtypesToFieldCheckMap,
+  countPickedFields,
+} from "../ContentRelationshipFieldPicker";
+
+describe("ContentRelationshipFieldPicker", () => {
+  it("should count picked fields with a custom type as string", () => {
+    const customtypes = ["ct1"];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 0,
+      nestedPickedFields: 0,
+    });
+  });
+
+  it("should count picked fields with multiple custom types as string", () => {
+    const customtypes = ["ct1", "ct2"];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 0,
+      nestedPickedFields: 0,
+    });
+  });
+
+  it("should count picked fields with custom type as object and one field", () => {
+    const customtypes = [
+      {
+        id: "ct1",
+        fields: ["f1"],
+      },
+    ];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 1,
+      nestedPickedFields: 0,
+    });
+  });
+
+  it("should count picked fields with custom type as object and one nested field", () => {
+    const customtypes = [
+      {
+        id: "ct1",
+        fields: [
+          {
+            id: "f1",
+            customtypes: [
+              {
+                id: "ct2",
+                fields: ["f1"],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 1,
+      nestedPickedFields: 1,
+    });
+  });
+
+  it("should count picked fields with custom type as object with group field", () => {
+    const customtypes = [
+      {
+        id: "ct1",
+        fields: [
+          {
+            id: "g1",
+            fields: ["f1", "f2"],
+          },
+        ],
+      },
+    ];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 2,
+      nestedPickedFields: 0,
+    });
+  });
+
+  it("should count picked fields with custom type as object with group field and nested custom type", () => {
+    const customtypes = [
+      {
+        id: "ct1",
+        fields: [
+          {
+            id: "g1",
+            fields: [
+              "f1",
+              {
+                id: "f2",
+                customtypes: [
+                  {
+                    id: "ct2",
+                    fields: ["f1"],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 2,
+      nestedPickedFields: 1,
+    });
+  });
+
+  it("should count picked fields with custom type as object with group field, nested custom type and nested group field", () => {
+    const customtypes = [
+      {
+        id: "ct1",
+        fields: [
+          {
+            id: "g1",
+            fields: [
+              "f1",
+              {
+                id: "f2",
+                customtypes: [
+                  {
+                    id: "ct2",
+                    fields: [
+                      "f1",
+                      {
+                        id: "g2",
+                        fields: ["f1", "f2"],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 4,
+      nestedPickedFields: 3,
+    });
+  });
+
+  it("should count picked fields with custom type as object with nested custom type and nested group field", () => {
+    const customtypes = [
+      {
+        id: "ct1",
+        fields: [
+          "f1",
+          {
+            id: "f2",
+            customtypes: [
+              {
+                id: "ct2",
+                fields: [
+                  "f1",
+                  {
+                    id: "g2",
+                    fields: ["f1", "f2"],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 4,
+      nestedPickedFields: 3,
+    });
+  });
+
+  it("should count picked fields with custom type as object with nested custom type without fields", () => {
+    const customtypes = [
+      {
+        id: "ct1",
+        fields: [
+          "f1",
+          {
+            id: "f2",
+            customtypes: [
+              {
+                id: "ct2",
+                fields: [],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 1,
+      nestedPickedFields: 0,
+    });
+  });
+
+  it("should count picked fields with custom type as object with group field without fields", () => {
+    const customtypes = [
+      {
+        id: "ct1",
+        fields: [
+          "f1",
+          {
+            id: "g1",
+            fields: [],
+          },
+        ],
+      },
+    ];
+
+    const result = countPickedFields(
+      convertLinkCustomtypesToFieldCheckMap(customtypes),
+    );
+
+    expect(result).toEqual({
+      pickedFields: 1,
+      nestedPickedFields: 0,
+    });
+  });
+});

package/src/utils/tracking/getLinkTrackingProperties.ts

@@ -0,0 +1,26 @@
+import { Link } from "@prismicio/types-internal/lib/customtypes/widgets";
+
+import {
+  convertLinkCustomtypesToFieldCheckMap,
+  countPickedFields,
+} from "@/features/builder/fields/contentRelationship/ContentRelationshipFieldPicker";
+
+export function getLinkTrackingProperties(field: Link) {
+  return {
+    allowText: field.config?.allowText,
+    repeat: field.config?.repeat,
+    variants: field.config?.variants,
+    linkSelect: field.config?.select,
+    ...(field.config?.select === "document" &&
+      field.config?.customtypes &&
+      (() => {
+        const { pickedFields, nestedPickedFields } = countPickedFields(
+          convertLinkCustomtypesToFieldCheckMap(field.config?.customtypes),
+        );
+        return {
+          linkPickedFields: pickedFields,
+          linkNestedPickedFields: nestedPickedFields,
+        };
+      })()),
+  };
+}

package/src/utils/tracking/trackFieldAdded.ts

@@ -8,6 +8,7 @@ import { telemetry } from "@/apiClient";
 import { SlicePrimaryFieldSM } from "@/legacy/lib/models/common/Slice";
 
 import { getContentTypeForTracking } from "./getContentTypeForTracking";
+import { getLinkTrackingProperties } from "./getLinkTrackingProperties";
 
 type TrackFieldAddedArgs = {
   id: string;
@@ -25,10 +26,6 @@ export function trackFieldAdded(args: TrackFieldAddedArgs) {
     type: field.type,
     isInAGroup,
     contentType: getContentTypeForTracking(window.location.pathname),
-    ...(field.type === "Link" && {
-      allowText: field.config?.allowText,
-      repeat: field.config?.repeat,
-      variants: field.config?.variants,
-    }),
+    ...(field.type === "Link" && getLinkTrackingProperties(field)),
   });
 }