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

package/src/components/FieldSet/FieldSet.module.css

@@ -0,0 +1,84 @@
+.flex {
+  all: unset;
+  display: flex;
+}
+
+.column {
+  composes: flex;
+  flex-direction: column;
+}
+
+.root {
+  composes: column;
+  border-color: var(--grey6);
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: var(--box-shadow-1);
+  overflow-x: hidden;
+}
+
+.row {
+  composes: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  padding-inline: 16px;
+}
+
+.borderBottom {
+  box-sizing: border-box;
+  &:not(:last-child) {
+    border-bottom-color: var(--grey6);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+  }
+}
+
+.legend {
+  composes: row borderBottom;
+  background-color: var(--grey2);
+  height: 48px;
+  order: 0;
+}
+
+.header {
+  composes: row borderBottom;
+  background-color: var(--grey2);
+  height: 72px;
+  order: 1;
+}
+
+.content {
+  composes: column;
+  background-color: var(--grey1);
+  order: 2;
+  padding: 16px;
+}
+
+.list {
+  composes: column;
+  max-height: 256px;
+  order: 2;
+  overflow-y: auto;
+}
+
+.listItem {
+  composes: row borderBottom;
+  background-color: var(--grey1);
+  flex-shrink: 0;
+  height: 64px;
+}
+
+.borderTop:not(:first-child) {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- Displays a 1 px top border outside the element. */
+  box-shadow: 0 -1px 0 0 var(--grey6);
+}
+
+.footer {
+  composes: row borderTop;
+  background-color: var(--grey1);
+  height: 48px;
+  order: 3;
+  padding-right: 8px;
+}

package/src/components/FieldSet/FieldSet.module.css.d.ts

