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

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

@@ -4,9 +4,11 @@ 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: { sliceKeys: string[] };
+  values: SliceZoneFormValues;
 }> = ({ availableSlices, values }) => (
   <FieldArray
     name="sliceKeys"

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

@@ -45,6 +45,7 @@ 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,
@@ -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
@@ -261,14 +274,27 @@ 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={openUpdateSliceZoneModal}
+                  onSelect={openImportSlicesFromLibraryModal}
                   renderStartIcon={() =>
-                    sliceCreationOptions.fromExisting.BackgroundIcon
+                    sliceCreationOptions.importFromExternal.BackgroundIcon
+                  }
+                  description={
+                    sliceCreationOptions.importFromExternal.description
                   }
-                  description={sliceCreationOptions.fromExisting.description}
                 >
-                  {sliceCreationOptions.fromExisting.title}
+                  {sliceCreationOptions.importFromExternal.title}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -322,6 +348,9 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               openCreateSliceFromImageModal={() =>
                 void openCreateSliceFromImageModal()
               }
+              openImportSlicesFromLibraryModal={() =>
+                void openImportSlicesFromLibraryModal()
+              }
               openSlicesTemplatesModal={openSlicesTemplatesModal}
               projectHasAvailableSlices={availableSlicesToAdd.length > 0}
               isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
@@ -329,33 +358,28 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           </Box>
         )
       ) : undefined}
-      <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}
-      />
+      {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}
+        />
+      )}
       {isSlicesTemplatesModalOpen && (
         <SlicesTemplatesModal
           formId={`tab-slicezone-form-${tabId}`}
@@ -447,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>
     </>

package/out/_next/static/60BSwFmsh1-aNIyMe29hH/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,d,n,u,h,f,k,j,l,p,g,o,r,m,_,y,I,N){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,t,o,r,"static/chunks/pages/index-0d8cb369de720a35.js"],"/_error":["static/chunks/pages/_error-fedd2c6ebd3d27b9.js"],"/changelog":[c,i,"static/chunks/870-a72b74312773efea.js","static/chunks/pages/changelog-bc83e25e8d316ca9.js"],"/changes":[c,b,"static/chunks/8eec4907-b712959d9f984b68.js",a,"static/chunks/125-00b909bdbab2ca15.js",e,n,"static/css/d98ebc475f8423a3.css","static/chunks/pages/changes-6f371ebe52dbe76a.js"],"/custom-types":[s,t,o,r,"static/chunks/pages/custom-types-5acd56959b60346f.js"],"/custom-types/[customTypeId]":[c,u,h,f,k,s,a,i,d,j,l,m,e,t,p,g,_,y,"static/chunks/pages/custom-types/[customTypeId]-80defa14b6ea36f7.js"],"/labs":["static/chunks/pages/labs-16d118a80936d583.js"],"/page-types/[pageTypeId]":[c,u,h,f,k,s,a,i,d,j,l,m,e,t,p,g,_,y,"static/chunks/pages/page-types/[pageTypeId]-f4ff9ad74b44bf09.js"],"/slices":[c,b,I,s,a,d,N,e,g,n,"static/css/efa5152b7c0f35c0.css","static/chunks/pages/slices-93fc784c443a996c.js"],"/slices/[lib]/[sliceName]/[variation]":[c,b,u,h,f,k,I,s,a,i,d,j,N,"static/chunks/484-3e011e79c41f0342.js",e,p,n,"static/css/e8e03c0d4003d1eb.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-0e9aa745ed9fe1ec.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[b,"static/chunks/72585f70-28b4d7d5384b3703.js",l,"static/chunks/429-e5d7e39160de9f5e.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-873c0c89aaf50b3c.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/397-e6c340070a3bcb41.js","static/chunks/59b4e022-ef680789f7cc9b11.js","static/chunks/66-d9d3bcb5d041cb6d.js","static/chunks/882-8ab59c0c72307c87.js","static/chunks/647-a29bee23cb9ac7a2.js","static/chunks/183-4ea255b867ff171b.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/344-b64f09e670634ed1.js","static/chunks/593-7ffd1197c3405ef8.js","static/chunks/f36c6662-1f3a854183168b10.js","static/chunks/4c744e84-480e426e4b1cfef3.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-09fb3b997ad1eb70.js","static/chunks/256-07f768a2b19b0a0e.js","static/chunks/130-e1a16d2f94fb2b64.js","static/chunks/630-4fe1e982234bd925.js","static/chunks/633-2d20c3e815c79c7f.js","static/chunks/248-2902bda47821f37b.js","static/css/4e475d945cf8a890.css","static/chunks/21-f3962d02eda0a46e.js","static/chunks/660-a3ec593dcfbb44c9.js","static/css/56f2a6684a524374.css","static/chunks/52d4c156-89c6ec6efca0a0bb.js","static/chunks/444-d39213143f782fec.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();