refactor: simplify, cleanup and reuse existing components

Author: jomifepe

packages/manager/src/constants/API_ENDPOINTS.ts

@@ -49,7 +49,7 @@ export const API_ENDPOINTS: APIEndpoints = (() => {
 						"https://api.internal.wroom.io/custom-type/",
 				),
 				GitService: addTrailingSlash(
-					process.env.git_service_endpoint ?? "https://git.internal.wroom.io/",
+					process.env.git_service_api ?? "https://api.internal.wroom.io/git/",
 				),
 			};
 
@@ -100,7 +100,7 @@ If you didn't intend to run Slice Machine this way, stop it immediately and unse
 				RepositoryService: "https://api.internal.wroom.io/repository/",
 				LocaleService: "https://api.internal.wroom.io/locale/",
 				CustomTypeService: "https://api.internal.wroom.io/custom-type/",
-				GitService: "https://git.internal.wroom.io/",
+				GitService: "https://api.internal.wroom.io/git/",
 			};
 		}
 
@@ -119,7 +119,7 @@ If you didn't intend to run Slice Machine this way, stop it immediately and unse
 				RepositoryService: `https://api.internal.${process.env.SM_ENV}-wroom.com/repository/`,
 				LocaleService: `https://api.internal.${process.env.SM_ENV}-wroom.com/locale/`,
 				CustomTypeService: `https://api.internal.${process.env.SM_ENV}-wroom.com/custom-type/`,
-				GitService: `https://git.internal.${process.env.SM_ENV}-wroom.com/`,
+				GitService: `https://api.internal.${process.env.SM_ENV}-wroom.com/git/`,
 			};
 		}
 
@@ -137,7 +137,7 @@ If you didn't intend to run Slice Machine this way, stop it immediately and unse
 				RepositoryService: "https://api.internal.prismic.io/repository/",
 				LocaleService: "https://api.internal.prismic.io/locale/",
 				CustomTypeService: "https://api.internal.prismic.io/custom-type/",
-				GitService: "https://git.internal.prismic.io/",
+				GitService: "https://api.internal.prismic.io/git/",
 			};
 		}
 	}

packages/manager/src/managers/prismicRepository/PrismicRepositoryManager.ts

@@ -758,20 +758,17 @@ export class PrismicRepositoryManager extends BaseManager {
 			);
 		}
 
