slice-machine-ui 2.16.2-beta.9 → 2.17.0

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

@@ -0,0 +1,28 @@
+import { Box, Text } from "@prismicio/editor-ui";
+
+export function Hint(args: { show: boolean }) {
+  if (!args.show) return null;
+
+  return (
+    <Box
+      padding={{ block: 8, inline: 16 }}
+      border={{ top: true }}
+      borderColor="grey6"
+    >
+      <Text variant="normal" color="grey11">
+        No code snippet for this field.{" "}
+        <Text
+          component="a"
+          href="https://prismic.io/docs/fields/content-relationship"
+          rel="noopener noreferrer"
+          target="_blank"
+          color="grey11"
+          underline
+        >
+          Check the docs
+        </Text>{" "}
+        for an example.
+      </Text>
+    </Box>
+  );
+}

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/features/customTypes/customTypesTable/CustomTypesTable.tsx

@@ -29,10 +29,8 @@ import { SingleIcon } from "@/icons/SingleIcon";
 
 import { CUSTOM_TYPES_CONFIG } from "../customTypesConfig";
 import { EditDropdown } from "../EditDropdown";
-import {
-  useCustomTypes,
-  useCustomTypesAutoRevalidation,
-} from "./useCustomTypes";
+import { useCustomTypes } from "../useCustomTypes";
+import { useCustomTypesAutoRevalidation } from "./useCustomTypesAutoRevalidation";
 
 type CustomTypesTableProps = {
   format: CustomTypeFormat;

package/src/features/customTypes/customTypesTable/{useCustomTypes.ts → useCustomTypesAutoRevalidation.tsx}

@@ -1,46 +1,13 @@
-import { updateData, useRequest } from "@prismicio/editor-support/Suspense";
 import type { CustomType } from "@prismicio/types-internal/lib/customtypes";
 import type { CustomTypeFormat } from "@slicemachine/manager";
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import { useSelector } from "react-redux";
 
 import { CustomTypes } from "@/legacy/lib/models/common/CustomType";
 import { hasLocal } from "@/legacy/lib/models/common/ModelData";
-import { managerClient } from "@/managerClient";
 import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
 import type { SliceMachineStoreType } from "@/redux/type";
 
-type UseCustomTypesReturnType = {
-  customTypes: CustomType[];
-  updateCustomTypes: (customTypes: CustomType[]) => void;
-};
-
-export function useCustomTypes(
-  format: CustomTypeFormat,
-): UseCustomTypesReturnType {
-  const updateCustomTypes = useCallback(
-    (data: CustomType[]) => updateData(getCustomTypes, [format], data),
-    [format],
-  );
-
-  return {
-    customTypes: useRequest(getCustomTypes, [format]),
-    updateCustomTypes,
-  };
-}
-
-async function getCustomTypes(format: CustomTypeFormat): Promise<CustomType[]> {
-  const { errors, models } = await managerClient.customTypes.readAllCustomTypes(
-    { format },
-  );
-
-  if (errors.length > 0) {
-    throw errors;
-  }
-
-  return models.map(({ model }) => model);
-}
-
 /**
  * TODO: DT-1363 - Update the way to have new data without Redux by revalidating
  * Suspense

package/src/features/customTypes/useCustomTypes.ts

@@ -0,0 +1,48 @@
+import {
+  revalidateData,
+  updateData,
+  useRequest,
+} from "@prismicio/editor-support/Suspense";
+import type { CustomType } from "@prismicio/types-internal/lib/customtypes";
+import type { CustomTypeFormat } from "@slicemachine/manager";
+import { useCallback } from "react";
+
+import { managerClient } from "@/managerClient";
+
+type UseCustomTypesReturnType = {
+  customTypes: CustomType[];
+  updateCustomTypes: (customTypes: CustomType[]) => void;
+};
+
+export function useCustomTypes(
+  format?: CustomTypeFormat,
+): UseCustomTypesReturnType {
+  const updateCustomTypes = useCallback(
+    (data: CustomType[]) => updateData(getCustomTypes, [format], data),
+    [format],
+  );
+
+  return {
+    customTypes: useRequest(getCustomTypes, [format]),
+    updateCustomTypes,
+  };
+}
+
+export async function getCustomTypes(
+  format?: CustomTypeFormat,
+): Promise<CustomType[]> {
+  const { errors, models } = await managerClient.customTypes.readAllCustomTypes(
+    format ? { format } : undefined,
+  );
+
+  if (errors.length > 0) {
+    throw errors;
+  }
+
+  return models.map(({ model }) => model);
+}
+
+export function revalidateGetCustomTypes(format?: CustomTypeFormat) {
+  void revalidateData(getCustomTypes, []);
+  void revalidateData(getCustomTypes, [format]);
+}

package/src/legacy/lib/builders/common/Zone/Card/components/Hints/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import useSWR from "swr";
 
+import { Hint as ContentRelationshipHint } from "@/features/builder/fields/contentRelationship/Hint";
 import { managerClient } from "@/managerClient";
 
 import CodeBlock, { Item, RenderHintBaseFN } from "./CodeBlock";
@@ -12,7 +13,7 @@ interface HintProps {
   hintItemName?: string;
 }
 
-const Hint: React.FC<HintProps> = ({
+const RegularHint: React.FC<HintProps> = ({
   show,
   renderHintBase,
   item,
@@ -62,4 +63,14 @@ const Hint: React.FC<HintProps> = ({
   );
 };
 
+const Hint: React.FC<HintProps> = (props) => {
+  const { item } = props;
+
+  if (item.value.type === "Link" && item.value.config?.select === "document") {
+    return <ContentRelationshipHint show={props.show} />;
+  }
+
+  return <RegularHint {...props} />;
+};
+
 export default Hint;

package/src/legacy/lib/models/common/widgets/ContentRelationship/Form.tsx

@@ -1,105 +1,63 @@
+import { LinkConfig } from "@prismicio/types-internal/lib/customtypes";
 import { FormikProps } from "formik";
-import { useSelector } from "react-redux";
-import Select from "react-select";
-import { Box, Label } from "theme-ui";
+import { Box } from "theme-ui";
 import * as yup from "yup";
 
+import { ContentRelationshipFieldPicker } from "@/features/builder/fields/contentRelationship/ContentRelationshipFieldPicker";
 import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
 import WidgetFormField from "@/legacy/lib/builders/common/EditModal/Field";
 import { createFieldNameFromKey } from "@/legacy/lib/forms";
 import { DefaultFields } from "@/legacy/lib/forms/defaults";
-import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
-
-import { hasLocal } from "../../ModelData";
 
 const FormFields = {
   label: DefaultFields.label,
   id: DefaultFields.id,
   customtypes: {
-    validate: () => yup.array().of(yup.string()),
+    validate: () => yup.array(),
   },
 };
 
 type FormProps = {
-  config: { label: string; select: string; customtypes?: string[] };
+  config: {
+    label: string;
+    select: string;
+    customtypes?: LinkConfig["customtypes"];
+  };
   id: string;
-  // type: string; // TODO: this exists in the yup schema but this doesn't seem to be validated by formik
+  // TODO: this exists in the yup schema but this doesn't seem to be validated by formik
 };
 
 const WidgetForm = ({
   initialValues,
-  values: formValues,
-  fields,
+  values,
   setFieldValue,
+  fields,
 }: FormikProps<FormProps> & { fields: Record<string, unknown> }) => {
-  const customTypes = useSelector(selectAllCustomTypes).filter(hasLocal);
-
-  const options = customTypes.map((ct) => ({
-    value: ct.local.id,
-    label: ct.local.label,
-  }));
-
-  const selectValues = formValues.config.customtypes
-    ? formValues.config.customtypes.map((id) => {
-        const ct = customTypes.find(
-          (frontendCustomType) => frontendCustomType.local.id === id,
-        );
-        return { value: ct?.local.id, label: ct?.local.label };
-      })
-    : null;
-
   return (
-    <FlexGrid>
-      {Object.entries(FormFields)
-        .filter((e) => e[0] !== "customtypes")
-        .map(([key, field]) => (
-          <Col key={key}>
-            <WidgetFormField
-              fieldName={createFieldNameFromKey(key)}
-              formField={field}
-              fields={fields}
-              initialValues={initialValues}
-            />
-          </Col>
-        ))}
-      <Col>
-        <Box
-          sx={{
-            mt: 2,
-            alignItems: "center",
+    <>
+      <FlexGrid>
+        {Object.entries(FormFields)
+          .filter((e) => e[0] !== "customtypes")
+          .map(([key, field]) => (
+            <Col key={key}>
+              <WidgetFormField
+                fieldName={createFieldNameFromKey(key)}
+                formField={field}
+                fields={fields}
+                initialValues={initialValues}
+              />
+            </Col>
+          ))}
+      </FlexGrid>
+      <Box mt={20}>
+        <ContentRelationshipFieldPicker
+          value={values.config.customtypes}
+          onChange={(fields) => {
+            void setFieldValue("config.customtypes", fields);
           }}
-        >
-          <Label htmlFor="origin" mb="1">
-            Types
-          </Label>
-          <Select
-            isMulti
-            name="origin"
-            options={options}
-            onChange={(v) => {
-              // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-              if (v) {
-                void setFieldValue(
-                  "config.customtypes",
-                  v.map(({ value }) => value),
-                );
-              }
-            }}
-            value={selectValues}
-            theme={(theme) => {
-              return {
-                ...theme,
-                colors: {
-                  ...theme.colors,
-                  text: "text",
-                  primary: "background",
-                },
-              };
-            }}
-          />
-        </Box>
-      </Col>
-    </FlexGrid>
+        />
+      </Box>
+    </>
   );
 };
 

package/src/legacy/lib/models/common/widgets/ContentRelationship/index.ts

@@ -7,17 +7,44 @@ import { Widget } from "../Widget";
 import Form, { FormFields } from "./Form";
 
 /**
+ * Legacy:
+ *  {
+ *   "type": "Link",
+ *   "config": {
+ *     "select": "document",
+ *     "label": "relationship"
+ *     "customtypes": [
+ *       "page"
+ *     ],
+ *   }
+ * }
+ *
+ * Current format (field picking):
  * {
-      "type": "Link",
-      "config": {
-        "select": "document",
-        "customtypes": [
-          "page"
-        ],
-        "label": "relationship"
-      }
-    }
-*/
+ *   "type": "Link",
+ *   "config": {
+ *     "select": "document",
+ *     "label": "relationship"
+ *     "customtypes": [
+ *       {
+ *         "id": "page",
+ *         "fields": [
+ *           "category",
+ *           {
+ *             "id": "countryRelation",
+ *             "customtypes": [
+ *               {
+ *                 "id": "country",
+ *                 "fields": ["name"]
+ *               }
+ *             ]
+ *           }
+ *         ]
+ *       }
+ *     ],
+ *   }
+ * }
+ */
 
 const Meta = {
   icon: MdSettingsEthernet,
@@ -30,7 +57,7 @@ const contentRelationShipConfigSchema = linkConfigSchema.shape({
     .string()
     .required()
     .matches(/^document$/, { excludeEmptyString: true }),
-  customtypes: yup.array(yup.string()).strict().optional(),
+  customtypes: yup.array().optional(),
 });
 
 const schema = yup.object().shape({
@@ -43,12 +70,13 @@ const schema = yup.object().shape({
 });
 
 export const ContentRelationshipWidget: Widget<Link, typeof schema> = {
-  create: (label: string) => ({
+  create: (label: string): Link => ({
     type: "Link",
     config: {
       label,
       select: "document",
       repeat: false,
+      customtypes: [],
     },
   }),
   Meta,
@@ -65,9 +93,12 @@ export const ContentRelationshipWidget: Widget<Link, typeof schema> = {
     return {
       ...initialValues,
       customtypes: initialValues.customtypes.filter((ct) =>
-        customTypes.find(
-          (frontendCustomType) => frontendCustomType.local.id === ct,
-        ),
+        customTypes.find((frontendCustomType) => {
+          if (typeof ct === "string") {
+            return frontendCustomType.local.id === ct;
+          }
+          return frontendCustomType.local.id === ct.id;
+        }),
       ),
     };
   },

package/src/legacy/lib/models/common/widgets/Link/index.ts

@@ -72,7 +72,7 @@ export const linkConfigSchema = yup
       .optional()
       .oneOf(["media", "document", "web", null])
       .nullable(),
-    customtypes: yup.array(yup.string()).strict().optional(),
+    customtypes: yup.array().strict().optional(),
     masks: yup.array(yup.string()).optional(),
     tags: yup.array(yup.string()).optional(),
     allowTargetBlank: yup.boolean().strict().optional(),