Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Dec 16, 2022
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5fd8459
feat: move the share button to header
li-xin-yi Dec 15, 2022
841780c
code clean up
li-xin-yi Dec 16, 2022
7ce3422
add @types/react-copy-to-clipboard
lihebi Dec 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions api/src/resolver.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@ import {
createRepo,
deletePod,
deleteRepo,
deleteCollaborator,
myRepos,
myCollabRepos,
getVisibility,
updateVisibility,
addCollaborator,
pod,
repo,
Expand Down Expand Up @@ -50,7 +53,9 @@ export const resolvers = {
repo,
pod,
listAllRuntimes,
getVisibility,
myCollabRepos,

...(process.env.RUNTIME_SPAWNER === "k8s"
? {
infoRuntime: infoRuntime_k8s,
Expand All @@ -72,6 +77,8 @@ export const resolvers = {
updatePod,
deletePod,
addCollaborator,
updateVisibility,
deleteCollaborator,
...(process.env.RUNTIME_SPAWNER === "k8s"
? {
spawnRuntime: spawnRuntime_k8s,
Expand Down
57 changes: 57 additions & 0 deletions api/src/resolver_repo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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.");
Expand Down
8 changes: 8 additions & 0 deletions api/src/typedefs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ export const typeDefs = gql`
lastname: String!
}

type Visibility {
collaborators: [User]
isPublic: Boolean
}

type Repo {
id: ID!
name: String
Expand Down Expand Up @@ -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
Expand All @@ -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
}
`;
1 change: 1 addition & 0 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"net": "^1.0.2",
"notistack": "^2.0.8",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
lihebi marked this conversation as resolved.
Show resolved Hide resolved
"react-dom": "^18.2.0",
"react-icons": "^4.6.0",
"react-monaco-editor": "^0.50.1",
Expand Down
18 changes: 10 additions & 8 deletions ui/src/components/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -739,12 +739,13 @@ 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) => {
Expand Down Expand Up @@ -1163,16 +1164,17 @@ 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}
title={repoName || ""}
id={repoId || ""}
/>
)}
</Box>
</Box>
);
Expand Down
14 changes: 6 additions & 8 deletions ui/src/components/CanvasContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,12 @@ 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>
)}
<MenuItem onClick={props.onShareClick} sx={ItemStyle}>
<ListItemIcon>
<ShareOutlinedIcon />
</ListItemIcon>
<ListItemText> Share </ListItemText>
</MenuItem>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could remove this right-click menu item now.

</MenuList>
</Box>
);
Expand Down
23 changes: 23 additions & 0 deletions ui/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Avatar from "@mui/material/Avatar";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Link from "@mui/material/Link";
import Button from "@mui/material/Button";
import ShareIcon from "@mui/icons-material/Share";

import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
Expand All @@ -30,13 +31,17 @@ type HeaderProps = {
drawerWidth?: number;
currentPage?: string | null;
breadcrumbItem?: React.ReactNode;
inRepo?: boolean;
setShareOpen?: () => void;
};

export const Header: React.FC<HeaderProps> = ({
open = false,
drawerWidth = 0,
currentPage = null,
breadcrumbItem = null,
inRepo = false,
setShareOpen = () => {},
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. It seems that setShareOpen doesn't need to be passed in. You could call useStore to get it.
  2. inRepo isn't general enough. I would use a buttonItem=null argument and pass in a ReactNode (just like the breadcrumbItem above). This way, the repo sharing UI & logic are not leaked into Header's implementation.

E.g.,

// repo.tsx
function ShareButton() {
  const setShareOpen = useStore(...);
  return <Box><Button onClick={()=>setShareOpen(true)}>...</Button></Box>
}
function RepoWrapper() {
  return <Box> ... <Header buttonItem={<ShareButton/>}/></Box>
}

// Header.tsx
function Header({..., buttonItem=null}) {
  return <Box> ... {buttonItem} ... </Box>
}

}) => {
const [anchorElNav, setAnchorElNav] = useState(null);
const [anchorElUser, setAnchorElUser] = useState(null);
Expand Down Expand Up @@ -94,6 +99,24 @@ export const Header: React.FC<HeaderProps> = ({
{breadcrumbItem}
</Breadcrumbs>

{inRepo && (
<Box
sx={{
display: { xs: "none", md: "flex" },
alignItems: "center",
paddingRight: "10px",
}}
>
<Button
endIcon={<ShareIcon />}
onClick={setShareOpen}
variant="contained"
>
Share
</Button>
</Box>
)}

{/* The navigation on desktop */}
<Box
sx={{
Expand Down
Loading