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

package/src/features/customTypes/actions/renameCustomType.ts

@@ -1,8 +1,10 @@
+import { toast } from "react-toastify";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+
 import { managerClient } from "@src/managerClient";
-import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 import { CustomTypeFormat } from "@slicemachine/manager";
-import { toast } from "react-toastify";
+
+import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 
 type RenameCustomTypeArgs = {
   model: CustomType;
@@ -23,10 +25,14 @@ export async function renameCustomType({
       label: newLabel,
     };
 
-    await managerClient.customTypes.renameCustomType({
+    const { errors } = await managerClient.customTypes.renameCustomType({
       model: renamedCustomType,
     });
 
+    if (errors.length > 0) {
+      throw errors;
+    }
+
     onSuccess(renamedCustomType);
 
     toast.success(
@@ -40,8 +46,8 @@ export async function renameCustomType({
       start: true,
       plural: false,
     })} could not be renamed`;
-    console.error(errorMessage, e);
 
+    console.error(errorMessage, e);
     toast.error(errorMessage);
   }
 }

package/src/features/customTypes/customTypesBuilder/CustomTypesBuilderPage.tsx

@@ -39,7 +39,9 @@ export const CustomTypesBuilderPage: FC = () => {
   );
 
   useEffect(() => {
-    // TODO(DT-1801): When creating a custom type, don't redirect to the builder page until the custom type is created
+    // This is a fallback in case the user try to directly access a custom type
+    // that don't exist
+    // TODO(DT-1801): implement a 404 page.
     if (!selectedCustomType || !hasLocal(selectedCustomType)) {
       void router.replace("/");
     }

package/src/features/customTypes/customTypesTable/CustomTypesTable.tsx

@@ -11,16 +11,9 @@ import {
 } from "@src/components/Table";
 import { ReusableIcon } from "@src/icons/ReusableIcon";
 import { UniqueIcon } from "@src/icons/UniqueIcon";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { type CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { type CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import { CUSTOM_TYPES_CONFIG } from "../customTypesConfig";
-import {
-  useCustomTypes,
-  useCustomTypesAutoRevalidation,
-} from "./useCustomTypes";
-
 import {
   BlankSlate,
   BlankSlateImage,
@@ -29,18 +22,25 @@ import {
   BlankSlateActions,
   BlankSlateContent,
 } from "@src/components/BlankSlate";
+
+import { CUSTOM_TYPES_CONFIG } from "../customTypesConfig";
 import { EditDropdown } from "../EditDropdown";
+import {
+  useCustomTypes,
+  useCustomTypesAutoRevalidation,
+} from "./useCustomTypes";
 
 type CustomTypesTableProps = {
   format: CustomTypeFormat;
   isCreatingCustomType: boolean;
+  openCreateCustomTypeModal: () => void;
 };
 
 export const CustomTypesTable: FC<CustomTypesTableProps> = ({
   format,
   isCreatingCustomType,
+  openCreateCustomTypeModal,
 }) => {
-  const { openCreateCustomTypeModal } = useSliceMachineActions();
   const router = useRouter();
   const { customTypes, updateCustomTypes } = useCustomTypes(format);
   const sortedCustomTypes = customTypes.sort(

package/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx

@@ -1,4 +1,4 @@
-import { type FC, Suspense } from "react";
+import { type FC, Suspense, useState } from "react";
 import {
   Button,
   ErrorBoundary,
@@ -7,7 +7,6 @@ import {
   DefaultErrorMessage,
 } from "@prismicio/editor-ui";
 import Head from "next/head";
-import { useSelector } from "react-redux";
 
 import {
   AppLayout,
@@ -16,13 +15,10 @@ import {
   AppLayoutContent,
   AppLayoutHeader,
 } from "@components/AppLayout";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { isLoading } from "@src/modules/loading";
-import { type SliceMachineStoreType } from "@src/redux/type";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
 import { CreateCustomTypeModal } from "@components/Forms/CreateCustomTypeModal";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import type { CustomTypeFormat } from "@slicemachine/manager";
+
 import { CustomTypesTable } from "./CustomTypesTable";
 
 type CustomTypesTablePageProps = {
@@ -33,15 +29,9 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
   format,
 }) => {
   const customTypesMessages = CUSTOM_TYPES_MESSAGES[format];
-  const { openCreateCustomTypeModal } = useSliceMachineActions();
-  const { isCreatingCustomType } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      isCreatingCustomType: isLoading(
-        store,
-        LoadingKeysEnum.CREATE_CUSTOM_TYPE,
-      ),
-    }),
-  );
+  const [isCreatingCustomType, setIsCreatingCustomType] = useState(false);
+  const [isCreateCustomTypeModalOpen, setIsCreateCustomTypeModalOpen] =
+    useState(false);
 
   return (
     <>
@@ -101,7 +91,9 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
                 <Button
                   data-cy="create-ct"
                   loading={isCreatingCustomType}
-                  onClick={openCreateCustomTypeModal}
+                  onClick={() => {
+                    setIsCreateCustomTypeModalOpen(true);
+                  }}
                   startIcon="add"
                 >
                   Create
@@ -113,8 +105,17 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
                 <CustomTypesTable
                   format={format}
                   isCreatingCustomType={isCreatingCustomType}
+                  openCreateCustomTypeModal={() => {
+                    setIsCreateCustomTypeModalOpen(true);
+                  }}
+                />
+                <CreateCustomTypeModal
+                  format={format}
+                  isCreating={isCreatingCustomType}
+                  isOpen={isCreateCustomTypeModalOpen}
+                  onCreateChange={setIsCreatingCustomType}
+                  onOpenChange={setIsCreateCustomTypeModalOpen}
                 />
-                <CreateCustomTypeModal format={format} />
               </Box>
             </AppLayoutContent>
           </AppLayout>

package/src/features/environments/actions/setEnvironment.ts

@@ -13,6 +13,6 @@ export async function setEnvironment(
     environment: environment.domain,
   });
 
-  revalidateData(getActiveEnvironment, []);
-  revalidateData(getLegacySliceMachineState, []);
+  void revalidateData(getActiveEnvironment, []);
+  void revalidateData(getLegacySliceMachineState, []);
 }

package/src/features/settings/SettingsPage.tsx

@@ -0,0 +1,47 @@
+import { Box } from "@prismicio/editor-ui";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { type FC, useEffect } from "react";
+
+import {
+  AppLayout,
+  AppLayoutBreadcrumb,
+  AppLayoutContent,
+  AppLayoutHeader,
+} from "@components/AppLayout";
+import { ConnectGitRepository } from "@src/features/settings/git/ConnectGitRepository";
+import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
+
+export const SettingsPage: FC = () => {
+  const gitIntegrationExperiment = useGitIntegrationExperiment();
+  const router = useRouter();
+
+  // TODO(DT-1801): implement a 404 page.
+  useEffect(() => {
+    if (!gitIntegrationExperiment.eligible) {
+      void router.replace("/");
+    }
+  }, [gitIntegrationExperiment.eligible, router]);
+
+  if (!gitIntegrationExperiment.eligible) {
+    return null;
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Settings - Slice Machine</title>
+      </Head>
+      <AppLayout>
+        <AppLayoutHeader>
+          <AppLayoutBreadcrumb folder="Settings" />
+        </AppLayoutHeader>
+        <AppLayoutContent>
+          <Box flexDirection="column" maxWidth={600}>
+            <ConnectGitRepository />
+          </Box>
+        </AppLayoutContent>
+      </AppLayout>
+    </>
+  );
+};

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