feat: integrate with git service and import from real repositories (#1758)

Author: jomifepe

packages/manager/src/constants/API_ENDPOINTS.ts

@@ -13,6 +13,7 @@ export type APIEndpoints = {
 	RepositoryService: string;
 	LocaleService: string;
 	CustomTypeService: string;
+	GitService: string;
 };
 
 export const API_ENDPOINTS: APIEndpoints = (() => {
@@ -47,6 +48,9 @@ export const API_ENDPOINTS: APIEndpoints = (() => {
 					process.env.custom_type_api ??
 						"https://api.internal.wroom.io/custom-type/",
 				),
+				GitService: addTrailingSlash(
+					process.env.git_service_api ?? "https://api.internal.wroom.io/git/",
+				),
 			};
 
 			const missingAPIEndpoints = Object.keys(apiEndpoints).filter((key) => {
@@ -96,6 +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://api.internal.wroom.io/git/",
 			};
 		}
 
@@ -114,6 +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://api.internal.${process.env.SM_ENV}-wroom.com/git/`,
 			};
 		}
 
@@ -131,6 +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://api.internal.prismic.io/git/",
 			};
 		}
 	}

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

@@ -83,6 +83,34 @@ type PrismicRepositoryManagerFetchEnvironmentsReturnType = {
 	environments?: Environment[];
 };
 
+const GitIntegrationsSchema = z.object({
+	integrations: z.array(
+		z.discriminatedUnion("status", [
+			z.object({
+				id: z.string(),
+				status: z.literal("connected"),
+				owner: z.string(),
+				repositories: z.array(
+					z.object({
+						name: z.string(),
+						fullName: z.string(),
+					}),
+				),
+			}),
+			z.object({
+				id: z.string(),
+				status: z.literal("broken"),
+				owner: z.string().optional(),
+				repositories: z.tuple([]),
+			}),
+		]),
+	),
+});
+
+const GitIntegrationTokenSchema = z.object({
+	token: z.string(),
+});
+
 export class PrismicRepositoryManager extends BaseManager {
 	// TODO: Add methods for repository-specific actions. E.g. creating a
 	// new repository.
@@ -705,6 +733,68 @@ export class PrismicRepositoryManager extends BaseManager {
 		}
 	}
 
