slice-machine-ui 1.23.2-beta.1 → 1.23.2-beta.11

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

@@ -0,0 +1,126 @@
+import {
+  Button,
+  ErrorBoundary,
+  IconButton,
+  Tooltip,
+} from "@prismicio/editor-ui";
+import {
+  // isUnauthenticatedError,
+  isUnauthorizedError,
+} from "@slicemachine/manager/client";
+import { type FC, type ReactNode, Suspense } from "react";
+
+import {
+  FieldSet,
+  FieldSetContent,
+  FieldSetFooter,
+  FieldSetLegend,
+} from "@src/components/FieldSet";
+import { ConnectGitRepositoryBlankSlate } from "@src/features/settings/git/ConnectGitRepositoryBlankSlate";
+import { GitProviderConnectButtons } from "@src/features/settings/git/GitProviderConnectButtons";
+import { GitRepositoriesList } from "@src/features/settings/git/GitRepositoriesList";
+import {
+  GitRepositoriesSearch,
+  GitRepositoriesSearchSkeleton,
+} from "@src/features/settings/git/GitRepositoriesSearch";
+import { useGitOwners } from "@src/features/settings/git/useGitOwners";
+import { useLinkedGitRepos } from "@src/features/settings/git/useLinkedGitRepos";
+import { useUser } from "@src/hooks/useUser";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+
+export const ConnectGitRepository: FC = () => (
+  <FieldSet>
+    <FieldSetLegend>Connected Git Repository</FieldSetLegend>
+    <ErrorBoundary renderError={renderError}>
+      <Suspense fallback={<GitRepositoriesSearchSkeleton gitOwnerSelect />}>
+        <Content />
+      </Suspense>
+    </ErrorBoundary>
+    <FieldSetFooter
+      action={
+        <Tooltip content="Documentation is coming soon." side="bottom">
+          <IconButton disabled icon="openInNew" />
+        </Tooltip>
+      }
+    >
+      Learn more about Prismic for Git
+    </FieldSetFooter>
+  </FieldSet>
+);
+
+const Content: FC = () => {
+  // TODO(TD-1952): the `useUser` hook should be replaced with a mechanism that
+  // automatically revalidates the `Suspense` cache whenever the Redux
+  // authentication status changes.
+  const { isLoggedIn } = useUser();
+  return isLoggedIn ? <LoggedInContent /> : <UnauthenticatedErrorContent />;
+};
+
+const LoggedInContent: FC = () => {
+  const { linkedGitRepos } = useLinkedGitRepos();
+  return linkedGitRepos.length > 0 ? (
+    <GitRepositoriesList mode="unlink" repos={linkedGitRepos} />
+  ) : (
+    <UnlinkedRepositoryContent />
+  );
+};
+
+const UnlinkedRepositoryContent: FC = () => {
+  const owners = useGitOwners();
+  return owners.length > 0 ? (
+    <GitRepositoriesSearch owners={owners} />
+  ) : (
+    <FieldSetContent>
+      <GitProviderConnectButtons />
+    </FieldSetContent>
+  );
+};
+
+function renderError(error: unknown, reset: () => void): ReactNode {
+  // if (isUnauthenticatedError(error)) {
+  //   return <UnauthenticatedErrorContent />;
+  // } else
+  if (isUnauthorizedError(error)) {
+    return <UnauthorizedErrorContent />;
+  } else {
+    return <UnknownErrorContent reset={reset} />;
+  }
+}
+
+const UnauthenticatedErrorContent: FC = () => {
+  const { openLoginModal } = useSliceMachineActions();
+  return (
+    <FieldSetContent>
+      <ConnectGitRepositoryBlankSlate
+        title="It seems like you are logged out"
+        description="Log in to connect a Git repository."
+        action={<Button onClick={openLoginModal}>Log in to Prismic</Button>}
+      />
+    </FieldSetContent>
+  );
+};
+
+const UnauthorizedErrorContent: FC = () => (
+  <FieldSetContent>
+    <ConnectGitRepositoryBlankSlate
+      title="It seems like you do not have permission"
+      description="An owner or admin is required to connect a Git repository."
+    />
+  </FieldSetContent>
+);
+
+type UnknownErrorContentProps = { reset: () => void };
+
+const UnknownErrorContent: FC<UnknownErrorContentProps> = ({ reset }) => (
+  <FieldSetContent>
+    <ConnectGitRepositoryBlankSlate
+      title="Unable to fetch data"
+      description="An error occurred while fetching the list of connected Git repositories."
+      action={
+        <Button color="grey" onClick={reset}>
+          Retry
+        </Button>
+      }
+    />
+  </FieldSetContent>
+);

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