@@ -0,0 +1,16 @@
+declare const styles: {
+  readonly "borderBottom": string;
+  readonly "borderTop": string;
+  readonly "column": string;
+  readonly "content": string;
+  readonly "flex": string;
+  readonly "footer": string;
+  readonly "header": string;
+  readonly "legend": string;
+  readonly "list": string;
+  readonly "listItem": string;
+  readonly "root": string;
+  readonly "row": string;
+};
+export = styles;
+

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -0,0 +1,244 @@
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  IconButton,
+  Select,
+  SelectItem,
+  Skeleton,
+  Text,
+  theme,
+} from "@prismicio/editor-ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { BitbucketIcon } from "../../icons/BitbucketIcon";
+import { GitHubIcon } from "../../icons/GitHubIcon";
+import { GitLabIcon } from "../../icons/GitLabIcon";
+import {
+  FieldSet,
+  FieldSetContent,
+  FieldSetFooter,
+  FieldSetHeader,
+  FieldSetLegend,
+  FieldSetList,
+  FieldSetListItem,
+} from "./FieldSet";
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  component: FieldSet,
+  argTypes: {
+    children: { control: { disable: true } },
+  },
+} satisfies Meta<typeof FieldSet>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    children: (
+      <>
+        <FieldSetLegend />
+        <FieldSetHeader />
+        <FieldSetList>
+          <FieldSetListItem action={<Button color="grey">Action</Button>} />
+        </FieldSetList>
+        <FieldSetFooter action={<IconButton icon="openInNew" />} />
+      </>
+    ),
+  },
+} satisfies Story;
+
+export const WithButtonGroupContent = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
+        <FieldSetContent>
+          <ButtonGroup color="grey">
+            <Button
+              renderStartIcon={() => <GitHubIcon color={theme.color.grey11} />}
+              sx={{ flexBasis: 0, flexGrow: 1 }}
+            >
+              GitHub
+            </Button>
+            <Button
+              disabled
+              renderStartIcon={() => (
+                <BitbucketIcon color={theme.color.grey11} />
+              )}
+              sx={{ flexBasis: 0, flexGrow: 1 }}
+            >
+              Bitbucket{" "}
+              <Text color="inherit" variant="small">
+                (soon)
+              </Text>
+            </Button>
+            <Button
+              disabled
+              renderStartIcon={() => <GitLabIcon color={theme.color.grey11} />}
+              sx={{ flexBasis: 0, flexGrow: 1 }}
+            >
+              GitLab{" "}
+              <Text color="inherit" variant="small">
+                (soon)
+              </Text>
+            </Button>
+          </ButtonGroup>
+        </FieldSetContent>
+        <FieldSetFooter action={<IconButton icon="openInNew" />}>
+          Learn more about Prismic for Git
+        </FieldSetFooter>
+      </>
+    ),
+  },
+  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
+} satisfies Story;
+
+export const LoadingWithHeaderAndList = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
+        <FieldSetHeader>
+          <OwnerSelect disabled />
+        </FieldSetHeader>
+        <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>
+        <FieldSetFooter action={<IconButton icon="openInNew" />}>
+          Learn more about Prismic for Git
+        </FieldSetFooter>
+      </>
+    ),
+  },
+  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
+};
+
+export const WithHeaderAndListOverflow = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
+        <FieldSetHeader>
+          <OwnerSelect />
+        </FieldSetHeader>
+        <FieldSetList>
+          {[...Array(100).keys()].map((index) => (
+            <FieldSetListItem
+              action={<Button color="grey">Connect</Button>}
+              key={index}
+            >
+              Repository <Text color="grey11">• xd ago</Text>
+            </FieldSetListItem>
+          ))}
+        </FieldSetList>
+        <FieldSetFooter action={<IconButton icon="openInNew" />}>
+          Learn more about Prismic for Git
+        </FieldSetFooter>
+      </>
+    ),
+  },
+  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
+};
+
+export const WithSingleListItem = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
+        <FieldSetList>
+          <FieldSetListItem action={<Button color="grey">Disconnect</Button>}>
+            Repository <Text color="grey11">• xd ago</Text>
+          </FieldSetListItem>
+        </FieldSetList>
+        <FieldSetFooter action={<IconButton icon="openInNew" />}>
+          Learn more about Prismic for Git
+        </FieldSetFooter>
+      </>
+    ),
+  },
+  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
+};
+
+export const WithHeaderAndBoxContent = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
+        <FieldSetHeader>
+          <OwnerSelect />
+        </FieldSetHeader>
+        <FieldSetContent>
+          <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">
+              No Results Found
+            </Text>
+            <Text align="center" color="grey11">
+              Try selecting a different Git account or organization on the top
+              left.
+            </Text>
+          </Box>
+        </FieldSetContent>
+        <FieldSetFooter action={<IconButton icon="openInNew" />}>
+          Learn more about Prismic for Git
+        </FieldSetFooter>
+      </>
+    ),
+  },
+  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
+};
+
+type OwnerSelectProps = { disabled?: boolean };
+
+function OwnerSelect(props: OwnerSelectProps) {
+  return (
+    <Select
+      {...props}
+      color="grey"
+      constrainContentWidth
+      flexContent
+      placeholder="Owner"
+      renderStartIcon={() => <GitHubIcon color={theme.color.grey11} />}
+      size="large"
+      sx={{ width: "calc(50% - 8px)" }}
+    >
+      {[...Array(2).keys()].map((index) => (
+        <SelectItem
+          key={index}
+          renderStartIcon={() => <GitHubIcon color={theme.color.grey11} />}
+          size="large"
+          value={`owner-${index}`}
+        >
+          Owner
+        </SelectItem>
+      ))}
+    </Select>
+  );
+}

package/src/components/FieldSet/FieldSet.tsx

