slice-machine-ui 1.14.1-dev-next-hotfix.3 → 1.14.1-dev-upgrade-legacy.2

package/components/ChangesItems/ChangesItems.tsx

@@ -118,7 +118,7 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
             gridTemplateMinPx="290px"
             defineElementKey={(slice: ComponentUI) => slice.model.name}
             renderElem={(slice: ComponentUI) => {
-              return SharedSlice.render({
+              return SharedSlice.Render({
                 showActions: true,
                 slice: slice,
                 wrapperType:

package/components/Forms/ConvertLegacySliceModal/ConvertLegacySliceModal.css.ts

@@ -0,0 +1,35 @@
+import { sprinkles } from "@prismicio/editor-ui";
+import { style } from "@vanilla-extract/css";
+
+export const form = style([
+  sprinkles({
+    display: "flex",
+    flexDirection: "column",
+  }),
+]);
+
+export const scrollArea = style([
+  sprinkles({
+    height: "100%",
+    display: "flex",
+    gap: 8,
+    paddingInline: 16,
+    paddingBlock: 16,
+  }),
+]);
+
+export const field = style([
+  sprinkles({
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+  }),
+]);
+
+export const label = style([
+  sprinkles({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+  }),
+]);

package/components/Forms/ConvertLegacySliceModal/ConvertLegacySliceModal.tsx

@@ -0,0 +1,287 @@
+import { useMemo, useState } from "react";
+import { useSelector } from "react-redux";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+  Button,
+} from "@prismicio/editor-ui";
+import { CompositeSlice } from "@prismicio/types-internal/lib/customtypes";
+
+import { getLibraries } from "@src/modules/slices";
+import { VariationSM } from "@models/common/Slice";
+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 { FormAsNewSlice } from "./FormAsNewSlice";
+import { FormAsNewVariation } from "./FormAsNewVariation";
+import { FormMergeWithIdentical } from "./FormMergeWithIdentical";
+import {
+  ConvertLegacySliceModalProps,
+  ConvertLegacySliceAndTrackArgs,
+  IdenticalSlice,
+  Type,
+} from "./types";
+
+const getFieldMappingFingerprint = (
+  slice: CompositeSlice | VariationSM
+): {
+  primary: string;
+  items: string;
+} => {
+  const primary: Record<string, string> = {};
+  const items: Record<string, string> = {};
+
+  if ("type" in slice && slice.type === "Slice") {
+    for (const key in slice["non-repeat"]) {
+      primary[key] = slice["non-repeat"][key].type;
+    }
+    for (const key in slice.repeat) {
+      items[key] = slice.repeat[key].type;
+    }
+  } else if ("id" in slice) {
+    for (const { key, value } of slice.primary ?? []) {
+      primary[key] = value.type;
+    }
+    for (const { key, value } of slice.items ?? []) {
+      items[key] = value.type;
+    }
+  }
+
+  return {
+    primary: JSON.stringify(
+      Object.keys(primary)
+        .sort()
+        .map((key) => [key, primary[key]])
+    ),
+    items: JSON.stringify(
+      Object.keys(items)
+        .sort()
+        .map((key) => [key, items[key]])
+    ),
+  };
+};
+
+export const ConvertLegacySliceModal: React.FC<
+  ConvertLegacySliceModalProps
+> = ({ slice, slices, path }) => {
+  const { refreshState, replaceCustomTypeSharedSlice, openToaster } =
+    useSliceMachineActions();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState<false | Type>(false);
+
+  const { libraries: allLibraries } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      libraries: getLibraries(store),
+    })
+  );
+
+  const {} = useSliceMachineActions();
+
+  const sliceName = useMemo(() => {
+    return slice.value.type === "Slice"
+      ? slice.value.fieldset ?? slice.key
+      : slice.key;
+  }, [slice]);
+  const libraries = useMemo(() => {
+    return allLibraries.filter((library) => library.isLocal);
+  }, [allLibraries]);
+  const localSharedSlices = useMemo(() => {
+    return libraries.map((library) => library.components).flat();
+  }, [libraries]);
+  const identicalSlices = useMemo<IdenticalSlice[]>(() => {
+    const results: IdenticalSlice[] = [];
+
+    if (slice.value.type !== "Slice") {
+      return results;
+    }
+
+    const sliceFields = getFieldMappingFingerprint(slice.value);
+
+    for (const sharedSlice of localSharedSlices) {
+      for (const variation of sharedSlice.model.variations) {
+        const variationFields = getFieldMappingFingerprint(variation);
+
+        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, localSharedSlices]);
+
+  const convertLegacySliceAndTrack = (args: ConvertLegacySliceAndTrackArgs) => {
+    if (isModalOpen === false) {
+      return;
+    }
+
+    setIsLoading(true);
+    void (async () => {
+      void telemetry.track({
+        event: "legacy-slice:converted",
+        id: args.sliceID,
+        variation: args.variationID ?? "default",
+        library: args.libraryID,
+        conversionType: isModalOpen,
+      });
+
+      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(
+          `Errors happened when converting slice \`${sliceName}\``,
+          errors
+        );
+      }
+
+      // TODO(DT-1453): Remove the need of the global getState
+      const serverState = await getState();
+      // Update Redux store
+      refreshState(serverState);
+
+      setIsLoading(false);
+      setIsModalOpen(false);
+      switch (isModalOpen) {
+        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;
+      }
+
+      replaceCustomTypeSharedSlice(
+        path.tabID,
+        [
+          ...slices
+            .map((slice) => {
+              if (
+                "model" in slice.payload &&
+                slice.payload.model.id !== args.sliceID
+              ) {
+                return slice.payload.model.id;
+              }
+              return "";
+            })
+            .filter(Boolean),
+          args.sliceID,
+        ],
+        slices
+          .map((_slice) => {
+            if ("key" in _slice.payload && _slice.payload.key !== slice.key) {
+              return _slice.payload.key;
+            }
+            return "";
+          })
+          .filter(Boolean)
+      );
+    })();
+  };
+
+  const formProps = {
+    path,
+    slice,
+    sliceName,
+    libraries,
+    localSharedSlices,
+    identicalSlices,
+    close: () => setIsModalOpen(false),
+    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={() => setIsModalOpen("as_new_slice")}
+          >
+            Upgrade slice
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            startIcon={<Icon name="viewDay" size="large" />}
+            description="Add it to another slice"
+            onSelect={() => setIsModalOpen("as_new_variation")}
+            disabled={!localSharedSlices.length}
+          >
+            Convert to slice variation
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            startIcon={<Icon name="driveFileMove" size="large" />}
+            description="Combine identical slices"
+            onSelect={() => setIsModalOpen("merge_with_identical")}
+            disabled={!identicalSlices.length}
+          >
+            Merge with another slice
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <FormAsNewSlice {...formProps} isOpen={isModalOpen === "as_new_slice"} />
+      <FormAsNewVariation
+        {...formProps}
+        isOpen={isModalOpen === "as_new_variation"}
+      />
+      <FormMergeWithIdentical
+        {...formProps}
+        isOpen={isModalOpen === "merge_with_identical"}
+      />
+    </>
+  );
+};

package/components/Forms/ConvertLegacySliceModal/FormAsNewSlice.tsx

@@ -0,0 +1,153 @@
+import { useSelector } from "react-redux";
+import { Formik } from "formik";
+import {
+  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 "../formsValidator";
+import * as styles from "./ConvertLegacySliceModal.css";
+import { FormProps } from "./types";
+
+export const FormAsNewSlice: React.FC<FormProps> = ({
+  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
+          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) => {
+            // Just a hack to trigger validation on init for better UX
+            if (!formik.values._init) {
+              void formik.setFieldValue("_init", true);
+            }
+
+            return (
+              <form
+                id="convert-legacy-slice-modal-as-new-slice"
+                data-cy="convert-legacy-slice-modal-as-new-slice"
+                className={styles.form}
+              >
+                <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>
+                  <div className={styles.field}>
+                    <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>
+                  </div>
+                  <div className={styles.field}>
+                    <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>
+                  </div>
+                </ScrollArea>
+                <DialogActions
+                  ok={{
+                    text: "Upgrade",
+                    onClick: () => void formik.submitForm(),
+                    loading: isLoading,
+                    disabled: !formik.isValid,
+                  }}
+                  cancel={{ text: "Cancel" }}
+                />
+              </form>
+            );
+          }}
+        </Formik>
+      </DialogContent>
+    </Dialog>
+  );
+};