slice-machine-ui 1.23.2-alpha.bmo-fix-tsc-error.1 → 1.23.2-alpha.bmo-add-github-settings-page.2

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-prod-internal-test";
+
+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,86 @@
+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 updateToken(values.writeAPIToken);
+              await linkRepo(repo);
+            } 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 update your Prismic repository with{" "}
+                  {providerConfig.name}.
+                </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,64 @@
+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";
+
+import { useWriteAPIToken } from "@src/features/settings/git/useWriteAPIToken";
+
+type GitRepositoryDisconnectDialogProps = {
+  repo: GitRepoSpecifier;
+  trigger: ReactNode;
+  unlinkRepo: (repo: GitRepoSpecifier) => Promise<void>;
+};
+
+export const GitRepositoryDisconnectDialog: FC<
+  GitRepositoryDisconnectDialogProps
+> = ({ repo, trigger, unlinkRepo }) => {
+  const { deleteToken } = useWriteAPIToken({ git: repo });
+  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);
+                await deleteToken();
+              } catch (error) {
+                const message = `Could not disconnect from ${repo.name}`;
+                console.error(message, error);
+                toast.error(message);
+              }
+              setLoading(false);
+            })();
+          },
+          text: "Continue",
+        }}
+        size="medium"
+      />
+    </Dialog>
+  );
+};

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,30 @@
+import type { GitRepoSpecifier } from "@slicemachine/manager";
+
+import { useSliceMachineConfig } from "@src/hooks/useSliceMachineConfig";
+import { managerClient } from "@src/managerClient";
+
+type UseWriteAPITokenReturnType = {
+  updateToken: (token: string) => Promise<void>;
+  deleteToken: () => 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,
+      });
+    },
+    deleteToken: async () => {
+      await managerClient.git.deleteWriteAPIToken({
+        prismic: { domain: config.repositoryName },
+        git: args.git,
+      });
+    },
+  };
+}

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/hooks/useUser.ts

@@ -0,0 +1,14 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+
+import { managerClient } from "@src/managerClient";
+
+type User = { isLoggedIn: boolean };
+
+export function useUser(): User {
+  return useRequest(getUser, []);
+}
+
+async function getUser(): Promise<User> {
+  const isLoggedIn = await managerClient.user.checkIsLoggedIn();
+  return { isLoggedIn };
+}

package/src/icons/SettingsIcon.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from "react";
+
+export const SettingsIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 12C16 13.1046 15.1046 14 14 14C12.8954 14 12 13.1046 12 12C12 10.8954 12.8954 10 14 10C15.1046 10 16 10.8954 16 12ZM14 9C15.4865 9 16.7205 10.0811 16.9585 11.5H23.5C23.7761 11.5 24 11.7239 24 12C24 12.2761 23.7761 12.5 23.5 12.5H16.9585C16.7205 13.9189 15.4865 15 14 15C12.5135 15 11.2795 13.9189 11.0415 12.5H8.5C8.22386 12.5 8 12.2761 8 12C8 11.7239 8.22386 11.5 8.5 11.5H11.0415C11.2795 10.0811 12.5135 9 14 9ZM21 20C21 21.1046 20.1046 22 19 22C17.8954 22 17 21.1046 17 20C17 18.8954 17.8954 18 19 18C20.1046 18 21 18.8954 21 20ZM16.0415 20.5C16.2795 21.9189 17.5135 23 19 23C20.4865 23 21.7205 21.9189 21.9585 20.5H23.5C23.7761 20.5 24 20.2761 24 20C24 19.7239 23.7761 19.5 23.5 19.5H21.9585C21.7205 18.0811 20.4865 17 19 17C17.5135 17 16.2795 18.0811 16.0415 19.5H8.5C8.22386 19.5 8 19.7239 8 20C8 20.2761 8.22386 20.5 8.5 20.5H16.0415Z"
+      fill="currentColor"
+    />
+  </svg>
+);