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

package/components/Navigation/ChangesItem.tsx

@@ -0,0 +1,117 @@
+import { type FC } from "react";
+import { useRouter } from "next/router";
+import { Box, Button, Text } from "@prismicio/editor-ui";
+
+import {
+  HoverCard,
+  HoverCardCloseButton,
+  HoverCardDescription,
+  HoverCardMedia,
+  HoverCardTitle,
+} from "@src/components/HoverCard";
+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 { AuthStatus } from "@src/modules/userContext/types";
+import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { AutoSyncStatusIndicator } from "@src/features/sync/components/AutoSyncStatusIndicator";
+
+export const ChangesItem: FC = () => {
+  const { setSeenChangesToolTip } = useSliceMachineActions();
+  const open = useOpenChangesHoverCard();
+  const router = useRouter();
+  const { autoSyncStatus } = useAutoSync();
+
+  const onClose = () => {
+    setSeenChangesToolTip();
+  };
+
+  return (
+    <HoverCard
+      open={open}
+      openDelay={3000}
+      onClose={onClose}
+      side="right"
+      sideOffset={24}
+      collisionPadding={280}
+      trigger={
+        <Box padding={{ bottom: 24 }}>
+          {autoSyncStatus === "failed" ||
+          autoSyncStatus === "synced" ||
+          autoSyncStatus === "syncing" ? (
+            <AutoSyncStatusIndicator autoSyncStatus={autoSyncStatus} />
+          ) : (
+            // TODO(DT-1942): This should be a Button with a link component for
+            // accessibility
+            <Button
+              color="grey"
+              onClick={() => {
+                void router.push("/changes");
+              }}
+              sx={{ width: "100%" }}
+            >
+              <Box alignItems="center" gap={4}>
+                <Text variant="bold">Review changes</Text> <ChangesCount />
+              </Box>
+            </Button>
+          )}
+        </Box>
+      }
+    >
+      <HoverCardTitle>Push your changes</HoverCardTitle>
+      <HoverCardMedia component="image" src="/push.png" />
+      <HoverCardDescription>
+        When you click Save, your changes are saved locally. Then, you can push
+        your models to Prismic from the Changes page.
+      </HoverCardDescription>
+      <HoverCardCloseButton>Got it</HoverCardCloseButton>
+    </HoverCard>
+  );
+};
+
+export const ChangesCount: FC = () => {
+  const isOnline = useNetwork();
+  const authStatus = useAuthStatus();
+  const { unSyncedSlices, unSyncedCustomTypes } = useUnSyncChanges();
+  const numberOfChanges = unSyncedSlices.length + unSyncedCustomTypes.length;
+
+  if (
+    !isOnline ||
+    authStatus === AuthStatus.UNAUTHORIZED ||
+    authStatus === AuthStatus.FORBIDDEN
+  ) {
+    return null;
+  }
+
+  if (numberOfChanges === 0) {
+    return null;
+  }
+
+  const formattedNumberOfChanges = numberOfChanges > 9 ? "+9" : numberOfChanges;
+
+  return (
+    <Box padding={{ inline: 6 }} borderRadius={10} backgroundColor="grey5">
+      <Text color="grey11" variant="small">
+        {formattedNumberOfChanges}
+      </Text>
+    </Box>
+  );
+};
+
+// TODO(DT-1925): Reactivate this feature
+const useOpenChangesHoverCard = () => {
+  // const { hasSeenChangesToolTip, hasSeenSimulatorToolTip } = useSelector(
+  //   (store: SliceMachineStoreType) => ({
+  //     hasSeenChangesToolTip: userHasSeenChangesToolTip(store),
+  //     hasSeenSimulatorToolTip: userHasSeenSimulatorToolTip(store),
+  //   }),
+  // );
+
+  // return (
+  //   !hasSeenChangesToolTip &&
+  //   hasSeenSimulatorToolTip
+  // );
+
+  return false;
+};

package/components/Navigation/Environment.tsx

@@ -1,25 +1,40 @@
+import { useState } from "react";
 import {
   Environment as EnvironmentType,
   isUnauthenticatedError,
   isUnauthorizedError,
 } from "@slicemachine/manager/client";
 
-import { telemetry } from "@src/apiClient";
+import { getState, telemetry } from "@src/apiClient";
 import { useEnvironments } from "@src/features/environments/useEnvironments";
 import { setEnvironment } from "@src/features/environments/actions/setEnvironment";
 import { useActiveEnvironment } from "@src/features/environments/useActiveEnvironment";
-import { getLegacySliceMachineState } from "@src/features/legacyState/actions/getLegacySliceMachineState";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { SideNavEnvironmentSelector } from "@src/components/SideNav";
 import { useNetwork } from "@src/hooks/useNetwork";
