slice-machine-ui 2.17.3-beta.7 → 2.17.3-beta.9

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

@@ -1,112 +0,0 @@
-import { Button, 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 "@/components/FieldSet";
-import { ErrorBoundary } from "@/ErrorBoundary";
-import { ConnectGitRepositoryBlankSlate } from "@/features/settings/git/ConnectGitRepositoryBlankSlate";
-import { GitProviderConnectButtons } from "@/features/settings/git/GitProviderConnectButtons";
-import { GitRepositoriesList } from "@/features/settings/git/GitRepositoriesList";
-import {
-  GitRepositoriesSearch,
-  GitRepositoriesSearchSkeleton,
-} from "@/features/settings/git/GitRepositoriesSearch";
-import { useGitOwners } from "@/features/settings/git/useGitOwners";
-import { useLinkedGitRepos } from "@/features/settings/git/useLinkedGitRepos";
-import useSliceMachineActions from "@/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 = () => {
-  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

@@ -1,33 +0,0 @@
-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

@@ -1,71 +0,0 @@
-import { Select, SelectItem, theme } from "@prismicio/editor-ui";
-import type { GitOwner } from "@slicemachine/manager";
-import type { ComponentPropsWithoutRef, FC } from "react";
-
-import { gitProviderToConfig } from "@/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={theme.color.grey11} />;
-};
-
-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 = ComponentPropsWithoutRef<typeof Select>["sx"];

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

@@ -1,40 +0,0 @@
-import { GIT_PROVIDER, GitProvider } from "@slicemachine/manager/client";
-
-import { BitbucketIcon } from "@/icons/BitbucketIcon";
-import { GitHubIcon } from "@/icons/GitHubIcon";
-import { GitLabIcon } from "@/icons/GitLabIcon";
-import { managerClient } from "@/managerClient";
-
-export const gitProviderToConfig = {
-  gitHub: {
-    connect: async () => await openInstallationWindow("gitHub"),
-    Icon: GitHubIcon,
-    name: "GitHub",
-    supported: isSupported("gitHub"),
-  },
-  bitbucket: {
-    connect: async () => await openInstallationWindow("bitbucket"),
-    Icon: BitbucketIcon,
-    name: "Bitbucket",
-    supported: isSupported("bitbucket"),
-  },
-  gitLab: {
-    connect: async () => await openInstallationWindow("gitLab"),
-    Icon: GitLabIcon,
-    name: "GitLab",
-    supported: isSupported("gitLab"),
-  },
-};
-
-async function openInstallationWindow(provider: string) {
-  if (!isSupported(provider)) {
-    throw new Error("Not implemented.");
-  }
-
-  const url = await managerClient.git.getProviderAppInstallURL({ provider });
-  window.open(url, "git-provider-app-installation");
-}
-
-function isSupported(provider: string): provider is GitProvider {
-  return Boolean(Object.values<string>(GIT_PROVIDER).includes(provider));
-}

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

@@ -1,63 +0,0 @@
-import { keys } from "@prismicio/editor-support/Object";
-import { Button, ButtonGroup, Text, theme } from "@prismicio/editor-ui";
-import { type ComponentPropsWithoutRef, type FC, useState } from "react";
-import { toast } from "react-toastify";
-
-import { gitProviderToConfig } from "@/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: keyof typeof gitProviderToConfig;
-  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={theme.color.grey11} />}
-      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 = ComponentPropsWithoutRef<typeof Button>["sx"];

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

@@ -1,76 +0,0 @@
-import { Button, Skeleton, Text } from "@prismicio/editor-ui";
-import type { GitRepo, GitRepoSpecifier } from "@slicemachine/manager";
-import type { FC } from "react";
-
-import { FieldSetList, FieldSetListItem } from "@/components/FieldSet";
-import { RelativeTime } from "@/components/RelativeTime";
-import { GitRepositoryConnectDialog } from "@/features/settings/git/GitRepositoryConnectDialog";
-import { GitRepositoryDisconnectDialog } from "@/features/settings/git/GitRepositoryDisconnectDialog";
-import { useLinkedGitRepos } from "@/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

@@ -1,69 +0,0 @@
-import type { GitOwner } from "@slicemachine/manager";
-import { type FC, Suspense, useState } from "react";
-
-import { FieldSetContent, FieldSetHeader } from "@/components/FieldSet";
-import { ConnectGitRepositoryBlankSlate } from "@/features/settings/git/ConnectGitRepositoryBlankSlate";
-import { GitOwnerSelect } from "@/features/settings/git/GitOwnerSelect";
-import {
-  GitRepositoriesList,
-  GitRepositoriesListSkeleton,
-} from "@/features/settings/git/GitRepositoriesList";
-import { useGitRepos } from "@/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

@@ -1,97 +0,0 @@
-import {
-  Box,
-  Dialog,
-  DialogActionButton,
-  DialogActionLink,
-  DialogActions,
-  DialogCancelButton,
-  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 "@/features/settings/git/GitProvider";
-import { useWriteAPIToken } from "@/features/settings/git/useWriteAPIToken";
-import { useRepositoryInformation } from "@/hooks/useRepositoryInformation";
-
-type GitRepositoryConnectDialogProps = {
-  linkRepo: (repo: GitRepoSpecifier) => Promise<void>;
-  repo: GitRepo;
-  trigger: ReactNode;
-};
-
-// TODO: Update form to make it work with editor-ui Form component when
-// we start to work again on Git integration
-export const GitRepositoryConnectDialog: FC<
-  GitRepositoryConnectDialogProps
-> = ({ linkRepo, repo, trigger }) => {
-  const providerConfig = gitProviderToConfig[repo.provider];
-  const { updateToken } = useWriteAPIToken({ git: repo });
-  const { repositoryUrl } = useRepositoryInformation();
-  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"
-                  value={formikProps.values.writeAPIToken}
-                />
-                <Text color="grey11">
-                  Required to sync models from {providerConfig.name} to Prismic.
-                </Text>
-              </Box>
-              <DialogActions>
-                <DialogActionLink
-                  href={new URL("/settings/apps", repositoryUrl).href}
-                >
-                  Create a Prismic Write API token
-                </DialogActionLink>
-                <DialogCancelButton size="medium" />
-                <DialogActionButton
-                  disabled={!formikProps.isValid}
-                  loading={formikProps.isSubmitting}
-                  onClick={() => void formikProps.submitForm()}
-                  size="medium"
-                >
-                  Save Token
-                </DialogActionButton>
-              </DialogActions>
-            </form>
-          )}
-        </Formik>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,62 +0,0 @@
-import {
-  Box,
-  Dialog,
-  DialogActionButton,
-  DialogActions,
-  DialogCancelButton,
-  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>
-        <DialogCancelButton size="medium" />
-        <DialogActionButton
-          size="medium"
-          color="tomato"
-          loading={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);
-            })();
-          }}
-        >
-          Disconnect
-        </DialogActionButton>
-      </DialogActions>
-    </Dialog>
-  );
-};

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

@@ -1,8 +0,0 @@
-import { useExperimentVariant } from "@/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

@@ -1,12 +0,0 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
-import type { GitOwner } from "@slicemachine/manager";
-
-import { managerClient } from "@/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

@@ -1,24 +0,0 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
-import type { GitRepo } from "@slicemachine/manager";
-
-import { managerClient } from "@/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 });
-}