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

package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/ReuseExistingSlicesContext.tsx

@@ -0,0 +1,279 @@
+import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { toast } from "react-toastify";
+
+import { getState, telemetry } from "@/apiClient";
+import { useOnboarding } from "@/features/onboarding/useOnboarding";
+import { useAutoSync } from "@/features/sync/AutoSyncProvider";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
+import type { SliceImport } from "./types";
+import { NewSlice } from "./types";
+import { addSlices } from "./utils/addSlices";
+import { sliceWithoutConflicts } from "./utils/sliceWithoutConflicts";
+
+interface ReuseExistingSlicesContextValue {
+  selectedLocalSlices: ComponentUI[];
+  selectedLibrarySlices: SliceImport[];
+  toggleLocalSlice: (slice: ComponentUI) => void;
+  toggleLibrarySlice: (slice: SliceImport) => void;
+  setAllLibrarySlices: (slices: SliceImport[]) => void;
+  reset: () => void;
+  submit: (args: {
+    existingSlices: React.MutableRefObject<SharedSlice[]>;
+    location: "custom_type" | "page_type" | "slices";
+    resetSlices: () => void;
+  }) => Promise<{ slices: SharedSlice[]; library?: string }>;
+  isSubmitting: boolean;
+  totalSelected: number;
+}
+
+const ReuseExistingSlicesContext = createContext<
+  ReuseExistingSlicesContextValue | undefined
+>(undefined);
+
+interface ReuseExistingSlicesProviderProps {
+  children: ReactNode;
+}
+
+export function ReuseExistingSlicesProvider({
+  children,
+}: ReuseExistingSlicesProviderProps) {
+  const [localSlices, setSelectedLocalSlices] = useState<ComponentUI[]>([]);
+  const [librarySlices, setSelectedLibrarySlices] = useState<SliceImport[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { syncChanges } = useAutoSync();
+  const { createSliceSuccess, updateSliceMockSuccess } =
+    useSliceMachineActions();
+  const { completeStep } = useOnboarding();
+
+  /**
+   * Keeps track of the current instance id.
+   * When the modal is closed, the id is reset.
+   */
+  const id = useRef(crypto.randomUUID());
+
+  const toggleLocalSlice = useCallback((slice: ComponentUI) => {
+    setSelectedLocalSlices((prev) => {
+      const isSelected = prev.some((s) => s.model.id === slice.model.id);
+      if (isSelected) {
+        return prev.filter((s) => s.model.id !== slice.model.id);
+      }
+      return [...prev, slice];
+    });
+  }, []);
+
+  const toggleLibrarySlice = useCallback((slice: SliceImport) => {
+    setSelectedLibrarySlices((prev) => {
+      const isSelected = prev.some((s) => s.model.id === slice.model.id);
+      if (isSelected) {
+        return prev.filter((s) => s.model.id !== slice.model.id);
+      }
+      return [...prev, slice];
+    });
+  }, []);
+
+  const setAllLibrarySlices = useCallback((slices: SliceImport[]) => {
+    setSelectedLibrarySlices(slices);
+  }, []);
+
+  const reset = useCallback(() => {
+    setSelectedLocalSlices([]);
+    setSelectedLibrarySlices([]);
+    id.current = crypto.randomUUID();
+  }, []);
+
+  const submit = useCallback(
+    async (args: {
+      existingSlices: React.MutableRefObject<SharedSlice[]>;
+      location: "custom_type" | "page_type" | "slices";
+      resetSlices: () => void;
+    }): Promise<{ slices: SharedSlice[]; library?: string }> => {
+      const { existingSlices, location, resetSlices } = args;
+      const totalSelected = localSlices.length + librarySlices.length;
+
+      if (totalSelected === 0) {
+        toast.error("Please select at least one slice");
+        throw new Error("No slices selected");
+      }
+
+      // Prepare local slices (just extract models)
+      const localSliceModels = localSlices.map((slice) => slice.model);
+
+      // Prepare library slices for import
+      const librarySlicesToImport: NewSlice[] = librarySlices.map((slice) => ({
+        image: slice.image,
+        model: slice.model,
+        files: slice.files,
+        componentContents: slice.componentContents,
+        mocks: slice.mocks,
+        screenshots: slice.screenshots,
+      }));
+
+      // If there are library slices, create them first
+      if (librarySlicesToImport.length > 0) {
+        // Ensure ids and names are conflict-free against existing and newly-added slices
+        const conflictFreeSlices: NewSlice[] = [];
+        const allExistingSlices: SharedSlice[] = [
+          ...existingSlices.current,
+          ...localSliceModels,
+        ] as SharedSlice[];
+
+        for (const s of librarySlicesToImport) {
+          const adjustedModel = sliceWithoutConflicts({
+            existingSlices: allExistingSlices,
+            newSlices: conflictFreeSlices,
+            slice: s.model,
+          });
+          conflictFreeSlices.push({ ...s, model: adjustedModel });
+        }
+
+        const currentId = id.current;
+        setIsSubmitting(true);
+
+        try {
+          const { slices: createdSlices, library } =
+            await addSlices(conflictFreeSlices);
+
+          if (currentId !== id.current) {
+            throw new Error("Modal instance changed");
+          }
+
+          // Wait a moment to ensure all file writes are complete
+          await new Promise((resolve) => setTimeout(resolve, 100));
+
+          const serverState = await getState();
+
+          // Ensure mocks are included in the libraries data before updating store
+          const librariesWithMocks = serverState.libraries.map((lib) => {
+            if (lib.name !== library) return lib;
+
+            return {
+              ...lib,
+              components: lib.components.map((component) => {
+                // Find the corresponding slice from librarySlicesToImport to get its mocks
+                const importedSlice = conflictFreeSlices.find(
+                  (s) => s.model.id === component.model.id,
+                );
+
+                // If mocks are already in component, use them; otherwise use imported mocks
+                const mocks =
+                  component.mocks && component.mocks.length > 0
+                    ? component.mocks
+                    : importedSlice?.mocks;
+
+                return {
+                  ...component,
+                  mocks: mocks ?? component.mocks,
+                };
+              }),
+            };
+          });
+
+          createSliceSuccess(librariesWithMocks);
+
+          // Also update mocks individually to ensure they're in the store
+          for (const slice of librarySlicesToImport) {
+            if (
+              slice.mocks &&
+              Array.isArray(slice.mocks) &&
+              slice.mocks.length > 0
+            ) {
+              updateSliceMockSuccess({
+                libraryID: library,
+                sliceID: slice.model.id,
+                mocks: slice.mocks,
+              });
+            }
+          }
+
+          syncChanges();
+
+          // Combine local slices with created library slices
+          const allSlices: SharedSlice[] = [
+            ...localSliceModels,
+            ...createdSlices.map((s) => s.model),
+          ] as SharedSlice[];
+
+          setIsSubmitting(false);
+          reset();
+          resetSlices();
+
+          void completeStep("createSlice");
+
+          for (const { model } of createdSlices) {
+            void telemetry.track({
+              event: "slice:created",
+              id: model.id,
+              name: model.name,
+              library,
+              location,
+              mode: "import",
+            });
+          }
+
+          return { slices: allSlices, library };
+        } catch (error) {
+          if (currentId !== id.current) {
+            throw error;
+          }
+          setIsSubmitting(false);
+          toast.error("An unexpected error happened while adding slices.");
+          throw error;
+        }
+      } else {
+        // Only local slices selected, no need to create anything
+        reset();
+        return { slices: localSliceModels as SharedSlice[] };
+      }
+    },
+    [
+      localSlices,
+      librarySlices,
+      syncChanges,
+      createSliceSuccess,
+      updateSliceMockSuccess,
+      completeStep,
+      reset,
+    ],
+  );
+
+  const totalSelected = localSlices.length + librarySlices.length;
+
+  return (
+    <ReuseExistingSlicesContext.Provider
+      value={{
+        selectedLocalSlices: localSlices,
+        selectedLibrarySlices: librarySlices,
+        toggleLocalSlice,
+        toggleLibrarySlice,
+        setAllLibrarySlices,
+        reset,
+        submit,
+        isSubmitting,
+        totalSelected,
+      }}
+    >
+      {children}
+    </ReuseExistingSlicesContext.Provider>
+  );
+}
+
+export function useReuseExistingSlicesContext() {
+  const context = useContext(ReuseExistingSlicesContext);
+  if (context === undefined) {
+    throw new Error(
+      "useReuseExistingSlicesContext must be used within ReuseExistingSlicesProvider",
+    );
+  }
+  return context;
+}

package/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/hooks/useImportSlicesFromGithub.ts

@@ -26,7 +26,7 @@ export function useImportSlicesFromGithub() {
       if (!owner || !repo) {
         toast.error("Invalid GitHub URL format");
         setIsLoadingSlices(false);
-        return;
+        throw new Error("Invalid GitHub URL format");
       }
 
       const branch = await getDefaultBranch({ owner, repo });
@@ -43,14 +43,14 @@ export function useImportSlicesFromGithub() {
           }`,
         );
         setIsLoadingSlices(false);
-        return;
+        throw error;
       }
 
       if (libraries.length === 0) {
         console.warn("No libraries were found in the SM config.");
         setIsLoadingSlices(false);
         toast.error("No libraries were found in the SM config.");
-        return;
+        throw new Error("No libraries were found in the SM config.");
       }
 
       const fetchedSlices = await fetchSlicesFromLibraries({
@@ -63,7 +63,7 @@ export function useImportSlicesFromGithub() {
       if (fetchedSlices.length === 0) {
         toast.error("Error fetching slices from the repository");
         setIsLoadingSlices(false);
-        return;
+        throw new Error("No slices were found in the libraries.");
       }
 
       setSlices(fetchedSlices);
@@ -71,6 +71,8 @@ export function useImportSlicesFromGithub() {
       toast.success(
         `Found ${fetchedSlices.length} slice(s) from ${libraries.length} library/libraries`,
       );
+
+      return fetchedSlices;
     } catch (error) {
       console.error("Error importing from GitHub:", error);
       toast.error(
@@ -79,6 +81,7 @@ export function useImportSlicesFromGithub() {
         }`,
       );
       setIsLoadingSlices(false);
+      return [];
     }
   };
 

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

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

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

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

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

