feat: Support variants in Git commit

apps/backend/collaboration/src/extensions/git-sync.ts

@@ -2,6 +2,7 @@ import { Extension, onChangePayload, onDisconnectPayload } from "@hocuspocus/ser
 import {
   createOutputContentProcessor,
   docToJSON,
+  getContentPieceVariantsCollection,
   getContentPiecesCollection,
   getGitDataCollection,
   jsonToBuffer,
@@ -29,6 +30,8 @@ class GitSync implements Extension {
 
   private contentPiecesCollection: ReturnType<typeof getContentPiecesCollection>;
 
+  private contentPieceVariantsCollection: ReturnType<typeof getContentPieceVariantsCollection>;
+
   private debounced: Map<string, { timeout: NodeJS.Timeout; start: number }> = new Map();
 
   public constructor(fastify: FastifyInstance, configuration?: Partial<Configuration>) {
@@ -39,6 +42,7 @@ class GitSync implements Extension {
     };
     this.gitDataCollection = getGitDataCollection(fastify.mongo.db!);
     this.contentPiecesCollection = getContentPiecesCollection(fastify.mongo.db!);
+    this.contentPieceVariantsCollection = getContentPieceVariantsCollection(fastify.mongo.db!);
   }
 
   public async onDisconnect({
@@ -60,9 +64,9 @@ class GitSync implements Extension {
   }: Pick<onChangePayload, "documentName" | "document" | "context">): void {
     if (documentName.startsWith("workspace:")) return;
 
-    const [contentPieceId] = documentName.split(":");
+    const [contentPieceId, variantId = null] = documentName.split(":");
     const update = (): void => {
-      this.updateGitRecord(contentPieceId, {
+      this.updateGitRecord(contentPieceId, variantId, {
         context,
         document
       });
@@ -73,6 +77,7 @@ class GitSync implements Extension {
 
   private async updateGitRecord(
     contentPieceId: string,
+    variantId: string | null,
     details: Pick<onChangePayload, "context" | "document">
   ): Promise<void> {
     const ctx = {
@@ -92,9 +97,23 @@ class GitSync implements Extension {
 
     if (!gitSyncIntegration) return;
 
-    const contentPiece = await this.contentPiecesCollection.findOne({
+    const baseContentPiece = await this.contentPiecesCollection.findOne({
       _id: new ObjectId(contentPieceId)
     });
+
+    let contentPiece = baseContentPiece;
+
+    if (variantId) {
+      const contentPieceVariant = await this.contentPieceVariantsCollection.findOne({
+        _id: new ObjectId(variantId)
+      });
+
+      contentPiece = {
+        ...baseContentPiece,
+        ...contentPieceVariant
+      };
+    }
+
     const json = docToJSON(details.document);
     const outputContentProcessor = await createOutputContentProcessor(
       ctx,
@@ -109,7 +128,8 @@ class GitSync implements Extension {
     await this.gitDataCollection.updateOne(
       {
         "workspaceId": new ObjectId(details.context.workspaceId),
-        "records.contentPieceId": new ObjectId(contentPieceId)
+        "records.contentPieceId": new ObjectId(contentPieceId),
+        ...(variantId && { "records.variantId": new ObjectId(variantId) })
       },
       {
         $set: {
@@ -121,7 +141,10 @@ class GitSync implements Extension {
       action: "update",
       data: {
         records: gitData.records.map((record: any) => {
-          if (record.contentPieceId.toString() === contentPieceId) {
+          if (
+            record.contentPieceId.toString() === contentPieceId &&
+            ((!variantId && !record.variantId) || `${record.variantId}` === `${variantId}`)
+          ) {
             return {
               ...record,
               currentHash

apps/web/src/context/content/index.tsx

@@ -76,6 +76,10 @@ const ContentDataProvider: ParentComponent = (props) => {
     }));
   };
   const expandedContentLevels = (): string[] => {
+    if (storage().expandedContentLevels?.length === 0) {
+      return [""];
+    }
+
     return storage().expandedContentLevels || [""];
   };
   const expandContentLevel = (contentGroupId: string): void => {
@@ -161,7 +165,9 @@ const ContentDataProvider: ParentComponent = (props) => {
   };
 
   createEffect(
-    on(activeVariantId, () => {
+    on(activeVariantId, (newVariantId, previousVariantId) => {
+      if (newVariantId === previousVariantId) return;
+
       load();
 
       const variantsSubscription = client.variants.changes.subscribe(undefined, {

apps/web/src/context/content/loader.ts

@@ -96,7 +96,6 @@ const createContentLoader = ({
           variant: activeVariantId() || undefined
         });
 
-        console.log("load", activeVariantId(), contentPieces);
         level.pieces = contentPieces.map((contentPiece) => contentPiece.id);
         contentPieces.forEach((contentPiece) => {
           setContentPieces(contentPiece.id, contentPiece);

apps/web/src/views/git/sync-view/index.tsx

@@ -16,7 +16,7 @@ import {
   App,
   hasPermission,
   useClient,
-  useLocalStorage,
+  useContentData,
   useNotifications,
   useSharedState
 } from "#context";
@@ -89,10 +89,10 @@ const InitialSyncCard: Component = () => {
   );
 };
 const CommitCard: Component<{ changedRecords: App.GitRecord[] }> = (props) => {
+  const { setActiveContentPieceId, setActiveVariantId } = useContentData();
   const client = useClient();
   const navigate = useNavigate();
   const { notify } = useNotifications();
-  const { setStorage } = useLocalStorage();
   const [message, setMessage] = createSignal("");
   const [loading, setLoading] = createSignal(false);
 
@@ -181,10 +181,8 @@ const CommitCard: Component<{ changedRecords: App.GitRecord[] }> = (props) => {
                     disabled={record.currentHash === ""}
                     hover={record.currentHash !== ""}
                     onClick={() => {
-                      setStorage((storage) => ({
-                        ...storage,
-                        contentPieceId: record.contentPieceId
-                      }));
+                      setActiveVariantId(record.variantId || null);
+                      setActiveContentPieceId(record.contentPieceId);
                       navigate("/editor");
                     }}
                   />

packages/backend/src/lib/git-sync/github/initial-sync.ts

@@ -1,9 +1,5 @@
 import { getDirectory, getLastCommit } from "./requests";
-import {
-  InputContentProcessor,
-  ProcessInputResult,
-  createInputContentProcessor
-} from "../process-content";
+import { ProcessInputResult, createInputContentProcessor } from "../process-content";
 import { GitSyncConfiguration } from "../integration";
 import { LexoRank } from "lexorank";
 import { minimatch } from "minimatch";
@@ -31,6 +27,7 @@ type RawGitRecord = {
   buffer: Buffer;
   metadata: ProcessInputResult["metadata"];
   variantKey?: string;
+  baseVariantPath?: string;
 };
 type RawGitDirectory = {
   path: string;
@@ -215,10 +212,7 @@ const initialSync: GitSyncConfiguration["initialSync"] = async ({ ctx, gitData }
                 hash: record.hash,
                 metadata: record.metadata,
                 order: record.order,
-                path: record.path.replace(
-                  `${variantsDirectory}/${baseVariantDirectory}`,
-                  variantsDirectory
-                )
+                path: record.path
               },
               ...(variantKeys
                 .map((variantKey) => {
@@ -235,12 +229,10 @@ const initialSync: GitSyncConfiguration["initialSync"] = async ({ ctx, gitData }
                     buffer: rawGitRecord.buffer,
                     hash: rawGitRecord.hash,
                     metadata: rawGitRecord.metadata,
+                    path: rawGitRecord.path,
                     order: record.order,
                     variantKey,
-                    path: rawGitRecord.path.replace(
-                      `${variantsDirectory}/${variantKey}`,
-                      variantsDirectory
-                    )
+                    baseVariantPath: record.path
                   };
                 })
                 .filter(Boolean) as RawGitRecord[])
@@ -252,10 +244,7 @@ const initialSync: GitSyncConfiguration["initialSync"] = async ({ ctx, gitData }
 
           return {
             name: rawGitDirectory.name,
-            path: rawGitDirectory.path.replace(
-              `${variantsDirectory}/${baseVariantDirectory}`,
-              variantsDirectory
-            ),
+            path: rawGitDirectory.path,
             records: newRecords,
             directories: newDirectories
           };
@@ -333,7 +322,9 @@ const initialSync: GitSyncConfiguration["initialSync"] = async ({ ctx, gitData }
           path: record.path
         });
         rawGitDirectory.records
-          .filter((variantRecord) => variantRecord.variantKey && variantRecord.path === record.path)
+          .filter((variantRecord) => {
+            return variantRecord.variantKey && variantRecord.baseVariantPath === record.path;
+          })
           .forEach((record) => {
             const { members, tags, date, ...inputMetadata } = record.metadata;
             const variantId = variants.get(record.variantKey!.toLowerCase())!._id;
@@ -361,6 +352,13 @@ const initialSync: GitSyncConfiguration["initialSync"] = async ({ ctx, gitData }
 
             newContentPieceVariants.push(contentPieceVariant);
             newContentVariants.push(contentVariant);
+            newRecords.push({
+              contentPieceId: contentPiece._id,
+              currentHash: record.hash,
+              syncedHash: record.hash,
+              path: record.path,
+              variantId
+            });
           });
       });
     contentGroup.descendants = rawGitDirectory.directories

packages/backend/src/lib/git-sync/process-pulled-records.ts

@@ -48,7 +48,9 @@ const processPulledRecords = async ({
 }> => {
   const contentGroupsCollection = getContentGroupsCollection(ctx.db);
   const contentPiecesCollection = getContentPiecesCollection(ctx.db);
+  const contentPieceVariantsCollection = getContentPiecesCollection(ctx.db);
   const contentsCollection = getContentsCollection(ctx.db);
+  const contentVariantsCollection = getContentsCollection(ctx.db);
   const gitDataCollection = getGitDataCollection(ctx.db);
   const newContentGroups: UnderscoreID<FullContentGroup<ObjectId>>[] = [];
   const updatedContentGroups: Pick<