slice-machine-ui 1.23.2-beta.8 → 1.24.0

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;
+}

package/src/features/sync/getUnSyncChanges.ts

@@ -0,0 +1,144 @@
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { LibraryUI } from "@lib/models/common/LibraryUI";
+import {
+  LocalOrRemoteCustomType,
+  LocalOrRemoteSlice,
+  RemoteOnlySlice,
+  getModelId,
+  hasLocal,
+  isRemoteOnly,
+} from "@lib/models/common/ModelData";
+import {
+  ChangedCustomType,
+  ChangedSlice,
+  ModelStatus,
+  computeStatuses,
+} from "@lib/models/common/ModelStatus";
+import { AuthStatus } from "@src/modules/userContext/types";
+
+type GetUnSyncedChangesArgs = {
+  customTypes: LocalOrRemoteCustomType[];
+  libraries: Readonly<LibraryUI[]>;
+  slices: LocalOrRemoteSlice[];
+  isOnline: boolean;
+  authStatus: AuthStatus;
+};
+
+const unSyncStatuses = [
+  ModelStatus.New,
+  ModelStatus.Modified,
+  ModelStatus.Deleted,
+];
+
+export type UnSyncedChanges = {
+  changedCustomTypes: ChangedCustomType[];
+  unSyncedCustomTypes: LocalOrRemoteCustomType[];
+  changedSlices: ChangedSlice[];
+  unSyncedSlices: ComponentUI[];
+  modelsStatuses: ModelsStatuses;
+};
+
+export function getUnSyncedChanges(
+  args: GetUnSyncedChangesArgs,
+): UnSyncedChanges {
+  const { customTypes, libraries, slices, isOnline, authStatus } = args;
+
+  const modelsStatuses = getModelStatus({
+    slices,
+    customTypes,
+    isOnline,
+    authStatus,
+  });
+
+  const localComponents: ComponentUI[] = libraries.flatMap(
+    (lib) => lib.components,
+  );
+  const deletedComponents: ComponentUI[] = slices
+    .filter(isRemoteOnly)
+    .map(wrapDeletedSlice);
+  const components: ComponentUI[] = localComponents
+    .concat(deletedComponents)
+    .sort((s1, s2) => (s1.model.name > s2.model.name ? 1 : -1));
+
+  const unSyncedSlices = components.filter(
+    (component) =>
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+      modelsStatuses.slices[component.model.id] &&
+      unSyncStatuses.includes(modelsStatuses.slices[component.model.id]),
+  );
+  const unSyncedCustomTypes = customTypes.filter(
+    (customType) =>
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+      modelsStatuses.customTypes[getModelId(customType)] &&
+      unSyncStatuses.includes(
+        modelsStatuses.customTypes[getModelId(customType)],
+      ),
+  );
+
+  const changedSlices = unSyncedSlices
+    .map((s) => ({
+      slice: s,
+      status: modelsStatuses.slices[s.model.id],
+    }))
+    .filter((s): s is ChangedSlice => unSyncStatuses.includes(s.status));
+  const changedCustomTypes = unSyncedCustomTypes
+    .map((model) => (hasLocal(model) ? model.local : model.remote))
+    .map((ct) => ({
+      customType: ct,
+      status: modelsStatuses.customTypes[ct.id],
+    }))
+    .filter((c): c is ChangedCustomType => unSyncStatuses.includes(c.status));
+
+  return {
+    changedCustomTypes,
+    changedSlices,
+    unSyncedCustomTypes,
+    unSyncedSlices,
+    modelsStatuses,
+  };
+}
+
+// ComponentUI are manipulated on all the relevant pages
+// But the data is not available for remote only slices
+// which have been deleted locally
+// Should revisit this with the sync improvements
+function wrapDeletedSlice(s: RemoteOnlySlice): ComponentUI {
+  return {
+    model: s.remote,
+    screenshots: {},
+    from: "",
+    href: "",
+    pathToSlice: "",
+    fileName: "",
+    extension: "",
+  };
+}
+
+type GetModelStatusArgs = {
+  slices: LocalOrRemoteSlice[];
+  customTypes: LocalOrRemoteCustomType[];
+  isOnline: boolean;
+  authStatus: AuthStatus;
+};
+
+// Slices and Custom Types needs to be separated as Ids are not unique amongst each others.
+export type ModelsStatuses = {
+  slices: { [sliceId: string]: ModelStatus };
+  customTypes: { [ctId: string]: ModelStatus };
+};
+
+export const getModelStatus = (args: GetModelStatusArgs): ModelsStatuses => {
+  const { slices, customTypes, isOnline, authStatus } = args;
+
+  const userHasAccessToModels =
+    isOnline &&
+    authStatus != AuthStatus.FORBIDDEN &&
+    authStatus != AuthStatus.UNAUTHORIZED;
+
+  const modelsStatuses = {
+    slices: computeStatuses(slices, userHasAccessToModels),
+    customTypes: computeStatuses(customTypes, userHasAccessToModels),
+  };
+
+  return modelsStatuses;
+};

package/src/features/sync/useUnSyncChanges.ts

@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+
+import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
+import { getFrontendSlices, getLibraries } from "@src/modules/slices";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { useAuthStatus } from "@src/hooks/useAuthStatus";
+
+import { useNetwork } from "../../hooks/useNetwork";
+import { UnSyncedChanges, getUnSyncedChanges } from "./getUnSyncChanges";
+
+export const useUnSyncChanges = (): UnSyncedChanges => {
+  const { customTypes, slices, libraries } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      customTypes: selectAllCustomTypes(store),
+      slices: getFrontendSlices(store),
+      libraries: getLibraries(store),
+    }),
+  );
+  const isOnline = useNetwork();
+  const authStatus = useAuthStatus();
+
+  const unSyncedChange = getUnSyncedChanges({
+    authStatus,
+    customTypes,
+    isOnline,
+    libraries,
+    slices,
+  });
+
+  return useMemo(() => unSyncedChange, [unSyncedChange]);
+};