@vtex/faststore-plugin-buyer-portal 1.1.40 → 1.1.41

package/cypress/constants.ts

@@ -36,6 +36,31 @@ export const TEST_DATA = {
     TEST_CONTRACT_NAME: "teste_fields",
     TEST_CONTRACT_ID: "27e05218-d807-11ef-b37f-8dc7bb2ee7fa",
   },
+  USERS: {
+    USER_ORG_UNIT_ADMIN: {
+      NAME: "User Org Unit Admin",
+      ROLE: "Organizational Unit Admin",
+    },
+    USER_ORG_UNIT_BUYER: {
+      NAME: "User Org Unit Buyer",
+      ROLE: "Buyer",
+    },
+    USER_NAME_FOR_ROLES: "User for Test Roles",
+    NEW_USER: {
+      NAME: `New User ${Date.now().toString(36)}-${Math.random()
+        .toString(36)
+        .substring(2, 5)}`,
+      EMAIL: `new_user+e2e_test${Date.now().toString(36)}-${Math.random()
+        .toString(36)
+        .substring(2, 5)}@vtex.com`,
+      ROLE: "Buyer",
+    },
+    USER_FROM_OTHER_ORG_UNIT: {
+      NAME: "User from other unit",
+      EMAIL: "rodrigo.tavares+devb2b@vtex.com",
+      ROLE: "Order Approver",
+    },
+  },
   BUYING_POLICIES: {
     NEW_POLICY: {
       NAME: "Test Buying Policy E2E",

package/cypress/integration/users.test.ts

@@ -0,0 +1,551 @@
+import { TEST_CONFIG, TEST_DATA } from "../constants";
+
+const navigateToUsers = () => {
+  cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
+  cy.contains("Users").click();
+
+  cy.wait(TEST_CONFIG.TIMEOUTS.RETRY_DELAY);
+  cy.get("[data-fs-users-section]").should("exist");
+};
+
+const verifyUserState = (
+  userName: string,
+  shouldExist: boolean,
+  maxRetries = TEST_CONFIG.RETRY.DEFAULT_MAX_ATTEMPTS
+) => {
+  const verifyAndRetry = (currentRetry = 0) => {
+    cy.get("[data-fs-users-section]").should("exist");
+    cy.get("[data-fs-bp-base-tabs-layout-content]").scrollTo("bottom");
+
+    cy.get("body").then(($body) => {
+      const exists = $body.text().includes(userName);
+      if (exists !== shouldExist && currentRetry < maxRetries) {
+        cy.log(`Retry attempt ${currentRetry + 1} of ${maxRetries}`);
+        cy.wait(TEST_CONFIG.TIMEOUTS.RETRY_DELAY);
+        cy.reload();
+        verifyAndRetry(currentRetry + 1);
+      } else if (exists !== shouldExist) {
+        throw new Error(
+          `Failed to verify user state after ${maxRetries} retries`
+        );
+      }
+    });
+  };
+
+  verifyAndRetry();
+
+  if (shouldExist) {
+    cy.contains(userName).should("be.visible");
+  } else {
+    cy.contains(userName).should("not.exist");
+  }
+};
+
+const fillUserForm = (
+  userData: typeof TEST_DATA.USERS.NEW_USER,
+  shouldUpdateEmailAndRole = true
+) => {
+  // Fill the user name
+  cy.get("label")
+    .contains("Full Name")
+    .parent()
+    .find("[data-fs-bp-input-text-input]")
+    .clear()
+    .type(userData.NAME);
+
+  if (shouldUpdateEmailAndRole) {
+    // Fill the user email
+    cy.get("label")
+      .contains("Email")
+      .parent()
+      .find("[data-fs-bp-input-text-input]")
+      .clear()
+      .type(userData.EMAIL);
+
+    cy.wait(500);
+    // Fill the user role
+    cy.get('[data-fs-bp-create-user-roles="true"]')
+      .contains(userData.ROLE)
+      .parents('[data-fs-bp-create-user-role-wrapper="true"]')
+      .within(() => {
+        cy.get('[type="checkbox"]').check();
+      });
+  }
+};
+
+const openUserDropdown = (userName: string) => {
+  cy.get("[data-fs-bp-table-row]")
+    .contains(userName)
+    .parents("[data-fs-bp-table-row]")
+    .within(() => {
+      cy.get("[data-fs-bp-basic-dropdown-menu-trigger]").click();
+    });
+};
+
+const confirmDeletion = (userName: string) => {
+  const tryDelete = (attempt = 0) => {
+    cy.contains("Delete user").should("be.visible");
+    cy.contains("Confirm by typing the user name below:").should("be.visible");
+
+    cy.get("label")
+      .contains("User name")
+      .parent()
+      .find("[data-fs-bp-input-text-input]")
+      .clear()
+      .type(userName);
+
+    cy.contains("button", "Delete").click();
+
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    cy.get("body").then(($body) => {
+      const errorOccurred = $body
+        .text()
+        .includes("An error occurred while deleting the user");
+      if (errorOccurred && attempt < TEST_CONFIG.RETRY.DEFAULT_MAX_ATTEMPTS) {
+        cy.log(`Retrying delete attempt ${attempt + 1}`);
+        cy.wait(TEST_CONFIG.TIMEOUTS.RETRY_DELAY);
+        tryDelete(attempt + 1);
+      } else if (errorOccurred) {
+        throw new Error(
+          `Failed to delete user after ${TEST_CONFIG.RETRY.DEFAULT_MAX_ATTEMPTS} retries due to error`
+        );
+      }
+    });
+  };
+
+  tryDelete();
+};
+
+describe("Users", () => {
+  beforeEach(() => {
+    cy.login();
+  });
+
+  it("Should load and display users information correctly (User List)", () => {
+    navigateToUsers();
+
+    // Check that the table columns are present
+    cy.contains("Name").should("be.visible");
+    cy.contains("Role").should("be.visible");
+
+    // Check that the expected users are present in the table
+    cy.contains(TEST_DATA.USERS.USER_ORG_UNIT_ADMIN.NAME)
+      .scrollIntoView()
+      .should("be.visible")
+      .parent()
+      .parent()
+      .within(() => {
+        cy.contains(TEST_DATA.USERS.USER_ORG_UNIT_ADMIN.ROLE)
+          .scrollIntoView()
+          .should("be.visible");
+        cy.get("[data-fs-bp-basic-dropdown-menu-trigger]")
+          .should("be.visible")
+          .click();
+      });
+
+    // Check if the menu options are visible
+    cy.contains("Open").should("be.visible");
+    cy.contains("Edit details").should("be.visible");
+    cy.contains("Change organizational unit").should("be.visible");
+    cy.contains("Delete").should("be.visible");
+  });
+
+  it("Should load user details page successfully", () => {
+    navigateToUsers();
+
+    // Click on User Test 1 to go to details page
+    cy.contains(TEST_DATA.USERS.USER_ORG_UNIT_ADMIN.NAME)
+      .scrollIntoView()
+      .should("be.visible")
+      .parents("[data-fs-bp-table-row]")
+      .click();
+
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    // Check that the user details section is visible
+    cy.get("[data-fs-user-details-section]").should("exist");
+
+    // Check that the user's name is displayed in the details
+    cy.get("[data-fs-user-details-row-value]")
+      .contains(TEST_DATA.USERS.USER_ORG_UNIT_ADMIN.NAME)
+      .should("be.visible");
+
+    cy.get("[data-fs-user-details-row-value]")
+      .contains(TEST_DATA.USERS.USER_ORG_UNIT_ADMIN.ROLE)
+      .should("be.visible");
+
+    // Verify labels and buttons are present
+    cy.contains("Name").should("be.visible");
+    cy.contains("Email").should("be.visible");
+    cy.contains("Role").should("be.visible");
+    cy.contains("Organizational Unit").should("be.visible");
+    cy.contains("Edit").should("be.visible");
+  });
+
+  it("Should add a new user", () => {
+    navigateToUsers();
+
+    // === CREATE USER ===
+    cy.log("=== Creating new user ===");
+
+    // Click to add a new user
+    cy.get("[data-fs-header-inside-button]").should("be.visible").click();
+
+    // Fill user form
+    fillUserForm(TEST_DATA.USERS.NEW_USER);
+
+    // Submit form
+    cy.contains("button", "Add").click();
+
+    // Verify success message
+    cy.contains("User successfully added").should("be.visible");
+
+    // Reload and verify user was created
+    verifyUserState(TEST_DATA.USERS.NEW_USER.NAME, true);
+  });
+
+  it("Should view and edit the newly created user", () => {
+    navigateToUsers();
+
+    // === VIEW USER DETAILS ===
+    cy.log("=== Viewing user details ===");
+    cy.get("[data-fs-bp-base-tabs-layout-content]").scrollTo("bottom");
+
+    cy.contains(TEST_DATA.USERS.NEW_USER.NAME)
+      .should("be.visible")
+      .parents("[data-fs-bp-table-row]")
+      .click();
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    // Verify user details page
+    cy.get("[data-fs-user-details-section]").should("exist");
+    cy.get("[data-fs-user-details-row-value]")
+      .contains(TEST_DATA.USERS.NEW_USER.ROLE)
+      .should("be.visible");
+
+    // Go back to users list
+    navigateToUsers();
+
+    // === EDIT USER ===
+    cy.log("=== Editing user ===");
+
+    openUserDropdown(TEST_DATA.USERS.NEW_USER.NAME);
+    cy.contains("Edit details").click();
+
+    // Verify edit drawer is open
+    cy.contains("Edit user details").should("be.visible");
+
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    // Update user information
+    const updatedUserData = {
+      NAME: `${TEST_DATA.USERS.NEW_USER.NAME} Updated`,
+      EMAIL: TEST_DATA.USERS.NEW_USER.EMAIL,
+      ROLE: TEST_DATA.USERS.NEW_USER.ROLE,
+    };
+
+    fillUserForm(updatedUserData, false);
+
+    // Save changes
+    cy.contains("button", "Save").click();
+
+    // Verify update
+    verifyUserState(updatedUserData.NAME, true);
+  });
+
+  it("Should delete the updated user", () => {
+    navigateToUsers();
+
+    // === DELETE USER ===
+    cy.log("=== Deleting user ===");
+    cy.get("[data-fs-bp-base-tabs-layout-content]").scrollTo("bottom");
+
+    const updatedUserData = {
+      NAME: `${TEST_DATA.USERS.NEW_USER.NAME} Updated`,
+      EMAIL: TEST_DATA.USERS.NEW_USER.EMAIL,
+      ROLE: TEST_DATA.USERS.NEW_USER.ROLE,
+    };
+
+    openUserDropdown(updatedUserData.NAME);
+    cy.contains("Delete").click();
+
+    cy.get(`a:contains("${updatedUserData.NAME}")`)
+      .invoke("text")
+      .then((userNameText) => {
+        confirmDeletion(userNameText);
+      });
+
+    // Verify if the user was deleted
+    verifyUserState(updatedUserData.NAME, false);
+  });
+
+  it("Should not allow adding a user already in another org unit", () => {
+    navigateToUsers();
+
+    // Click to add a new user
+    cy.get("[data-fs-header-inside-button]").should("be.visible").click();
+
+    // Fill form with existing user data - Org Unit for E2E Tests Child 3
+    fillUserForm(TEST_DATA.USERS.USER_FROM_OTHER_ORG_UNIT);
+
+    // Submit form
+    cy.contains("button", "Add").click();
+
+    // Assert error message is shown
+    cy.contains("User cannot be added").should("be.visible");
+    cy.contains("This user is assigned to another organizational unit.").should(
+      "be.visible"
+    );
+    cy.contains(
+      "Users can only belong to one organizational unit at a time."
+    ).should("be.visible");
+
+    // Close error dialog
+    cy.contains("Ok").click();
+  });
+
+  it("Should create a new user add, edit and remove roles", () => {
+    // Visit the buyer portal home page
+    cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
+
+    // Click on the "Users" link in the sidebar menu
+    cy.get("a[data-fs-vertical-nav-menu-link]").contains("Users").click();
+
+    // Check that the Users page is rendered
+    cy.get('h1[data-fs-bp-header-inside-title="true"]').should(
+      "contain",
+      "Users"
+    );
+
+    // Check that at least one user row exists
+    cy.get('a[data-fs-bp-table-row-link="true"]').should("exist");
+
+    // Click the add user button at the top
+    cy.get('button[data-fs-header-inside-button="true"]').click();
+
+    // Check that the user creation modal is open
+    cy.get(
+      'div[data-fs-modal-content="true"][data-fs-bp-create-user-drawer="true"]'
+    ).should("be.visible");
+    cy.get('h2[data-fs-bp-basic-drawer-heading-title="true"]').should(
+      "contain",
+      "Add User"
+    );
+
+    // Fill out the user creation form
+    cy.get('input[data-fs-bp-input-text-input="true"]')
+      .first()
+      .type(TEST_DATA.USERS.USER_NAME_FOR_ROLES); // Full Name
+    cy.get('input[data-fs-bp-input-text-input="true"]')
+      .eq(1)
+      .type("userfortestroles@vtex.com"); // Email
+    cy.get('input[type="checkbox"][value="Buyer"]').check(); // Assign Buyer role
+
+    // Click the "Add" button to submit the form
+    cy.get(
+      'button[data-fs-bp-basic-drawer-button="true"][data-fs-bp-basic-drawer-button-variant="confirm"]'
+    )
+      .should("not.be.disabled")
+      .click();
+
+    cy.wait(3000);
+
+    // Retry logic to check if user appears in the list
+    const checkUserExists = (attempt = 1) => {
+      cy.reload();
+      cy.get("body").then(($body) => {
+        if ($body.text().includes(TEST_DATA.USERS.USER_NAME_FOR_ROLES)) {
+          // User found, verify it exists
+          cy.contains("td", TEST_DATA.USERS.USER_NAME_FOR_ROLES).should(
+            "exist"
+          );
+        } else if (attempt < 3) {
+          cy.log(`User not found, retry attempt ${attempt + 1} of 3`);
+          cy.wait(2000);
+          checkUserExists(attempt + 1);
+        } else {
+          throw new Error(
+            `User ${TEST_DATA.USERS.USER_NAME_FOR_ROLES} not found after 3 attempts`
+          );
+        }
+      });
+    };
+
+    checkUserExists();
+
+    // Check that the 'Buyer' badge is present in the same row
+    cy.contains(
+      'tr[data-fs-bp-table-row="true"]',
+      TEST_DATA.USERS.USER_NAME_FOR_ROLES
+    )
+      .find('span[data-fs-tag="true"]')
+      .should("contain.text", "Buyer");
+
+    // --- Edit user roles: add Organizational Unit Admin ---
+    cy.contains(
+      'tr[data-fs-bp-table-row="true"]',
+      TEST_DATA.USERS.USER_NAME_FOR_ROLES
+    )
+      .find('button[data-fs-bp-basic-dropdown-menu-trigger="true"]')
+      .click();
+    cy.get(
+      'div[data-fs-dropdown-menu="true"] button[data-fs-dropdown-item="true"]'
+    )
+      .contains("Edit details")
+      .click();
+    cy.get(
+      'div[data-fs-modal-content="true"][data-fs-bp-update-user-drawer="true"]'
+    ).should("be.visible");
+    cy.get('h2[data-fs-bp-basic-drawer-heading-title="true"]').should(
+      "contain",
+      "Edit user details"
+    );
+    cy.get("input#role-organizational-unit\\ admin").check({ force: true });
+    cy.get(
+      'button[data-fs-bp-basic-drawer-button="true"][data-fs-bp-basic-drawer-button-variant="confirm"]'
+    )
+      .should("not.be.disabled")
+      .click();
+
+    cy.wait(1000);
+    cy.reload();
+    cy.contains(
+      'tr[data-fs-bp-table-row="true"]',
+      TEST_DATA.USERS.USER_NAME_FOR_ROLES
+    )
+      .find('span[data-fs-tag="true"]')
+      .should("contain.text", "Organizational Unit Admin");
+
+    // --- Edit user roles: remove Organizational Unit Admin ---
+    cy.contains(
+      'tr[data-fs-bp-table-row="true"]',
+      TEST_DATA.USERS.USER_NAME_FOR_ROLES
+    )
+      .find('button[data-fs-bp-basic-dropdown-menu-trigger="true"]')
+      .click();
+    cy.get(
+      'div[data-fs-dropdown-menu="true"] button[data-fs-dropdown-item="true"]'
+    )
+      .contains("Edit details")
+      .click();
+    cy.get(
+      'div[data-fs-modal-content="true"][data-fs-bp-update-user-drawer="true"]'
+    ).should("be.visible");
+    cy.get("input#role-organizational-unit\\ admin").uncheck({ force: true });
+    cy.get(
+      'button[data-fs-bp-basic-drawer-button="true"][data-fs-bp-basic-drawer-button-variant="confirm"]'
+    )
+      .should("not.be.disabled")
+      .click();
+
+    cy.wait(1000);
+    cy.reload();
+    cy.contains(
+      'tr[data-fs-bp-table-row="true"]',
+      TEST_DATA.USERS.USER_NAME_FOR_ROLES
+    )
+      .find('span[data-fs-tag="true"]')
+      .should("not.contain.text", "Organizational Unit Admin");
+
+    // Open the dropdown menu (three dots) for the created user
+    cy.contains(
+      'tr[data-fs-bp-table-row="true"]',
+      TEST_DATA.USERS.USER_NAME_FOR_ROLES
+    )
+      .find('button[data-fs-bp-basic-dropdown-menu-trigger="true"]')
+      .click();
+
+    // Click the "Delete" option in the dropdown menu
+    cy.get(
+      'div[data-fs-dropdown-menu="true"] button[data-fs-dropdown-item="true"]'
+    )
+      .contains("Delete")
+      .click();
+
+    // Check that the delete user modal is open
+    cy.get(
+      'div[data-fs-modal-content="true"][data-fs-bp-delete-user-drawer="true"]'
+    ).should("be.visible");
+    cy.get('h2[data-fs-bp-basic-drawer-heading-title="true"]').should(
+      "contain",
+      "Delete user"
+    );
+
+    // Type the user name to confirm deletion
+    cy.get('input[data-fs-bp-input-text-input="true"]').type(
+      TEST_DATA.USERS.USER_NAME_FOR_ROLES
+    );
+
+    cy.wait(1000);
+
+    // Click the "Delete" button to confirm
+    cy.get(
+      'button[data-fs-bp-basic-drawer-button="true"][data-fs-bp-basic-drawer-button-variant="danger"]'
+    )
+      .should("not.be.disabled")
+      .click();
+
+    cy.wait(1000);
+    // Reload the users page
+    cy.reload();
+
+    // Check that the user no longer exists in the list
+    cy.contains("td", TEST_DATA.USERS.USER_NAME_FOR_ROLES).should("not.exist");
+  });
+
+  it("Should allow changing the organizational unit from the list dropdown menu", () => {
+    navigateToUsers();
+
+    // Open dropdown for the test user
+    cy.get("[data-fs-header-inside-button]").should("be.visible").click();
+    fillUserForm(TEST_DATA.USERS.NEW_USER);
+
+    cy.contains("button", "Add").click();
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    verifyUserState(TEST_DATA.USERS.NEW_USER.NAME, true);
+
+    openUserDropdown(TEST_DATA.USERS.NEW_USER.NAME);
+    cy.contains("Change organizational unit").click();
+
+    // Verify change org unit modal/drawer is open
+    cy.contains("Change user organizational unit").should("be.visible");
+    cy.contains(
+      `Users can belong to only one Organizational Unit. Search and select a new unit for ${TEST_DATA.USERS.NEW_USER.NAME}`
+    ).should("be.visible");
+
+    cy.get('[data-fs-bp-input-text="true"]')
+      .should("be.visible")
+      .type(TEST_DATA.ORG_UNITS.ROOT, { delay: 1000 });
+
+    cy.wait(0);
+
+    // Wait for and click on the option in the dropdown
+    cy.get('[data-fs-bp-autocomplete-dropdown-menu="true"]')
+      .contains(TEST_DATA.ORG_UNITS.CHILD_2, { timeout: 10000 })
+      .should("exist")
+      .click();
+
+    // Confirm change
+    cy.contains("button", "Save").click();
+
+    // Reload and verify user is now in the new org unit
+    cy.reload();
+
+    // Check if the user is not on the same org unit
+    verifyUserState(TEST_DATA.USERS.NEW_USER.NAME, false);
+  });
+
+  it.skip("Should not allow deleting the last admin user", () => {
+    // TODO: Implement this test
+  });
+
+  it.skip("Should not allow moving the last admin user", () => {
+    // TODO: Implement this test
+  });
+
+  it.skip("Should not allow removing the role from the last admin user", () => {
+    // TODO: Implement this test
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.1.40",
+  "version": "1.1.41",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/users/components/DeleteUserDrawer/DeleteUserDrawer.tsx

@@ -31,7 +31,7 @@ export const DeleteUserDrawer = ({
 
   const handleRemoveSuccess = () => {
     pushToast({
-      message: "User successfully edited",
+      message: "User successfully deleted",
       status: "INFO",
     });
     onDelete?.();
@@ -49,15 +49,16 @@ export const DeleteUserDrawer = ({
     });
   };
 
-  const { removeUserFromOrgUnit } = useRemoveUserFromOrgUnit({
-    onSuccess: handleRemoveSuccess,
-    onError: () => {
-      pushToast({
-        message: "An error occurred while deleting the user",
-        status: "ERROR",
-      });
-    },
-  });
+  const { removeUserFromOrgUnit, isRemoveUserFromOrgUnitLoading } =
+    useRemoveUserFromOrgUnit({
+      onSuccess: handleRemoveSuccess,
+      onError: () => {
+        pushToast({
+          message: "An error occurred while deleting the user",
+          status: "ERROR",
+        });
+      },
+    });
 
   const isDeleteButtonEnabled = userNameConfirmation === user.name;
 
@@ -72,6 +73,7 @@ export const DeleteUserDrawer = ({
               orgUnitId: orgUnit?.id || "",
               userId: user.id,
             })}
+            data-fs-bp-delete-user-drawer-user-name
           >
             {user.name}
           </a>
@@ -100,7 +102,8 @@ export const DeleteUserDrawer = ({
           Cancel
         </BasicDrawer.Button>
         <BasicDrawer.Button
-          variant="confirm"
+          variant="danger"
+          isLoading={isRemoveUserFromOrgUnitLoading}
           onClick={handleDeleteClick}
           disabled={!isDeleteButtonEnabled}
         >

package/src/features/users/components/UserDropdownMenu/UserDropdownMenu.tsx

@@ -43,6 +43,10 @@ export const UserDropdownMenu = ({ user }: UserDropdownMenuProps) => {
     ...updateUserDrawerProps
   } = useDrawerProps();
 
+  const handleUpdate = () => {
+    route.reload();
+  };
+
   return (
     <>
       <BasicDropdownMenu>
@@ -80,6 +84,7 @@ export const UserDropdownMenu = ({ user }: UserDropdownMenuProps) => {
         <DeleteUserDrawer
           user={user}
           isOpen={isDeleteUserDrawerOpen}
+          onDelete={handleUpdate}
           {...deleteUserDrawerProps}
         />
       )}
@@ -87,6 +92,7 @@ export const UserDropdownMenu = ({ user }: UserDropdownMenuProps) => {
         <ReassignOrgUnitDrawer
           user={user}
           isOpen={isReassignOrgUnitDrawerOpen}
+          onReassing={handleUpdate}
           {...reassignOrgUnitDrawerProps}
         />
       )}
@@ -96,6 +102,7 @@ export const UserDropdownMenu = ({ user }: UserDropdownMenuProps) => {
           userId={user.id}
           orgUnitId={currentOrgUnit?.id ?? ""}
           isOpen={isUpdateUserDrawerOpen}
+          onCreate={handleUpdate}
           {...updateUserDrawerProps}
         />
       )}

package/src/features/users/layouts/UserDetailsLayout/UserDetailsLayout.tsx

@@ -89,7 +89,10 @@ export const UserDetailsLayout = ({
 
             <div data-fs-user-details-row>
               <span data-fs-user-details-row-label>Role</span>
-              <span data-fs-user-details-row-value>
+              <span
+                data-fs-user-details-row-value
+                data-fs-user-details-row-value-roles
+              >
                 {user?.roles?.map((role) => (
                   <Tag key={role} data-fs-user-details-row-value-tag>
                     {role}

package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss

@@ -130,6 +130,7 @@
       color: #707070;
       font-size: var(--fs-text-size-1);
       font-weight: 500;
+      min-width: 12.5rem;
     }
 
     [data-fs-user-details-row-value] {
@@ -138,6 +139,12 @@
       font-weight: 500;
     }
 
+    [data-fs-user-details-row-value-roles] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--fs-spacing-1);
+    }
+
     [data-fs-user-details-change] {
       margin-left: auto;
       font-weight: 600;

package/src/features/users/layouts/UsersLayout/UsersLayout.tsx

@@ -103,9 +103,11 @@ export const UsersLayout = ({ data: { users, search } }: UsersLayoutProps) => {
                     dropdownMenu={<UserDropdownMenu user={user} />}
                   >
                     <Table.Cell>
-                      {user.roles?.map((role) => (
-                        <Tag key={role}>{role}</Tag>
-                      ))}
+                      <div data-fs-bp-table-user-roles>
+                        {user.roles?.map((role) => (
+                          <Tag key={role}>{role}</Tag>
+                        ))}
+                      </div>
                     </Table.Cell>
                   </Table.Row>
                 ))}

package/src/features/users/layouts/UsersLayout/users-layout.scss

@@ -158,4 +158,16 @@
       }
     }
   }
+
+  [data-fs-bp-table] {
+    margin-bottom: var(--fs-spacing-8);
+
+    [data-fs-bp-table-row] {
+      [data-fs-bp-table-user-roles] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--fs-spacing-1);
+      }
+    }
+  }
 }