@@ -0,0 +1,67 @@
+import { Text } from "@prismicio/editor-ui";
+import type { FC, PropsWithChildren, ReactNode } from "react";
+
+import styles from "./FieldSet.module.css";
+
+export const FieldSet: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.root} />
+);
+
+export const FieldSetLegend: FC<PropsWithChildren> = ({
+  children,
+  ...otherProps
+}) => (
+  <div {...otherProps} className={styles.legend}>
+    <Text color="grey11" component="span" noWrap variant="smallBold">
+      {children}
+    </Text>
+  </div>
+);
+
+export const FieldSetHeader: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.header} />
+);
+
+export const FieldSetContent: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.content} />
+);
+
+export const FieldSetList: FC<PropsWithChildren> = (props) => (
+  <ul {...props} className={styles.list} />
+);
+
+type FieldSetListItemProps = PropsWithChildren<{ action?: ReactNode }>;
+
+export const FieldSetListItem: FC<FieldSetListItemProps> = ({
+  action,
+  children,
+  ...otherProps
+}) => (
+  <li {...otherProps} className={styles.listItem}>
+    <Text component="span" noWrap variant="bold" sx={{ flexGrow: 1 }}>
+      {children}
+    </Text>
+    {action}
+  </li>
+);
+
+type FieldSetFooterProps = PropsWithChildren<{ action?: ReactNode }>;
+
+export const FieldSetFooter: FC<FieldSetFooterProps> = ({
+  action,
+  children,
+  ...otherProps
+}) => (
+  <div {...otherProps} className={styles.footer}>
+    <Text
+      color="grey11"
+      component="span"
+      noWrap
+      variant="small"
+      sx={{ flexGrow: 1 }}
+    >
+      {children}
+    </Text>
+    {action}
+  </div>
+);

package/src/components/FieldSet/index.ts

@@ -0,0 +1,9 @@
+export {
+  FieldSet,
+  FieldSetContent,
+  FieldSetFooter,
+  FieldSetHeader,
+  FieldSetLegend,
+  FieldSetList,
+  FieldSetListItem,
+} from "./FieldSet";

package/src/features/changes/PushChangesButton.tsx

@@ -1,20 +1,83 @@
-import { Button } from "@prismicio/editor-ui";
+import { Button, Skeleton, Tooltip } from "@prismicio/editor-ui";
 import {
   type ComponentPropsWithoutRef,
   type ElementRef,
+  type FC,
   forwardRef,
+  type ReactNode,
+  Suspense,
 } from "react";
 
-type PushChangesButtonProps = Pick<
+import { ErrorBoundary } from "@/ErrorBoundary";
+import { gitProviderToConfig } from "@/features/settings/git/GitProvider";
+import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
+import { useLinkedGitRepos } from "@/features/settings/git/useLinkedGitRepos";
+
+type PushChangesButtonProps = Required<BarePushChangesButtonProps>;
+
+export const PushChangesButton: FC<PushChangesButtonProps> = (props) => (
+  <ErrorBoundary renderError={renderError}>
+    <Suspense fallback={<PushChangesButtonSkeleton />}>
+      <PushChangesButtonUsingGitIntegrationExperiment {...props} />
+    </Suspense>
+  </ErrorBoundary>
+);
+
+const PushChangesButtonUsingGitIntegrationExperiment: FC<
+  PushChangesButtonProps
+> = (props) => {
+  const gitIntegrationExperiment = useGitIntegrationExperiment();
+  return gitIntegrationExperiment.eligible ? (
+    <PushChangesButtonUsingLinkedGitRepos {...props} />
+  ) : (
+    <BarePushChangesButton {...props} />
+  );
+};
+
+const PushChangesButtonUsingLinkedGitRepos: FC<PushChangesButtonProps> = (
+  props,
+) => {
+  const { linkedGitRepos } = useLinkedGitRepos();
+  if (linkedGitRepos.length > 0) {
+    const providerConfig = gitProviderToConfig[linkedGitRepos[0].provider];
+    return (
+      <Tooltip
+        content={`This project uses the Git workflow. Update Prismic by pushing your changes to ${providerConfig.name}.`}
+        side="bottom"
+      >
+        <BarePushChangesButton disabled />
+      </Tooltip>
+    );
+  } else {
+    return <BarePushChangesButton {...props} />;
+  }
+};
+
+type BarePushChangesButtonProps = Pick<
   ComponentPropsWithoutRef<typeof Button>,
   "disabled" | "loading" | "onClick"
 >;
 
