slice-machine-ui 2.20.4 → 2.20.5-alpha.jp-import-slice-base.1

package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/utils/sliceWithoutConflicts.ts

@@ -0,0 +1,51 @@
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+
+import { NewSlice } from "../types";
+
+/**
+ * If needed, assigns new ids and names to avoid conflicts with existing slices.
+ * Names are compared case-insensitively to avoid conflicts
+ * between folder names with different casing.
+ */
+export function sliceWithoutConflicts({
+  existingSlices,
+  newSlices,
+  slice,
+}: {
+  existingSlices: SharedSlice[];
+  newSlices: NewSlice[];
+  slice: SharedSlice;
+}): SharedSlice {
+  const existingIds = new Set<string>();
+  const existingNames = new Set<string>();
+
+  for (const { id, name } of existingSlices) {
+    existingIds.add(id);
+    existingNames.add(name.toLowerCase());
+  }
+
+  for (const s of newSlices) {
+    existingIds.add(s.model.id);
+    existingNames.add(s.model.name.toLowerCase());
+  }
+
+  let id = slice.id;
+  let counter = 2;
+  while (existingIds.has(id)) {
+    id = `${slice.id}_${counter}`;
+    counter++;
+  }
+
+  let name = slice.name;
+  counter = 2;
+  while (existingNames.has(name.toLowerCase())) {
+    name = `${slice.name}${counter}`;
+    counter++;
+  }
+
+  return {
+    ...slice,
+    id,
+    name,
+  };
+}

package/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx

@@ -16,6 +16,7 @@ export type SliceZoneBlankSlateProps = {
   openCreateSliceModal: () => void;
   openCreateSliceFromImageModal: () => void;
   openSlicesTemplatesModal: () => void;
+  openImportSlicesFromLibraryModal: () => void;
   projectHasAvailableSlices: boolean;
   isSlicesTemplatesSupported: boolean;
 };
@@ -24,6 +25,7 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
   openCreateSliceModal,
   openCreateSliceFromImageModal,
   openUpdateSliceZoneModal,
+  openImportSlicesFromLibraryModal,
   openSlicesTemplatesModal,
   projectHasAvailableSlices,
   isSlicesTemplatesSupported,
@@ -88,6 +90,15 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
               {sliceCreationOptions.fromExisting.title}
             </ActionListItem>
           )}
+          <ActionListItem
+            renderStartIcon={() =>
+              sliceCreationOptions.importFromExternal.BackgroundIcon
+            }
+            onClick={openImportSlicesFromLibraryModal}
+            description={sliceCreationOptions.importFromExternal.description}
+          >
+            {sliceCreationOptions.importFromExternal.title}
+          </ActionListItem>
         </ActionList>
       </BlankSlateActions>
     </BlankSlate>

package/src/features/customTypes/customTypesBuilder/shared/getSubmitButtonLabel.ts

@@ -0,0 +1,12 @@
+export const getSubmitButtonLabel = (
+  location: "custom_type" | "page_type" | "slices",
+) => {
+  switch (location) {
+    case "custom_type":
+      return "Add to type";
+    case "page_type":
+      return "Add to page";
+    case "slices":
+      return "Add to slices";
+  }
+};

package/src/features/customTypes/customTypesBuilder/shared/useExistingSlices.ts

@@ -0,0 +1,26 @@
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { useEffect, useRef } from "react";
+
+import { managerClient } from "@/managerClient";
+
+/**
+ * Keeps track of the existing slices in the project.
+ * Re-fetches them when the modal is opened.
+ */
+export function useExistingSlices({ open }: { open: boolean }) {
+  const ref = useRef<SharedSlice[]>([]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    ref.current = [];
+    managerClient.slices
+      .readAllSlices()
+      .then((slices) => {
+        ref.current = slices.models.map(({ model }) => model);
+      })
+      .catch(() => null);
+  }, [open]);
+
+  return ref;
+}

package/src/features/customTypes/customTypesBuilder/sliceCreationOptions.tsx

@@ -64,5 +64,19 @@ export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
       title: "Reuse an existing slice",
       description: "Select from your created slices.",
     },
+    importFromExternal: {
+      BackgroundIcon: (
+        <BackgroundIcon
+          name="cloudUpload"
+          size={menuType === "ActionList" ? "small" : "extraSmall"}
+          iconSize={menuType === "ActionList" ? "medium" : "small"}
+          color="white"
+          variant="solid"
+          radius={6}
+        />
+      ),
+      title: "Add from external library",
+      description: "Import slices from a github repository.",
+    },
   };
 };

package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/index.tsx

@@ -17,6 +17,7 @@ import { telemetry } from "@/apiClient";
 import { ListHeader } from "@/components/List";
 import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
 import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { ImportSlicesFromLibraryModal } from "@/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal";
 import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
 import { SliceZoneBlankSlate } from "@/features/customTypes/customTypesBuilder/SliceZoneBlankSlate";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
@@ -121,6 +122,10 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
   const [isCreateSliceFromImageModalOpen, setIsCreateSliceFromImageModalOpen] =
     useState(false);
