feat: use update api endpoint to update ui

Fixes #2250

fix: fix cancel button not working

src/api/axios.ts

@@ -118,6 +118,15 @@ export const Auth = axios.create({
   }
 });
 
+export const People = axios.create({
+  baseURL: `${API_BASE}/people`,
+  headers: {
+    Accept: "application/json",
+    Prefer: "return=representation",
+    "Content-Type": "application/json"
+  }
+});
+
 export const PlaybookAPI = axios.create({
   baseURL: `${API_BASE}/playbook`,
   headers: {

src/api/query-hooks/useUserAPI.tsx

@@ -0,0 +1,34 @@
+import { UserFormValue } from "@flanksource-ui/components/Users/UserForm";
+import { useMutation } from "@tanstack/react-query";
+import { updateUser } from "../services/users";
+
+export default function useUpdateUser({
+  onSuccess,
+  onError
+}: {
+  onSuccess?: (data?: {
+    email: string;
+    name: {
+      first: string;
+      last: string;
+    };
+  }) => void;
+  onError?: (error: any) => void;
+}) {
+  return useMutation({
+    mutationFn: async (user: UserFormValue) => {
+      const res = await updateUser(user);
+      return res.data ?? undefined;
+    },
+    onSuccess: (data) => {
+      if (onSuccess) {
+        onSuccess(data);
+      }
+    },
+    onError: (error) => {
+      if (onError) {
+        onError(error);
+      }
+    }
+  });
+}

src/api/services/users.ts

@@ -1,4 +1,11 @@
-import { Auth, CanaryChecker, IncidentCommander, Rback } from "../axios";
+import { UserFormValue } from "@flanksource-ui/components/Users/UserForm";
+import {
+  Auth,
+  CanaryChecker,
+  IncidentCommander,
+  People,
+  Rback
+} from "../axios";
 import { resolvePostGrestRequestWithPagination } from "../resolve";
 import { VersionInfo } from "../types/common";
 import { NewUser, PeopleRoles, RegisteredUser, User } from "../types/users";
@@ -89,6 +96,16 @@ export const updateUserRole = (userId: string, roles: string[]) => {
   );
 };
 
+export const updateUser = (user: UserFormValue) => {
+  return People.post<{
+    email: string;
+    name: {
+      first: string;
+      last: string;
+    };
+  } | null>(`/update`, user);
+};
+
 export const deleteUser = (userId: string) =>
   resolvePostGrestRequestWithPagination<{}>(
     IncidentCommander.delete(`/identities?id=eq.${userId}`)

src/api/types/users.ts

@@ -1,9 +1,10 @@
-import { CreatedAt, Avatar, Timestamped, UpdatedAt } from "../traits";
+import { Avatar, CreatedAt, Timestamped, UpdatedAt } from "../traits";
 
 export interface NewUser {
   name: string;
   email: string;
   avatar?: string;
+  roles?: string;
 }
 
 export interface RegisteredUser extends CreatedAt, UpdatedAt {

src/components/Users/InviteUserForm.tsx → src/components/Users/UserForm.tsx

@@ -1,61 +1,76 @@
+import { RegisteredUser } from "@flanksource-ui/api/types/users";
 import { Roles } from "@flanksource-ui/context/UserAccessContext/UserAccessContext";
 import { tables } from "@flanksource-ui/context/UserAccessContext/permissions";
 import clsx from "clsx";
-import React from "react";
 import { useForm } from "react-hook-form";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import { AuthorizationAccessCheck } from "../Permissions/AuthorizationAccessCheck";
 
-export type InviteUserFormValue = {
+export type UserFormValue = {
+  id?: string;
   firstName: string;
   lastName: string;
   email: string;
   role: string;
+  active: boolean;
 };
 
-export type InviteUserFormProps = Omit<
-  React.HTMLProps<HTMLDivElement>,
-  "onSubmit"
-> & {
-  onSubmit: (val: InviteUserFormValue) => void;
-  closeModal: () => void;
-};
-
-const defaultFormValue = {
-  firstName: "",
-  lastName: "",
-  email: "",
-  role: ""
+export type InviteUserFormProps = {
+  onSubmit: (val: UserFormValue) => void;
+  onClose: () => void;
+  className?: string;
+  user?: RegisteredUser;
+  isSubmitting?: boolean;
 };
 
 const allRoles = Object.keys(Roles);
 
-export function InviteUserForm({
+export default function UserForm({
   onSubmit,
   className,
-  closeModal,
-  ...rest
+  onClose,
+  user,
+  isSubmitting = false
 }: InviteUserFormProps) {
   const {
     register,
     handleSubmit,
     formState: { errors },
     reset
-  } = useForm({
-    defaultValues: defaultFormValue
+  } = useForm<UserFormValue>({
+    defaultValues: {
+      id: user?.id,
+      firstName: user?.traits?.name.first || "",
+      lastName: user?.traits?.name.last || "",
+      email: user?.traits?.email || "",
+      role:
+        user?.roles?.sort(
+          // we want highest role to be selected by default in case of multiple
+          // roles
+          (a, b) => {
+            if (a === "admin") return -1;
+            if (b === "admin") return 1;
+            if (a === "editor") return -1;
+            if (b === "editor") return 1;
+            if (a === "viewer") return -1;
+            if (b === "viewer") return 1;
+            return 0;
+          }
+        )?.[0] || "",
+      active: user?.state === "active"
+    }
   });
-  const onSubmitFn = async (data: InviteUserFormValue) => {
-    onSubmit(data);
-  };
+
   const handleCancel = () => {
     reset();
-    closeModal();
+    onClose();
   };
 
   return (
-    <div className={clsx(className)} {...rest}>
+    <div className={clsx(className)}>
       <form
         className="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"
-        onSubmit={handleSubmit(onSubmitFn)}
+        onSubmit={handleSubmit(onSubmit)}
         noValidate
       >
         <div>
@@ -147,7 +162,10 @@ export function InviteUserForm({
         <div className="sm:col-span-2">
           <AuthorizationAccessCheck resource={tables.identities} action="write">
             <button type="submit" className="btn-primary float-right">
-              Invite user
+              {isSubmitting && (
+                <AiOutlineLoading3Quarters className="mr-2 animate-spin" />
+              )}
+              {user?.id ? "Update" : " Invite user"}
             </button>
           </AuthorizationAccessCheck>
           <button