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

package/src/components/SideNav/SideNav.css.ts

@@ -54,7 +54,7 @@ export const repository = style([
   sprinkles({
     display: "flex",
     justifyContent: "space-between",
-    marginBottom: 32,
+    marginBottom: 16,
   }),
 ]);
 

package/src/components/SideNav/SideNav.tsx

@@ -173,10 +173,14 @@ export const UpdateInfo: FC<UpdateInfoProps> = ({
       Some updates of Slice Machine are available.
     </p>
 
-    {createElement(
-      component,
-      { ...{ className: styles.updateInfoLink, onClick }, href },
-      "Learn more",
-    )}
+    {
+      // TODO(DT-1942): This should be a Button with a link component for
+      // accessibility
+      createElement(
+        component,
+        { ...{ className: styles.updateInfoLink, onClick }, href },
+        "Learn more",
+      )
+    }
   </div>
 );

package/src/components/SideNav/SideNavEnvironmentSelector.tsx

@@ -8,6 +8,7 @@ import {
   Icon,
   IconButton,
   InvisibleButton,
+  ProgressCircle,
   Text,
 } from "@prismicio/editor-ui";
 import { Environment } from "@slicemachine/manager/client";
@@ -21,22 +22,26 @@ import * as styles from "./SideNavEnvironmentSelector.css";
 import { LoginIcon } from "@src/icons/LoginIcon";
 
 type SideNavEnvironmentSelectorProps = {
-  variant?: "default" | "offline" | "unauthorized" | "unauthenticated";
-  environments?: Environment[];
   activeEnvironment?: Environment;
-  onSelect?: (environment: Environment) => void | Promise<void>;
+  disabled?: boolean;
+  environments?: Environment[];
+  loading?: boolean;
+  variant?: "default" | "offline" | "unauthorized" | "unauthenticated";
   onLogInClick?: () => void;
+  onSelect?: (environment: Environment) => void | Promise<void>;
 };
 
 export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
   props,
 ) => {
   const {
-    variant = "default",
-    environments = [],
     activeEnvironment,
-    onSelect,
+    disabled = false,
+    environments = [],
+    loading = false,
+    variant = "default",
     onLogInClick,
+    onSelect,
   } = props;
 
   const isProductionEnvironmentActive = activeEnvironment?.kind === "prod";
@@ -60,7 +65,7 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
         overflow="hidden"
         alignItems="flex-start"
       >
-        {variant === "default" || variant === "unauthenticated" ? (
+        {variant === "default" ? (
           <Text component="span" variant="small" color="grey11">
             Environment
           </Text>
@@ -70,6 +75,12 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
           <InvisibleButton buttonText="Login required" onClick={onLogInClick} />
         ) : undefined}
 
+        {variant === "offline" ? (
+          <Text component="span" variant="bold">
+            Offline
+          </Text>
+        ) : undefined}
+
         {variant === "default" ? (
           <Text
             component="span"
@@ -93,8 +104,10 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
 
         {environments.length > 1 ? (
           <EnvironmentDropdownMenu
-            environments={environments}
             activeEnvironment={activeEnvironment}
+            disabled={disabled}
+            environments={environments}
+            loading={loading}
             onSelect={onSelect}
           />
         ) : undefined}
@@ -107,11 +120,14 @@ type EnvironmentDropdownMenuProps = Pick<
   SideNavEnvironmentSelectorProps,
   "activeEnvironment" | "onSelect"
 > & {
+  disabled: boolean;
   environments: Environment[];
+  loading: boolean;
 };
 
 const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
-  const { environments, activeEnvironment, onSelect } = props;
+  const { activeEnvironment, disabled, environments, loading, onSelect } =
+    props;
 
   const nonPersonalEnvironments = environments.filter(
     (environment) => environment.kind !== "dev",
@@ -122,8 +138,12 @@ const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
 
   return (
     <DropdownMenu modal>
-      <DropdownMenuTrigger disabled={environments.length < 2}>
-        <IconButton icon="unfoldMore" hiddenLabel="Select environment" />
+      <DropdownMenuTrigger disabled={disabled}>
+        <IconButton
+          icon={loading ? <ProgressCircle /> : "unfoldMore"}
+          hiddenLabel="Select environment"
+          disabled={disabled}
+        />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" minWidth={256}>
         {personalEnvironment ? (

package/src/features/autoSave/AutoSaveStatusIndicator.tsx

@@ -1,10 +1,10 @@
 import { FC } from "react";
 import { Box, Icon, ProgressCircle, Text } from "@prismicio/editor-ui";
 
-import { AutoSaveStatus } from "./useAutoSave";
+import { ActionQueueStatus } from "@src/hooks/useActionQueue";
 
 type AutoSaveStatusIndicatorProps = {
-  status: AutoSaveStatus;
+  status: ActionQueueStatus;
 };
 
 export const AutoSaveStatusIndicator: FC<AutoSaveStatusIndicatorProps> = (
@@ -14,7 +14,7 @@ export const AutoSaveStatusIndicator: FC<AutoSaveStatusIndicatorProps> = (
   let autoSaveStatusInfo;
 
   switch (status) {
-    case "saving":
+    case "pending":
       autoSaveStatusInfo = {
         icon: <ProgressCircle color="grey11" />,
         text: "Saving...",
@@ -26,7 +26,7 @@ export const AutoSaveStatusIndicator: FC<AutoSaveStatusIndicatorProps> = (
         text: "Failed to save",
       };
       break;
-    case "saved":
+    case "done":
       autoSaveStatusInfo = {
         icon: <Icon name="check" color="green11" size="medium" />,
         text: "Auto-saved",

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

@@ -10,18 +10,16 @@ import { CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { useStableCallback } from "@prismicio/editor-support/React";
 
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import {
-  AutoSaveStatus,
-  useAutoSave,
-} from "@src/features/autoSave/useAutoSave";
+import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 import { getFormat } from "@src/domain/customType";
 import { updateCustomType } from "@src/apiClient";
+import { ActionQueueStatus, useActionQueue } from "@src/hooks/useActionQueue";
 
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 
 type CustomTypeContext = {
   customType: CustomType;
-  autoSaveStatus: AutoSaveStatus;
+  actionQueueStatus: ActionQueueStatus;
   setCustomType: (customType: CustomType) => void;
 };
 
@@ -40,16 +38,17 @@ export function CustomTypeProvider(props: CustomTypeProviderProps) {
   const [customType, setCustomTypeState] = useState(initialCustomType);
   const format = getFormat(customType);
   const customTypeMessages = CUSTOM_TYPES_MESSAGES[format];
-  const { autoSaveStatus, setNextSave } = useAutoSave({
+  const { actionQueueStatus, setNextAction } = useActionQueue({
     errorMessage: customTypeMessages.autoSaveFailed,
   });
   const { saveCustomTypeSuccess } = useSliceMachineActions();
   const stableSaveCustomTypeSuccess = useStableCallback(saveCustomTypeSuccess);
+  const { syncChanges } = useAutoSync();
 
   const setCustomType = useCallback(
     (customType: CustomType) => {
       setCustomTypeState(customType);
-      setNextSave(async () => {
+      setNextAction(async () => {
         const { errors } = await updateCustomType(customType);
 
         if (errors.length > 0) {
@@ -58,18 +57,20 @@ export function CustomTypeProvider(props: CustomTypeProviderProps) {
 
         // Update available custom types store with new custom type
         stableSaveCustomTypeSuccess(customType);
+
+        syncChanges();
       });
     },
-    [setNextSave, stableSaveCustomTypeSuccess],
+    [setNextAction, stableSaveCustomTypeSuccess, syncChanges],
   );
 
   const contextValue: CustomTypeContext = useMemo(
     () => ({
-      autoSaveStatus,
+      actionQueueStatus,
       customType,
       setCustomType,
     }),
-    [autoSaveStatus, customType, setCustomType],
+    [actionQueueStatus, customType, setCustomType],
   );
 
   return (

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

@@ -41,7 +41,7 @@ export const CustomTypesBuilderPage: FC = () => {
   useEffect(() => {
     // 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
+    // TODO(DT-1801): implement a 404 page.
     if (!selectedCustomType || !hasLocal(selectedCustomType)) {
       void router.replace("/");
     }
@@ -78,7 +78,7 @@ const CustomTypesBuilderPageWithProvider: React.FC<
       <CustomTypeProvider
         initialCustomType={CustomTypes.fromSM(customTypeFromStore)}
       >
-        {({ autoSaveStatus, customType, setCustomType }) => {
+        {({ actionQueueStatus, customType, setCustomType }) => {
           const format = getFormat(customType);
           const config = CUSTOM_TYPES_CONFIG[customTypeFromStore.format];
           const messages = CUSTOM_TYPES_MESSAGES[customTypeFromStore.format];
@@ -92,7 +92,7 @@ const CustomTypesBuilderPageWithProvider: React.FC<
                   page={customType.label ?? customType.id}
                 />
                 <AppLayoutActions>
-                  <AutoSaveStatusIndicator status={autoSaveStatus} />
+                  <AutoSaveStatusIndicator status={actionQueueStatus} />
                   {customType.format === "page" ? (
                     <PageSnippetDialog model={customType} />
                   ) : undefined}

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

@@ -1,8 +1,8 @@
 import { revalidateData } from "@prismicio/editor-support/Suspense";
-import { Environment } from "@slicemachine/manager/client";
 
-import { getLegacySliceMachineState } from "@src/features/legacyState/actions/getLegacySliceMachineState";
+import { Environment } from "@slicemachine/manager/client";
 import { managerClient } from "@src/managerClient";
+import { getState } from "@src/apiClient";
 
 import { getActiveEnvironment } from "./getActiveEnvironment";
 
@@ -13,6 +13,6 @@ export async function setEnvironment(
     environment: environment.domain,
   });
 
-  revalidateData(getActiveEnvironment, []);
-  revalidateData(getLegacySliceMachineState, []);
+  void revalidateData(getActiveEnvironment, []);
+  void revalidateData(getState, []);
 }

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"];