@@ -64,19 +64,5 @@ 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/UpdateSliceZoneModalList.tsx

@@ -4,11 +4,9 @@ import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
 import Grid from "@/legacy/components/Grid";
 import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
 
-import { SliceZoneFormValues } from "./UpdateSliceZoneModal";
-
 const UpdateSliceZoneModalList: React.FC<{
   availableSlices: ReadonlyArray<ComponentUI>;
-  values: SliceZoneFormValues;
+  values: { sliceKeys: string[] };
 }> = ({ availableSlices, values }) => (
   <FieldArray
     name="sliceKeys"

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

@@ -45,7 +45,6 @@ import type { SliceMachineStoreType } from "@/redux/type";
 import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
 import { SlicesList } from "./List";
 import { SlicesTemplatesModal } from "./SlicesTemplatesModal";
-import UpdateSliceZoneModal from "./UpdateSliceZoneModal";
 
 const mapAvailableAndSharedSlices = (
   sliceZone: SlicesSM,
@@ -122,10 +121,6 @@ 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),
@@ -202,10 +197,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     });
   };
 
-  const openImportSlicesFromLibraryModal = () => {
-    setIsImportSlicesFromLibraryModalOpen(true);
-  };
-
   const closeUpdateSliceZoneModal = () => {
     setIsUpdateSliceZoneModalOpen(false);
   };
