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

package/src/features/settings/git/useLinkedGitRepos.ts

@@ -0,0 +1,41 @@
+import { revalidateData, useRequest } from "@prismicio/editor-support/Suspense";
+import type { GitRepoSpecifier } from "@slicemachine/manager";
+
+import { useSliceMachineConfig } from "@src/hooks/useSliceMachineConfig";
+import { managerClient } from "@src/managerClient";
+
+type UseLinkedGitReposReturnType = {
+  linkedGitRepos: GitRepoSpecifier[];
+  linkRepo: (git: GitRepoSpecifier) => Promise<void>;
+  unlinkRepo: (git: GitRepoSpecifier) => Promise<void>;
+};
+
+export function useLinkedGitRepos(): UseLinkedGitReposReturnType {
+  const [config] = useSliceMachineConfig();
+  const linkedGitRepos = useRequest(getLinkedGitRepos, [config.repositoryName]);
+  return {
+    linkedGitRepos,
+    linkRepo: async (git) => {
+      await managerClient.git.linkRepo({
+        prismic: { domain: config.repositoryName },
+        git,
+      });
+      await revalidateData(getLinkedGitRepos, [config.repositoryName]);
+    },
+    unlinkRepo: async (git) => {
+      await managerClient.git.unlinkRepo({
+        prismic: { domain: config.repositoryName },
+        git,
+      });
+      await revalidateData(getLinkedGitRepos, [config.repositoryName]);
+    },
+  };
+}
+
+async function getLinkedGitRepos(
+  prismicDomain: string,
+): Promise<GitRepoSpecifier[]> {
+  return await managerClient.git.fetchLinkedRepos({
+    prismic: { domain: prismicDomain },
+  });
+}

package/src/features/settings/git/useWriteAPIToken.ts

@@ -0,0 +1,23 @@
+import type { GitRepoSpecifier } from "@slicemachine/manager";
+
+import { useSliceMachineConfig } from "@src/hooks/useSliceMachineConfig";
+import { managerClient } from "@src/managerClient";
+
+type UseWriteAPITokenReturnType = {
+  updateToken: (token: string) => Promise<void>;
+};
+
+export function useWriteAPIToken(args: {
+  git: GitRepoSpecifier;
+}): UseWriteAPITokenReturnType {
+  const [config] = useSliceMachineConfig();
+  return {
+    updateToken: async (token) => {
+      await managerClient.git.updateWriteAPIToken({
+        prismic: { domain: config.repositoryName },
+        git: args.git,
+        token,
+      });
+    },
+  };
+}

package/src/features/slices/actions/createSlice.ts

@@ -1,9 +1,10 @@
 import { toast } from "react-toastify";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
-import { pascalize, snakelize } from "@lib/utils/str";
+import { pascalize } from "@lib/utils/str";
 import { managerClient } from "@src/managerClient";
 import { telemetry } from "@src/apiClient";
