slice-machine-ui 2.17.3-alpha.dani-git-integration.2 → 2.17.3-alpha.jp-revert-section-naming-experiment.1

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

@@ -1,6 +1,7 @@
 import {
   ActionList,
   ActionListItem,
+  BackgroundIcon,
   BlankSlate,
   BlankSlateActions,
   BlankSlateDescription,
@@ -10,10 +11,6 @@ import {
 import { FC } from "react";
 
 import { useAiSliceGenerationExperiment } from "@/features/builder/useAiSliceGenerationExperiment";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
-
-import { getSliceCreationOptions } from "./sliceCreationOptions";
 
 export type SliceZoneBlankSlateProps = {
   openUpdateSliceZoneModal: () => void;
@@ -33,11 +30,6 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
   isSlicesTemplatesSupported,
 }) => {
   const aiSliceGenerationExperiment = useAiSliceGenerationExperiment();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
-  const sliceCreationOptions = getSliceCreationOptions({
-    menuType: "ActionList",
-    sectionsNamingExperiment,
-  });
 
   return (
     <BlankSlate data-testid="slice-zone-blank-slate" sx={{ width: 648 }}>
@@ -47,57 +39,81 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
         name="add"
         size="large"
       />
-      <BlankSlateTitle size="big">
-        Add {pluralize(sectionsNamingExperiment.value)}
-      </BlankSlateTitle>
+      <BlankSlateTitle size="big">Add slices</BlankSlateTitle>
       <BlankSlateDescription>
-        {pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))} are
-        website sections that you can reuse on different pages with different
-        content. Each on different pages with different content. Each{" "}
-        {sectionsNamingExperiment.value} has its own component in your code.
+        Slices are website sections that you can reuse on different pages with
+        different content. Each slice has its own component in your code.
       </BlankSlateDescription>
       <BlankSlateActions>
         <ActionList>
           {aiSliceGenerationExperiment.eligible && (
             <ActionListItem
-              renderStartIcon={() =>
-                sliceCreationOptions.fromImage.BackgroundIcon
-              }
+              renderStartIcon={() => (
+                <BackgroundIcon
+                  name="autoFixHigh"
+                  size="small"
+                  iconSize="medium"
+                  color="purple"
+                  variant="solid"
+                  radius={6}
+                />
+              )}
               onClick={openCreateSliceFromImageModal}
-              description={sliceCreationOptions.fromImage.description}
+              description="Build a slice based on your design image."
             >
-              {sliceCreationOptions.fromImage.title}
+              Generate from image
             </ActionListItem>
           )}
           <ActionListItem
-            renderStartIcon={() =>
-              sliceCreationOptions.fromScratch.BackgroundIcon
-            }
+            renderStartIcon={() => (
+              <BackgroundIcon
+                name="add"
+                size="small"
+                iconSize="medium"
+                color="white"
+                variant="solid"
+                radius={6}
+              />
+            )}
             onClick={openCreateSliceModal}
-            description={sliceCreationOptions.fromScratch.description}
+            description="Build a custom slice your way."
           >
-            {sliceCreationOptions.fromScratch.title}
+            Start from scratch
           </ActionListItem>
           {isSlicesTemplatesSupported && (
             <ActionListItem
-              renderStartIcon={() =>
-                sliceCreationOptions.fromTemplate.BackgroundIcon
-              }
+              renderStartIcon={() => (
+                <BackgroundIcon
+                  name="contentCopy"
+                  size="small"
+                  iconSize="medium"
+                  color="white"
+                  variant="solid"
+                  radius={6}
+                />
+              )}
               onClick={openSlicesTemplatesModal}
-              description={sliceCreationOptions.fromTemplate.description}
+              description="Choose from ready-made examples."
             >
-              {sliceCreationOptions.fromTemplate.title}
+              Use a template
             </ActionListItem>
           )}
           {projectHasAvailableSlices && (
             <ActionListItem
-              renderStartIcon={() =>
-                sliceCreationOptions.fromExisting.BackgroundIcon
-              }
+              renderStartIcon={() => (
+                <BackgroundIcon
+                  name="folder"
+                  size="small"
+                  iconSize="medium"
+                  color="white"
+                  variant="solid"
+                  radius={6}
+                />
+              )}
               onClick={openUpdateSliceZoneModal}
-              description={sliceCreationOptions.fromExisting.description}
+              description="Select from your created slices."
             >
-              {sliceCreationOptions.fromExisting.title}
+              Reuse an existing slice
             </ActionListItem>
           )}
         </ActionList>

package/src/features/navigation/Navigation.tsx

@@ -8,16 +8,16 @@ import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import { RepositoryInfo } from "@/features/navigation/RepositoryInfo";
 import { OnboardingGuide } from "@/features/onboarding";
+import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
 import { useAdapterName } from "@/hooks/useAdapterName";
 import { useMarketingContent } from "@/hooks/useMarketingContent";
 import { FolderIcon } from "@/icons/FolderIcon";
 import { LightningIcon } from "@/icons/Lightning";
 import { MenuBookIcon } from "@/icons/MenuBookIcon";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
+import { SettingsIcon } from "@/icons/SettingsIcon";
 
 import { ChangesItem } from "../../legacy/components/Navigation/ChangesItem";
 import { Environment } from "../../legacy/components/Navigation/Environment";
-import { useSectionsNamingExperiment } from "../builder/useSectionsNamingExperiment";
 import { NavigationItem } from "./NavigationItem";
 import { SliceMachineVersion } from "./SliceMachineVersion";
 import { UpdateInfo } from "./UpdateInfo";
@@ -25,8 +25,8 @@ import { UpdateInfo } from "./UpdateInfo";
 export function Navigation() {
   const router = useRouter();
 
+  const gitIntegrationExperiment = useGitIntegrationExperiment();
   const { documentationLink } = useMarketingContent();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
   const adapter = useAdapterName();
 
   interface CustomTypeNavigationItemProps {
@@ -75,9 +75,7 @@ export function Navigation() {
           <CustomTypeNavigationItem type="custom" />
 
           <NavigationItem
-            title={pluralize(
-              capitalizeFirstLetter(sectionsNamingExperiment.value),
-            )}
+            title="Slices"
             href="/slices"
             Icon={FolderIcon}
             active={router.asPath.startsWith("/slices")}
@@ -98,7 +96,6 @@ export function Navigation() {
               <OnboardingGuide />
             </Suspense>
           </ErrorBoundary>
-
           <NavigationItem
             title="Documentation"
             href={documentationLink}
@@ -112,6 +109,15 @@ export function Navigation() {
             }}
           />
 
+          {gitIntegrationExperiment.eligible && (
+            <NavigationItem
+              title="Settings"
+              href="/settings"
+              Icon={SettingsIcon}
+              active={router.asPath.startsWith("/settings")}
+            />
+          )}
+
           <NavigationItem
             title="Changelog"
             href="/changelog"

package/src/features/settings/SettingsPage.tsx

@@ -0,0 +1,50 @@
+import { Box } from "@prismicio/editor-ui";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { type FC, useEffect } from "react";
+
+import { BreadcrumbItem } from "@/components/Breadcrumb";
+import { ConnectGitRepository } from "@/features/settings/git/ConnectGitRepository";
+import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
+import {
+  AppLayout,
+  AppLayoutBreadcrumb,
+  AppLayoutContent,
+  AppLayoutHeader,
+} from "@/legacy/components/AppLayout";
+
+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>
+            <BreadcrumbItem>Settings</BreadcrumbItem>
+          </AppLayoutBreadcrumb>
+        </AppLayoutHeader>
+        <AppLayoutContent>
+          <Box flexDirection="column" maxWidth={600}>
+            <ConnectGitRepository />
+          </Box>
+        </AppLayoutContent>
+      </AppLayout>
+    </>
+  );
+};

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

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

@@ -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, 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

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

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

@@ -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 "@/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>
+);