wso2 / product-is

Welcome to the WSO2 Identity Server source code! For info on working with the WSO2 Identity Server repository and contributing code, click the link below.
http://wso2.github.io/
Apache License 2.0
746 stars 724 forks source link

Inconsistent UI Behaviour When Adding and Deleting Organizations in Paginated View #20990

Open BimsaraBodaragama opened 1 month ago

BimsaraBodaragama commented 1 month ago

Describe the issue: When managing organizations within the WSO2 Identity Server, inconsistencies arise in the UI when adding or deleting organizations within a paginated view:

  1. Inconsistent Display of Action Buttons:

    • After adding an organization, the Switch, Edit, and Delete buttons that were previously visible may disappear for some organizations. This inconsistency occurs after the addition of a new organization.
    • After deleting an organization, the same buttons may not appear correctly.
  2. Pagination Issues After Adding or Deleting Organizations:

    • When a new organization is added, the UI may return to a page displaying a mix of organizations across pages. For example, if a new organization is added (e.g., "org18"), after setting a pagination limit to 10, the UI might display organizations numbered from 1 to 7 instead of returning to the first page with org 9 to 18 or accurately reflecting the pagination limit.
    • Newly added organizations may not appear on the correct page immediately after the addition, requiring a page refresh or pagination limit adjustment for the UI to display them correctly.
    • Deleting an organization also triggers similar pagination issues, where the UI fails to display organizations according to the specified limit, and some action buttons disappear unexpectedly.

These issues can be observed in the attached video (with voice-over) and it can be used as a reference to reproduce the issue.

https://github.com/user-attachments/assets/906fb385-00d3-4d89-83cb-dd0991d9fe52

How to reproduce:

  1. Ensure that you have 17 organizations created. (Any organization limit of more than 10 is relatable. Here 17 organizations have been used to be consistent with the example video)
  2. Confirm that 17 organizations have been successfully created.
  3. Navigate to the Organizations tab.
  4. Set the pagination limit to 10.
  5. Add a new Organization (e.g., "org18")
  6. Observe the following:
    • The UI may not display the newly added organization on the returned page.
    • The Switch, Edit, and Delete buttons may be missing for some organizations after the addition.
    • The pagination might mix organizations across pages instead of returning the first page with the newly added organization.
  7. Delete an organization and observe that the UI exhibits similar behavior:
    • Action buttons may disappear, on the returned page after the deletion of an organization.
  8. Refresh the page or adjust the pagination limit and note that the UI may correct itself, displaying the correct organizations and buttons.

Expected behavior:

BimsaraBodaragama commented 1 month ago

For testing, you can create 17 organizations using the provided .bash script.

#!/bin/bash

# Base values
BASE_URL='https://localhost:9443/api/server/v1/organizations'
AUTH_TOKEN='<Your Auth Token>'
PARENT_ID='<Your Parent ID>'

# Loop to create organizations org1 to org17
for i in {1..17}
do
  # Organization name
  ORG_NAME="org${i}"

  # JSON payload
  DATA=$(cat <<EOF
{
    "name": "${ORG_NAME}",
    "parentId": "${PARENT_ID}",
    "type": "TENANT"
}
EOF
)

  # Make the curl request
  curl --location --insecure "$BASE_URL" \
  --header 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:129.0) Gecko/20100101 Firefox/129.0' \
  --header 'Accept: application/json' \
  --header 'Accept-Language: en-US,en;q=0.5' \
  --header 'Accept-Encoding: gzip, deflate, br, zstd' \
  --header 'Content-Type: application/json' \
  --header "Authorization: Bearer $AUTH_TOKEN" \
  --header 'Origin: https://localhost:9443' \
  --header 'Connection: keep-alive' \
  --header 'Cookie: <Your Cookies>' \
  --header 'Sec-Fetch-Dest: empty' \
  --header 'Sec-Fetch-Mode: cors' \
  --header 'Sec-Fetch-Site: same-origin' \
  --data "$DATA"

  echo "Created organization $ORG_NAME"
done