@@ -0,0 +1,33 @@
+import { Box, ButtonGroup, Text } from "@prismicio/editor-ui";
+import type { FC, ReactNode } from "react";
+
+type ConnectGitRepositoryBlankSlateProps = {
+  title: string;
+  description: string;
+  action?: ReactNode;
+};
+
+export const ConnectGitRepositoryBlankSlate: FC<
+  ConnectGitRepositoryBlankSlateProps
+> = ({ title, description, action }) => (
+  <Box
+    flexDirection="column"
+    /*
+     * TODO: these `padding` values actually don't match Figma, but they are the
+     * closest allowed by the `Box` component.
+     */
+    padding={{ block: 72, inline: 100 }}
+  >
+    <Text align="center" variant="emphasized">
+      {title}
+    </Text>
+    <Text align="center" color="grey11">
+      {description}
+    </Text>
+    {Boolean(action) ? (
+      <ButtonGroup sx={{ alignSelf: "center", marginTop: 8 }}>
+        {action}
+      </ButtonGroup>
+    ) : undefined}
+  </Box>
+);

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

@@ -0,0 +1,71 @@
+import { Select, SelectItem, tokens } from "@prismicio/editor-ui";
+import type { GitOwner } from "@slicemachine/manager";
+import type { ComponentProps, FC } from "react";
+
+import { gitProviderToConfig } from "@src/features/settings/git/GitProvider";
+
+type GitOwnerSelectProps = {
+  disabled?: boolean;
+  owners?: GitOwner[];
+  selectedOwner?: GitOwner;
+  onSelectedOwnerChange?: (selectedOwner: GitOwner) => void;
+  sx?: SX;
+};
+
+export const GitOwnerSelect: FC<GitOwnerSelectProps> = ({
+  disabled,
+  owners = [],
+  selectedOwner,
+  onSelectedOwnerChange,
+  sx,
+}) => (
+  <Select
+    color="grey"
+    constrainContentWidth
+    disabled={disabled}
+    flexContent
+    onValueChange={(value) => {
+      const [provider, id] = parseGitOwnerKey(value);
+      const selectedOwner = owners.find(
+        (owner) => owner.provider === provider && owner.id === id,
+      );
+      if (selectedOwner) {
+        onSelectedOwnerChange?.(selectedOwner);
+      }
+    }}
+    placeholder="Owner"
+    renderStartIcon={() => <GitOwnerIcon owner={selectedOwner} />}
+    size="large"
+    sx={sx}
+    value={selectedOwner ? formatGitOwnerKey(selectedOwner) : undefined}
+  >
+    {owners.map((owner) => (
+      <SelectItem
+        key={formatGitOwnerKey(owner)}
+        renderStartIcon={() => <GitOwnerIcon owner={owner} />}
+        size="large"
+        value={formatGitOwnerKey(owner)}
+      >
+        {owner.name}
+      </SelectItem>
+    ))}
+  </Select>
+);
+
+type GitOwnerIconProps = { owner: GitOwner | undefined };
+
+const GitOwnerIcon: FC<GitOwnerIconProps> = ({ owner }) => {
+  const { Icon } = gitProviderToConfig[owner?.provider ?? "gitHub"];
+  return <Icon color={tokens.color.greyLight11} />;
+};
+
+function formatGitOwnerKey(owner: GitOwner): string {
+  return `${owner.provider}@${owner.id}`;
+}
+
+function parseGitOwnerKey(key: string): string[] {
+  return key.split("@");
+}
+
+// TODO(DT-1928): export the `SX` type from `@prismicio/editor-ui`.
+type SX = ComponentProps<typeof Select>["sx"];

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 });
+}