feat(share): add share button (#81)

li-xin-yi · lihebi · web-flow · commit 3a6fb2bbb20f · 2022-11-23T14:18:00.000-08:00
Co-authored-by: Hebi Li &lt;lihebi.com@gmail.com&gt;
diff --git a/api/prisma/schema.prisma b/api/prisma/schema.prisma
@@ -54,6 +54,9 @@ model Repo {
     userId String
     pods   Pod[]    @relation("BELONG")
     podsId String[]
+    public Boolean @default(false)
+    collaboratorIds String[] 
+    
 
     @@unique([name, userId])
 }
diff --git a/api/src/resolver.ts b/api/src/resolver.ts
@@ -5,6 +5,8 @@ import {
   deletePod,
   deleteRepo,
   myRepos,
+  myCollabRepos,
+  addCollaborator,
   pod,
   repo,
   repos,
@@ -34,6 +36,7 @@ export const resolvers = {
     repo,
     pod,
     listAllRuntimes,
+    myCollabRepos,
   },
   Mutation: {
     signup,
@@ -45,6 +48,7 @@ export const resolvers = {
     addPod,
     updatePod,
     deletePod,
+    addCollaborator,
     spawnRuntime:
       process.env.RUNTIME_SPAWNER === "k8s"
         ? spawnRuntime_k8s
diff --git a/api/src/resolver_repo.ts b/api/src/resolver_repo.ts
@@ -3,6 +3,8 @@ const { PrismaClient } = Prisma;
 
 const prisma = new PrismaClient();
 
+// console.log("resolver_repo.ts", Prisma.RepoInclude);
+
 async function ensurePodAccess({ id, userId }) {
   let pod = await prisma.pod.findFirst({
     where: { id },
@@ -30,7 +32,9 @@ async function ensurePodAccess({ id, userId }) {
     // is created on server, which is a time sequence bug
     throw new Error("Pod not exists.");
   }
-  if (pod.repo.owner.id !== userId) {
+  // public repo can be accessed by everyone
+  // if the user is the owner or one of the collaborators, then it is ok
+  if (!pod.repo.public &&  pod.repo.owner.id !== userId && pod.repo.collaboratorIds.indexOf(userId) === -1) {
     throw new Error("You do not have access to this pod.");
   }
 }
@@ -57,12 +61,27 @@ export async function myRepos(_, __, { userId }) {
   return repos;
 }
 
-export async function repo(_, { id }, { userId }) {
+export async function myCollabRepos(_, __, {userId}) {
   if (!userId) throw Error("Unauthenticated");
-  const repo = await prisma.repo.findFirst({
+  // console.log("myCollabRepos", userId);
+  const repos = await prisma.repo.findMany({
     where: {
-      id,
-      owner: { id: userId },
+      public: false,
+      collaboratorIds: {
+        has:userId,
+      },
+    },
+  });
+  return repos;
+}
+
+export async function repo(_, { id }, { userId }) {
+  const repo = await prisma.repo.findFirst({
+    where: { OR: [
+      { id, public: true },
+      { id, owner: { id: userId!} },
+      { id, collaboratorIds: { has: userId!} },
+    ]
     },
     include: {
       owner: true,
@@ -77,7 +96,6 @@ export async function repo(_, { id }, { userId }) {
       },
     },
   });
-  // console.log("Returning repo", repo);
   return repo;
 }
 
@@ -90,12 +108,13 @@ export async function pod(_, { id }) {
   });
 }
 
-export async function createRepo(_, { id, name }, { userId }) {
+export async function createRepo(_, { id, name, isPublic}, { userId }) {
   if (!userId) throw Error("Unauthenticated");
   const repo = await prisma.repo.create({
     data: {
       id,
       name,
+      public: isPublic,
       owner: {
         connect: {
           id: userId,
@@ -141,6 +160,42 @@ export async function deleteRepo(_, { name }, { userId }) {
   return true;
 }
 
+export async function addCollaborator(_, { repoId, email }, { userId}) {
+  // make sure the repo is writable by this user
+  if (!userId) throw new Error("Not authenticated.");
+  // 1. find the repo
+  const repo = await prisma.repo.findFirst({
+    where: {
+      id: repoId,
+      owner: { id: userId },
+    },
+  });
+  if (!repo) throw new Error("Repo not found or you are not the owner.");
+  if (repo.public) throw new Error("Public repo cannot have collaborators.");
+  // 2. find the user
+  const user = await prisma.user.findFirst({
+    where: {
+      email,
+    }
+  });
+  if (!user) throw new Error("User not found");
+  if (user.id === userId) throw new Error("You are already the owner.");
+  if (repo.collaboratorIds.indexOf(user.id) !== -1) throw new Error("The user is already a collaborator.");
+  // 3. add the user to the repo
+  const res = await prisma.repo.update({
+    where: {
+      id: repoId,
+    },
+    data: {
+      // public: false,
+      // name: "test",
+      collaboratorIds: {push: user.id},
+    }
+  })
+  // console.log(res.collaboratorIds);
+  return true;
+}
+
 export async function addPod(_, { repoId, parent, index, input }, { userId }) {
   // make sure the repo is writable by this user
   if (!userId) throw new Error("Not authenticated.");
@@ -272,4 +327,4 @@ export async function deletePod(_, { id, toDelete }, { userId }) {
     },
   });
   return true;
-}
+}
diff --git a/api/src/typedefs.ts b/api/src/typedefs.ts
@@ -18,6 +18,8 @@ export const typeDefs = gql`
     id: ID!
     name: String!
     pods: [Pod]
+    collaboratorIds: [ID!]
+    public: Boolean!
   }
 
   type Pod {
@@ -83,6 +85,7 @@ export const typeDefs = gql`
     myRepos: [Repo]
     activeSessions: [String]
     listAllRuntimes: [String]
+    myCollabRepos: [Repo]
   }
 
   type Mutation {
@@ -95,7 +98,7 @@ export const typeDefs = gql`
       lastname: String
     ): AuthData
     updateUser(email: String, firstname: String, lastname: String): Boolean
-    createRepo(name: String, id: ID): Repo
+    createRepo(name: String, id: ID, isPublic: Boolean): Repo
     deleteRepo(name: String): Boolean
     addPod(repoId: String, parent: String, index: Int, input: PodInput): Boolean
     deletePod(id: String, toDelete: [String]): Boolean
@@ -105,5 +108,6 @@ export const typeDefs = gql`
     clearPod: Boolean
     spawnRuntime(sessionId: String): Boolean
     killRuntime(sessionId: String!): Boolean
+    addCollaborator(repoId: String, email: String): Boolean
   }
 `;
diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx
@@ -51,6 +51,7 @@ import { useApolloClient } from "@apollo/client";
 import { CanvasContextMenu } from "./CanvasContextMenu";
 import ToolBox, { ToolTypes } from "./Toolbox";
 import styles from "./canvas.style.js";
+import { ShareProjDialog } from "./ShareProjDialog";
 import { analyzeCode } from "../lib/parser";
 
 const nanoid = customAlphabet(nolookalikes, 10);
@@ -513,12 +514,14 @@ export function Canvas() {
   // const pods = useStore(store, (state) => state.pods);
   const getPod = useStore(store, (state) => state.getPod);
   const nodesMap = useStore(store, (state) => state.ydoc.getMap<Node>("pods"));
+  const [showShareDialog, setShowShareDialog] = useState(false);
+  const repoId = useStore(store, (state) => state.repoId);
+  const repoName = useStore(store, (state) => state.repoName);
 
   const getRealNodes = useCallback(
     (id, level) => {
       let res: any[] = [];
       let children = getId2children(id) || [];
-      console.log("getChildren", id, children);
       const pod = getPod(id);
       if (id !== "ROOT") {
         res.push({
@@ -920,8 +923,17 @@ export function Canvas() {
             y={points.y}
             addCode={() => addNode(client.x, client.y, "code")}
             addScope={() => addNode(client.x, client.y, "scope")}
+            onShareClick={() => {
+              setShowShareDialog(true);
+            }}
           />
         )}
+        <ShareProjDialog
+          open={showShareDialog}
+          onClose={() => setShowShareDialog(false)}
+          title={repoName || ""}
+          id={repoId || ""}
+        />
       </Box>
     </Box>
   );
diff --git a/ui/src/components/CanvasContextMenu.tsx b/ui/src/components/CanvasContextMenu.tsx
@@ -9,6 +9,7 @@ import React, { useContext } from "react";
 import CodeIcon from "@mui/icons-material/Code";
 import PostAddIcon from "@mui/icons-material/PostAdd";
 import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
+import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
 
 const paneMenuStyle = (left, top) => {
   return {
@@ -62,6 +63,12 @@ export function CanvasContextMenu(props) {
             {showLineNumbers ? "Hide " : "Show "} Line Numbers
           </ListItemText>
         </MenuItem>
+        <MenuItem onClick={props.onShareClick} sx={ItemStyle}>
+          <ListItemIcon>
+            <ShareOutlinedIcon />
+          </ListItemIcon>
+          <ListItemText> Share with Collaborators </ListItemText>
+        </MenuItem>
       </MenuList>
     </Box>
   );
diff --git a/ui/src/components/ShareProjDialog.tsx b/ui/src/components/ShareProjDialog.tsx
@@ -0,0 +1,100 @@
+import DialogTitle from "@mui/material/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
+import Alert from "@mui/material/Alert";
+import { useState } from "react";
+import { useQuery, useMutation, gql } from "@apollo/client";
+
+interface ShareProjDialogProps {
+  open: boolean;
+  title: String;
+  onClose: () => void;
+  id: string;
+}
+
+export function ShareProjDialog({
+  open,
+  title,
+  onClose,
+  id,
+}: ShareProjDialogProps) {
+  const [email, setEmail] = useState("");
+  const [alert, setAlert] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const query = gql`
+    mutation addCollaborator($repoId: String, $email: String) {
+      addCollaborator(repoId: $repoId, email: $email)
+    }
+  `;
+  const [addEmail] = useMutation(query);
+
+  const onChange = (e) => {
+    setEmail(e.target.value);
+  };
+  async function onShare() {
+    if (email === "") {
+      setAlert(true);
+      setErrorMsg("Please enter an email address");
+      return;
+    }
+    try {
+      const { data } = await addEmail({
+        variables: {
+          repoId: id,
+          email,
+        },
+      });
+      setAlert(false);
+      setSuccess(true);
+      // show the success message for 1 second before closing the dialog
+      setTimeout(() => {
+        onCloseHandler();
+      }, 1000);
+    } catch (error: any) {
+      setSuccess(false); // just in case
+      setAlert(true);
+      setErrorMsg(error?.message || "Unknown error");
+    }
+  }
+
+  function onCloseHandler() {
+    setEmail("");
+    setAlert(false);
+    setSuccess(false);
+    onClose();
+  }
+
+  return (
+    <Dialog open={open} onClose={onCloseHandler}>
+      <DialogTitle> Share Project {title} with</DialogTitle>
+      {alert && <Alert severity="error"> {errorMsg} </Alert>}
+      {success && <Alert severity="success"> Invitation Sent </Alert>}
+      <DialogContent>
+        <DialogContentText>
+          Enter the email address of the person you want to share this project
+          with.
+        </DialogContentText>
+        <TextField
+          autoFocus
+          margin="dense"
+          id="name"
+          label="Email Address"
+          type="email"
+          variant="standard"
+          fullWidth
+          onChange={onChange}
+        />
+        <DialogActions>
+          <Button onClick={onCloseHandler}>Cancel</Button>
+          <Button onClick={onShare}> Share</Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/ui/src/lib/store.tsx b/ui/src/lib/store.tsx
@@ -28,8 +28,9 @@ if (window.location.protocol === "http:") {
 }
 console.log("yjs server url: ", serverURL);
 
-export const RepoContext =
-  createContext<StoreApi<RepoSlice & RuntimeSlice> | null>(null);
+export const RepoContext = createContext<StoreApi<
+  RepoSlice & RuntimeSlice
+> | null>(null);
 
 // TODO use a selector to compute and retrieve the status
 // TODO this need to cooperate with syncing indicator
diff --git a/ui/src/pages/repos.tsx b/ui/src/pages/repos.tsx

Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,9 @@ model Repo {`
`54`	`54`	`userId String`
`55`	`55`	`pods Pod[] @relation("BELONG")`
`56`	`56`	`podsId String[]`
	`57`	`+ public Boolean @default(false)`
	`58`	`+ collaboratorIds String[]`
	`59`	`+`
`57`	`60`
`58`	`61`	`@@unique([name, userId])`
`59`	`62`	`}`