slice-machine-ui 1.16.1-dev-next-release.0 → 1.16.1-dev-next-release.1

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx

@@ -0,0 +1,151 @@
+import type { FC } from "react";
+import { useSelector } from "react-redux";
+import { Formik } from "formik";
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  ScrollArea,
+  FormInput,
+  Text,
+  Select,
+  SelectItem,
+} from "@prismicio/editor-ui";
+
+import { SliceMachineStoreType } from "@src/redux/type";
+import { getRemoteSlices } from "@src/modules/slices";
+import { pascalize } from "@lib/utils/str";
+import { validateSliceModalValues as validateAsNewSliceValues } from "@components/Forms/formsValidator";
+
+import * as styles from "./ConvertLegacySliceButton.css";
+import { DialogProps } from "./types";
+
+export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
+  isOpen,
+  close,
+  onSubmit,
+  isLoading,
+  slice,
+  libraries,
+}) => {
+  const { remoteSlices } = useSelector((store: SliceMachineStoreType) => ({
+    remoteSlices: getRemoteSlices(store),
+  }));
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => !open && close()}
+      size={{ width: 448, height: "auto" }}
+    >
+      <DialogHeader title="Upgrade slice" />
+      <DialogContent>
+        <Formik
+          validateOnChange
+          validateOnMount
+          initialValues={{
+            _init: false,
+            from: libraries[0]?.name,
+            sliceName: pascalize(slice.key),
+          }}
+          validate={(values) => {
+            return validateAsNewSliceValues(values, libraries, remoteSlices);
+          }}
+          onSubmit={(values) => {
+            onSubmit({ libraryID: values.from, sliceID: values.sliceName });
+          }}
+        >
+          {(formik) => {
+            return (
+              <form id="convert-legacy-slice-as-new-slice-dialog">
+                <Box display="flex" flexDirection="column">
+                  <ScrollArea className={styles.scrollArea}>
+                    <Text variant="normal" color="grey11">
+                      This will create a new slice with the same fields. The new
+                      slice will replace the legacy slice in all of your types,
+                      and the existing slice content will be re-mapped to the
+                      new slice.
+                    </Text>
+                    <Text variant="normal" color="grey11">
+                      This will not migrate your component. You will need to do
+                      that manually.
+                    </Text>
+                    <Box display="flex" flexDirection="column" gap={4}>
+                      <label className={styles.label}>
+                        <Text variant="bold">Display name*</Text>
+                        {typeof formik.errors.sliceName === "string" ? (
+                          <Text variant="small" color="tomato10">
+                            {formik.errors.sliceName}
+                          </Text>
+                        ) : null}
+                      </label>
+                      <FormInput
+                        placeholder={`Pascalised Slice API ID (e.g. ${pascalize(
+                          slice.key
+                        )})`}
+                        error={typeof formik.errors.sliceName === "string"}
+                        value={formik.values.sliceName}
+                        onValueChange={(value) =>
+                          void formik.setFieldValue(
+                            "sliceName",
+                            value.slice(0, 30)
+                          )
+                        }
+                        data-cy="slice-name-input"
+                      />
+                      <Text variant="normal" color="grey11">
+                        A display name for the slice
+                      </Text>
+                    </Box>
+                    <Box display="flex" flexDirection="column" gap={4}>
+                      <label className={styles.label}>
+                        <Text variant="bold">Slice library*</Text>
+                        {typeof formik.errors.from === "string" ? (
+                          <Text variant="small" color="tomato10">
+                            {formik.errors.from}
+                          </Text>
+                        ) : null}
+                      </label>
+                      <Select
+                        size="medium"
+                        variant="secondary"
+                        startIcon="folder"
+                        flexContent={true}
+                        value={formik.values.from}
+                        onValueChange={(value) =>
+                          value
+                            ? void formik.setFieldValue("from", value)
+                            : null
+                        }
+                      >
+                        {libraries.map((library) => (
+                          <SelectItem key={library.name} value={library.name}>
+                            {library.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                      <Text variant="normal" color="grey11">
+                        The library where we'll store your slice
+                      </Text>
+                    </Box>
+                  </ScrollArea>
+                  <DialogActions
+                    ok={{
+                      text: "Upgrade",
+                      onClick: () => void formik.submitForm(),
+                      loading: isLoading,
+                      disabled: !formik.isValid,
+                    }}
+                    cancel={{ text: "Cancel" }}
+                  />
+                </Box>
+              </form>
+            );
+          }}
+        </Formik>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx

@@ -0,0 +1,233 @@
+import { useState, type FC } from "react";
+import { Formik } from "formik";
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  ScrollArea,
+  FormInput,
+  Text,
+  Select,
+  SelectItem,
+} from "@prismicio/editor-ui";
+
+import { Variation } from "@models/common/Variation";
+import { LibraryUI } from "@models/common/LibraryUI";
+
+import * as styles from "./ConvertLegacySliceButton.css";
+import { DialogProps } from "./types";
+
+type FormValues = {
+  libraryID: string;
+  sliceID: string;
+  variationID: string;
+  variationName: string;
+};
+
+export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
+  isOpen,
+  close,
+  onSubmit,
+  isLoading,
+  slice,
+  sliceName,
+  libraries,
+  localSharedSlices,
+}) => {
+  const [inferIDFromName, setInferIDFromName] = useState(true);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => !open && close()}
+      size={{ width: 448, height: "auto" }}
+    >
+      <DialogHeader title="Convert to slice variation" />
+      <DialogContent>
+        <Formik
+          validateOnChange
+          initialValues={{
+            libraryID: localSharedSlices[0]?.from,
+            sliceID: localSharedSlices[0]?.model.id,
+            variationID: Variation.generateId(slice.key),
+            variationName: sliceName,
+          }}
+          validate={(values) => {
+            return validateAsNewVariationValues(values, libraries);
+          }}
+          onSubmit={(values) => {
+            onSubmit(values);
+          }}
+        >
+          {(formik) => {
+            return (
+              <form id="convert-legacy-slice-as-new-variation-dialog">
+                <Box display="flex" flexDirection="column">
+                  <ScrollArea className={styles.scrollArea}>
+                    <Text variant="normal" color="grey11">
+                      If you have multiple slices that are similar, you can
+                      combine them as variations of the same slice.
+                    </Text>
+                    <Box display="flex" flexDirection="column" gap={4}>
+                      <label className={styles.label}>
+                        <Text variant="bold">Target slice*</Text>
+                        {typeof formik.errors.libraryID === "string" ? (
+                          <Text variant="small" color="tomato10">
+                            {formik.errors.libraryID}
+                          </Text>
+                        ) : null}
+                        {typeof formik.errors.sliceID === "string" ? (
+                          <Text variant="small" color="tomato10">
+                            {formik.errors.sliceID}
+                          </Text>
+                        ) : null}
+                      </label>
+                      <Select
+                        size="medium"
+                        variant="secondary"
+                        startIcon="viewDay"
+                        flexContent={true}
+                        value={`${formik.values.libraryID}::${formik.values.sliceID}`}
+                        onValueChange={(value) => {
+                          if (value) {
+                            const [libraryID, sliceID] = value.split("::");
+                            void formik.setFieldValue("libraryID", libraryID);
+                            void formik.setFieldValue("sliceID", sliceID);
+                          }
+                        }}
+                      >
+                        {localSharedSlices.map((slice) => (
+                          <SelectItem
+                            key={`${slice.from}::${slice.model.id}`}
+                            value={`${slice.from}::${slice.model.id}`}
+                          >
+                            {slice.from} {">"} {slice.model.name} (
+                            {slice.model.id})
+                          </SelectItem>
+                        ))}
+                      </Select>
+                      <Text variant="normal" color="grey11">
+                        Choose the slice to which you would like to add this
+                        variation.
+                      </Text>
+                    </Box>
+                    <Box display="flex" flexDirection="column" gap={4}>
+                      <label className={styles.label}>
+                        <Text variant="bold">Variation name*</Text>
+                        {typeof formik.errors.variationName === "string" ? (
+                          <Text variant="small" color="tomato10">
+                            {formik.errors.variationName}
+                          </Text>
+                        ) : null}
+                      </label>
+                      <FormInput
+                        placeholder={sliceName}
+                        error={typeof formik.errors.variationName === "string"}
+                        value={formik.values.variationName}
+                        onValueChange={(value) => {
+                          const values = {
+                            ...formik.values,
+                            variationName: value.slice(0, 30),
+                          };
+
+                          if (inferIDFromName) {
+                            values.variationID = Variation.generateId(
+                              values.variationName
+                            );
+                          }
+
+                          formik.setValues(values, true);
+                        }}
+                        data-cy="variation-name-input"
+                      />
+                    </Box>
+                    <Box display="flex" flexDirection="column" gap={4}>
+                      <label className={styles.label}>
+                        <Text variant="bold">ID*</Text>
+                        {typeof formik.errors.variationID === "string" ? (
+                          <Text variant="small" color="tomato10">
+                            {formik.errors.variationID}
+                          </Text>
+                        ) : null}
+                      </label>
+                      <FormInput
+                        placeholder={Variation.generateId(slice.key)}
+                        error={typeof formik.errors.variationID === "string"}
+                        value={formik.values.variationID}
+                        onValueChange={(value) => {
+                          setInferIDFromName(false);
+                          void formik.setFieldValue(
+                            "variationID",
+                            Variation.generateId(value.slice(0, 30))
+                          );
+                        }}
+                        data-cy="variation-id-input"
+                      />
+                    </Box>
+                  </ScrollArea>
+                  <DialogActions
+                    ok={{
+                      text: "Convert",
+                      onClick: () => void formik.submitForm(),
+                      loading: isLoading,
+                      disabled: !formik.isValid,
+                    }}
+                    cancel={{ text: "Cancel" }}
+                  />
+                </Box>
+              </form>
+            );
+          }}
+        </Formik>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const validateAsNewVariationValues = (
+  values: FormValues,
+  libraries: readonly LibraryUI[]
+): Partial<Record<keyof FormValues, string>> => {
+  const errors: Partial<Record<keyof FormValues, string>> = {};
+
+  if (!values.libraryID) {
+    errors.libraryID = "Cannot be empty.";
+  }
+  const library = libraries.find(
+    (library) => library.path === values.libraryID
+  );
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (!errors.libraryID && !library) {
+    errors.libraryID = "Does not exist.";
+  }
+
+  if (!values.sliceID) {
+    errors.sliceID = "Cannot be empty.";
+  }
+  const slice = library?.components.find(
+    (component) => component.model.id === values.sliceID
+  );
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (!errors.sliceID && !slice) {
+    errors.sliceID = "Does not exist.";
+  }
+
+  if (!values.variationName) {
+    errors.variationName = "Cannot be empty.";
+  }
+
+  if (!values.variationID) {
+    errors.variationID = "Cannot be empty.";
+  } else {
+    const variationIDs =
+      slice?.model.variations.map((variation) => variation.id) ?? [];
+
+    if (variationIDs.includes(values.variationID)) {
+      errors.variationID = "Slice variation ID is already taken.";
+    }
+  }
+
+  return errors;
+};

package/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.css.ts

@@ -0,0 +1,15 @@
+import { sprinkles } from "@prismicio/editor-ui";
+
+export const scrollArea = sprinkles({
+  height: "100%",
+  display: "flex",
+  gap: 8,
+  paddingInline: 16,
+  paddingBlock: 16,
+});
+
+export const label = sprinkles({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+});

package/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx

@@ -0,0 +1,268 @@
+import { useMemo, useState, type FC } from "react";
+import { useSelector } from "react-redux";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+  Button,
+} from "@prismicio/editor-ui";
+
+import { NonSharedSliceInSliceZone } from "@models/common/CustomType/sliceZone";
+import { ComponentUI } from "@models/common/ComponentUI";
+import { CustomTypes } from "@models/common/CustomType";
+import { getLibraries } from "@src/modules/slices";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { managerClient } from "@src/managerClient";
+import { getState, telemetry } from "@src/apiClient";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { ToasterType } from "@src/modules/toaster";
+import { getFieldMappingFingerprint } from "@src/domain/slice";
+
+import { NonSharedSliceViewCardProps } from "../sliceCards/NonSharedSliceViewCard";
+import { ConvertLegacySliceAsNewSliceDialog } from "./ConvertLegacySliceAsNewSliceDialog";
+import { ConvertLegacySliceAsNewVariationDialog } from "./ConvertLegacySliceAsNewVariationDialog";
+import { ConvertLegacySliceMergeWithIdenticalDialog } from "./ConvertLegacySliceMergeWithIdenticalDialog";
+import {
+  ConvertLegacySliceAndTrackArgs,
+  IdenticalSlice,
+  LegacySliceConversionType,
+} from "./types";
+
+type ConvertLegacySliceButtonProps = NonSharedSliceViewCardProps;
+
+export const ConvertLegacySliceButton: FC<ConvertLegacySliceButtonProps> = ({
+  slice,
+  path,
+}) => {
+  const {
+    refreshState,
+    openToaster,
+    initCustomTypeStore,
+    saveCustomTypeSuccess,
+  } = useSliceMachineActions();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [dialog, setDialog] = useState<LegacySliceConversionType | undefined>();
+
+  const { libraries: allLibraries } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      libraries: getLibraries(store),
+    })
+  );
+
+  const sliceName =
+    slice.value.type === "Slice"
+      ? slice.value.fieldset ?? slice.key
+      : slice.key;
+  const libraries = allLibraries.filter((library) => library.isLocal);
+  const localSharedSlices = libraries
+    .map((library) => library.components)
+    .flat();
+  const identicalSlices = useIdenticalSlices(
+    slice,
+    sliceName,
+    localSharedSlices
+  );
+
+  const convertLegacySliceAndTrack = async (
+    args: ConvertLegacySliceAndTrackArgs
+  ) => {
+    if (!dialog) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    void telemetry.track({
+      event: "legacy-slice:converted",
+      id: args.sliceID,
+      variation: args.variationID ?? "default",
+      library: args.libraryID,
+      conversionType: dialog,
+    });
+
+    const { errors } =
+      await managerClient.slices.convertLegacySliceToSharedSlice({
+        model: slice.value,
+        src: {
+          ...path,
+          sliceID: slice.key,
+        },
+        dest: {
+          libraryID: args.libraryID,
+          sliceID: args.sliceID,
+          variationName: args.variationName ?? "Default",
+          variationID: args.variationID ?? "default",
+        },
+      });
+
+    if (errors.length) {
+      console.error(`Could not convert slice \`${sliceName}\``, errors);
+
+      openToaster(
+        `Could not convert slice \`${sliceName}\``,
+        ToasterType.ERROR
+      );
+
+      throw errors;
+    }
+
+    const { model: customType, errors: customTypeReadErrors } =
+      await managerClient.customTypes.readCustomType({
+        id: path.customTypeID,
+      });
+
+    if (customTypeReadErrors.length || !customType) {
+      console.error(
+        `Could not refresh custom type view \`${path.customTypeID}\``,
+        customTypeReadErrors
+      );
+
+      openToaster(
+        `Could not refresh custom type view \`${path.customTypeID}\``,
+        ToasterType.ERROR
+      );
+
+      return;
+    }
+
+    // TODO(DT-1453): Remove the need of the global getState
+    const serverState = await getState();
+    // Update Redux store
+    refreshState(serverState);
+
+    setIsLoading(false);
+    setDialog(undefined);
+    switch (dialog) {
+      case "as_new_slice":
+        openToaster(
+          `${sliceName} has been upgraded to a new slice ${args.libraryID} > ${args.sliceID}`,
+          ToasterType.SUCCESS
+        );
+        break;
+
+      case "as_new_variation":
+        openToaster(
+          `${sliceName} has been converted as a variation of ${args.libraryID} > ${args.sliceID}`,
+          ToasterType.SUCCESS
+        );
+        break;
+
+      case "merge_with_identical":
+      default:
+        openToaster(
+          `${sliceName} has been merged with ${args.libraryID} > ${args.sliceID}`,
+          ToasterType.SUCCESS
+        );
+        break;
+    }
+
+    const customTypeSM = CustomTypes.toSM(customType);
+    initCustomTypeStore(customTypeSM, customTypeSM);
+    saveCustomTypeSuccess(customType);
+  };
+
+  const formProps = {
+    path,
+    slice,
+    sliceName,
+    libraries,
+    localSharedSlices,
+    identicalSlices,
+    close: () => setDialog(undefined),
+    onSubmit: convertLegacySliceAndTrack,
+    isLoading,
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button
+            data-cy="convert-legacy-slice"
+            startIcon="refresh"
+            endIcon="arrowDropDown"
+            size="medium"
+            variant="secondary"
+          >
+            Migrate legacy slice
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            startIcon={<Icon name="folder" size="large" />}
+            description="Use it with new types"
+            onSelect={() => setDialog("as_new_slice")}
+          >
+            Upgrade slice
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            startIcon={<Icon name="viewDay" size="large" />}
+            description="Add it to another slice"
+            onSelect={() => setDialog("as_new_variation")}
+            disabled={!localSharedSlices.length}
+          >
+            Convert to slice variation
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            startIcon={<Icon name="driveFileMove" size="large" />}
+            description="Combine identical slices"
+            onSelect={() => setDialog("merge_with_identical")}
+            disabled={!identicalSlices.length}
+          >
+            Merge with another slice
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <ConvertLegacySliceAsNewSliceDialog
+        {...formProps}
+        isOpen={dialog === "as_new_slice"}
+      />
+      <ConvertLegacySliceAsNewVariationDialog
+        {...formProps}
+        isOpen={dialog === "as_new_variation"}
+      />
+      <ConvertLegacySliceMergeWithIdenticalDialog
+        {...formProps}
+        isOpen={dialog === "merge_with_identical"}
+      />
+    </>
+  );
+};
+
+const useIdenticalSlices = (
+  slice: NonSharedSliceInSliceZone,
+  sliceName: string,
+  localSharedSlices: ComponentUI[]
+) => {
+  return useMemo<IdenticalSlice[]>(() => {
+    const results: IdenticalSlice[] = [];
+
+    const sliceFields = getFieldMappingFingerprint(slice.value, sliceName);
+
+    for (const sharedSlice of localSharedSlices) {
+      for (const variation of sharedSlice.model.variations) {
+        const variationFields = getFieldMappingFingerprint(
+          variation,
+          sharedSlice.model.name
+        );
+
+        if (
+          sliceFields.primary === variationFields.primary &&
+          sliceFields.items === variationFields.items
+        ) {
+          results.push({
+            libraryID: sharedSlice.from,
+            sliceID: sharedSlice.model.id,
+            variationID: variation.id,
+            path: `${sharedSlice.from}::${sharedSlice.model.id}::${variation.id}`,
+          });
+        }
+      }
+    }
+
+    return results;
+  }, [slice, sliceName, localSharedSlices]);
+};