slice-machine-ui 1.23.2-beta.8 → 1.24.0

package/src/features/settings/git/GitProvider.ts

@@ -0,0 +1,40 @@
+import { BitbucketIcon } from "@src/icons/BitbucketIcon";
+import { GitHubIcon } from "@src/icons/GitHubIcon";
+import { GitLabIcon } from "@src/icons/GitLabIcon";
+import { managerClient } from "@src/managerClient";
+
+export type GitProvider = keyof typeof gitProviderToConfig;
+
+const GITHUB_APP_SLUG = "prismic-io";
+
+export const gitProviderToConfig = {
+  gitHub: {
+    connect: async () => {
+      const state = await managerClient.git.createGitHubAuthState();
+      const url = new URL(
+        `https://github.com/apps/${GITHUB_APP_SLUG}/installations/new`,
+      );
+      url.searchParams.set("state", state.key);
+      window.open(url, "git-hub-app-installation");
+    },
+    Icon: GitHubIcon,
+    name: "GitHub",
+    supported: true,
+  },
+  bitbucket: {
+    connect: () => {
+      throw new Error("Not implemented.");
+    },
+    Icon: BitbucketIcon,
+    name: "Bitbucket",
+    supported: false,
+  },
+  gitLab: {
+    connect: () => {
+      throw new Error("Not implemented.");
+    },
+    Icon: GitLabIcon,
+    name: "GitLab",
+    supported: false,
+  },
+};

package/src/features/settings/git/GitProviderConnectButtons.tsx

@@ -0,0 +1,63 @@
+import { keys } from "@prismicio/editor-support/Object";
+import { Button, ButtonGroup, Text, tokens } from "@prismicio/editor-ui";
+import { type ComponentProps, type FC, useState } from "react";
+import { toast } from "react-toastify";
+
+import {
+  type GitProvider,
+  gitProviderToConfig,
+} from "@src/features/settings/git/GitProvider";
+
+export const GitProviderConnectButtons: FC = () => (
+  <ButtonGroup>
+    {keys(gitProviderToConfig).map((provider) => (
+      <GitProviderConnectButton
+        key={provider}
+        provider={provider}
+        sx={{ flexBasis: 0, flexGrow: 1 }}
+      />
+    ))}
+  </ButtonGroup>
+);
+
+type GitProviderConnectButtonProps = { provider: GitProvider; sx?: SX };
+
+const GitProviderConnectButton: FC<GitProviderConnectButtonProps> = ({
+  provider,
+  sx,
+}) => {
+  const { connect, Icon, name, supported } = gitProviderToConfig[provider];
+  const [loading, setLoading] = useState(false);
+  return (
+    <Button
+      color="grey"
+      disabled={!supported}
+      loading={loading}
+      onClick={() => {
+        void (async () => {
+          setLoading(true);
+          try {
+            await connect();
+          } catch (error) {
+            const message = `Could not connect to ${name}`;
+            console.error(message, error);
+            toast.error(message);
+            setLoading(false);
+          }
+        })();
+      }}
+      renderStartIcon={() => <Icon color={tokens.color.greyLight11} />}
+      sx={sx}
+    >
+      {name}
+      {supported ? undefined : (
+        <Text color="inherit" variant="small">
+          {" (soon)"}
+        </Text>
+      )}
+    </Button>
+  );
+};
+
+// TODO(DT-1928): export the `SX` type from `@prismicio/editor-ui`.
+type SX = ComponentProps<typeof Button>["sx"];

package/src/features/settings/git/GitRepositoriesList.tsx