+import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
+import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
+import { getUnSyncedChanges } from "@src/features/sync/getUnSyncChanges";
+import { useAuthStatus } from "@src/hooks/useAuthStatus";
 
 export function Environment() {
   const { environments, error: useEnvironmentsError } = useEnvironments();
   const { activeEnvironment } = useActiveEnvironment();
   const { refreshState, openLoginModal } = useSliceMachineActions();
+  const { syncChanges } = useAutoSync();
   const isOnline = useNetwork();
+  const authStatus = useAuthStatus();
+  const [isSwitchingEnv, setIsSwitchingEnv] = useState(false);
+  const { autoSyncStatus } = useAutoSync();
 
   async function onSelect(environment: EnvironmentType) {
+    if (activeEnvironment?.name === environment.name) {
+      return;
+    }
+
+    setIsSwitchingEnv(true);
+
     void telemetry.track({
       event: "environment:switch",
       domain: environment.domain,
@@ -27,9 +42,39 @@ export function Environment() {
 
     await setEnvironment(environment);
 
-    const legacySliceMachineState = await getLegacySliceMachineState();
+    const serverState = await getState();
+    refreshState(serverState);
+
+    const slices = normalizeFrontendSlices(
+      serverState.libraries,
+      serverState.remoteSlices,
+    );
+    const customTypes = Object.values(
+      normalizeFrontendCustomTypes(
+        serverState.customTypes,
+        serverState.remoteCustomTypes,
+      ),
+    );
+    const { changedCustomTypes, changedSlices } = getUnSyncedChanges({
+      authStatus,
+      customTypes,
+      isOnline,
+      libraries: serverState.libraries,
+      slices,
+    });
+
+    if (
+      environment.kind === "dev" &&
+      (changedCustomTypes.length > 0 || changedSlices.length > 0)
+    ) {
+      syncChanges({
+        environment,
+        changedCustomTypes,
+        changedSlices,
+      });
+    }
 
-    refreshState(legacySliceMachineState);
+    setIsSwitchingEnv(false);
   }
 
   if (!isOnline) {
@@ -42,6 +87,8 @@ export function Environment() {
         environments={environments}
         activeEnvironment={activeEnvironment}
         onSelect={onSelect}
+        disabled={isSwitchingEnv || autoSyncStatus === "syncing"}
+        loading={isSwitchingEnv}
       />
     );
   }

package/components/Navigation/index.css.ts

@@ -1,6 +1,5 @@
 import { sprinkles } from "@prismicio/editor-ui";
 
 export const environmentDivider = sprinkles({
-  marginTop: 16,
-  marginBottom: 32,
+  marginBlock: 16,
 });

package/components/Navigation/index.test.tsx

@@ -131,10 +131,8 @@ describe("Side Navigation", () => {
   test.skip.each([
     ["Page types", "/"],
     ["Custom types", "/custom-types"],
-    ["Changes", "/changes"],
-
-    ["Changelog", "/changelog"],
     ["Slices", "/slices"],
+    ["Changelog", "/changelog"],
     // TODO: once we have a plan fo how to display individual libraries change this
     // ["Slices/a", "/slices#slices/a"],
     // ["Slices/b", "/slices#slices/b"]
@@ -156,95 +154,17 @@ describe("Side Navigation", () => {
     },
   );
 
-  test("should display the number of changes on the 'Changes' item", async () => {
+  test("should display the number of changes on the 'Review changes' item", async () => {
     renderSideNavigation({ canUpdate: true, hasChanges: true });
 
-    expect(await screen.findByText("Changes")).toBeVisible();
+    expect(await screen.findByText("Review changes")).toBeVisible();
     const changesItem = screen
-      .getByText("Changes")
-      .closest("a") as HTMLAnchorElement;
+      .getByText("Review changes")
+      .closest("button") as HTMLButtonElement;
 
     expect(within(changesItem).getByText("1")).toBeVisible();
   });
 
-  test("should not display the number of changes or 'Disconnect' on the 'Changes' item", async () => {
-    renderSideNavigation({ canUpdate: true, hasChanges: false });
-
-    expect(await screen.findByText("Changes")).toBeVisible();
-    const changesItem = screen
-      .getByText("Changes")
-      .closest("a") as HTMLAnchorElement;
-
-    expect(within(changesItem).queryByText("1")).not.toBeInTheDocument();
-    expect(
-      within(changesItem).queryByText("Logged out"),
-    ).not.toBeInTheDocument();
-  });
-
-  test("should display the information that user is disconnected on the 'Changes' item when unauthorized", async () => {
-    renderSideNavigation({
-      canUpdate: true,
-      hasChanges: true,
-      authStatus: AuthStatus.UNAUTHORIZED,
-    });
-
-    expect(await screen.findByText("Changes")).toBeVisible();
-    const changesItem = screen
-      .getByText("Changes")
-      .closest("a") as HTMLAnchorElement;
-
-    expect(within(changesItem).getByText("Logged out")).toBeVisible();
-  });
-
-  test("should display the information that user is disconnected on the 'Changes' item when forbidden", async () => {
-    renderSideNavigation({
-      canUpdate: true,
-      hasChanges: true,
-      authStatus: AuthStatus.FORBIDDEN,
-    });
-
-    expect(await screen.findByText("Changes")).toBeVisible();
-    const changesItem = screen
-      .getByText("Changes")
-      .closest("a") as HTMLAnchorElement;
-
-    expect(within(changesItem).getByText("Logged out")).toBeVisible();
-  });
-
-  test("should display the information that user is disconnected on the 'Changes' item when offline", async () => {
-    vi.spyOn(navigator, "onLine", "get").mockReturnValueOnce(false);
-
-    renderSideNavigation({
-      canUpdate: true,
-      hasChanges: true,
-    });
-
-    expect(await screen.findByText("Changes")).toBeVisible();
-    const changesItem = screen
-      .getByText("Changes")
-      .closest("a") as HTMLAnchorElement;
-
-    expect(within(changesItem).getByText("Logged out")).toBeVisible();
-  });
-
-  test("should not display the information that user is disconnected when user is online", async () => {
-    vi.spyOn(navigator, "onLine", "get").mockReturnValueOnce(true);
-
-    renderSideNavigation({
-      canUpdate: true,
-      hasChanges: true,
-    });
-
-    expect(await screen.findByText("Changes")).toBeVisible();
-    const changesItem = screen
-      .getByText("Changes")
-      .closest("a") as HTMLAnchorElement;
-
-    expect(
-      within(changesItem).queryByText("Logged out"),
-    ).not.toBeInTheDocument();
-  });
-
   test("Video Item with next", async (ctx) => {
     const adapter = createTestPlugin({
       meta: {

package/components/Navigation/index.tsx

@@ -8,9 +8,9 @@ import { telemetry } from "@src/apiClient";
 import VideoItem from "@components/Navigation/VideoItem";
 import { LightningIcon } from "@src/icons/Lightning";
 import { MathPlusIcon } from "@src/icons/MathPlusIcon";
+import { SettingsIcon } from "@src/icons/SettingsIcon";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
 import {
-  SideNavSeparator,
   SideNavLink,
   SideNavListItem,
   SideNavList,
@@ -26,9 +26,10 @@ import { SliceMachineStoreType } from "@src/redux/type";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { getChangelog } from "@src/modules/environment";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
+import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
 import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
 
-import { ChangesListItem } from "./ChangesListItem";
+import { ChangesItem } from "./ChangesItem";
 import { Environment } from "./Environment";
 
 import * as styles from "./index.css";
@@ -45,6 +46,7 @@ const Navigation: FC = () => {
     useSliceMachineActions();
   const { repositoryName, repositoryDomain, repositoryUrl } =
     useRepositoryInformation();
+  const gitIntegrationExperiment = useGitIntegrationExperiment();
 
   return (
     <SideNav>
@@ -73,6 +75,8 @@ const Navigation: FC = () => {
         href={repositoryUrl}
       />
 
+      <ChangesItem />
+
       <SideNavList>
         <SideNavListItem>
           <SideNavLink
@@ -104,12 +108,6 @@ const Navigation: FC = () => {
           />
         </SideNavListItem>
 
-        <SideNavSeparator />
-
-        <ChangesListItem />
-
-        <SideNavSeparator />
-
         <SideNavListItem>
           <SideNavLink
             title="Slices"
@@ -141,17 +139,19 @@ const Navigation: FC = () => {
       )}
 
       <SideNavList position="bottom">
-        <SideNavLink
-          title="Invite team"
-          href={`${repositoryUrl}/settings/users`}
-          Icon={(props) => <MathPlusIcon {...props} />}
-          onClick={() => {
-            void telemetry.track({
-              event: "users-invite-button-clicked",
-            });
-          }}
-          target="_blank"
-        />
+        <SideNavListItem>
+          <SideNavLink
+            title="Invite team"
+            href={`${repositoryUrl}/settings/users`}
+            Icon={MathPlusIcon}
+            onClick={() => {
+              void telemetry.track({
+                event: "users-invite-button-clicked",
+              });
+            }}
+            target="_blank"
+          />
+        </SideNavListItem>
 
         <ErrorBoundary>
           <Suspense>
@@ -162,11 +162,23 @@ const Navigation: FC = () => {
           </Suspense>
         </ErrorBoundary>
 
+        {gitIntegrationExperiment.eligible ? (
+          <SideNavListItem>
+            <SideNavLink
+              title="Settings"
+              href="/settings"
+              Icon={SettingsIcon}
+              active={router.asPath.startsWith("/settings")}
+              component={Link}
+            />
+          </SideNavListItem>
+        ) : undefined}
+
         <SideNavListItem>
           <SideNavLink
             title="Changelog"
             href="/changelog"
-            Icon={(props) => <LightningIcon {...props} />}
+            Icon={LightningIcon}
             active={router.asPath.startsWith("/changelog")}
             component={Link}
             RightElement={

package/components/ReviewModal/ReviewForm.tsx

@@ -94,7 +94,6 @@ export const ReviewForm: FC<ReviewFormProps> = (props) => {
     >
       <Formik
         validateOnMount
-        validateOnChange
         initialValues={{
           rating: 0,
           comment: "",

package/lib/builders/SliceBuilder/index.tsx

@@ -21,7 +21,7 @@ import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderPro
 import { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
 
 export const SliceBuilder: FC = () => {
-  const { slice, autoSaveStatus } = useSliceState();
+  const { slice, actionQueueStatus } = useSliceState();
 
   const isSimulatorAvailableForFramework = useSelector(
     selectIsSimulatorAvailableForFramework,
@@ -33,10 +33,10 @@ export const SliceBuilder: FC = () => {
         <AppLayoutBackButton url="/slices" />
         <AppLayoutBreadcrumb folder="Slices" page={slice.model.name} />
         <AppLayoutActions>
-          <AutoSaveStatusIndicator status={autoSaveStatus} />
+          <AutoSaveStatusIndicator status={actionQueueStatus} />
           <SimulatorButton
             isSimulatorAvailableForFramework={isSimulatorAvailableForFramework}
-            disabled={autoSaveStatus !== "saved"}
+            disabled={actionQueueStatus !== "done"}
           />
         </AppLayoutActions>
       </AppLayoutHeader>

package/lib/builders/common/EditModal/Form.jsx

@@ -13,7 +13,6 @@ const WidgetForm = ({
   return (
     <Box>
       <Formik
-        validateOnChange
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         initialValues={initialValues}
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment

package/lib/builders/common/Zone/Card/components/NewField.tsx

@@ -114,7 +114,6 @@ const NewField: React.FC<NewField> = ({
 
   return (
     <Formik
-      validateOnChange
       onSubmit={onSave}
       validationSchema={validationSchema}
       initialValues={initialValues}

package/lib/models/common/ModelStatus/index.ts

@@ -117,3 +117,28 @@ export function computeModelStatus(
     : compareCustomTypeLocalToRemote(model);
   return { status, model };
 }
+
+export function computeStatuses(
+  models: LocalOrRemoteCustomType[],
+  userHasAccessToModels: boolean,
+): { [sliceId: string]: ModelStatus };
+export function computeStatuses(
+  models: LocalOrRemoteSlice[],
+  userHasAccessToModels: boolean,
+): { [sliceId: string]: ModelStatus };
+export function computeStatuses(
+  models: LocalOrRemoteModel[],
+  userHasAccessToModels: boolean,
+) {
+  return models.reduce<{ [id: string]: ModelStatus }>(
+    (acc, model) => {
+      const { status } = computeModelStatus(model, userHasAccessToModels);
+
+      return {
+        ...acc,
+        [hasLocal(model) ? model.local.id : model.remote.id]: status,
+      };
+    },
+    {} as { [sliceId: string]: ModelStatus },
+  );
+}

package/lib/models/common/widgets/StructuredText/index.ts

@@ -51,7 +51,7 @@ export const StructuredTextWidget: Widget<RichText, typeof schema> = {
       label,
       placeholder: "",
       allowTargetBlank: true,
-      single: optionValues.join(","),
+      multi: optionValues.join(","),
     },
   }),
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

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/200244e3e0463c39.css" as="style"/><link rel="stylesheet" href="/_next/static/css/200244e3e0463c39.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-cd9d4c76a4abc11a.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/m6psnC5u1xT7Y6osWHKjp/_buildManifest.js" defer=""></script><script src="/_next/static/m6psnC5u1xT7Y6osWHKjp/_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":"m6psnC5u1xT7Y6osWHKjp","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/39e089aad1742a3a.css" as="style"/><link rel="stylesheet" href="/_next/static/css/39e089aad1742a3a.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-bca191df4ac7078e.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/dS_xZnzzna6Y6uwcTgf90/_buildManifest.js" defer=""></script><script src="/_next/static/dS_xZnzzna6Y6uwcTgf90/_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":"dS_xZnzzna6Y6uwcTgf90","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>