feat(ui): Workspace CRUD

ui/src/features/NotFoundPage/index.tsx

@@ -10,8 +10,8 @@ type Props = {
 
 const NotFoundPage: React.FC<Props> = ({ message }) => {
   const t = useT();
-  const { getMe } = useUser();
-  const { me } = getMe();
+  const { useGetMe } = useUser();
+  const { me } = useGetMe();
 
   return (
     <div className="bg-zinc-800 h-[100vh] flex justify-center items-center">

ui/src/features/PageWrapper/WorkspaceId.tsx

@@ -12,7 +12,7 @@ type Props = {
 };
 
 const WorkspaceIdWrapper: React.FC<Props> = ({ children }) => {
-  const [currentWorkspace, setCurrentWorkspace] = useCurrentWorkspace();
+  const [_, setCurrentWorkspace] = useCurrentWorkspace();
 
   const { workspaceId }: { workspaceId: string } = useParams({
     strict: false,
@@ -23,11 +23,10 @@ const WorkspaceIdWrapper: React.FC<Props> = ({ children }) => {
 
   useEffect(() => {
     if (!workspace) return;
-    if (currentWorkspace?.id === workspace.id) return;
     setCurrentWorkspace(workspace);
 
     return;
-  }, [workspace, currentWorkspace, setCurrentWorkspace]);
+  }, [workspace, setCurrentWorkspace]);
 
   if (isLoading) return <Loading />;
 

ui/src/features/TopNavigation/components/UserNavigation.tsx

@@ -33,8 +33,8 @@ const UserNavigation: React.FC<Props> = ({
   const t = useT();
   const [, setDialogType] = useDialogType();
   const { logout: handleLogout, user } = useAuth();
-  const { getMe } = useUser();
-  const data = getMe().me;
+  const { useGetMe } = useUser();
+  const { me } = useGetMe();
 
   const { tosUrl, documentationUrl } = config();
 
@@ -47,12 +47,12 @@ const UserNavigation: React.FC<Props> = ({
         <div className={`flex gap-2 mr-2 ${className}`}>
           <Avatar className="h-8 w-8">
             <AvatarImage src={user?.picture} />
-            <AvatarFallback>{data?.name ? data?.name.charAt(0).toUpperCase() : "F"}</AvatarFallback>
+            <AvatarFallback>{me?.name ? me.name.charAt(0).toUpperCase() : "F"}</AvatarFallback>
           </Avatar>
           {!iconOnly ? (
             <div className="flex items-center gap-2 self-center">
               <p className="text-zinc-300 text-sm font-extralight max-w-28 truncate transition-all delay-0 duration-500 hover:max-w-[30vw] hover:delay-500">
-                {data?.name ? data?.name : "User"}
+                {me?.name ? me.name : "User"}
               </p>
               <CaretDown className="w-[12px]" weight="thin" />
             </div>

ui/src/features/WorkspaceSettings/components/GeneralSettings.tsx

@@ -1,30 +1,53 @@
 import { useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Button, Input, Label } from "@flow/components";
 import { useWorkspace } from "@flow/lib/gql";
 import { useT } from "@flow/lib/i18n";
 import { useCurrentWorkspace } from "@flow/stores";
 
+type Errors = "delete" | "update";
+
 const GeneralSettings: React.FC = () => {
   const t = useT();
   const [currentWorkspace] = useCurrentWorkspace();
-  const { deleteWorkspace } = useWorkspace();
+  const { deleteWorkspace, updateWorkspace } = useWorkspace();
   const navigate = useNavigate();
-  const [showError, setShowError] = useState(false);
+  const [showError, setShowError] = useState<Errors | undefined>(undefined);
+  const [workspaceName, setWorkspaceName] = useState(currentWorkspace?.name);
+  const [loading, setLoading] = useState(false);
 
   const handleDeleteWorkspace = async () => {
-    setShowError(false);
+    setLoading(true);
+    setShowError(undefined);
     if (!currentWorkspace) return;
-    // TODO: this trigger a pop up for confirming
+    // TODO: this should trigger a pop up for confirming
     const { workspaceId } = await deleteWorkspace(currentWorkspace.id);
 
     if (!workspaceId) {
-      setShowError(true);
+      setShowError("delete");
       return;
     }
     navigate({ to: "/workspace" });
   };
+
+  const handleUpdateWorkspace = async () => {
+    setLoading(true);
+    setShowError(undefined);
+    if (!currentWorkspace?.id || !workspaceName) return;
+    const { workspace } = await updateWorkspace(currentWorkspace?.id, workspaceName);
+    setLoading(false);
+    if (!workspace) {
+      setShowError("update");
+      return;
+    }
+  };
+
+  // currentWorkspace can be changed from the navigation
+  useEffect(() => {
+    setWorkspaceName(currentWorkspace?.name);
+  }, [currentWorkspace]);
+
   return (
     <div>
       <p className="text-lg font-extralight">{t("General Settings")}</p>
@@ -34,29 +57,27 @@ const GeneralSettings: React.FC = () => {
           <Input
             id="workspace-name"
             placeholder={t("Workspace Name")}
-            readOnly={true}
-            disabled={true}
-            value={currentWorkspace?.name}
+            disabled={currentWorkspace?.personal || loading}
+            value={workspaceName}
+            onChange={e => setWorkspaceName(e.target.value)}
           />
         </div>
-        {/* <div className="flex flex-col gap-2">
-          <Label htmlFor="workspace-description">{t("Workspace Description")}</Label>
-          <Input
-            id="workspace-description"
-            placeholder={t("Workspace Description")}
-            defaultValue={currentWorkspace?.description}
-          />
-        </div> */}
-        <Button className="self-end">{t("Save")}</Button>
+        <Button
+          className="self-end"
+          disabled={loading || !workspaceName || currentWorkspace?.personal}
+          onClick={handleUpdateWorkspace}>
+          {t("Save")}
+        </Button>
         <Button
           variant={"destructive"}
-          disabled={currentWorkspace?.personal}
+          disabled={currentWorkspace?.personal || loading}
           className="self-end"
           onClick={() => handleDeleteWorkspace()}>
           {t("Delete Workspace")}
         </Button>
         <div className={`text-xs text-red-400 self-end ${showError ? "opacity-70" : "opacity-0"}`}>
-          {t("Failed to delete workspace")}
+          {showError === "delete" && t("Failed to delete Workspace")}
+          {showError === "update" && t("Failed to update Workspace")}
         </div>
       </div>
     </div>

ui/src/features/WorkspaceSettings/components/IntegrationsSettings.tsx

@@ -16,7 +16,7 @@ import { IntegrationMember } from "@flow/types/integration";
 
 type Filter = "all" | Role;
 
-const roles = ["admin", "reader", "writer"];
+const roles: Role[] = Object.values(Role);
 
 const IntegrationsSettings: React.FC = () => {
   const t = useT();
@@ -26,9 +26,10 @@ const IntegrationsSettings: React.FC = () => {
 
   const filters: { id: Filter; title: string }[] = [
     { id: "all", title: t("All") },
-    { id: "admin", title: t("Admin") },
-    { id: "reader", title: t("Reader") },
-    { id: "writer", title: t("Writer") },
+    { id: Role.Owner, title: t("Owner") },
+    { id: Role.Reader, title: t("Reader") },
+    { id: Role.Reader, title: t("Maintainer") },
+    { id: Role.Writer, title: t("Writer") },
   ];
 
   const integrations: IntegrationMember[] =

ui/src/features/WorkspaceSettings/components/MembersSettings.tsx

@@ -3,87 +3,109 @@ import { useState } from "react";
 
 import {
   Button,
-  Checkbox,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Input,
 } from "@flow/components";
+import { useUser, useWorkspace } from "@flow/lib/gql";
 import { useT } from "@flow/lib/i18n";
 import { useCurrentWorkspace } from "@flow/stores";
 import { Role, UserMember } from "@flow/types";
 
 type Filter = "all" | Role;
 
-const roles = ["admin", "reader", "writer"];
+const roles: Role[] = Object.values(Role);
 
 const MembersSettings: React.FC = () => {
   const t = useT();
   const [currentWorkspace] = useCurrentWorkspace();
-
+  const { addMemberToWorkspace, removeMemberFromWorkspace, updateMemberOfWorkspace } =
+    useWorkspace();
+  const { searchUser, useGetMe } = useUser();
+  const [email, setEmail] = useState<string>("");
   const [currentFilter, setFilter] = useState<Filter>("all");
+  const [error, setError] = useState<string | undefined>();
+
+  const { me } = useGetMe();
 
   const filters: { id: Filter; title: string }[] = [
     { id: "all", title: t("All") },
-    { id: "admin", title: t("Admin") },
-    { id: "reader", title: t("Reader") },
-    { id: "writer", title: t("Writer") },
+    { id: Role.Owner, title: t("Owner") },
+    { id: Role.Reader, title: t("Reader") },
+    { id: Role.Maintainer, title: t("Maintainer") },
+    { id: Role.Writer, title: t("Writer") },
   ];
 
-  const members =
-    (currentWorkspace?.members?.filter(
-      m => "userId" in m && (currentFilter !== "all" ? m.role === currentFilter : true),
-    ) as UserMember[]) ?? [];
+  const members = currentWorkspace?.members?.filter(
+    m => "userId" in m && (currentFilter === "all" || m.role === currentFilter),
+  ) as UserMember[];
+
+  const handleAddMember = async (email: string) => {
+    setError(undefined);
+    if (!currentWorkspace?.id) return;
+    const { user } = await searchUser(email);
+    if (!user) {
+      setError(t("Could not find the user"));
+      return;
+    }
+    const { workspace } = await addMemberToWorkspace(currentWorkspace.id, user.id, Role.Reader);
+
+    if (!workspace) {
+      setError(t("Failed to add member"));
+      return;
+    }
+    setEmail("");
+  };
+
+  const handleChangeRole = async (userId: string, role: Role) => {
+    setError(undefined);
+    if (!currentWorkspace?.id) return;
+    const { workspace } = await updateMemberOfWorkspace(currentWorkspace.id, userId, role);
+    if (!workspace) {
+      setError(t("Failed to change role of the member"));
+      return;
+    }
+  };
 
-  const [selectedMembers, setSelectedMembers] = useState<string[]>([]);
+  const handleRemoveMembers = async (userId: string) => {
+    setError(undefined);
+    if (!currentWorkspace?.id) return;
+    const { workspace } = await removeMemberFromWorkspace(currentWorkspace.id, userId);
+    if (!workspace) {
+      setError(t("Failed to remove member"));
+      return;
+    }
+  };
 
   return (
     <div>
       <div className="flex flex-col gap-6 mt-4 max-w-[800px]">
         <div className="flex justify-between">
           <p className="text-lg font-extralight">{t("Members Settings")}</p>
-          <Button>{t("Add Members")}</Button>
+        </div>
+        <div className="flex justify-between items-center">
+          {/* TODO: This will be a dialog component */}
+          <Input
+            className="w-2/4"
+            placeholder={t("Enter email")}
+            value={email}
+            disabled={currentWorkspace?.personal}
+            onChange={e => setEmail(e.target.value)}
+          />
+          <Button
+            onClick={() => handleAddMember(email)}
+            disabled={!email || currentWorkspace?.personal}>
+            {t("Add Member")}
+          </Button>
         </div>
         <div className="border border-zinc-700 rounded font-extralight">
           <div className="flex justify-between items-center gap-2 p-2 border-b border-zinc-700 h-[42px]">
             <div className="flex items-center gap-2">
-              <Checkbox
-                className="border-zinc-600 mx-2"
-                checked={selectedMembers.length === members.length}
-                onClick={() =>
-                  setSelectedMembers(
-                    selectedMembers.length !== members.length ? members.map(m => m.userId) : [],
-                  )
-                }
-              />
               <User weight="thin" />
-              <p>
-                {selectedMembers.length
-                  ? `${selectedMembers.length} ${selectedMembers.length === 1 ? t("member selected") : t("members selected")}`
-                  : `${members.length} ${t("Members")}`}
-              </p>
+              <p>{`${members.length} ${t("Members")}`}</p>
             </div>
-            {selectedMembers.length > 0 && (
-              <div className="flex gap-4">
-                <DropdownMenu>
-                  <DropdownMenuTrigger className="flex items-center gap-1">
-                    <p className="text-sm">{t("Change role")}</p>
-                    <CaretDown className="w-2 h-2" />
-                  </DropdownMenuTrigger>
-
-                  <DropdownMenuContent className="min-w-[70px]">
-                    {roles.map((role, idx) => (
-                      <DropdownMenuItem key={idx} onClick={() => console.log(role)}>
-                        {role}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <Button className="h-[25px]" size="sm" variant="destructive">
-                  {t("Remove selected")}
-                </Button>
-              </div>
-            )}
             <div>
               <DropdownMenu>
                 <DropdownMenuTrigger className="flex items-center gap-2">
@@ -105,26 +127,39 @@ const MembersSettings: React.FC = () => {
             </div>
           </div>
           <div className="max-h-[50vh] overflow-auto">
-            {members.map(member => (
-              <div key={member.userId} className="flex items-center gap-4 px-4 py-2">
-                <Checkbox
-                  className="border-zinc-600"
-                  checked={selectedMembers.includes(member.userId)}
-                  onClick={() =>
-                    setSelectedMembers(prev =>
-                      prev.includes(member.userId)
-                        ? [...prev.filter(pm => pm !== member.userId)]
-                        : [...prev, member.userId],
-                    )
-                  }
-                />
-                <p>{member.user.name}</p>
-                <p className="px-4 font-thin capitalize text-sm">{member.role}</p>
+            {members.map(m => (
+              <div key={m.userId} className="flex gap-4 px-4 py-2">
+                <p className="flex-1">{m.user?.name}</p>
+                <p className="flex-1 px-4 font-thin capitalize text-sm">{m.role}</p>
+                <DropdownMenu>
+                  <DropdownMenuTrigger
+                    disabled={m.userId === me?.id}
+                    className={`flex-1 flex items-center gap-1 ${m.userId === me?.id ? "opacity-50" : ""}`}>
+                    <p className="text-sm">{t("Change role")}</p>
+                    <CaretDown className="w-2 h-2" />
+                  </DropdownMenuTrigger>
+
+                  <DropdownMenuContent className="min-w-[70px]">
+                    {roles.map((role, idx) => (
+                      <DropdownMenuItem key={idx} onClick={() => handleChangeRole(m.userId, role)}>
+                        {role}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <Button
+                  className="flex-1 h-[25px]"
+                  size="sm"
+                  variant="outline"
+                  disabled={m.userId === me?.id}
+                  onClick={() => handleRemoveMembers(m.userId)}>
+                  {t("Remove")}
+                </Button>
               </div>
             ))}
           </div>
         </div>
-        <Button className="self-end">{t("Save")}</Button>
+        <p className="text-sm text-red-400">{error}</p>
       </div>
     </div>
   );