feat(ui): Workspace CRUD (#261)

* - workspace update name
- workspace read team members

* - setCurrentWorkspace to update in navigation

* - role type fix

* - typescript errors

* - Minor changes to type
- Add methods for members Crud on workspace

* - search user query implementation

* - update type on Role and related changes

* - type error

* - language stuff

* - updated workspace crud

* - updated comment
- fixed type

* - sort the members

* - a single comma can ruin the layout

* - minor changes

* - revert back

* - an actual bug

* - using local cache rather than api calls

* - fixes and fixes

* - remove workspace description

* - added minor changes

* - Minor refactor

* - minor fix

* - added a comment

* - minor change

* - removed flatmap

Author: jashanbhullar

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[] =