@@ -0,0 +1,76 @@
+import { Button, Skeleton, Text } from "@prismicio/editor-ui";
+import type { GitRepo, GitRepoSpecifier } from "@slicemachine/manager";
+import type { FC } from "react";
+
+import { FieldSetList, FieldSetListItem } from "@src/components/FieldSet";
+import { RelativeTime } from "@src/components/RelativeTime";
+import { GitRepositoryConnectDialog } from "@src/features/settings/git/GitRepositoryConnectDialog";
+import { GitRepositoryDisconnectDialog } from "@src/features/settings/git/GitRepositoryDisconnectDialog";
+import { useLinkedGitRepos } from "@src/features/settings/git/useLinkedGitRepos";
+
+type GitRepositoriesListProps =
+  | { mode: "link"; repos: GitRepo[] }
+  | { mode: "unlink"; repos: GitRepoSpecifier[] };
+
+export const GitRepositoriesList: FC<GitRepositoriesListProps> = ({
+  mode,
+  repos,
+}) => {
+  const { linkRepo, unlinkRepo } = useLinkedGitRepos();
+  return (
+    <FieldSetList>
+      {mode === "link"
+        ? repos.map((repo) => (
+            <FieldSetListItem
+              action={
+                <GitRepositoryConnectDialog
+                  linkRepo={linkRepo}
+                  repo={repo}
+                  trigger={<Button color="grey">Connect</Button>}
+                />
+              }
+              key={`${repo.provider}@${repo.id}`}
+            >
+              {repo.name}
+              <Text color="grey11">
+                {" • "}
+                <RelativeTime date={repo.pushedAt} />
+              </Text>
+            </FieldSetListItem>
+          ))
+        : repos.map((repo) => (
+            <FieldSetListItem
+              action={
+                <GitRepositoryDisconnectDialog
+                  repo={repo}
+                  trigger={<Button color="grey">Disconnect</Button>}
+                  unlinkRepo={unlinkRepo}
+                />
+              }
+              key={`${repo.provider}@${repo.owner}/${repo.name}`}
+            >
+              {repo.name}
+            </FieldSetListItem>
+          ))}
+    </FieldSetList>
+  );
+};
+
+export const GitRepositoriesListSkeleton: FC = () => (
+  <FieldSetList>
+    {[...Array(4).keys()].map((index) => (
+      <FieldSetListItem
+        action={<Skeleton height={32} width={67.59} />}
+        key={index}
+      >
+        <Skeleton
+          height={24}
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore TODO(DT-1918): add `verticalAlign: "middle"` to the `sx` prop.
+          sx={{ verticalAlign: "middle" }}
+          width={129.92}
+        />
+      </FieldSetListItem>
+    ))}
+  </FieldSetList>
+);

package/src/features/settings/git/GitRepositoriesSearch.tsx

@@ -0,0 +1,69 @@
+import type { GitOwner } from "@slicemachine/manager";
+import { type FC, Suspense, useState } from "react";
+
+import { FieldSetContent, FieldSetHeader } from "@src/components/FieldSet";
+import { ConnectGitRepositoryBlankSlate } from "@src/features/settings/git/ConnectGitRepositoryBlankSlate";
+import { GitOwnerSelect } from "@src/features/settings/git/GitOwnerSelect";
+import {
+  GitRepositoriesList,
+  GitRepositoriesListSkeleton,
+} from "@src/features/settings/git/GitRepositoriesList";
+import { useGitRepos } from "@src/features/settings/git/useGitRepos";
+
+type GitRepositoriesSearchProps = { owners: GitOwner[] };
+
+export const GitRepositoriesSearch: FC<GitRepositoriesSearchProps> = ({
+  owners,
+}) => {
+  const [selectedOwner, setSelectedOwner] = useState(owners[0]);
+  return (
+    <>
+      <FieldSetHeader>
+        <GitOwnerSelect
+          owners={owners}
+          selectedOwner={selectedOwner}
+          onSelectedOwnerChange={setSelectedOwner}
+          sx={{ width: "calc(50% - 8px)" }}
+        />
+      </FieldSetHeader>
+      <Suspense
+        fallback={<GitRepositoriesSearchSkeleton gitOwnerSelect={false} />}
+      >
+        <GitRepositoriesSearchResults owner={selectedOwner} />
+      </Suspense>
+    </>
+  );
+};
+
+type GitRepositoriesSearchResultsProps = { owner: GitOwner };
+
+const GitRepositoriesSearchResults: FC<GitRepositoriesSearchResultsProps> = ({
+  owner,
+}) => {
+  const repos = useGitRepos({ provider: owner.provider, owner: owner.name });
+  return repos.length > 0 ? (
+    <GitRepositoriesList mode="link" repos={repos} />
+  ) : (
+    <FieldSetContent>
+      <ConnectGitRepositoryBlankSlate
+        title="No Results Found"
+        description="Try selecting a different Git account or organization on the top left."
+      />
+    </FieldSetContent>
+  );
+};
+
+type GitRepositoriesSearchSkeletonProps = { gitOwnerSelect: boolean };
+
+export const GitRepositoriesSearchSkeleton: FC<
+  GitRepositoriesSearchSkeletonProps
+> = ({ gitOwnerSelect }) => (
+  <>
+    {gitOwnerSelect ? (
+      <FieldSetHeader>
+        <GitOwnerSelect disabled sx={{ width: "calc(50% - 8px)" }} />
+      </FieldSetHeader>
+    ) : undefined}
+    <GitRepositoriesListSkeleton />
+  </>
+);