@@ -222,10 +213,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     setIsSlicesTemplatesModalOpen(false);
   };
 
-  const closeImportSlicesFromLibraryModal = () => {
-    setIsImportSlicesFromLibraryModalOpen(false);
-  };
-
   return (
     <>
       <ListHeader
@@ -274,27 +261,14 @@ const SliceZone: React.FC<SliceZoneProps> = ({
                   </DropdownMenuItem>
                 ) : undefined}
 
-                {availableSlicesToAdd.length > 0 ? (
-                  <DropdownMenuItem
-                    onSelect={openUpdateSliceZoneModal}
-                    renderStartIcon={() =>
-                      sliceCreationOptions.fromExisting.BackgroundIcon
-                    }
-                    description={sliceCreationOptions.fromExisting.description}
-                  >
-                    {sliceCreationOptions.fromExisting.title}
-                  </DropdownMenuItem>
-                ) : undefined}
                 <DropdownMenuItem
-                  onSelect={openImportSlicesFromLibraryModal}
+                  onSelect={openUpdateSliceZoneModal}
                   renderStartIcon={() =>
-                    sliceCreationOptions.importFromExternal.BackgroundIcon
-                  }
-                  description={
-                    sliceCreationOptions.importFromExternal.description
+                    sliceCreationOptions.fromExisting.BackgroundIcon
                   }
+                  description={sliceCreationOptions.fromExisting.description}
                 >
-                  {sliceCreationOptions.importFromExternal.title}
+                  {sliceCreationOptions.fromExisting.title}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -348,9 +322,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               openCreateSliceFromImageModal={() =>
                 void openCreateSliceFromImageModal()
               }
-              openImportSlicesFromLibraryModal={() =>
-                void openImportSlicesFromLibraryModal()
-              }
               openSlicesTemplatesModal={openSlicesTemplatesModal}
               projectHasAvailableSlices={availableSlicesToAdd.length > 0}
               isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
@@ -358,28 +329,33 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           </Box>
         )
       ) : undefined}
