slice-machine-ui 2.16.2-alpha.xru-allow-only-one-ct-in-cr.2 → 2.16.2-alpha.xru-tracking-cr.1

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

@@ -328,31 +328,32 @@ function ContentRelationshipFieldPickerContent(
                     subtitle={
                       <>
                         <Text color="inherit" variant="bold">
-                          Legacy mode. Keep one custom type to enable the
-                          improved Content Relationship feature.
+                          Legacy mode. Keep only one type to enable the improved
+                          Content Relationship feature.
                         </Text>
                         <br />
-                        <Box alignItems="center" gap={4}>
-                          <a
-                            href="https://prismic.io/docs/fields/content-relationship"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            style={{
-                              color: "inherit",
-                              textDecoration: "none",
-                              fontWeight: "bold",
-                            }}
-                          >
-                            <Text color="inherit" variant="bold">
-                              See documentation
-                            </Text>
-                          </a>
+                        <a
+                          href="https://prismic.io/docs/fields/content-relationship"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          style={{
+                            color: "inherit",
+                            textDecoration: "none",
+                            fontWeight: "bold",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 4,
+                          }}
+                        >
+                          <Text color="inherit" variant="bold">
+                            See documentation
+                          </Text>
                           <Icon
                             name="arrowForward"
                             size="small"
                             color="inherit"
                           />
-                        </Box>
+                        </a>
                       </>
                     }
                   />
@@ -437,7 +438,7 @@ function EmptyView(props: EmptyViewProps) {
           No type selected
         </Text>
         <Text color="grey11" component="p" align="center">
-          Select a type editors can link to.
+          Select the type editors can link to.
           <br />
           Then, choose which fields to return in the API.
         </Text>
@@ -532,7 +533,7 @@ function TreeViewCustomType(props: TreeViewCustomTypeProps) {
     ({ fieldId, field }) => {
       // Group field
 
-      if (isGroupField(field)) {
+      if (field.type === "Group") {
         const onGroupFieldChange = (
           newGroupFields: PickerFirstLevelGroupFieldValue,
         ) => {
@@ -619,8 +620,8 @@ function TreeViewCustomType(props: TreeViewCustomTypeProps) {
       key={customType.id}
       title={customType.id}
       subtitle={
-        exposedFieldsCount > 0
-          ? getExposedFieldsLabel(exposedFieldsCount)
+        exposedFieldsCount.pickedFields > 0
+          ? getExposedFieldsLabel(exposedFieldsCount.pickedFields)
           : "(No fields returned in the API)"
       }
       badge={getTypeFormatLabel(customType.format)}
@@ -666,7 +667,9 @@ function TreeViewContentRelationshipField(
   return (
     <TreeViewSection
       title={fieldId}
-      subtitle={getExposedFieldsLabel(countPickedFields(crFieldsCheckMap))}
+      subtitle={getExposedFieldsLabel(
+        countPickedFields(crFieldsCheckMap).pickedFields,
+      )}
     >
       {resolvedCustomTypes.map((customType) => {
         if (typeof customType === "string") return null;
@@ -686,7 +689,7 @@ function TreeViewContentRelationshipField(
           ({ fieldId, field }) => {
             // Group field
 
-            if (isGroupField(field)) {
+            if (field.type === "Group") {
               const onGroupFieldsChange = (
                 newGroupFields: PickerLeafGroupFieldValue,
               ) => {
@@ -740,7 +743,7 @@ function TreeViewContentRelationshipField(
             key={customType.id}
             title={customType.id}
             subtitle={getExposedFieldsLabel(
-              countPickedFields(nestedCtFieldsCheckMap),
+              countPickedFields(nestedCtFieldsCheckMap).pickedFields,
             )}
             badge={getTypeFormatLabel(customType.format)}
           >
@@ -793,7 +796,9 @@ function TreeViewLeafGroupField(props: TreeViewLeafGroupFieldProps) {
     <TreeViewSection
       key={groupId}
       title={groupId}
-      subtitle={getExposedFieldsLabel(countPickedFields(groupFieldsCheckMap))}
+      subtitle={getExposedFieldsLabel(
+        countPickedFields(groupFieldsCheckMap).pickedFields,
+      )}
       badge="Group"
     >
       {renderedFields}
@@ -826,7 +831,9 @@ function TreeViewFirstLevelGroupField(
     <TreeViewSection
       key={groupId}
       title={groupId}
-      subtitle={getExposedFieldsLabel(countPickedFields(groupFieldsCheckMap))}
+      subtitle={getExposedFieldsLabel(
+        countPickedFields(groupFieldsCheckMap).pickedFields,
+      )}
       badge="Group"
     >
       {getGroupFields(group).map(({ fieldId, field }) => {
@@ -940,7 +947,7 @@ function resolveContentRelationshipCustomTypes(
  * 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) => {
@@ -1166,26 +1173,63 @@ function createContentRelationshipLinkCustomtypes(
  * 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,
+): {
+  pickedFields: number;
+  nestedPickedFields: number;
+} {
+  if (!fields) return { pickedFields: 0, nestedPickedFields: 0 };
+
+  return Object.values(fields).reduce<{
+    pickedFields: number;
+    nestedPickedFields: number;
+  }>(
+    (accumulator, value) => {
+      if (!isValidObject(value)) return accumulator;
+
+      if ("type" in value && value.type === "checkbox") {
+        const isChecked = Boolean(value.value);
+        if (!isChecked) return accumulator;
+
+        return {
+          pickedFields: accumulator.pickedFields + 1,
+          nestedPickedFields:
+            accumulator.nestedPickedFields + (isNested ? 1 : 0),
+        };
+      }
 
-function isGroupField(field: NestableWidget | Group): field is Group {
-  return field.type === "Group";
+      if ("type" in value && value.type === "contentRelationship") {
+        const { pickedFields } = countPickedFields(value, isNested);
+        const { nestedPickedFields } = countPickedFields(value, true);
+
+        return {
+          pickedFields: accumulator.pickedFields + pickedFields,
+          nestedPickedFields:
+            accumulator.nestedPickedFields + nestedPickedFields,
+        };
+      }
+
+      const { pickedFields } = countPickedFields(value, isNested);
+      const { nestedPickedFields } = countPickedFields(value, isNested);
+
+      return {
+        pickedFields: accumulator.pickedFields + pickedFields,
+        nestedPickedFields: accumulator.nestedPickedFields + nestedPickedFields,
+      };
+    },
+    {
+      pickedFields: 0,
+      nestedPickedFields: 0,
+    },
+  );
 }
 
 function isContentRelationshipField(

package/src/features/builder/fields/__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/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)),
   });
 }

package/src/utils/tracking/trackFieldUpdated.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 TrackFieldUpdatedArgs = {
   id: string;
@@ -28,10 +29,6 @@ export function trackFieldUpdated(args: TrackFieldUpdatedArgs) {
     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)),
   });
 }