Feat: add a top-right share-button on the repo page (#152)

api/src/resolver.ts

@@ -11,8 +11,11 @@ import {
   createRepo,
   deletePod,
   deleteRepo,
+  deleteCollaborator,
   myRepos,
   myCollabRepos,
+  getVisibility,
+  updateVisibility,
   addCollaborator,
   pod,
   repo,
@@ -50,7 +53,9 @@ export const resolvers = {
     repo,
     pod,
     listAllRuntimes,
+    getVisibility,
     myCollabRepos,
+
     ...(process.env.RUNTIME_SPAWNER === "k8s"
       ? {
           infoRuntime: infoRuntime_k8s,
@@ -72,6 +77,8 @@ export const resolvers = {
     updatePod,
     deletePod,
     addCollaborator,
+    updateVisibility,
+    deleteCollaborator,
     ...(process.env.RUNTIME_SPAWNER === "k8s"
       ? {
           spawnRuntime: spawnRuntime_k8s,

api/src/resolver_repo.ts

@@ -133,6 +133,41 @@ export async function createRepo(_, { id, name, isPublic }, { userId }) {
   return repo;
 }
 
+export async function getVisibility(_, { repoId }, { userId }) {
+  if (!userId) throw Error("Unauthenticated");
+  const repo = await prisma.repo.findFirst({
+    where: {
+      id: repoId,
+      owner:  { id: userId || "undefined" } 
+    },
+    include: {
+      collaborators: true,
+    },
+  });
+  if (!repo) throw Error("Repo not found");
+  return {collaborators: repo.collaborators, isPublic: repo.public};
+}
+
+export async function updateVisibility(_, { repoId, isPublic }, { userId }) {
+  if (!userId) throw Error("Unauthenticated"); 
+  const repo = await prisma.repo.findFirst({
+    where: {
+      id: repoId,
+      owner:  { id: userId || "undefined" }
+    },
+  });
+  if (!repo) throw Error("Repo not found");
+  await prisma.repo.update({
+    where: {
+      id: repoId,
+    },
+    data: {
+      public: isPublic,
+    },
+  });
+  return true;
+}
+
 export async function updateRepo(_, { id, name }, { userId }) {
   if (!userId) throw Error("Unauthenticated");
   const repo = await prisma.repo.findFirst({
@@ -223,6 +258,28 @@ export async function addCollaborator(_, { repoId, email }, { userId }) {
   return true;
 }
 
+export async function deleteCollaborator(_, { repoId, collaboratorId }, { userId }) {
+  if(!userId) throw new Error("Not authenticated.")
+  // 1. find the repo
+  const repo = await prisma.repo.findFirst({
+    where: {
+      id: repoId,
+      owner: { id: userId },
+    },
+  });
+  // 2. delete the user from the repo
+  if (!repo) throw new Error("Repo not found or you are not the owner.");
+  const res = await prisma.repo.update({
+    where: {
+      id: repoId,
+    },
+    data: {
+      collaborators: { disconnect: { id: collaboratorId } },
+    }
+  })
+  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.");

api/src/typedefs.ts

@@ -14,6 +14,11 @@ export const typeDefs = gql`
     lastname: String!
   }
 
+  type Visibility {
+    collaborators: [User]
+    isPublic: Boolean
+  }
+
   type Repo {
     id: ID!
     name: String
@@ -92,6 +97,7 @@ export const typeDefs = gql`
     pod(id: ID!): Pod
     myRepos: [Repo]
     activeSessions: [String]
+    getVisibility(repoId: String): Visibility
     listAllRuntimes: [RuntimeInfo]
     myCollabRepos: [Repo]
     infoRuntime(sessionId: String!): RuntimeInfo
@@ -118,6 +124,8 @@ export const typeDefs = gql`
     clearPod: Boolean
     spawnRuntime(sessionId: String): Boolean
     killRuntime(sessionId: String!): Boolean
+    updateVisibility(repoId: String, isPublic: Boolean): Boolean
     addCollaborator(repoId: String, email: String): Boolean
+    deleteCollaborator(repoId: String, collaboratorId: String): Boolean
   }
 `;

ui/package.json

@@ -27,6 +27,7 @@
     "net": "^1.0.2",
     "notistack": "^2.0.8",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.6.0",
     "react-monaco-editor": "^0.50.1",
@@ -85,6 +86,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-resizable": "^3.0.3",
     "babel-plugin-named-exports-order": "^0.0.2",
     "prop-types": "^15.8.1",

ui/src/components/Canvas.tsx

@@ -739,12 +739,12 @@ 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 role = useStore(store, (state) => state.role);
   const provider = useStore(store, (state) => state.provider);
   const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  const shareOpen = useStore(store, (state) => state.shareOpen);
+  const setShareOpen = useStore(store, (state) => state.setShareOpen);
 
   const getRealNodes = useCallback(
     (id: string, level: number) => {
@@ -1163,16 +1163,11 @@ export function Canvas() {
             addCode={() => addNode(client.x, client.y, "code")}
             addScope={() => addNode(client.x, client.y, "scope")}
             onShareClick={() => {
-              setShowShareDialog(true);
+              setShareOpen(true);
             }}
           />
         )}
-        <ShareProjDialog
-          open={showShareDialog}
-          onClose={() => setShowShareDialog(false)}
-          title={repoName || ""}
-          id={repoId || ""}
-        />
+        {shareOpen && <ShareProjDialog open={shareOpen} id={repoId || ""} />}
       </Box>
     </Box>
   );

ui/src/components/CanvasContextMenu.tsx

@@ -9,7 +9,6 @@ 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 {
@@ -68,14 +67,6 @@ export function CanvasContextMenu(props) {
             {showLineNumbers ? "Hide " : "Show "} Line Numbers
           </ListItemText>
         </MenuItem>
-        {role === RoleType.OWNER && (
-          <MenuItem onClick={props.onShareClick} sx={ItemStyle}>
-            <ListItemIcon>
-              <ShareOutlinedIcon />
-            </ListItemIcon>
-            <ListItemText> Share with Collaborators </ListItemText>
-          </MenuItem>
-        )}
       </MenuList>
     </Box>
   );

ui/src/components/Header.tsx

@@ -30,13 +30,15 @@ type HeaderProps = {
   drawerWidth?: number;
   currentPage?: string | null;
   breadcrumbItem?: React.ReactNode;
+  shareButton?: React.ReactNode;
 };
 
 export const Header: React.FC<HeaderProps> = ({
   open = false,
   drawerWidth = 0,
   currentPage = null,
   breadcrumbItem = null,
+  shareButton = null,
 }) => {
   const [anchorElNav, setAnchorElNav] = useState(null);
   const [anchorElUser, setAnchorElUser] = useState(null);
@@ -94,6 +96,16 @@ export const Header: React.FC<HeaderProps> = ({
             {breadcrumbItem}
           </Breadcrumbs>
 
+          <Box
+            sx={{
+              display: { xs: "none", md: "flex" },
+              alignItems: "center",
+              paddingRight: "10px",
+            }}
+          >
+            {shareButton}
+          </Box>
+
           {/* The navigation on desktop */}
           <Box
             sx={{