slice-machine-ui 1.13.1-dev-next-release.4 → 1.14.1-dev-upgrade-legacy.0

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,97 @@
+import { colors, sprinkles, vars } from "@prismicio/editor-ui";
+import { style } from "@vanilla-extract/css";
+
+export const layout = {
+  small: style([
+    sprinkles({
+      display: "flex",
+      flexDirection: "column",
+      gap: 12,
+    }),
+  ]),
+  normal: style([
+    sprinkles({
+      display: "flex",
+      flexDirection: "column",
+      gap: 16,
+    }),
+  ]),
+  large: style([
+    sprinkles({
+      display: "flex",
+      flexDirection: "column",
+      gap: 24,
+    }),
+  ]),
+};
+
+export const card = style([
+  sprinkles({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 8,
+    paddingRight: 16,
+    backgroundColor: colors.grey2,
+    borderColor: colors.grey6,
+    borderRadius: 6,
+    borderStyle: "solid",
+    borderWidth: 1,
+    overflowX: "hidden",
+    cursor: "pointer",
+  }),
+  {
+    selectors: {
+      "&:hover, &:focus": {
+        backgroundColor: vars.color.greyLight3,
+      },
+    },
+  },
+]);
+
+export const cardDisable = style([
+  sprinkles({
+    opacity: "60%",
+    cursor: "notAllowed",
+  }),
+]);
+
+export const cardSelected = style([
+  sprinkles({
+    backgroundColor: colors.purple10,
+  }),
+  {
+    selectors: {
+      "&:hover, &:focus": {
+        backgroundColor: vars.color.purple11,
+      },
+    },
+  },
+]);
+
+export const padInline = style([
+  sprinkles({
+    paddingInline: 8,
+  }),
+]);
+
+export const backButton = style([
+  sprinkles({
+    display: "inline-flex",
+    gap: 4,
+    alignItems: "center",
+    color: colors.grey12,
+    paddingInline: 8,
+    paddingBlock: 4,
+  }),
+  {
+    textDecoration: "none",
+    alignSelf: "start",
+    selectors: {
+      "&:hover, &:focus": {
+        borderRadius: vars.borderRadius["6"],
+        backgroundColor: vars.color.greyLight3,
+      },
+    },
+  },
+]);

package/components/Forms/ConvertLegacySliceModal/ConvertLegacySliceModal.tsx

@@ -0,0 +1,260 @@
+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 { 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 } =
+    useSliceMachineActions();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState<false | Type>(false);
+
+  const { libraries: allLibraries } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      libraries: getLibraries(store),
+    })
+  );
+
+  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);
+      close();
+      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"
+          >
+            Turn into shared Slice
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            startIcon={<Icon name="folder" size="large" />}
+            description="A brand new shared slice"
+            onSelect={() => setIsModalOpen("as_new_slice")}
+          >
+            Convert to new slice
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            startIcon={<Icon name="viewDay" size="large" />}
+            description="An existing slice's new variation"
+            onSelect={() => setIsModalOpen("as_new_variation")}
+            disabled={!localSharedSlices.length}
+          >
+            Create a new variation
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            startIcon={<Icon name="driveFileMove" size="large" />}
+            description="Identical slices can be merged"
+            onSelect={() => setIsModalOpen("merge_with_identical")}
+            disabled={!identicalSlices.length}
+          >
+            Merge with an existing 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,165 @@
+import { useSelector } from "react-redux";
+import { Field, Input, Label } from "theme-ui";
+import Select from "react-select";
+import { Formik } from "formik";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  ScrollArea,
+  Text,
+  tokens,
+} 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="small"
+    >
+      <DialogHeader title="Convert to new slice" />
+      <DialogContent>
+        <Formik
+          validateOnChange
+          initialValues={{
+            sliceName: pascalize(slice.key),
+            from: libraries[0]?.name,
+          }}
+          validate={(values) => {
+            return validateAsNewSliceValues(values, libraries, remoteSlices);
+          }}
+          onSubmit={(values) => {
+            onSubmit({ libraryID: values.from, sliceID: values.sliceName });
+          }}
+        >
+          {(formik) => {
+            return (
+              <form
+                id="convert-legacy-slice-modal-as-new-slice"
+                data-cy="convert-legacy-slice-modal-as-new-slice"
+                className={styles.layout.small}
+              >
+                <ScrollArea
+                  style={{
+                    height: "100%",
+                    display: "flex",
+                    gap: tokens.space[12],
+                    paddingInline: tokens.space[24],
+                    paddingBlock: tokens.space[16],
+                  }}
+                >
+                  <div>
+                    <Label
+                      htmlFor="sliceName"
+                      sx={{
+                        mb: 2,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 2,
+                      }}
+                    >
+                      Slice Name
+                      {typeof formik.errors.sliceName === "string" ? (
+                        <Text variant="small" color="tomato10">
+                          {formik.errors.sliceName}
+                        </Text>
+                      ) : null}
+                    </Label>
+                    <Field
+                      autoComplete="off"
+                      id="sliceName"
+                      name="sliceName"
+                      type="text"
+                      placeholder={`Pascalised Slice API ID (e.g. ${pascalize(
+                        slice.key
+                      )})`}
+                      as={Input}
+                      maxLength={30}
+                      value={formik.values.sliceName}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        void formik.setFieldValue(
+                          "sliceName",
+                          e.currentTarget.value
+                        )
+                      }
+                      data-cy="slice-name-input"
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="slice" sx={{ mb: 2 }}>
+                      Target Library
+                    </Label>
+                    <Select
+                      name="slice"
+                      options={libraries.map((v) => ({
+                        value: v.name,
+                        label: v.name,
+                      }))}
+                      onChange={(option) =>
+                        option
+                          ? void formik.setFieldValue("from", option.value)
+                          : null
+                      }
+                      defaultValue={{
+                        value: formik.values.from,
+                        label: formik.values.from,
+                      }}
+                      styles={{
+                        option: (provided) => ({
+                          ...provided,
+                          // Color of item text (Dark/Shade-01)
+                          color: "#161618",
+                        }),
+                      }}
+                      theme={(theme) => {
+                        return {
+                          ...theme,
+                          colors: {
+                            ...theme.colors,
+                            // Background of selected item (Gray/Shade-05)
+                            primary: "#E9E8EA",
+                          },
+                        };
+                      }}
+                      menuPortalTarget={document.body}
+                    />
+                  </div>
+                </ScrollArea>
+                <DialogActions
+                  ok={{
+                    text: "Convert",
+                    onClick: () => void formik.submitForm(),
+                    loading: isLoading,
+                    disabled: !formik.isValid,
+                  }}
+                  cancel={{ text: "Cancel" }}
+                />
+              </form>
+            );
+          }}
+        </Formik>
+      </DialogContent>
+    </Dialog>
+  );
+};