-      {isUpdateSliceZoneModalOpen && (
-        <UpdateSliceZoneModal
-          formId={`tab-slicezone-form-${tabId}`}
-          availableSlices={availableSlicesToAdd}
-          onSubmit={(slices: SharedSlice[]) => {
-            const newCustomType = addSlicesToSliceZone({
-              customType,
-              tabId,
-              slices,
-            });
-            setCustomType({
-              customType: CustomTypes.fromSM(newCustomType),
-              onSaveCallback: () => {
-                toast.success("Slice(s) added to slice zone");
-              },
-            });
-            void completeStep("createSlice");
-            closeUpdateSliceZoneModal();
-          }}
-          close={closeUpdateSliceZoneModal}
-        />
-      )}
+      <ImportSlicesFromLibraryModal
+        open={isUpdateSliceZoneModalOpen}
+        location={`${customType.format}_type`}
+        typeName={customType.label ?? customType.id}
+        availableSlices={availableSlicesToAdd}
+        onSuccess={({ slices, library }) => {
+          const newCustomType = addSlicesToSliceZone({
+            customType,
+            tabId,
+            slices,
+          });
+          setCustomType({
+            customType: CustomTypes.fromSM(newCustomType),
+            onSaveCallback: () => {
+              toast.success(
+                <ToastMessageWithPath
+                  message="Slice(s) added to slice zone and created at: "
+                  path={library ?? ""}
+                />,
+              );
+            },
+          });
+          void completeStep("createSlice");
+          closeUpdateSliceZoneModal();
+        }}
+        onClose={closeUpdateSliceZoneModal}
+      />
       {isSlicesTemplatesModalOpen && (
         <SlicesTemplatesModal
           formId={`tab-slicezone-form-${tabId}`}
@@ -471,30 +447,6 @@ 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,7 +15,6 @@ 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";
@@ -65,10 +64,6 @@ 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,
@@ -150,17 +145,6 @@ 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}
@@ -356,20 +340,6 @@ 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>
     </>