slice-machine-ui 1.14.1-dev-upgrade-legacy.2 → 1.14.1

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

@@ -1,35 +0,0 @@
-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

@@ -1,287 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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>
-  );
-};

package/components/Forms/ConvertLegacySliceModal/FormAsNewVariation.tsx

@@ -1,234 +0,0 @@
-import { useState } from "react";
-import { Formik } from "formik";
-import {
-  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 "./ConvertLegacySliceModal.css";
-import { FormProps } from "./types";
-
-type FormValues = {
-  libraryID: string;
-  sliceID: string;
-  variationID: string;
-  variationName: string;
-};
-
-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 exists.";
-  }
-
-  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 exists.";
-  }
-
-  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;
-};
-
-export const FormAsNewVariation: React.FC<FormProps> = ({
-  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-modal-as-new-variation"
-                data-cy="convert-legacy-slice-modal-as-new-variation"
-                className={styles.form}
-              >
-                <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>
-                  <div className={styles.field}>
-                    <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>
-                  </div>
-                  <div className={styles.field}>
-                    <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"
-                    />
-                  </div>
-                  <div className={styles.field}>
-                    <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"
-                    />
-                  </div>
-                </ScrollArea>
-                <DialogActions
-                  ok={{
-                    text: "Convert",
-                    onClick: () => void formik.submitForm(),
-                    loading: isLoading,
-                    disabled: !formik.isValid,
-                  }}
-                  cancel={{ text: "Cancel" }}
-                />
-              </form>
-            );
-          }}
-        </Formik>
-      </DialogContent>
-    </Dialog>
-  );
-};