+	async fetchGitIntegrations(): Promise<z.infer<typeof GitIntegrationsSchema>> {
+		const repositoryName = await this.project.getRepositoryName();
+
+		const url = new URL("integrations", API_ENDPOINTS.GitService);
+		url.searchParams.set("repository", repositoryName);
+
+		const res = await this._fetch({ url });
+
+		if (!res.ok) {
+			const text = await res.text();
+			throw new Error(
+				`Failed to fetch integrations for repository ${repositoryName}`,
+				{ cause: text },
+			);
+		}
+
+		const json = await res.json();
+		const { value, error } = decode(GitIntegrationsSchema, json);
+
+		if (error) {
+			throw new UnexpectedDataError(
+				`Failed to decode integrations: ${error.errors.join(", ")}`,
+			);
+		}
+
+		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/${integrationId}/token`,
+			API_ENDPOINTS.GitService,
+		);
+		url.searchParams.set("repository", repositoryName);
+
+		const res = await this._fetch({ url, method: "POST" });
+
+		if (!res.ok) {
+			const text = await res.text();
+			throw new Error(
+				`Failed to fetch token for integration ${integrationId}`,
+				{ cause: text },
+			);
+		}
+
+		const json = await res.json();
+		const { value, error } = decode(GitIntegrationTokenSchema, json);
+
+		if (error) {
+			throw new UnexpectedDataError(
+				`Failed to decode integration token: ${error.errors.join(", ")}`,
+			);
+		}
+
+		return value;
+	}
+
 	private _decodeLimitOrThrow(
 		potentialLimit: unknown,
 		statusCode: number,

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

@@ -28,6 +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://api.internal.prismic.io/git/",
 	});
 	expect(result.clientError).toStrictEqual({
 		name: new UnauthenticatedError().name,

packages/slice-machine/package.json

@@ -42,9 +42,9 @@
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
     "@prismicio/client": "7.17.0",
-    "@prismicio/editor-fields": "0.4.89-alpha.jp-box-display-none.1",
-    "@prismicio/editor-support": "0.4.89-alpha.jp-box-display-none.1",
-    "@prismicio/editor-ui": "0.4.89-alpha.jp-box-display-none.1",
+    "@prismicio/editor-fields": "0.4.90",
+    "@prismicio/editor-support": "0.4.90",
+    "@prismicio/editor-ui": "0.4.90",
     "@prismicio/mock": "0.7.1",
     "@prismicio/mocks": "2.14.0",
     "@prismicio/simulator": "0.1.4",

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

@@ -2,6 +2,7 @@ import {
   DialogActionButton,
   DialogActions,
   DialogCancelButton,
+  Skeleton,
 } from "@prismicio/editor-ui";
 
 import { CommonDialogProps } from "./types";
@@ -13,6 +14,15 @@ type DialogButtonsProps = {
   typeName: CommonDialogProps["typeName"];
 };
 
+export function DialogButtonsSkeleton() {
+  return (
+    <DialogActions>
+      <Skeleton height={32} width={58.48} />
+      <Skeleton height={32} width={110.38} />
+    </DialogActions>
+  );
+}
+
 export function DialogButtons(props: DialogButtonsProps) {
   const { totalSelected, onSubmit, isSubmitting, typeName } = props;
 

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

@@ -13,7 +13,12 @@ export function DialogTabs(props: DialogTabsProps) {
   const { selectedTab, onSelectTab, rightContent } = props;
 
   return (
-    <Box justifyContent="space-between" padding={16} border={{ bottom: true }}>
+    <Box
+      justifyContent="space-between"
+      padding={16}
+      border={{ bottom: true }}
+      gap={8}
+    >
       <Box gap={8}>
         <Tab
           selected={selectedTab === "local"}

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

@@ -0,0 +1,61 @@
+import {
+  BlankSlate,
+  BlankSlateActions,
+  BlankSlateDescription,
+  BlankSlateIcon,
+  BlankSlateTitle,
+  Box,
+  ThemeKeys,
+} from "@prismicio/editor-ui";
+import { ReactNode } from "react";
+
+type EmptyViewProps = {
+  title: string;
+  description?: string;
+  icon: "github" | "alert" | "logout" | "viewDay";
+  color?: "purple" | "tomato";
+  actions?: ReactNode;
+};
+
+export function EmptyView(props: EmptyViewProps) {
+  const { title, description, icon, actions, color = "purple" } = props;
+
+  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
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      gap={16}
+      flexGrow={1}
+    >
+      <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>
+  );
+}

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

@@ -5,14 +5,16 @@ import {
   DialogHeader,
 } from "@prismicio/editor-ui";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { LibrarySlicesDialogContent } from "./LibrarySlicesDialogContent";
 import { LocalSlicesDialogContent } from "./LocalSlicesDialogContent";
 import { CommonDialogProps, DialogTab } from "./types";
 
 type ImportSlicesFromLibraryModalProps = CommonDialogProps & {
-  availableSlices: (SharedSlice & { thumbnailUrl?: string })[];
+  open: boolean;
+  localSlices: (SharedSlice & { thumbnailUrl?: string })[];
+  isEveryLocalSliceAdded: boolean;
   onSuccess: (args: {
     slices: { model: SharedSlice; langSmithUrl?: string }[];
     library?: string;
@@ -22,34 +24,44 @@ type ImportSlicesFromLibraryModalProps = CommonDialogProps & {
 export function ImportSlicesFromLibraryModal(
   props: ImportSlicesFromLibraryModalProps,
 ) {
-  const { open, availableSlices = [], onClose, ...commonProps } = props;
+  const {
+    open,
+    localSlices,
+    isEveryLocalSliceAdded,
+    onClose,
+    ...contentProps
+  } = props;
+
   const [selectedTab, setSelectedTab] = useState<DialogTab>("local");
 
-  const onOpenChange = (open: boolean) => {
+  useEffect(() => {
     if (!open) {
-      onClose();
-      setTimeout(() => setSelectedTab("local"), 250); // wait for the modal fade animation
+      // wait for the modal fade animation
+      const timeout = setTimeout(() => {
+        setSelectedTab("local");
+      }, 250);
+
+      return () => clearTimeout(timeout);
     }
-  };
+  }, [open]);
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
       <DialogHeader title="Reuse an existing slice" />
       <DialogContent gap={0}>
         <DialogDescription hidden>
           Select existing slices or import slices from a GitHub repository
         </DialogDescription>
         <LocalSlicesDialogContent
-          {...commonProps}
-          open={open}
+          {...contentProps}
           selected={selectedTab === "local"}
           onSelectTab={setSelectedTab}
-          availableSlices={availableSlices}
+          slices={localSlices}
+          isEveryLocalSliceAdded={isEveryLocalSliceAdded}
           onClose={onClose}
         />
         <LibrarySlicesDialogContent
-          {...commonProps}
-          open={open}
+          {...contentProps}
           selected={selectedTab === "library"}
           onSelectTab={setSelectedTab}
           onClose={onClose}