slice-machine-ui 1.25.1-beta.5 → 1.25.1-beta.7

package/components/Navigation/ChangesItem.tsx

@@ -1,6 +1,14 @@
 import { type FC } from "react";
 import { useRouter } from "next/router";
-import { Box, Button, Text } from "@prismicio/editor-ui";
+import { useMediaQuery } from "@prismicio/editor-support/React";
+import {
+  Box,
+  Button,
+  IconButton,
+  Text,
+  Tooltip,
+  breakpoints,
+} from "@prismicio/editor-ui";
 
 import {
   HoverCard,
@@ -13,6 +21,7 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { useNetwork } from "@src/hooks/useNetwork";
 import { useAuthStatus } from "@src/hooks/useAuthStatus";
 import { useUnSyncChanges } from "@src/features/sync/useUnSyncChanges";
+import { ChangesIcon } from "@src/icons/ChangesIcon";
 import { AuthStatus } from "@src/modules/userContext/types";
 import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 import { AutoSyncStatusIndicator } from "@src/features/sync/components/AutoSyncStatusIndicator";
@@ -22,6 +31,7 @@ export const ChangesItem: FC = () => {
   const open = useOpenChangesHoverCard();
   const router = useRouter();
   const { autoSyncStatus } = useAutoSync();
+  const isSmall = useMediaQuery(breakpoints.small);
 
   const onClose = () => {
     setSeenChangesToolTip();
@@ -29,18 +39,42 @@ export const ChangesItem: FC = () => {
 
   return (
     <HoverCard
+      align="start"
       open={open}
       openDelay={3000}
       onClose={onClose}
       side="right"
       sideOffset={24}
-      collisionPadding={280}
       trigger={
-        <Box padding={{ bottom: 24 }}>
+        <Box alignItems={isSmall ? "center" : undefined} flexDirection="column">
           {autoSyncStatus === "failed" ||
           autoSyncStatus === "synced" ||
           autoSyncStatus === "syncing" ? (
             <AutoSyncStatusIndicator autoSyncStatus={autoSyncStatus} />
+          ) : isSmall ? (
+            <Tooltip content="Review changes" side="right">
+              <Box position="relative">
+                {/*
+                 * TODO(DT-1942): This should be an IconButton with a link
+                 * component for accessibility
+                 */}
+                <IconButton
+                  icon={<ChangesIcon />}
+                  onClick={() => {
+                    void router.push("/changes");
+                  }}
+                  variant="solid"
+                />
+                <Box
+                  left="100%"
+                  position="absolute"
+                  top={0}
+                  transform="translate(-50%, -50%)"
+                >
+                  <ChangesCount color="purple" />
+                </Box>
+              </Box>
+            </Tooltip>
           ) : (
             // TODO(DT-1942): This should be a Button with a link component for
             // accessibility
@@ -52,7 +86,8 @@ export const ChangesItem: FC = () => {
               sx={{ width: "100%" }}
             >
               <Box alignItems="center" gap={4}>
-                <Text variant="bold">Review changes</Text> <ChangesCount />
+                <Text variant="bold">Review changes</Text>{" "}
+                <ChangesCount color="grey" />
               </Box>
             </Button>
           )}
@@ -70,7 +105,9 @@ export const ChangesItem: FC = () => {
   );
 };
 
-export const ChangesCount: FC = () => {
+type ChangesCountProps = { color: "grey" | "purple" };
+
+export const ChangesCount: FC<ChangesCountProps> = ({ color }) => {
   const isOnline = useNetwork();
   const authStatus = useAuthStatus();
   const { unSyncedSlices, unSyncedCustomTypes } = useUnSyncChanges();
@@ -91,8 +128,12 @@ export const ChangesCount: FC = () => {
   const formattedNumberOfChanges = numberOfChanges > 9 ? "+9" : numberOfChanges;
 
   return (
-    <Box padding={{ inline: 6 }} borderRadius={10} backgroundColor="grey5">
-      <Text color="grey11" variant="small">
+    <Box
+      padding={{ inline: 6 }}
+      borderRadius={10}
+      backgroundColor={color === "grey" ? "grey5" : "purple9"}
+    >
+      <Text color={color === "grey" ? "grey11" : "grey1"} variant="small">
         {formattedNumberOfChanges}
       </Text>
     </Box>

package/components/Navigation/index.test.tsx

@@ -98,7 +98,7 @@ describe("Side Navigation", () => {
     renderSideNavigation();
     expect(await screen.findByText("foo")).toBeVisible();
     expect(await screen.findByText("foo.prismic.io")).toBeVisible();
-    const link = await screen.findByTitle("Open Prismic repository");
+    const link = screen.getByTestId("prismic-repository-link");
     expect(link).toHaveAttribute("href", "https://foo.prismic.io");
     expect(link).toHaveAttribute("target", "_blank");
   });

package/components/Navigation/index.tsx

@@ -1,3 +1,4 @@
+import { Box } from "@prismicio/editor-ui";
 import { Suspense, type FC } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -65,7 +66,9 @@ const Navigation: FC = () => {
         href={repositoryUrl}
       />
 
-      <ChangesItem />
+      <Box flexDirection="column" padding={{ bottom: 24 }}>
+        <ChangesItem />
+      </Box>
 
       <SideNavList>
         <SideNavListItem>

package/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -35,6 +35,7 @@ import EditModal from "../../common/EditModal";
 import Zone from "../../common/Zone";
 import SliceZone from "../SliceZone";
 import {
+  FieldType,
   Group,
   NestableWidget,
   UID,
@@ -79,7 +80,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
   }: {
     id: string;
     label: string;
-    widgetTypeName: string;
+    widgetTypeName: FieldType;
   }) => {
     // @ts-expect-error We have to create a widget map or a service instead of using export name
     if (ensureWidgetTypeExistence(Widgets, widgetTypeName)) {
@@ -119,12 +120,12 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
     setCustomType(newCustomType);
 
     void telemetry.track({
-      event: "custom-type:field-added",
+      event: "field:added",
       id,
-      name: customType.id,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
-      type: widget.TYPE_NAME,
-      zone: "static",
+      name: label,
+      type: widgetTypeName,
+      isInAGroup: false,
+      contentType: customType.format === "page" ? "page type" : "custom type",
     });
   };
 
@@ -213,6 +214,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
           {query.newPageType === undefined ? (
             <Zone
               zoneType="customType"
+              zoneTypeFormat={customType.format}
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               tabId={tabId}
               title="Static Zone"

package/lib/builders/SliceBuilder/FieldZones/index.tsx

@@ -1,7 +1,10 @@
 import { FC } from "react";
 import { flushSync } from "react-dom";
 import { DropResult } from "react-beautiful-dnd";
-import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
+import {
+  FieldType,
+  NestableWidget,
+} from "@prismicio/types-internal/lib/customtypes";
 
 import { ensureDnDDestination } from "@lib/utils";
 import { transformKeyAccessor } from "@utils/str";
@@ -19,6 +22,7 @@ import {
 import Zone from "@lib/builders/common/Zone";
 import EditModal from "@lib/builders/common/EditModal";
 import { AnyWidget } from "@lib/models/common/widgets/Widget";
+import { telemetry } from "@src/apiClient";
 
 const dataTipText = ` The non-repeatable zone
   is for fields<br/> that should appear once, like a<br/>
@@ -76,7 +80,7 @@ const FieldZones: FC = () => {
     }: {
       id: string;
       label: string;
-      widgetTypeName: string;
+      widgetTypeName: FieldType;
     }) => {
       // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -117,6 +121,15 @@ const FieldZones: FC = () => {
       });
 
       setSlice(newSlice);
+
+      void telemetry.track({
+        event: "field:added",
+        id,
+        name: label,
+        type: widgetTypeName,
+        isInAGroup: false,
+        contentType: "slice",
+      });
     };
 
   const _onDragEnd = (widgetArea: WidgetsArea) => (result: DropResult) => {
@@ -145,6 +158,7 @@ const FieldZones: FC = () => {
     <List>
       <Zone
         zoneType="slice"
+        zoneTypeFormat={undefined}
         tabId={undefined}
         title="Non-Repeatable Zone"
         dataTip={dataTipText}
@@ -171,6 +185,7 @@ const FieldZones: FC = () => {
       />
       <Zone
         zoneType="slice"
+        zoneTypeFormat={undefined}
         tabId={undefined}
         isRepeatable
         title="Repeatable Zone"

package/lib/builders/common/Zone/index.jsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { BaseStyles } from "theme-ui";
 
 import { ListHeader } from "@src/components/List";
+import { telemetry } from "@src/apiClient";
 
 import SelectFieldTypeModal from "../SelectFieldTypeModal";
 import NewField from "./Card/components/NewField";
@@ -12,6 +13,7 @@ import EmptyState from "./components/EmptyState";
 
 const Zone = ({
   zoneType /* type of the zone: customType or slice */,
+  zoneTypeFormat /* format of the zone: custom or page (or undefined if not a custom type) */,
   tabId,
   title /* text info to display in Card Header */,
   fields /* widgets registered in the zone */,
@@ -48,9 +50,25 @@ const Zone = ({
   const [selectModalData, setSelectModalData] = useState({ isOpen: false });
   const [newFieldData, setNewFieldData] = useState(null);
 
+  /** @param {[string, import("@prismicio/types-internal/lib/customtypes").NestableWidget]} field */
   const enterEditMode = (field) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     setEditModalData({ isOpen: true, field });
+
+    const [id, model] = field;
+    void telemetry.track({
+      event: "field:settings-opened",
+      id,
+      name: model.config.label,
+      type: model.type,
+      isInAGroup: false,
+      contentType:
+        zoneType === "customType"
+          ? zoneTypeFormat === "page"
+            ? "page type"
+            : "custom type"
+          : "slice",
+    });
   };
   const enterSelectMode = () => {
     setSelectModalData({ isOpen: true });

package/lib/models/common/widgets/Group/ListItem/index.jsx

@@ -30,6 +30,7 @@ import {
   reorderGroupField,
   updateGroupField,
 } from "@src/domain/customType";
+import { telemetry } from "@src/apiClient";
 
 /* eslint-disable */
 const CustomListItem = ({
@@ -81,6 +82,15 @@ const CustomListItem = ({
     });
 
     setCustomType(newCustomType);
+
+    void telemetry.track({
+      event: "field:added",
+      id,
+      name: label,
+      type: widgetTypeName,
+      isInAGroup: true,
+      contentType: customType.format === "page" ? "page type" : "custom type",
+    });
   };
 
   const onSaveField = ({ apiId: previousKey, newKey, value }) => {
@@ -141,9 +151,20 @@ const CustomListItem = ({
     setCustomType(newCustomType);
   };
 
+  /** @param {[string, import("@prismicio/types-internal/lib/customtypes").NestableWidget]} field */
   const enterEditMode = (field) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     setEditModalData({ isOpen: true, field });
+
+    const [id, model] = field;
+    void telemetry.track({
+      event: "field:settings-opened",
+      id,
+      name: model.config.label,
+      type: model.type,
+      isInAGroup: true,
+      contentType: customType.format === "page" ? "page type" : "custom type",
+    });
   };
   return (
     <Fragment>

package/out/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/4f1e84c70ef0e169.css" as="style"/><link rel="stylesheet" href="/_next/static/css/4f1e84c70ef0e169.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-4500c5314e33c7aa.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/QbkBgzWD1MMQdeEUWvKYu/_buildManifest.js" defer=""></script><script src="/_next/static/QbkBgzWD1MMQdeEUWvKYu/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"QbkBgzWD1MMQdeEUWvKYu","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/21654235130d0806.css" as="style"/><link rel="stylesheet" href="/_next/static/css/21654235130d0806.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-30f8a579c4d383f3.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/vNxSAIw3P6M_wdZBPWPUk/_buildManifest.js" defer=""></script><script src="/_next/static/vNxSAIw3P6M_wdZBPWPUk/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"vNxSAIw3P6M_wdZBPWPUk","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>