Improve validation on api/users endpoints (#5752)

app/components/UserDialogs.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { UserRole } from "@shared/types";
 import User from "~/models/User";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Input from "~/components/Input";
@@ -15,7 +16,7 @@ export function UserChangeToViewerDialog({ user, onSubmit }: Props) {
   const { users } = useStores();
 
   const handleSubmit = async () => {
-    await users.demote(user, "viewer");
+    await users.demote(user, UserRole.Viewer);
     onSubmit();
   };
 
@@ -41,7 +42,7 @@ export function UserChangeToMemberDialog({ user, onSubmit }: Props) {
   const { users } = useStores();
 
   const handleSubmit = async () => {
-    await users.demote(user, "member");
+    await users.demote(user, UserRole.Member);
     onSubmit();
   };
 

app/models/User.ts

@@ -7,8 +7,9 @@ import {
   NotificationEventType,
   UserPreference,
   UserPreferences,
+  UserRole,
 } from "@shared/types";
-import type { Role, NotificationSettings } from "@shared/types";
+import type { NotificationSettings } from "@shared/types";
 import { client } from "~/utils/ApiClient";
 import ParanoidModel from "./ParanoidModel";
 import Field from "./decorators/Field";
@@ -74,13 +75,13 @@ class User extends ParanoidModel {
   }
 
   @computed
-  get role(): Role {
+  get role(): UserRole {
     if (this.isAdmin) {
-      return "admin";
+      return UserRole.Admin;
     } else if (this.isViewer) {
-      return "viewer";
+      return UserRole.Viewer;
     } else {
-      return "member";
+      return UserRole.Member;
     }
   }
 

app/scenes/Invite.tsx

@@ -5,7 +5,7 @@ import { useTranslation, Trans } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import { Role } from "@shared/types";
+import { UserRole } from "@shared/types";
 import { UserValidation } from "@shared/validations";
 import Button from "~/components/Button";
 import CopyToClipboard from "~/components/CopyToClipboard";
@@ -28,7 +28,7 @@ type Props = {
 type InviteRequest = {
   email: string;
   name: string;
-  role: Role;
+  role: UserRole;
 };
 
 function Invite({ onSubmit }: Props) {
@@ -38,17 +38,17 @@ function Invite({ onSubmit }: Props) {
     {
       email: "",
       name: "",
-      role: "member",
+      role: UserRole.Member,
     },
     {
       email: "",
       name: "",
-      role: "member",
+      role: UserRole.Member,
     },
     {
       email: "",
       name: "",
-      role: "member",
+      role: UserRole.Member,
     },
   ]);
   const { users } = useStores();
@@ -65,7 +65,7 @@ function Invite({ onSubmit }: Props) {
       setIsSaving(true);
 
       try {
-        const data = await users.invite(invites);
+        const data = await users.invite(invites.filter((i) => i.email));
         onSubmit();
 
         if (data.sent.length > 0) {
@@ -113,7 +113,7 @@ function Invite({ onSubmit }: Props) {
       newInvites.push({
         email: "",
         name: "",
-        role: "member",
+        role: UserRole.Member,
       });
       return newInvites;
     });
@@ -138,13 +138,16 @@ function Invite({ onSubmit }: Props) {
     });
   }, [showToast, t]);
 
-  const handleRoleChange = React.useCallback((role: Role, index: number) => {
-    setInvites((prevInvites) => {
-      const newInvites = [...prevInvites];
-      newInvites[index]["role"] = role;
-      return newInvites;
-    });
-  }, []);
+  const handleRoleChange = React.useCallback(
+    (role: UserRole, index: number) => {
+      setInvites((prevInvites) => {
+        const newInvites = [...prevInvites];
+        newInvites[index]["role"] = role;
+        return newInvites;
+      });
+    },
+    []
+  );
 
   return (
     <form onSubmit={handleSubmit}>
@@ -224,7 +227,7 @@ function Invite({ onSubmit }: Props) {
             flex
           />
           <InputSelectRole
-            onChange={(role: Role) => handleRoleChange(role, index)}
+            onChange={(role: UserRole) => handleRoleChange(role, index)}
             value={invite.role}
             labelHidden={index !== 0}
             short

app/scenes/Settings/Members.tsx

@@ -39,8 +39,8 @@ function Members() {
   const [totalPages, setTotalPages] = React.useState(0);
   const [userIds, setUserIds] = React.useState<string[]>([]);
   const can = usePolicy(team);
-  const query = params.get("query") || "";
-  const filter = params.get("filter") || "";
+  const query = params.get("query") || undefined;
+  const filter = params.get("filter") || undefined;
   const sort = params.get("sort") || "name";
   const direction = (params.get("direction") || "asc").toUpperCase() as
     | "ASC"
@@ -176,11 +176,14 @@ function Members() {
       <Flex gap={8}>
         <InputSearch
           short
-          value={query}
+          value={query ?? ""}
           placeholder={`${t("Filter")}…`}
           onChange={handleSearch}
         />
-        <LargeUserStatusFilter activeKey={filter} onSelect={handleFilter} />
+        <LargeUserStatusFilter
+          activeKey={filter ?? ""}
+          onSelect={handleFilter}
+        />
       </Flex>
       <PeopleTable
         data={data}

app/stores/UsersStore.ts

@@ -2,7 +2,7 @@ import invariant from "invariant";
 import filter from "lodash/filter";
 import orderBy from "lodash/orderBy";
 import { observable, computed, action, runInAction } from "mobx";
-import { Role } from "@shared/types";
+import { UserRole } from "@shared/types";
 import User from "~/models/User";
 import { client } from "~/utils/ApiClient";
 import BaseStore from "./BaseStore";
@@ -82,15 +82,15 @@ export default class UsersStore extends BaseStore<User> {
   @action
   promote = async (user: User) => {
     try {
-      this.updateCounts("admin", user.role);
+      this.updateCounts(UserRole.Admin, user.role);
       await this.actionOnUser("promote", user);
     } catch {
-      this.updateCounts(user.role, "admin");
+      this.updateCounts(user.role, UserRole.Admin);
     }
   };
 
   @action
-  demote = async (user: User, to: Role) => {
+  demote = async (user: User, to: UserRole) => {
     try {
       this.updateCounts(to, user.role);
       await this.actionOnUser("demote", user, to);
@@ -128,7 +128,7 @@ export default class UsersStore extends BaseStore<User> {
     invites: {
       email: string;
       name: string;
-      role: Role;
+      role: UserRole;
     }[]
   ) => {
     const res = await client.post(`/users.invite`, {
@@ -206,29 +206,29 @@ export default class UsersStore extends BaseStore<User> {
   }
 
   @action
-  updateCounts = (to: Role, from: Role) => {
-    if (to === "admin") {
+  updateCounts = (to: UserRole, from: UserRole) => {
+    if (to === UserRole.Admin) {
       this.counts.admins += 1;
 
-      if (from === "viewer") {
+      if (from === UserRole.Viewer) {
         this.counts.viewers -= 1;
       }
     }
 
-    if (to === "viewer") {
+    if (to === UserRole.Viewer) {
       this.counts.viewers += 1;
 
-      if (from === "admin") {
+      if (from === UserRole.Admin) {
         this.counts.admins -= 1;
       }
     }
 
-    if (to === "member") {
-      if (from === "viewer") {
+    if (to === UserRole.Member) {
+      if (from === UserRole.Viewer) {
         this.counts.viewers -= 1;
       }
 
-      if (from === "admin") {
+      if (from === UserRole.Admin) {
         this.counts.admins -= 1;
       }
     }
@@ -296,7 +296,7 @@ export default class UsersStore extends BaseStore<User> {
     return queriedUsers(users, query);
   };
 
-  actionOnUser = async (action: string, user: User, to?: Role) => {
+  actionOnUser = async (action: string, user: User, to?: UserRole) => {
     const res = await client.post(`/users.${action}`, {
       id: user.id,
       to,