-		if (value) {
-			return value;
-		}
-
-		throw new Error("Failed to fetch integrations.");
+		return value;
 	}
 
 	async fetchGitIntegrationToken(args: {
 		integrationId: string;
 	}): Promise<z.infer<typeof GitIntegrationTokenSchema>> {
+		const { integrationId } = args;
 		const repositoryName = await this.project.getRepositoryName();
 
 		const url = new URL(
-			`integrations/${args.integrationId}/token`,
+			`integrations/${integrationId}/token`,
 			API_ENDPOINTS.GitService,
 		);
 		url.searchParams.set("repository", repositoryName);
@@ -781,7 +778,7 @@ export class PrismicRepositoryManager extends BaseManager {
 		if (!res.ok) {
 			const text = await res.text();
 			throw new Error(
-				`Failed to fetch token for integration ${args.integrationId}`,
+				`Failed to fetch token for integration ${integrationId}`,
 				{ cause: text },
 			);
 		}

packages/manager/test/SliceMachineManager-getState.test.ts

@@ -28,7 +28,7 @@ it("returns global Slice Machine state", async () => {
 		RepositoryService: "https://api.internal.prismic.io/repository/",
 		LocaleService: "https://api.internal.prismic.io/locale/",
 		CustomTypeService: "https://api.internal.prismic.io/custom-type/",
-		GitService: "https://git.internal.prismic.io/",
+		GitService: "https://api.internal.prismic.io/git/",
 	});
 	expect(result.clientError).toStrictEqual({
 		name: new UnauthenticatedError().name,

packages/slice-machine/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/EmptyView.tsx

@@ -1,4 +1,12 @@
-import { Box, Icon, Text, ThemeKeys } from "@prismicio/editor-ui";
+import {
+  BlankSlate,
+  BlankSlateActions,
+  BlankSlateDescription,
+  BlankSlateIcon,
+  BlankSlateTitle,
+  Box,
+  ThemeKeys,
+} from "@prismicio/editor-ui";
 import { ReactNode } from "react";
 
 type EmptyViewProps = {
@@ -7,13 +15,25 @@ type EmptyViewProps = {
   // TODO: Replace prismic with github icon when available
   icon: "prismic" | "alert" | "logout";
   color?: "purple" | "tomato";
-  children?: ReactNode;
+  actions?: ReactNode;
 };
 
 export function EmptyView(props: EmptyViewProps) {
-  const { title, description, icon, children, color = "purple" } = props;
+  const { title, description, icon, actions, color = "purple" } = props;
 
-  const colors = getColors(color);
+  let iconColor: ThemeKeys<"color">;
+  let iconBackgroundColor: ThemeKeys<"color">;
+
+  switch (color) {
+    case "purple":
+      iconColor = "purple11";
+      iconBackgroundColor = "purple3";
+      break;
+    case "tomato":
+      iconColor = "tomato11";
+      iconBackgroundColor = "tomato3";
+      break;
+  }
 
   return (
     <Box
@@ -23,50 +43,20 @@ export function EmptyView(props: EmptyViewProps) {
       gap={16}
       flexGrow={1}
     >
-      <Box
-        flexDirection="column"
-        justifyContent="center"
-        alignItems="center"
-        gap={8}
-        maxWidth={324}
-      >
-        <Box
-          borderRadius="100%"
-          backgroundColor={colors.iconBackgroundColor}
-          padding={8}
-        >
-          <Icon name={icon} size="small" color={colors.iconColor} />
-        </Box>
-        <Box flexDirection="column" alignItems="center">
-          <Text variant="bold" align="center">
-            {title}
-          </Text>
-          {description !== undefined && (
-            <Text align="center" color="grey11">
-              {description}
-            </Text>
-          )}
-        </Box>
-      </Box>
-      {children}
+      <BlankSlate>
+        <BlankSlateIcon
+          lineColor={iconColor}
+          backgroundColor={iconBackgroundColor}
+          name={icon}
+        />
+        <BlankSlateTitle size="medium">{title}</BlankSlateTitle>
+        {description !== undefined && (
+          <BlankSlateDescription>{description}</BlankSlateDescription>
+        )}
+        {actions !== undefined && (
+          <BlankSlateActions>{actions}</BlankSlateActions>
+        )}
+      </BlankSlate>
     </Box>
   );
 }
-
-function getColors(color: "purple" | "tomato"): {
-  iconBackgroundColor: ThemeKeys<"color">;
-  iconColor: ThemeKeys<"color">;
-} {
-  switch (color) {
-    case "purple":
-      return {
-        iconBackgroundColor: "purple3",
-        iconColor: "purple11",
-      };
-    case "tomato":
-      return {
-        iconBackgroundColor: "tomato3",
-        iconColor: "tomato11",
-      };
-  }
-}

packages/slice-machine/src/features/customTypes/customTypesBuilder/ImportSlicesFromLibraryModal/ImportSlicesFromLibraryModal.tsx

@@ -12,6 +12,7 @@ import { LocalSlicesDialogContent } from "./LocalSlicesDialogContent";
 import { CommonDialogProps, DialogTab } from "./types";
 
 type ImportSlicesFromLibraryModalProps = CommonDialogProps & {
+  open: boolean;
   localSlices: (SharedSlice & { thumbnailUrl?: string })[];
   isEveryLocalSliceAdded: boolean;
   onSuccess: (args: {
@@ -34,7 +35,14 @@ export function ImportSlicesFromLibraryModal(
   const [selectedTab, setSelectedTab] = useState<DialogTab>("local");
 
   useEffect(() => {
-    if (!open) setTimeout(() => setSelectedTab("local"), 250); // wait for the modal fade animation
+    if (!open) {
+      // wait for the modal fade animation
+      const timeout = setTimeout(() => {
+        setSelectedTab("local");
+      }, 250);
+
+      return () => clearTimeout(timeout);
+    }
   }, [open]);
 
   return (
@@ -46,7 +54,6 @@ export function ImportSlicesFromLibraryModal(
         </DialogDescription>
         <LocalSlicesDialogContent
           {...contentProps}
-          open={open}
           selected={selectedTab === "local"}
           onSelectTab={setSelectedTab}
           slices={localSlices}
@@ -55,7 +62,6 @@ export function ImportSlicesFromLibraryModal(
         />
         <LibrarySlicesDialogContent
           {...contentProps}
-          open={open}
           selected={selectedTab === "library"}
           onSelectTab={setSelectedTab}
           onClose={onClose}