+  const [
+    isImportSlicesFromLibraryModalOpen,
+    setIsImportSlicesFromLibraryModalOpen,
+  ] = useState(false);
   const { remoteSlices, libraries } = useSelector(
     (store: SliceMachineStoreType) => ({
       remoteSlices: getRemoteSlices(store),
@@ -197,6 +202,10 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     });
   };
 
+  const openImportSlicesFromLibraryModal = () => {
+    setIsImportSlicesFromLibraryModalOpen(true);
+  };
+
   const closeUpdateSliceZoneModal = () => {
     setIsUpdateSliceZoneModalOpen(false);
   };
@@ -213,6 +222,10 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     setIsSlicesTemplatesModalOpen(false);
   };
 
+  const closeImportSlicesFromLibraryModal = () => {
+    setIsImportSlicesFromLibraryModalOpen(false);
+  };
+
   return (
     <>
       <ListHeader
@@ -272,6 +285,17 @@ const SliceZone: React.FC<SliceZoneProps> = ({
                     {sliceCreationOptions.fromExisting.title}
                   </DropdownMenuItem>
                 ) : undefined}
+                <DropdownMenuItem
+                  onSelect={openImportSlicesFromLibraryModal}
+                  renderStartIcon={() =>
+                    sliceCreationOptions.importFromExternal.BackgroundIcon
+                  }
+                  description={
+                    sliceCreationOptions.importFromExternal.description
+                  }
+                >
+                  {sliceCreationOptions.importFromExternal.title}
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           ) : undefined
@@ -324,6 +348,9 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               openCreateSliceFromImageModal={() =>
                 void openCreateSliceFromImageModal()
               }
+              openImportSlicesFromLibraryModal={() =>
+                void openImportSlicesFromLibraryModal()
+              }
               openSlicesTemplatesModal={openSlicesTemplatesModal}
               projectHasAvailableSlices={availableSlicesToAdd.length > 0}
               isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
@@ -444,6 +471,30 @@ const SliceZone: React.FC<SliceZoneProps> = ({
         }}
         onClose={closeCreateSliceFromImageModal}
       />
+      <ImportSlicesFromLibraryModal
+        open={isImportSlicesFromLibraryModalOpen}
+        location={`${customType.format}_type`}
+        onSuccess={({ slices, library }) => {
+          const newCustomType = addSlicesToSliceZone({
+            customType,
+            tabId,
+            slices: slices.map((slice) => slice.model),
+          });
+          setCustomType({
+            customType: CustomTypes.fromSM(newCustomType),
+            onSaveCallback: () => {
+              toast.success(
+                <ToastMessageWithPath
+                  message="Slice(s) added to slice zone and created at: "
+                  path={library}
+                />,
+              );
+            },
+          });
+          closeImportSlicesFromLibraryModal();
+        }}
+        onClose={closeImportSlicesFromLibraryModal}
+      />
     </>
   );
 };

package/src/pages/slices.tsx

@@ -15,6 +15,7 @@ import { BaseStyles, Flex, Link, Text } from "theme-ui";
 
 import { BreadcrumbItem } from "@/components/Breadcrumb";
 import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
+import { ImportSlicesFromLibraryModal } from "@/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal";
 import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
 import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
 import { SLICES_CONFIG } from "@/features/slices/slicesConfig";
@@ -64,6 +65,10 @@ const SlicesIndex: React.FunctionComponent = () => {
   const [isRenameSliceModalOpen, setIsRenameSliceModalOpen] = useState(false);
   const [isCreateSliceFromImageModalOpen, setIsCreateSliceFromImageModalOpen] =
     useState(false);
+  const [
+    isImportSlicesFromLibraryModalOpen,
+    setIsImportSlicesFromLibraryModalOpen,
+  ] = useState(false);
 
   const localLibraries: LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
@@ -145,6 +150,17 @@ const SlicesIndex: React.FunctionComponent = () => {
                 >
                   {sliceCreationOptions.fromScratch.title}
                 </DropdownMenuItem>
+                <DropdownMenuItem
+                  renderStartIcon={() =>
+                    sliceCreationOptions.importFromExternal.BackgroundIcon
+                  }
+                  onSelect={() => setIsImportSlicesFromLibraryModalOpen(true)}
+                  description={
+                    sliceCreationOptions.importFromExternal.description
+                  }
+                >
+                  {sliceCreationOptions.importFromExternal.title}
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           ) : undefined}
@@ -340,6 +356,20 @@ const SlicesIndex: React.FunctionComponent = () => {
             }}
             onClose={closeCreateSliceFromImageModal}
           />
+          <ImportSlicesFromLibraryModal
+            open={isImportSlicesFromLibraryModalOpen}
+            location="slices"
+            onSuccess={({ library }: { library: string }) => {
+              toast.success(
+                <ToastMessageWithPath
+                  message="Slice(s) added to slice zone and created at: "
+                  path={library}
+                />,
+              );
+              setIsImportSlicesFromLibraryModalOpen(false);
+            }}
+            onClose={() => setIsImportSlicesFromLibraryModalOpen(false)}
+          />
         </AppLayoutContent>
       </AppLayout>
     </>