-export const PushChangesButton = forwardRef<
+const BarePushChangesButton = forwardRef<
   ElementRef<typeof Button>,
-  PushChangesButtonProps
+  BarePushChangesButtonProps
 >((props, ref) => (
   <Button {...props} ref={ref} startIcon="upload">
     Push
   </Button>
 ));
+
+function renderError(): ReactNode {
+  return (
+    <Tooltip
+      content="An error occurred while fetching the list of connected Git repositories."
+      side="bottom"
+    >
+      <BarePushChangesButton disabled />
+    </Tooltip>
+  );
+}
+
+const PushChangesButtonSkeleton: FC = () => (
+  <Skeleton height={32} width={71.32} />
+);

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

@@ -22,15 +22,10 @@ import { toast } from "react-toastify";
 
 import { getState, telemetry } from "@/apiClient";
 import { addAiFeedback } from "@/features/aiFeedback";
-import {
-  useSectionsNamingExperiment,
-  UseSectionsNamingExperimentReturnType,
-} from "@/features/builder/useSectionsNamingExperiment";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { managerClient } from "@/managerClient";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
-import { pluralize } from "@/utils/textConversion";
 
 import { Slice, SliceCard } from "./SliceCard";
 
@@ -58,7 +53,7 @@ export function CreateSliceFromImageModal(
   const { syncChanges } = useAutoSync();
   const { createSliceSuccess } = useSliceMachineActions();
   const { completeStep } = useOnboarding();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
+
   /**
    * Keeps track of the current instance id.
    * When the modal is closed, the id is reset.
@@ -244,8 +239,7 @@ export function CreateSliceFromImageModal(
       <DialogHeader title="Generate from image" />
       <DialogContent gap={0}>
         <DialogDescription hidden>
-          Upload images to generate {pluralize(sectionsNamingExperiment.value)}{" "}
-          with AI
+          Upload images to generate slices with AI
         </DialogDescription>
         {slices.length === 0 ? (
           <Box padding={16} height="100%">
@@ -285,8 +279,7 @@ export function CreateSliceFromImageModal(
             loading={isCreatingSlices}
             onClick={onSubmit}
           >
-            {getSubmitButtonLabel({ location, sectionsNamingExperiment })} (
-            {readySlices.length})
+            {getSubmitButtonLabel(location)} ({readySlices.length})
           </DialogActionButton>
         </DialogActions>
       </DialogContent>
@@ -298,7 +291,6 @@ function UploadBlankSlate(props: {
   droppingFiles?: boolean;
   onFilesSelected: (files: File[]) => void;
 }) {
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
   const { droppingFiles = false, onFilesSelected } = props;
 
   return (
@@ -320,8 +312,7 @@ function UploadBlankSlate(props: {
         />
         <BlankSlateTitle>Upload your design images.</BlankSlateTitle>
         <BlankSlateDescription>
-          Once uploaded, you can generate{" "}
-          {pluralize(sectionsNamingExperiment.value)} automatically using AI.
+          Once uploaded, you can generate slices automatically using AI.
         </BlankSlateDescription>
         <BlankSlateActions>
           <FileUploadButton
@@ -469,19 +460,15 @@ async function addSlices(newSlices: NewSlice[]) {
   return { library, slices };
 }
 
-const getSubmitButtonLabel = ({
-  location,
-  sectionsNamingExperiment,
-}: {
-  location: "custom_type" | "page_type" | "slices";
-  sectionsNamingExperiment: UseSectionsNamingExperimentReturnType;
-}) => {
+const getSubmitButtonLabel = (
+  location: "custom_type" | "page_type" | "slices",
+) => {
   switch (location) {
     case "custom_type":
       return "Add to type";
     case "page_type":
       return "Add to page";
     case "slices":
-      return `Add to ${pluralize(sectionsNamingExperiment.value)}`;
+      return "Add to slices";
   }
 };