[UI] Support repo snapshots

api/prisma/migrations/20230818010514_add_y_doc_snapshot_model/migration.sql

@@ -0,0 +1,13 @@
+-- CreateTable
+CREATE TABLE "YDocSnapshot" (
+    "id" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "message" TEXT,
+    "yDocBlob" BYTEA,
+    "repoId" TEXT,
+
+    CONSTRAINT "YDocSnapshot_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "YDocSnapshot" ADD CONSTRAINT "YDocSnapshot_repoId_fkey" FOREIGN KEY ("repoId") REFERENCES "Repo"("id") ON DELETE SET NULL ON UPDATE CASCADE;

api/prisma/schema.prisma

@@ -67,6 +67,15 @@ model UserRepoData {
     @@id([userId, repoId])
 }
 
+model YDocSnapshot {
+    id        String   @id
+    createdAt DateTime @default(now())
+    message   String?
+    yDocBlob  Bytes?
+    Repo      Repo?    @relation(fields: [repoId], references: [id])
+    repoId    String?
+}
+
 model Repo {
     id            String         @id
     name          String?
@@ -83,6 +92,8 @@ model Repo {
     UserRepoData  UserRepoData[]
     stargazers    User[]         @relation("STAR")
     yDocBlob      Bytes?
+    yDocSnapshots YDocSnapshot[]
+
 }
 
 enum PodType {

api/src/resolver_repo.ts

@@ -515,10 +515,50 @@ async function copyRepo(_, { repoId }, { userId }) {
   return id;
 }
 
+/**
+ * create yDoc snapshot upon request.
+ */
+async function addRepoSnapshot(_, { repoId, message }) {
+  const repo = await prisma.repo.findFirst({
+    where: { id: repoId },
+    include: {
+      owner: true,
+      collaborators: true,
+    },
+  });
+  if (!repo) throw Error("Repo not exists.");
+  if (!repo.yDocBlob) throw Error(`yDocBlob on ${repoId} not found`);
+  const snapshot = await prisma.yDocSnapshot.create({
+    data: {
+      id: await nanoid(),
+      yDocBlob: repo.yDocBlob,
+      message: message,
+      repoId: repoId,
+    },
+  });
+  return snapshot.id;
+}
+
+/**
+ * query yDoc snapshot for a repo.
+ */
+async function getRepoSnapshots(_, { repoId }) {
+  const snapshots = await prisma.yDocSnapshot.findMany({
+    where: { repoId: repoId },
+  });
+  if (!snapshots) throw Error(`No snapshot exists for repo ${repoId}.`);
+
+  return snapshots.map((snapshot) => ({
+    ...snapshot,
+    yDocBlob: JSON.stringify(snapshot.yDocBlob),
+  }));
+}
+
 export default {
   Query: {
     repo,
     getDashboardRepos,
+    getRepoSnapshots,
   },
   Mutation: {
     createRepo,
@@ -531,6 +571,7 @@ export default {
     addCollaborator,
     updateVisibility,
     deleteCollaborator,
+    addRepoSnapshot,
     star,
     unstar,
   },

api/src/typedefs.ts

@@ -94,6 +94,14 @@ export const typeDefs = gql`
     ttl: Int
   }
 
+  type YDocSnapshot {
+    id: String
+    repoId: String
+    createdAt: String
+    message: String
+    yDocBlob: String
+  }
+
   type Query {
     hello: String
     users: [User]
@@ -102,6 +110,7 @@ export const typeDefs = gql`
     repo(id: String!): Repo
     pod(id: ID!): Pod
     getDashboardRepos: [Repo]
+    getRepoSnapshots(repoId: String!): [YDocSnapshot]
     activeSessions: [String]
     listAllRuntimes: [RuntimeInfo]
     infoRuntime(sessionId: String!): RuntimeInfo
@@ -137,6 +146,7 @@ export const typeDefs = gql`
 
     exportJSON(repoId: String!): String!
     exportFile(repoId: String!): String!
+    addRepoSnapshot(repoId: String!, message: String!): String!
     updateCodeiumAPIKey(apiKey: String!): Boolean
   }
 `;

ui/src/components/Sidebar.tsx

@@ -17,6 +17,7 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import ListItemButton from "@mui/material/ListItemButton";
+import AddIcon from "@mui/icons-material/Add";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
@@ -1267,6 +1268,106 @@ function TableofPods() {
   );
 }
 
+function SnapshotItem({ id, message }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <ListItem disablePadding key={id}>
+      <ListItemText primary={message} />
+      <IconButton aria-label="More options" onClick={handleClick}>
+        <MoreVertIcon />
+      </IconButton>
+      <Popover open={open} anchorEl={anchorEl} onClose={handleClose}>
+        <MenuList>
+          <MenuItem>Restore</MenuItem>
+          <MenuItem>Delete</MenuItem>
+        </MenuList>
+      </Popover>
+    </ListItem>
+  );
+}
+
+function RepoSnapshots() {
+  const { id: repoId } = useParams();
+  const { error: queryError, data: queryResult } = useQuery(gql`
+    query GetRepoSnapshots {
+      getRepoSnapshots(repoId: "${repoId}") {
+        id
+        createdAt
+        message
+        yDocBlob
+      }
+    }
+  `);
+  const [addRepoSnapshot, { error: mutationError, data: mutationResult }] =
+    useMutation(
+      gql`
+        mutation addRepoSnapshot($repoId: String!, $message: String!) {
+          addRepoSnapshot(repoId: $repoId, message: $message)
+        }
+      `,
+      {
+        refetchQueries: ["GetRepoSnapshots"],
+      }
+    );
+
+  if (queryError) {
+    return <Box>ERROR: {queryError.message}</Box>;
+  }
+
+  const snapshots = queryResult?.getRepoSnapshots.slice();
+  return (
+    <Box>
+      <Box
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "stretch",
+        }}
+      >
+        <Box
+          style={{
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <Typography variant="h6">Snapshots</Typography>
+        </Box>
+        <IconButton
+          onClick={() => {
+            addRepoSnapshot({
+              variables: { repoId: repoId, message: "placeholder" },
+            });
+          }}
+        >
+          <AddIcon />
+        </IconButton>
+      </Box>
+      <List>
+        {snapshots &&
+          snapshots.length > 0 &&
+          snapshots.map((snapshot) => (
+            <SnapshotItem
+              key={snapshot.id}
+              id={snapshot.id}
+              message={snapshot.createdAt}
+            />
+          ))}
+      </List>
+    </Box>
+  );
+}
+
 export const Sidebar: React.FC<SidebarProps> = ({
   width,
   open,
@@ -1353,6 +1454,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
             <Divider />
             <Typography variant="h6">Table of Pods</Typography>
             <TableofPods />
+
+            <Divider />
+            <RepoSnapshots />
           </Stack>
         </Box>
       </Drawer>