update inviteUser UI

src/components/Modal/index.tsx

@@ -13,6 +13,7 @@ import {
   ButtonProps,
   Slide,
 } from "@mui/material";
+import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
 import CloseIcon from "@mui/icons-material/Close";
 
 import { SlideTransitionMui } from "./SlideTransition";
@@ -32,7 +33,7 @@ export interface IModalProps extends Partial<Omit<DialogProps, "title">> {
   body?: ReactNode;
 
   actions?: {
-    primary?: Partial<ButtonProps>;
+    primary?: Partial<LoadingButtonProps>;
     secondary?: Partial<ButtonProps>;
   };
 
@@ -124,7 +125,11 @@ export default function Modal({
           {actions.secondary && <Button {...actions.secondary} />}
 
           {actions.primary && (
-            <Button variant="contained" color="primary" {...actions.primary} />
+            <LoadingButton
+              variant="contained"
+              color="primary"
+              {...actions.primary}
+            />
           )}
         </DialogActions>
       )}

src/components/Settings/UserManagement/InviteUser.tsx

@@ -1,20 +1,45 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
+import MultiSelect from "@rowy/multiselect";
 
 import {
   Button,
   DialogContentText,
   Link as MuiLink,
   TextField,
+  Typography,
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/PersonAddOutlined";
 
 import Modal from "components/Modal";
+import Logo from "assets/Logo";
 
+import { useProjectContext } from "contexts/ProjectContext";
 import routes from "constants/routes";
+import { runRoutes } from "constants/runRoutes";
 
 export default function InviteUser() {
+  const { roles: projectRoles, rowyRun } = useProjectContext();
+
   const [open, setOpen] = useState(false);
+  const [status, setStatus] = useState<"LOADING" | string>("");
+
+  const [email, setEmail] = useState("");
+  const [roles, setRoles] = useState([]);
+
+  const handleInvite = async () => {
+    try {
+      setStatus("LOADING");
+      const res = await rowyRun?.({
+        route: runRoutes.inviteUser,
+        body: { email, roles },
+      });
+      if (!res.success) throw new Error(res.message);
+    } catch (e: any) {
+      console.error(e);
+      setStatus("Failed to invite user: " + e.message);
+    }
+  };
 
   return (
     <>
@@ -36,8 +61,11 @@ export default function InviteUser() {
           maxWidth="xs"
           body={
             <>
+              <Logo style={{ marginBottom: "8px", display: "block" }} />
+
               <DialogContentText paragraph>
-                Send an email to this user to invite them to join your project.
+                Send an email using Rowy Service to this user, inviting them to
+                join your project.
               </DialogContentText>
               <DialogContentText paragraph>
                 They can sign up with any of the sign-in options{" "}
@@ -49,15 +77,63 @@ export default function InviteUser() {
                 </MuiLink>
                 , as long as they use the same email address.
               </DialogContentText>
+
               <TextField
                 label="Email Address"
                 id="invite-email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
                 fullWidth
                 placeholder="name@example.com"
+                sx={{ mb: 3 }}
+              />
+
+              <MultiSelect
+                label="Roles"
+                value={roles}
+                options={Array.isArray(projectRoles) ? projectRoles : ["ADMIN"]}
+                onChange={setRoles}
+                freeText
+                TextFieldProps={{
+                  id: "invite-roles",
+                  SelectProps: {
+                    renderValue: (_) => {
+                      if (Array.isArray(roles)) {
+                        if (roles.length >= 1) return roles.join(", ");
+                        return (
+                          <Typography variant="inherit" color="text.disabled">
+                            Set roles…
+                          </Typography>
+                        );
+                      }
+                    },
+                  },
+                }}
               />
             </>
           }
-          actions={{ primary: { children: "Invite" } }}
+          footer={
+            status !== "LOADING" &&
+            typeof status === "string" && (
+              <Typography
+                variant="caption"
+                color="error"
+                textAlign="center"
+                sx={{ m: 1, mb: -1 }}
+              >
+                {status}
+              </Typography>
+            )
+          }
+          actions={{
+            primary: {
+              children: "Invite",
+              disabled: !email || roles.length === 0,
+              loading: status === "LOADING",
+              type: "submit",
+              onClick: handleInvite,
+            },
+          }}
         />
       )}
     </>