slice-machine-ui 2.16.2-alpha.jp-cr-ui-types-internal-version.2 → 2.16.2-alpha.jp-cr-ui-base.1

package/src/features/{customTypes → builder}/fields/ContentRelationshipFieldPicker.tsx

@@ -1,6 +1,6 @@
 import { pluralize } from "@prismicio/editor-support/String";
-import { revalidateData, useRequest } from "@prismicio/editor-support/Suspense";
 import {
+  Alert,
   AnimatedSuspense,
   Badge,
   Box,
@@ -27,11 +27,14 @@ import {
   LinkConfig,
   NestableWidget,
 } from "@prismicio/types-internal/lib/customtypes";
+import { useEffect } from "react";
 
 import { ErrorBoundary } from "@/ErrorBoundary";
-import { managerClient } from "@/managerClient";
+import {
+  revalidateGetCustomTypes,
+  useCustomTypes as useCustomTypesRequest,
+} from "@/features/customTypes/useCustomTypes";
 import { isValidObject } from "@/utils/isValidObject";
-import { useEffect, useState } from "react";
 
 type NonReadonly<T> = { -readonly [P in keyof T]: T[P] };
 
@@ -258,10 +261,7 @@ function ContentRelationshipFieldPickerContent(
   props: ContentRelationshipFieldPickerProps,
 ) {
   const { value, onChange } = props;
-  const { allCustomTypes, availableCustomTypes, pickedCustomTypes } =
-    useCustomTypes(value);
-
-  const [isNewType, setIsNewType] = useState(false);
+  const { allCustomTypes, pickedCustomTypes } = useCustomTypes(value);
 
   const fieldCheckMap = value
     ? convertLinkCustomtypesToFieldCheckMap(value)
@@ -283,8 +283,8 @@ function ContentRelationshipFieldPickerContent(
   }
 
   function addCustomType(id: string) {
-    setIsNewType(true);
-    onChange([...(value ?? []), id]);
+    const newFields = value ? [...value, id] : [id];
+    onChange(newFields);
   }
 
   function removeCustomType(id: string) {
@@ -311,15 +311,54 @@ function ContentRelationshipFieldPickerContent(
           <>
             <Box flexDirection="column">
               <Text variant="h4" color="grey12">
-                Allowed Types
+                Allowed type
               </Text>
               <Text color="grey11">
-                Restrict the selection to specific types your content editors
-                can link to in the Page Builder.
+                Select a single type that editors can link to in the Page
+                Builder.
                 <br />
-                For each type, choose which fields to expose in the API
+                For the selected type, choose which fields to include in the API
                 response.
               </Text>
+              {pickedCustomTypes.length > 1 && (
+                <Box margin={{ block: 12 }}>
+                  <Alert
+                    color="warn"
+                    icon="alert"
+                    subtitle={
+                      <>
+                        <Text color="inherit" variant="bold">
+                          Legacy mode. Keep only one type to enable the improved
+                          Content Relationship feature.
+                        </Text>
+                        <br />
+                        <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"
+                          />
+                        </a>
+                      </>
+                    }
+                  />
+                </Box>
+              )}
             </Box>
             {pickedCustomTypes.map((customType) => (
               <Box
@@ -332,17 +371,21 @@ function ContentRelationshipFieldPickerContent(
                 backgroundColor="white"
                 justifyContent="space-between"
               >
-                <TreeView>
-                  <TreeViewCustomType
-                    customType={customType}
-                    onChange={(value) =>
-                      onCustomTypesChange(customType.id, value)
-                    }
-                    fieldCheckMap={fieldCheckMap[customType.id] ?? {}}
-                    allCustomTypes={allCustomTypes}
-                    isNewType={isNewType}
-                  />
-                </TreeView>
+                {pickedCustomTypes.length > 1 ? (
+                  <Text>{customType.id}</Text>
+                ) : (
+                  <TreeView>
+                    <TreeViewCustomType
+                      customType={customType}
+                      onChange={(value) =>
+                        onCustomTypesChange(customType.id, value)
+                      }
+                      fieldCheckMap={fieldCheckMap[customType.id] ?? {}}
+                      allCustomTypes={allCustomTypes}
+                    />
+                  </TreeView>
+                )}
+
                 <IconButton
                   icon="close"
                   size="small"
@@ -352,17 +395,9 @@ function ContentRelationshipFieldPickerContent(
                 />
               </Box>
             ))}
-            <AddTypeButton
-              onSelect={addCustomType}
-              pickedCustomTypes={pickedCustomTypes}
-              availableCustomTypes={availableCustomTypes}
-            />
           </>
         ) : (
-          <EmptyView
-            onSelect={addCustomType}
-            availableCustomTypes={availableCustomTypes}
-          />
+          <EmptyView onSelect={addCustomType} allCustomTypes={allCustomTypes} />
         )}
       </Box>
       <Box backgroundColor="white" flexDirection="column" padding={12}>
@@ -385,11 +420,11 @@ function ContentRelationshipFieldPickerContent(
 
 type EmptyViewProps = {
   onSelect: (customTypeId: string) => void;
-  availableCustomTypes: CustomType[];
+  allCustomTypes: CustomType[];
 };
 
 function EmptyView(props: EmptyViewProps) {
-  const { availableCustomTypes, onSelect } = props;
+  const { allCustomTypes, onSelect } = props;
 
   return (
     <Box
@@ -400,20 +435,16 @@ function EmptyView(props: EmptyViewProps) {
     >
       <Box flexDirection="column" alignItems="center" gap={4}>
         <Text variant="h5" color="grey12">
-          No types selected yet.
+          No type selected
         </Text>
         <Text color="grey11" component="p" align="center">
-          Add one or more document types your content editors can link to.
+          Select the type editors can link to.
           <br />
-          For each type, select the fields to include in the API response (used
-          in your frontend queries).
+          Then, choose which fields to return in the API.
         </Text>
       </Box>
       <Box>
-        <AddTypeButton
-          availableCustomTypes={availableCustomTypes}
-          onSelect={onSelect}
-        />
+        <AddTypeButton allCustomTypes={allCustomTypes} onSelect={onSelect} />
       </Box>
     </Box>
   );
@@ -421,28 +452,22 @@ function EmptyView(props: EmptyViewProps) {
 
 type AddTypeButtonProps = {
   onSelect: (customTypeId: string) => void;
-  disabled?: boolean;
-  availableCustomTypes: CustomType[];
-  pickedCustomTypes?: CustomType[];
+  allCustomTypes: CustomType[];
 };
 
 function AddTypeButton(props: AddTypeButtonProps) {
-  const { availableCustomTypes, onSelect, pickedCustomTypes = [] } = props;
+  const { allCustomTypes, onSelect } = props;
 
   const triggerButton = (
-    <Button
-      startIcon="add"
-      color="grey"
-      disabled={availableCustomTypes.length === 0}
-    >
-      {pickedCustomTypes.length > 0 ? "Add another type" : "Add type"}
+    <Button startIcon="add" color="grey" disabled={allCustomTypes.length === 0}>
+      Add type
     </Button>
   );
 
   const disabledButton = (
     <Box>
       <Tooltip
-        content="All available types have been added"
+        content="No type available"
         side="bottom"
         align="start"
         disableHoverableContent
@@ -452,21 +477,17 @@ function AddTypeButton(props: AddTypeButtonProps) {
     </Box>
   );
 
-  if (availableCustomTypes.length === 0) return disabledButton;
+  if (allCustomTypes.length === 0) return disabledButton;
 
   return (
     <Box>
       <DropdownMenu>
         <DropdownMenuTrigger>{triggerButton}</DropdownMenuTrigger>
-        <DropdownMenuContent
-          maxHeight={400}
-          minWidth={256}
-          align={pickedCustomTypes.length > 0 ? "start" : "center"}
-        >
+        <DropdownMenuContent maxHeight={400} minWidth={256} align="center">
           <DropdownMenuLabel>
             <Text color="grey11">Types</Text>
           </DropdownMenuLabel>
-          {availableCustomTypes.flatMap((customType) => (
+          {allCustomTypes.map((customType) => (
             <DropdownMenuItem
               key={customType.id}
               onSelect={() => onSelect(customType.id)}
@@ -498,7 +519,6 @@ interface TreeViewCustomTypeProps {
   fieldCheckMap: PickerCustomType;
   onChange: (newValue: PickerCustomType) => void;
   allCustomTypes: CustomType[];
-  isNewType: boolean;
 }
 
 function TreeViewCustomType(props: TreeViewCustomTypeProps) {
@@ -507,7 +527,6 @@ function TreeViewCustomType(props: TreeViewCustomTypeProps) {
     fieldCheckMap: customTypeFieldsCheckMap,
     onChange: onCustomTypeChange,
     allCustomTypes,
-    isNewType,
   } = props;
 
   const renderedFields = getCustomTypeStaticFields(customType).map(
@@ -606,7 +625,7 @@ function TreeViewCustomType(props: TreeViewCustomTypeProps) {
           : "(No fields returned in the API)"
       }
       badge={getTypeFormatLabel(customType.format)}
-      defaultOpen={isNewType}
+      defaultOpen
     >
       {renderedFields.length > 0 ? (
         renderedFields
@@ -877,17 +896,21 @@ function getTypeFormatLabel(format: CustomType["format"]) {
 }
 
 /** Retrieves all existing page & custom types. */
-function useCustomTypes(value: LinkCustomtypes | undefined) {
-  const allCustomTypes = useRequest(getCustomTypes, []);
+function useCustomTypes(value: 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. */
+  pickedCustomTypes: CustomType[];
+} {
+  const { customTypes: allCustomTypes } = useCustomTypesRequest();
 
   useEffect(() => {
-    void revalidateData(getCustomTypes, []);
+    void revalidateGetCustomTypes();
   }, []);
 
   if (!value) {
     return {
       allCustomTypes,
-      availableCustomTypes: allCustomTypes,
       pickedCustomTypes: [],
     };
   }
@@ -899,20 +922,9 @@ function useCustomTypes(value: LinkCustomtypes | undefined) {
   return {
     allCustomTypes,
     pickedCustomTypes,
-    availableCustomTypes: allCustomTypes.filter(
-      (ct) => pickedCustomTypes.some((pct) => pct.id === ct.id) === false,
-    ),
   };
 }
 
-async function getCustomTypes(): Promise<CustomType[]> {
-  const { errors, models } =
-    await managerClient.customTypes.readAllCustomTypes();
-
-  if (errors.length > 0) throw errors;
-  return models.map(({ model }) => model);
-}
-
 function resolveContentRelationshipCustomTypes(
   customTypes: LinkCustomtypes,
   localCustomTypes: CustomType[],

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/models/common/widgets/ContentRelationship/Form.tsx

@@ -3,7 +3,7 @@ import { FormikProps } from "formik";
 import { Box } from "theme-ui";
 import * as yup from "yup";
 
-import { ContentRelationshipFieldPicker } from "@/features/customTypes/fields/ContentRelationshipFieldPicker";
+import { ContentRelationshipFieldPicker } from "@/features/builder/fields/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";