frontend implementation for: l3montree-dev/devguard#246, adds ProjectMemberDialog, adds members table, tested and verified against backend

Author: timbastin

src/components/MemberForm.tsx src/components/MemberDialog.tsxsrc/components/MemberForm.tsx renamed to src/components/MemberDialog.tsx

@@ -17,6 +17,7 @@ import { Button } from "./ui/button";
 import { Form, FormItem, FormLabel } from "./ui/form";
 import { Input } from "./ui/input";
 import { useActiveOrg } from "@/hooks/useActiveOrg";
+import InlineCopy from "./common/InlineCopy";
 
 interface Props {
   isOpen: boolean;
@@ -55,7 +56,13 @@ const MemberDialog: FunctionComponent<Props> = ({ isOpen, onOpenChange }) => {
           <DialogTitle>Invite member</DialogTitle>
           <DialogDescription>
             Invite a new member to your organization by entering their email
-            address. An invitation will be sent.
+            address.
+            <div className="mt-2">
+              <Callout intent="warning">
+                Currently DevGuard does not send any E-Mails. Please copy the
+                link and forward it manually.
+              </Callout>
+            </div>
           </DialogDescription>
         </DialogHeader>
         <Form {...form}>
@@ -71,7 +78,7 @@ const MemberDialog: FunctionComponent<Props> = ({ isOpen, onOpenChange }) => {
                   <Callout intent="info">
                     <p>
                       Accept the invitation by visiting this link:{" "}
-                      {invitationCode}
+                      <InlineCopy content={invitationCode!} />
                     </p>
                   </Callout>
                 )}

src/components/MembersTable.tsx

@@ -13,17 +13,18 @@
 // limitations under the License.
 
 import { classNames } from "@/utils/common";
-import React, { FunctionComponent } from "react";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { FunctionComponent } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Badge } from "./ui/badge";
+import { buttonVariants } from "./ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "./ui/dropdown-menu";
-import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
-import { Button, buttonVariants } from "./ui/button";
-import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 
 interface Props {
   members: Array<{
@@ -32,8 +33,14 @@ interface Props {
     avatarUrl?: string;
     role?: string;
   }>;
+  onRemoveMember: (id: string) => void;
+  onChangeMemberRole: (id: string, role: "admin" | "member") => void;
 }
-const MembersTable: FunctionComponent<Props> = ({ members }) => {
+const MembersTable: FunctionComponent<Props> = ({
+  members,
+  onRemoveMember,
+  onChangeMemberRole,
+}) => {
   return (
     <div className="overflow-hidden rounded-lg border">
       <table className="w-full text-sm">
@@ -84,8 +91,20 @@ const MembersTable: FunctionComponent<Props> = ({ members }) => {
                         <EllipsisVerticalIcon className="h-5 w-5" />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
-                        <DropdownMenuItem>Edit</DropdownMenuItem>
-                        <DropdownMenuItem>Delete</DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => onChangeMemberRole(m.id, "admin")}
+                        >
+                          Make admin
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => onChangeMemberRole(m.id, "member")}
+                        >
+                          Make member
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onClick={() => onRemoveMember(m.id)}>
+                          Remove
+                        </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </td>

src/components/ProjectMemberDialog.tsx

@@ -0,0 +1,136 @@
+import { FunctionComponent, useMemo, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+
+import { useActiveOrg } from "@/hooks/useActiveOrg";
+import { browserApiClient } from "@/services/devGuardApi";
+import { toast } from "sonner";
+import { useActiveProject } from "../hooks/useActiveProject";
+import Callout from "./common/Callout";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { useStore } from "../zustand/globalStoreProvider";
+
+interface Props {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const ProjectMemberDialog: FunctionComponent<Props> = ({
+  isOpen,
+  onOpenChange,
+}) => {
+  const activeOrg = useActiveOrg();
+  const activeProject = useActiveProject();
+  const updateProject = useStore((s) => s.updateProject);
+  const [selectedMembers, setSelectedMembers] = useState<string[]>([]);
+
+  const handleInviteSelectedMembers = async () => {
+    const resp = await browserApiClient(
+      "/organizations/" +
+        activeOrg.slug +
+        "/projects/" +
+        activeProject.slug +
+        "/members",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          ids: selectedMembers,
+        }),
+      },
+    );
+
+    if (!resp.ok) {
+      toast.error("Failed to invite member");
+      return;
+    } else {
+      updateProject({
+        ...activeProject,
+        members: activeProject.members.concat(
+          activeOrg.members
+            .filter((e) => selectedMembers.includes(e.id))
+            .map((e) => ({
+              ...e,
+              role: "member",
+            })),
+        ),
+      });
+      toast.success("Members successfully added to the project");
+      onOpenChange(false);
+    }
+  };
+
+  const membersToInvite = useMemo(() => {
+    const projectMemberIds = activeProject.members.reduce(
+      (acc, m) => {
+        acc[m.id] = true;
+        return acc;
+      },
+      {} as { [key: string]: boolean },
+    );
+    return activeOrg.members.filter((m) => !projectMemberIds[m.id]);
+  }, [activeProject.members, activeOrg.members]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Invite member</DialogTitle>
+          <DialogDescription>
+            Invite a new member to your organization by entering their email
+            address.
+          </DialogDescription>
+        </DialogHeader>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            className={cn(
+              "flex h-10 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+            )}
+          >
+            Select the people you would like to invite to the project. (
+            {selectedMembers.length} currently selected)
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-full">
+            {membersToInvite.map((m) => (
+              <DropdownMenuCheckboxItem
+                onClick={() =>
+                  setSelectedMembers((prev) => {
+                    if (prev.includes(m.id)) {
+                      return prev.filter((el) => el !== m.id);
+                    }
+                    return prev.concat(m.id);
+                  })
+                }
+                checked={selectedMembers.includes(m.id)}
+                key={m.id}
+              >
+                {m.name}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DialogFooter className="mt-2">
+          <div className="flex flex-col items-end justify-end gap-2">
+            <Button onClick={handleInviteSelectedMembers} type="submit">
+              Invite
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ProjectMemberDialog;

src/components/common/InlineCopy.tsx

@@ -0,0 +1,24 @@
+import { CopyIcon } from "lucide-react";
+import { FunctionComponent } from "react";
+import { toast } from "sonner";
+
+const InlineCopy: FunctionComponent<{ content: string }> = ({ content }) => {
+  const handleCopy = () => {
+    navigator.clipboard.writeText(content);
+    toast.success("Copied to clipboard");
+  };
+  return (
+    <span className="inline-flex items-center gap-1">
+      {content}
+      <button
+        onClick={handleCopy}
+        type="button"
+        className="rounded-lg p-1 transition-all hover:bg-white/20"
+      >
+        <CopyIcon className="h-4 w-4" />
+      </button>
+    </span>
+  );
+};
+
+export default InlineCopy;

src/decorators/withSession.ts

@@ -38,7 +38,7 @@ export async function withSession(ctx: GetServerSidePropsContext) {
     }
 
     // call the initial endpoint with the latest information available
-    return session.data as User;
+    return session.data as { identity: User };
   } catch (e: unknown) {
     if (isAxiosError(e)) {
       if (e.response?.status === 401) {

src/hooks/useActiveProject.ts

@@ -17,6 +17,6 @@ import { useStore } from "@/zustand/globalStoreProvider";
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 export function useActiveProject() {
   return useStore((s) => {
-    return s.project;
+    return s.project!;
   });
 }

src/pages/[organizationSlug]/projects/[projectSlug]/settings.tsx

@@ -1,5 +1,5 @@
 import { GetServerSidePropsContext } from "next";
-import { FunctionComponent } from "react";
+import { FunctionComponent, useState } from "react";
 import Page from "../../../../components/Page";
 
 import { middleware } from "@/decorators/middleware";
@@ -32,6 +32,9 @@ import Section from "../../../../components/common/Section";
 import { Label } from "../../../../components/ui/label";
 import { convertRepos } from "../../../../hooks/useRepositorySearch";
 import ConnectToRepoSection from "../../../../components/ConnectToRepoSection";
+import MemberDialog from "../../../../components/MemberDialog";
+import MembersTable from "../../../../components/MembersTable";
+import ProjectMemberDialog from "../../../../components/ProjectMemberDialog";
 
 interface Props {
   project: ProjectDTO;
@@ -42,6 +45,61 @@ const Index: FunctionComponent<Props> = ({ repositories }) => {
   const activeOrg = useActiveOrg();
   const project = useActiveProject();
   const updateProject = useStore((s) => s.updateProject);
+  const [memberDialogOpen, setMemberDialogOpen] = useState(false);
+
+  const handleChangeMemberRole = async (
+    id: string,
+    role: "admin" | "member",
+  ) => {
+    const resp = await browserApiClient(
+      "/organizations/" +
+        activeOrg.slug +
+        "/projects/" +
+        project?.slug +
+        "/members/" +
+        id,
+      {
+        method: "PUT",
+        body: JSON.stringify({ role }),
+      },
+    );
+
+    if (resp.ok) {
+      updateProject({
+        ...project!,
+        members: project!.members.map((member) =>
+          member.id === id ? { ...member, role } : member,
+        ),
+      });
+      toast.success("Role successfully changed");
+    } else {
+      toast.error("Failed to update member role");
+    }
+  };
+
+  const handleRemoveMember = async (id: string) => {
+    const resp = await browserApiClient(
+      "/organizations/" +
+        activeOrg.slug +
+        "/projects/" +
+        project?.slug +
+        "/members/" +
+        id,
+      {
+        method: "DELETE",
+      },
+    );
+
+    if (resp.ok) {
+      updateProject({
+        ...project!,
+        members: project!.members.filter((member) => member.id !== id),
+      });
+      toast.success("Member deleted");
+    } else {
+      toast.error("Failed to remove member");
+    }
+  };
 
   const projectMenu = useProjectMenu();
 
@@ -97,6 +155,28 @@ const Index: FunctionComponent<Props> = ({ repositories }) => {
           repositoryId={project?.repositoryId}
           repositoryName={project?.repositoryName}
         />
+        <hr />
+        <Section
+          title="Member"
+          description="Manage the members of your organization"
+        >
+          <MembersTable
+            onChangeMemberRole={handleChangeMemberRole}
+            onRemoveMember={handleRemoveMember}
+            members={project.members}
+          />
+          <ProjectMemberDialog
+            isOpen={memberDialogOpen}
+            onOpenChange={setMemberDialogOpen}
+          />
+
+          <div className="flex flex-row justify-end">
+            <Button onClick={() => setMemberDialogOpen(true)}>
+              Add Member
+            </Button>
+          </div>
+        </Section>
+        <hr />
         <Form {...form}>
           <form onSubmit={form.handleSubmit(handleUpdate)}>
             <ProjectForm forceVerticalSections={false} form={form} />