+import { buildEmptySliceModel } from "@src/domain/slice";
 
 type CreateSliceArgs = {
   sliceName: string;
@@ -12,8 +13,9 @@ type CreateSliceArgs = {
 };
 
 export async function createSlice(args: CreateSliceArgs) {
+  const { sliceName, libraryName, onSuccess } = args;
+
   try {
-    const { sliceName, libraryName, onSuccess } = args;
     const newSlice = buildEmptySliceModel(sliceName);
     const { errors } = await managerClient.slices.createSlice({
       libraryID: libraryName,
@@ -33,34 +35,8 @@ export async function createSlice(args: CreateSliceArgs) {
 
     await onSuccess(newSlice);
   } catch (e) {
-    const errorMessage = "Internal Error: Slice not created";
+    const errorMessage = `An unexpected error happened while creating slice ${sliceName}.`;
     console.error(errorMessage, e);
     toast.error(errorMessage);
   }
 }
-
-const DEFAULT_VARIATION_ID = "default";
-
-function buildEmptySliceModel(sliceName: string): SharedSlice {
-  return {
-    id: snakelize(sliceName),
-    type: "SharedSlice",
-    name: sliceName,
-    description: sliceName,
-    variations: [
-      {
-        id: DEFAULT_VARIATION_ID,
-        name: pascalize(DEFAULT_VARIATION_ID),
-        // Property not used yet. Fallback to "...".
-        docURL: "...",
-        // "initial" is fine here as default value.
-        version: "initial",
-        description: pascalize(DEFAULT_VARIATION_ID),
-        // Empty string is fine, we don't want to save imageUrl.
-        // We don't want to compare local and remote image with imageUrl.
-        // It will be striped anyway when doing the comparison.
-        imageUrl: "",
-      },
-    ],
-  };
-}

package/src/features/slices/actions/deleteSlice.ts

@@ -0,0 +1,33 @@
+import { toast } from "react-toastify";
+
+import { managerClient } from "@src/managerClient";
+
+type DeleteSliceArgs = {
+  libraryID: string;
+  sliceID: string;
+  sliceName: string;
+  onSuccess: () => void;
+};
+
+export async function deleteSlice(args: DeleteSliceArgs) {
+  const { sliceName, sliceID, libraryID, onSuccess } = args;
+
+  try {
+    const { errors } = await managerClient.slices.deleteSlice({
+      libraryID,
+      sliceID,
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    onSuccess();
+
+    toast.success(`Successfully deleted slice “${sliceName}”`);
+  } catch (e) {
+    const errorMessage = `An unexpected error happened while deleting slice “${sliceName}”.`;
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}

package/src/features/slices/actions/renameSlice.ts

@@ -0,0 +1,37 @@
+import { toast } from "react-toastify";
+
+import { managerClient } from "@src/managerClient";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { rename } from "@src/domain/slice";
+import { Slices } from "@lib/models/common/Slice";
+
+type DeleteSliceArgs = {
+  newSliceName: string;
+  slice: ComponentUI;
+  onSuccess: (renamedSlice: ComponentUI) => void;
+};
+
+export async function renameSlice(args: DeleteSliceArgs) {
+  const { slice, newSliceName, onSuccess } = args;
+
+  try {
+    const renamedSlice = rename(slice, newSliceName);
+
+    const { errors } = await managerClient.slices.renameSlice({
+      libraryID: slice.from,
+      model: Slices.fromSM(renamedSlice.model),
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    onSuccess(renamedSlice);
+
+    toast.success("Slice name updated");
+  } catch (e) {
+    const errorMessage = `An unexpected error happened while renaming “${slice.model.name}”.`;
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx

@@ -43,7 +43,6 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
       <DialogHeader title="Upgrade slice" />
       <DialogContent>
         <Formik
-          validateOnChange
           validateOnMount
           initialValues={{
             from: libraries[0]?.name,

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx

@@ -47,7 +47,6 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
       <DialogHeader title="Convert to slice variation" />
       <DialogContent>
         <Formik
-          validateOnChange
           initialValues={{
             libraryID: localSharedSlices[0]?.from,
             sliceID: localSharedSlices[0]?.model.id,

package/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx

@@ -31,7 +31,6 @@ export const ConvertLegacySliceMergeWithIdenticalDialog: FC<DialogProps> = ({
       <DialogHeader title="Merge with an existing slice" />
       <DialogContent>
         <Formik
-          validateOnChange
           initialValues={{
             path: identicalSlices[0]?.path ?? "",
           }}

package/src/features/slices/sliceBuilder/SliceBuilderProvider.tsx

@@ -9,18 +9,16 @@ import {
 import { useStableCallback } from "@prismicio/editor-support/React";
 import { useRouter } from "next/router";
 
-import {
-  AutoSaveStatus,
-  useAutoSave,
-} from "@src/features/autoSave/useAutoSave";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { readSliceMocks, updateSlice } from "@src/apiClient";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { VariationSM } from "@lib/models/common/Slice";
+import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { ActionQueueStatus, useActionQueue } from "@src/hooks/useActionQueue";
 
 type SliceContext = {
   slice: ComponentUI;
-  autoSaveStatus: AutoSaveStatus;
+  actionQueueStatus: ActionQueueStatus;
   setSlice: (slice: ComponentUI) => void;
   variation: VariationSM;
 };
@@ -37,12 +35,13 @@ export function SliceBuilderProvider(props: SliceBuilderProviderProps) {
 
   const router = useRouter();
   const [slice, setSliceState] = useState(initialSlice);
-  const { autoSaveStatus, setNextSave } = useAutoSave({
+  const { actionQueueStatus, setNextAction } = useActionQueue({
     errorMessage:
       "Failed to save slice. Check your browser's console for more information.",
   });
   const { saveSliceSuccess } = useSliceMachineActions();
   const stableSaveSliceSuccess = useStableCallback(saveSliceSuccess);
+  const { syncChanges } = useAutoSync();
 
   const variation = useMemo(() => {
     const variationName = router.query.variation;
@@ -60,7 +59,7 @@ export function SliceBuilderProvider(props: SliceBuilderProviderProps) {
   const setSlice = useCallback(
     (slice: ComponentUI) => {
       setSliceState(slice);
-      setNextSave(async () => {
+      setNextAction(async () => {
         const { errors: updateSliceErrors } = await updateSlice(slice);
 
         if (updateSliceErrors.length > 0) {
@@ -76,20 +75,23 @@ export function SliceBuilderProvider(props: SliceBuilderProviderProps) {
           throw readSliceMockErrors;
         }
 
+        // Update slices store with new slice
         stableSaveSliceSuccess({ ...slice, mocks });
+
+        syncChanges();
       });
     },
-    [setNextSave, stableSaveSliceSuccess],
+    [setNextAction, stableSaveSliceSuccess, syncChanges],
   );
 
   const contextValue: SliceContext = useMemo(
     () => ({
-      autoSaveStatus,
+      actionQueueStatus,
       slice,
       setSlice,
       variation,
     }),
-    [autoSaveStatus, slice, setSlice, variation],
+    [actionQueueStatus, slice, setSlice, variation],
   );
 
   return (

package/src/features/sync/AutoSyncProvider.tsx

@@ -0,0 +1,252 @@
+import {
+  FC,
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
+import {
+  useOnChange,
+  useStableCallback,
+} from "@prismicio/editor-support/React";
+
+import { AuthStatus } from "@src/modules/userContext/types";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { getState } from "@src/apiClient";
+import {
+  Environment,
+  isUnauthenticatedError,
+} from "@slicemachine/manager/client";
+import { useNetwork } from "@src/hooks/useNetwork";
+import { useAuthStatus } from "@src/hooks/useAuthStatus";
+import {
+  ChangedCustomType,
+  ChangedSlice,
+} from "@lib/models/common/ModelStatus";
+
+import { useActiveEnvironment } from "../environments/useActiveEnvironment";
+import { ActionQueueStatus, useActionQueue } from "../../hooks/useActionQueue";
+import { pushChanges } from "./actions/pushChanges";
+import { useUnSyncChanges } from "./useUnSyncChanges";
+import { fetchUnSyncChanges } from "./fetchUnSyncChanges";
+
+export type AutoSyncStatus =
+  | "not-active"
+  | "offline"
+  | "not-logged-in"
+  | "syncing"
+  | "synced"
+  | "failed";
+
+type AutoSyncContext = {
+  autoSyncStatus: AutoSyncStatus;
+  syncChanges: (args?: SyncChangesArgs) => void;
+};
+
+type SyncChangesArgs = {
+  environment?: Environment;
+  loggedIn?: boolean;
+  changedCustomTypes?: ChangedCustomType[];
+  changedSlices?: ChangedSlice[];
+};
+
+const AutoSyncContextValue = createContext<AutoSyncContext | undefined>(
+  undefined,
+);
+
+export const AutoSyncProvider: FC<PropsWithChildren> = (props) => {
+  const { children } = props;
+  const { unSyncedCustomTypes, unSyncedSlices } = useUnSyncChanges();
+  const isOnline = useNetwork();
+  const authStatus = useAuthStatus();
+  const { refreshState, pushChangesSuccess } = useSliceMachineActions();
+  const stableRefreshState = useStableCallback(refreshState);
+  const stablePushChangesSuccess = useStableCallback(pushChangesSuccess);
+  const { activeEnvironment } = useActiveEnvironment();
+  const { setNextAction, actionQueueStatus } = useActionQueue({
+    actionQueueStatusDelay: 0,
+    errorMessage:
+      "Failed to sync changes. Check your browser's console for more information.",
+  });
+
+  const syncChanges = useCallback(
+    (args: SyncChangesArgs = {}) => {
+      const {
+        // We default to the active environment if not provided.
+        // This is useful when we want to sync changes right after an environment switch.
+        environment = activeEnvironment,
+
+        // We default to a full user logged in with internet access if not provider.
+        // This is useful when we want to sync changes right after the user logs in.
+        loggedIn = isOnline && authStatus === AuthStatus.AUTHORIZED,
+      } = args;
+
+      if (!loggedIn || environment?.kind !== "dev") {
+        return;
+      }
+
+      setNextAction(async () => {
+        // We first get the remote models and local models to ensure we need
+        // to sync changes.
+        const { changedCustomTypes, changedSlices } = await fetchUnSyncChanges({
+          isOnline,
+          authStatus,
+        });
+
+        if (changedCustomTypes.length === 0 && changedSlices.length === 0) {
+          return;
+        }
+
+        try {
+          const response = await pushChanges({
+            changedCustomTypes,
+            changedSlices,
+            // We force the deletion of documents as the auto-sync is only for
+            // the dev environment.
+            confirmDeleteDocuments: true,
+          });
+
+          // Hard limit reached is the only limit that can be reached as we set
+          // confirmDeleteDocuments to true.
+          if (response && response.type === "HARD") {
+            console.error(
+              `Manual action required. ${
+                response.details.customTypes.length > 1
+                  ? "These types have"
+                  : "This type has"
+              } too many associated Documents. Archive and delete these documents
+              manually and then try deleting the types again.`,
+            );
+
+            throw new Error();
+          }
+
+          // Now that the changes have been pushed, we need to update redux with
+          // the new remote models.
+          const serverState = await getState();
+          stableRefreshState(serverState);
+
+          // Update last sync value in local storage
+          stablePushChangesSuccess();
+        } catch (error) {
+          if (isUnauthenticatedError(error)) {
+            // If the user is not authenticated, we don't want to let the user
+            // retry the sync. We just stop the sync and let the user
+            // know that they need to login again.
+            // This can easily happen if the the token expires when the user is
+            // offline.
+            return;
+          }
+
+          // If the sync failed, we want to display the error message with
+          // the retry button.
+          throw error;
+        }
+      });
+    },
+    [
+      stableRefreshState,
+      stablePushChangesSuccess,
+      setNextAction,
+      isOnline,
+      authStatus,
+      activeEnvironment,
+    ],
+  );
+
+  // We want to sync changes when the user loads the page and there are unsynced changes
+  useEffect(
+    () => {
+      if (unSyncedCustomTypes.length > 0 || unSyncedSlices.length > 0) {
+        syncChanges();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  // We want to sync changes when the user comes back online and there are unsynced changes
+  useOnChange(isOnline, () => {
+    if (
+      isOnline &&
+      (unSyncedCustomTypes.length > 0 || unSyncedSlices.length > 0)
+    ) {
+      syncChanges();
+    }
+  });
+
+  const autoSyncStatus = useMemo(
+    () =>
+      getAutoSyncStatus({
+        activeEnvironment,
+        isOnline,
+        authStatus,
+        actionQueueStatus,
+      }),
+    [actionQueueStatus, authStatus, isOnline, activeEnvironment],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      syncChanges,
+      autoSyncStatus,
+    }),
+    [syncChanges, autoSyncStatus],
+  );
+
+  return (
+    <AutoSyncContextValue.Provider value={contextValue}>
+      {children}
+    </AutoSyncContextValue.Provider>
+  );
+};
+
+export function useAutoSync(): AutoSyncContext {
+  const context = useContext(AutoSyncContextValue);
+
+  // Prevent introducing a lot of implementation details from redux in tests
+  if (process.env.NODE_ENV === "test") {
+    return { syncChanges: () => void 0, autoSyncStatus: "not-active" };
+  }
+
+  if (context === undefined) {
+    throw new Error("useAutoSync must be used within a AutoSyncProvider");
+  }
+
+  return context;
+}
+
+type GetAutoSyncStatusArgs = {
+  activeEnvironment?: Environment;
+  isOnline: boolean;
+  authStatus: AuthStatus;
+  actionQueueStatus: ActionQueueStatus;
+};
+
+function getAutoSyncStatus(args: GetAutoSyncStatusArgs): AutoSyncStatus {
+  const { activeEnvironment, isOnline, authStatus, actionQueueStatus } = args;
+
+  if (activeEnvironment === undefined || activeEnvironment.kind !== "dev") {
+    return "not-active";
+  }
+
+  if (!isOnline) {
+    return "offline";
+  }
+
+  if (authStatus !== AuthStatus.AUTHORIZED) {
+    return "not-logged-in";
+  }
+
+  if (actionQueueStatus === "failed") {
+    return "failed";
+  }
+
+  if (actionQueueStatus === "pending") {
+    return "syncing";
+  }
+
+  return "synced";
+}

package/src/features/sync/components/AutoSyncStatusIndicator.module.css

@@ -0,0 +1,17 @@
+.root {
+  align-items: center;
+  border-radius: 6px;
+  border: solid 1px transparent;
+  border-image: linear-gradient(
+      to right,
+      color-mix(in srgb, var(--grey6), transparent 100%),
+      var(--grey6),
+      color-mix(in srgb, var(--grey6), transparent 100%)
+    )
+    1 stretch;
+  display: flex;
+  gap: 4px;
+  height: 32px;
+  justify-content: center;
+  width: 100%;
+}

package/src/features/sync/components/AutoSyncStatusIndicator.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "root": string;
+};
+export = styles;
+

package/src/features/sync/components/AutoSyncStatusIndicator.tsx

@@ -0,0 +1,58 @@
+import { FC } from "react";
+import { Text, Tooltip } from "@prismicio/editor-ui";
+
+import { Syncing } from "@src/icons/Syncing";
+import { Synced } from "@src/icons/Synced";
+import { SyncFailed } from "@src/icons/SyncFailed";
+
+import styles from "./AutoSyncStatusIndicator.module.css";
+
+type AutoSyncStatusIndicatorProps = {
+  autoSyncStatus: "syncing" | "synced" | "failed";
+};
+
+export const AutoSyncStatusIndicator: FC<AutoSyncStatusIndicatorProps> = (
+  props,
+) => {
+  const { autoSyncStatus } = props;
+
+  let autoSaveStatusInfo;
+
+  switch (autoSyncStatus) {
+    case "syncing":
+      autoSaveStatusInfo = {
+        icon: <Syncing />,
+        text: "Syncing...",
+        tooltipText:
+          "Your local changes are currently syncing with your personal sandbox.",
+      };
+      break;
+    case "synced":
+      autoSaveStatusInfo = {
+        icon: <Synced />,
+        text: "Synced",
+        tooltipText:
+          "Your local changes are in sync with your personal sandbox.",
+      };
+      break;
+    case "failed":
+      autoSaveStatusInfo = {
+        icon: <SyncFailed />,
+        text: "Sync failed",
+        tooltipText:
+          "An error occurred while syncing your changes with your personal sandbox.",
+      };
+      break;
+  }
+
+  return autoSaveStatusInfo.tooltipText !== undefined ? (
+    <Tooltip content={autoSaveStatusInfo.tooltipText} side="bottom">
+      <div className={styles.root}>
+        {autoSaveStatusInfo.icon}
+        <Text color="grey11">{autoSaveStatusInfo.text}</Text>
+      </div>
+    </Tooltip>
+  ) : (
+    autoSaveStatusInfo.icon
+  );
+};

package/src/features/sync/fetchUnSyncChanges.ts

@@ -0,0 +1,40 @@
+import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
+import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
+import { getState } from "@src/apiClient";
+import { AuthStatus } from "@src/modules/userContext/types";
+
+import { UnSyncedChanges, getUnSyncedChanges } from "./getUnSyncChanges";
+
+type FetchUnSyncChangesArgs = {
+  isOnline: boolean;
+  authStatus: AuthStatus;
+};
+
+export async function fetchUnSyncChanges(
+  args: FetchUnSyncChangesArgs,
+): Promise<UnSyncedChanges> {
+  const { isOnline, authStatus } = args;
+
+  const serverState = await getState();
+
+  const slices = normalizeFrontendSlices(
+    serverState.libraries,
+    serverState.remoteSlices,
+  );
+  const customTypes = Object.values(
+    normalizeFrontendCustomTypes(
+      serverState.customTypes,
+      serverState.remoteCustomTypes,
+    ),
+  );
+
+  const unSyncedChanges = getUnSyncedChanges({
+    customTypes,
+    libraries: serverState.libraries,
+    slices,
+    isOnline,
+    authStatus,
+  });
+
+  return unSyncedChanges;
+}