package/src/features/settings/git/GitRepositoryConnectDialog.tsx

@@ -0,0 +1,85 @@
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  FormInput,
+  Text,
+} from "@prismicio/editor-ui";
+import type { GitRepo, GitRepoSpecifier } from "@slicemachine/manager";
+import { Formik } from "formik";
+import type { FC, ReactNode } from "react";
+import { toast } from "react-toastify";
+
+import { gitProviderToConfig } from "@src/features/settings/git/GitProvider";
+import { useWriteAPIToken } from "@src/features/settings/git/useWriteAPIToken";
+
+type GitRepositoryConnectDialogProps = {
+  linkRepo: (repo: GitRepoSpecifier) => Promise<void>;
+  repo: GitRepo;
+  trigger: ReactNode;
+};
+
+export const GitRepositoryConnectDialog: FC<
+  GitRepositoryConnectDialogProps
+> = ({ linkRepo, repo, trigger }) => {
+  const providerConfig = gitProviderToConfig[repo.provider];
+  const { updateToken } = useWriteAPIToken({ git: repo });
+  return (
+    <Dialog size={{ width: 448, height: "auto" }} trigger={trigger}>
+      <DialogHeader title="Prismic Write API token required" />
+      <DialogContent>
+        <Formik
+          initialValues={{ writeAPIToken: "" }}
+          validate={(values) => {
+            if (values.writeAPIToken.length === 0) {
+              return { writeAPIToken: "Cannot be empty" };
+            }
+          }}
+          onSubmit={async (values) => {
+            try {
+              await linkRepo(repo);
+              await updateToken(values.writeAPIToken);
+            } catch (error) {
+              const message = `Could not connect to ${repo.name}`;
+              console.error(message, error);
+              toast.error(message);
+            }
+          }}
+        >
+          {(formikProps) => (
+            <form onSubmit={formikProps.handleSubmit}>
+              <Box flexDirection="column" gap={4} padding={16}>
+                <FormInput
+                  disabled={formikProps.isSubmitting}
+                  error={typeof formikProps.errors.writeAPIToken === "string"}
+                  label="Paste your Write API token"
+                  onValueChange={(value) => {
+                    void formikProps.setFieldValue("writeAPIToken", value);
+                  }}
+                  placeholder="Write API token"
+                  size="large"
+                  value={formikProps.values.writeAPIToken}
+                />
+                <Text color="grey11">
+                  Required to sync models from {providerConfig.name} to Prismic.
+                </Text>
+              </Box>
+              <DialogActions
+                cancel={{ text: "Cancel" }}
+                ok={{
+                  disabled: !formikProps.isValid,
+                  loading: formikProps.isSubmitting,
+                  onClick: () => void formikProps.submitForm(),
+                  text: "Save Token",
+                }}
+                size="medium"
+              />
+            </form>
+          )}
+        </Formik>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/settings/git/GitRepositoryDisconnectDialog.tsx

@@ -0,0 +1,60 @@
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  Text,
+} from "@prismicio/editor-ui";
+import type { GitRepoSpecifier } from "@slicemachine/manager";
+import { type FC, type ReactNode, useState } from "react";
+import { toast } from "react-toastify";
+
+type GitRepositoryDisconnectDialogProps = {
+  repo: GitRepoSpecifier;
+  trigger: ReactNode;
+  unlinkRepo: (repo: GitRepoSpecifier) => Promise<void>;
+};
+
+export const GitRepositoryDisconnectDialog: FC<
+  GitRepositoryDisconnectDialogProps
+> = ({ repo, trigger, unlinkRepo }) => {
+  const [loading, setLoading] = useState(false);
+  return (
+    <Dialog size={{ width: 448, height: "auto" }} trigger={trigger}>
+      <DialogHeader title="Remove Git Connection" />
+      <DialogContent>
+        <Box flexDirection="column" padding={16}>
+          <Text>
+            You will not be able to push your code alongside your models
+            anymore. Note that you can reconnect your Git repository at any
+            time. Are you sure you want to continue?
+          </Text>
+        </Box>
+      </DialogContent>
+      <DialogActions
+        asFooter
+        cancel={{ text: "Cancel" }}
+        ok={{
+          color: "tomato",
+          loading,
+          onClick: () => {
+            void (async () => {
+              setLoading(true);
+              try {
+                await unlinkRepo(repo);
+              } catch (error) {
+                const message = `Could not disconnect from ${repo.name}`;
+                console.error(message, error);
+                toast.error(message);
+              }
+              setLoading(false);
+            })();
+          },
+          text: "Disconnect",
+        }}
+        size="medium"
+      />
+    </Dialog>
+  );
+};

package/src/features/settings/git/useGitIntegrationExperiment.ts

@@ -0,0 +1,8 @@
+import { useExperimentVariant } from "@src/hooks/useExperimentVariant";
+
+type UseGitIntegrationExperimentReturnType = { eligible: boolean };
+
+export function useGitIntegrationExperiment(): UseGitIntegrationExperimentReturnType {
+  const variant = useExperimentVariant("slicemachine-git-integration");
+  return { eligible: variant?.value === "on" };
+}

package/src/features/settings/git/useGitOwners.ts

@@ -0,0 +1,12 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+import type { GitOwner } from "@slicemachine/manager";
+
+import { managerClient } from "@src/managerClient";
+
+export function useGitOwners(): GitOwner[] {
+  return useRequest(getGitOwners, []);
+}
+
+async function getGitOwners(): Promise<GitOwner[]> {
+  return await managerClient.git.fetchOwners();
+}

package/src/features/settings/git/useGitRepos.ts

@@ -0,0 +1,24 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+import type { GitRepo } from "@slicemachine/manager";
+
+import { managerClient } from "@src/managerClient";
+
+type UseGitReposArgs = Parameters<typeof managerClient.git.fetchRepos>[0];
+
+export function useGitRepos(args: UseGitReposArgs): GitRepo[] {
+  return useRequest(getGitRepos, [
+    args.provider,
+    args.owner,
+    args.query,
+    args.page,
+  ]);
+}
+
+async function getGitRepos(
+  provider: "gitHub",
+  owner: string,
+  query?: string,
+  page?: number,
+): Promise<GitRepo[]> {
+  return await managerClient.git.fetchRepos({ provider, owner, query, page });
+}

package/src/features/settings/git/useLinkedGitRepos.ts

@@ -0,0 +1,41 @@
+import { revalidateData, useRequest } from "@prismicio/editor-support/Suspense";
+import type { GitRepoSpecifier } from "@slicemachine/manager";
+
+import { useSliceMachineConfig } from "@src/hooks/useSliceMachineConfig";
+import { managerClient } from "@src/managerClient";
+
+type UseLinkedGitReposReturnType = {
+  linkedGitRepos: GitRepoSpecifier[];
+  linkRepo: (git: GitRepoSpecifier) => Promise<void>;
+  unlinkRepo: (git: GitRepoSpecifier) => Promise<void>;
+};
+
+export function useLinkedGitRepos(): UseLinkedGitReposReturnType {
+  const [config] = useSliceMachineConfig();
+  const linkedGitRepos = useRequest(getLinkedGitRepos, [config.repositoryName]);
+  return {
+    linkedGitRepos,
+    linkRepo: async (git) => {
+      await managerClient.git.linkRepo({
+        prismic: { domain: config.repositoryName },
+        git,
+      });
+      await revalidateData(getLinkedGitRepos, [config.repositoryName]);
+    },
+    unlinkRepo: async (git) => {
+      await managerClient.git.unlinkRepo({
+        prismic: { domain: config.repositoryName },
+        git,
+      });
+      await revalidateData(getLinkedGitRepos, [config.repositoryName]);
+    },
+  };
+}
+
+async function getLinkedGitRepos(
+  prismicDomain: string,
+): Promise<GitRepoSpecifier[]> {
+  return await managerClient.git.fetchLinkedRepos({
+    prismic: { domain: prismicDomain },
+  });
+}

package/src/features/settings/git/useWriteAPIToken.ts

@@ -0,0 +1,23 @@
+import type { GitRepoSpecifier } from "@slicemachine/manager";
+
+import { useSliceMachineConfig } from "@src/hooks/useSliceMachineConfig";
+import { managerClient } from "@src/managerClient";
+
+type UseWriteAPITokenReturnType = {
+  updateToken: (token: string) => Promise<void>;
+};
+
+export function useWriteAPIToken(args: {
+  git: GitRepoSpecifier;
+}): UseWriteAPITokenReturnType {
+  const [config] = useSliceMachineConfig();
+  return {
+    updateToken: async (token) => {
+      await managerClient.git.updateWriteAPIToken({
+        prismic: { domain: config.repositoryName },
+        git: args.git,
+        token,
+      });
+    },
+  };
+}

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx

@@ -43,7 +43,6 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
       <DialogHeader title="Upgrade slice" />
       <DialogContent>
         <Formik
-          validateOnChange
           validateOnMount
           initialValues={{
             from: libraries[0]?.name,

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx

@@ -47,7 +47,6 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
       <DialogHeader title="Convert to slice variation" />
       <DialogContent>
         <Formik
-          validateOnChange
           initialValues={{
             libraryID: localSharedSlices[0]?.from,
             sliceID: localSharedSlices[0]?.model.id,

package/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx

@@ -31,7 +31,6 @@ export const ConvertLegacySliceMergeWithIdenticalDialog: FC<DialogProps> = ({
       <DialogHeader title="Merge with an existing slice" />
       <DialogContent>
         <Formik
-          validateOnChange
           initialValues={{
             path: identicalSlices[0]?.path ?? "",
           }}

package/src/features/slices/sliceBuilder/SliceBuilderProvider.tsx

@@ -9,18 +9,16 @@ import {
 import { useStableCallback } from "@prismicio/editor-support/React";
 import { useRouter } from "next/router";
 
-import {
-  AutoSaveStatus,
-  useAutoSave,
-} from "@src/features/autoSave/useAutoSave";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { readSliceMocks, updateSlice } from "@src/apiClient";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { VariationSM } from "@lib/models/common/Slice";
+import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { ActionQueueStatus, useActionQueue } from "@src/hooks/useActionQueue";
 
 type SliceContext = {
   slice: ComponentUI;
-  autoSaveStatus: AutoSaveStatus;
+  actionQueueStatus: ActionQueueStatus;
   setSlice: (slice: ComponentUI) => void;
   variation: VariationSM;
 };
@@ -37,12 +35,13 @@ export function SliceBuilderProvider(props: SliceBuilderProviderProps) {
 
   const router = useRouter();
   const [slice, setSliceState] = useState(initialSlice);
-  const { autoSaveStatus, setNextSave } = useAutoSave({
+  const { actionQueueStatus, setNextAction } = useActionQueue({
     errorMessage:
       "Failed to save slice. Check your browser's console for more information.",
   });
   const { saveSliceSuccess } = useSliceMachineActions();
   const stableSaveSliceSuccess = useStableCallback(saveSliceSuccess);
+  const { syncChanges } = useAutoSync();
 
   const variation = useMemo(() => {
     const variationName = router.query.variation;
@@ -60,7 +59,7 @@ export function SliceBuilderProvider(props: SliceBuilderProviderProps) {
   const setSlice = useCallback(
     (slice: ComponentUI) => {
       setSliceState(slice);
-      setNextSave(async () => {
+      setNextAction(async () => {
         const { errors: updateSliceErrors } = await updateSlice(slice);
 
         if (updateSliceErrors.length > 0) {
@@ -76,20 +75,23 @@ export function SliceBuilderProvider(props: SliceBuilderProviderProps) {
           throw readSliceMockErrors;
         }
 
+        // Update slices store with new slice
         stableSaveSliceSuccess({ ...slice, mocks });
+
+        syncChanges();
       });
     },
-    [setNextSave, stableSaveSliceSuccess],
+    [setNextAction, stableSaveSliceSuccess, syncChanges],
   );
 
   const contextValue: SliceContext = useMemo(
     () => ({
-      autoSaveStatus,
+      actionQueueStatus,
       slice,
       setSlice,
       variation,
     }),
-    [autoSaveStatus, slice, setSlice, variation],
+    [actionQueueStatus, slice, setSlice, variation],
   );
 
   return (