UserList. fix role update

integration_tests/pages/UserListPage.ts

@@ -1,3 +1,16 @@
+import { Locator } from "@playwright/test";
 import { BasePage } from "./BasePage";
+import { type Role } from "~client/types";
 
-export class UserListPage extends BasePage {}
+export class UserListPage extends BasePage {
+  private getRow(userId: string): Locator {
+    return this.page.locator(`[data-id='${userId}']`);
+  }
+
+  async changeRole(userId: string, role: keyof typeof Role) {
+    await this.getRow(userId).locator("[data-field='role']").dblclick();
+    await this.page.locator(`[data-value='${role}']`).click();
+
+    return this.page.keyboard.press("Enter");
+  }
+}

integration_tests/test/userList.spec.ts

@@ -1,3 +1,4 @@
+import { expect } from "@playwright/test";
 import { test } from "fixtures";
 import { mockGetProjects, mockGetUsers } from "utils/mocks";
 import {
@@ -6,6 +7,7 @@ import {
   TEST_PROJECT,
   TEST_USER,
 } from "~client/_test/test.data.helper";
+import { Role, User } from "~client/types";
 
 test.beforeEach(async ({ page }) => {
   await mockGetProjects(page, [TEST_PROJECT]);
@@ -16,3 +18,23 @@ test.beforeEach(async ({ page }) => {
 test("renders", async ({ userListPage, page, vrt }) => {
   await vrt.trackPage(page, "User list page");
 });
+
+const assignRoleCases: [User, keyof typeof Role][] = [
+  [EDITOR_USER, "admin"],
+  [EDITOR_USER, "guest"],
+  [GUEST_USER, "editor"],
+];
+
+for (const [user, role] of assignRoleCases) {
+  test(`can assign role ${role}`, async ({ userListPage, page }) => {
+    const [request] = await Promise.all([
+      page.waitForRequest("**/assignRole"),
+      userListPage.changeRole(user.id, role),
+    ]);
+
+    expect(request.postDataJSON()).toEqual({
+      id: user.id,
+      role,
+    });
+  });
+}

playwright.config.ts

@@ -10,7 +10,6 @@ export default defineConfig({
     command: "npm run start",
     url: baseURL,
     reuseExistingServer: true,
-    timeout: 300 * 1000,
   },
   use: {
     headless: true,
@@ -20,8 +19,5 @@ export default defineConfig({
     trace: "retry-with-trace",
   },
   retries: process.env.CI ? 1 : 0,
-  expect: {
-    timeout: 10 * 1000,
-  },
   forbidOnly: !!process.env.CI,
 });

src/components/UserList/index.tsx

@@ -10,7 +10,7 @@ import {
 } from "@mui/x-data-grid";
 import { ActionButtons } from "./ActionButtons";
 import { usersService } from "../../services";
-import { Role } from "../../types";
+import { Role, User } from "../../types";
 import { useSnackbar } from "notistack";
 import { useUserDispatch, useUserState } from "../../contexts";
 
@@ -61,15 +61,15 @@ const UserList = () => {
       userDispatch({
         type: "getAll",
         payload: users,
-      }),
+      })
     );
   }, [userDispatch]);
 
-  const handleEditCellChangeCommitted = React.useCallback(
-    ({ id, field, value }) => {
-      if (field === "role") {
+  const processRowUpdate = React.useCallback(
+    (newState: User, oldState: User) => {
+      if (newState.role !== oldState.role) {
         usersService
-          .assignRole(id, value as Role)
+          .assignRole(oldState.id, newState.role as Role)
           .then(() => {
             enqueueSnackbar("Updated", {
               variant: "success",
@@ -78,11 +78,12 @@ const UserList = () => {
           .catch((err) =>
             enqueueSnackbar(err, {
               variant: "error",
-            }),
+            })
           );
       }
+      return newState;
     },
-    [enqueueSnackbar],
+    [enqueueSnackbar]
   );
 
   const apiRef = useGridApiRef();
@@ -101,7 +102,7 @@ const UserList = () => {
       slots={{
         toolbar: DataGridCustomToolbar,
       }}
-      onCellEditStop={handleEditCellChangeCommitted}
+      processRowUpdate={processRowUpdate}
     />
   );
 };

src/services/users.service.ts

@@ -59,7 +59,11 @@ function register(
     });
 }
 
-function update({ firstName, lastName, email }): Promise<User> {
+function update({
+  firstName,
+  lastName,
+  email,
+}: Pick<User, "firstName" | "lastName" | "email">): Promise<User> {
   const requestOptions = {
     method: "PUT",
     headers: {