Skip to content

fix(ui): display CRUD changes on Users and Teams pages without full reload#3330

Open
marekdano wants to merge 3 commits intomainfrom
teams-users-pages-not-updated-after-crud
Open

fix(ui): display CRUD changes on Users and Teams pages without full reload#3330
marekdano wants to merge 3 commits intomainfrom
teams-users-pages-not-updated-after-crud

Conversation

@marekdano
Copy link
Copy Markdown
Collaborator

@marekdano marekdano commented Feb 27, 2026

🐛 Bug-fix PR

Closes #2691 #2864

📌 Summary

Fixes stale UI data on Teams and Users admin pages when running multiple gateway replicas behind nginx. The root cause was three layers of caching preventing CRUD changes from being reflected:

  1. Missing HTMX refresh triggers — Create team and delete user endpoints returned responses without HX-Trigger headers, so the frontend never knew to refresh the lists
  2. Nginx/browser caching — Nginx's proxy_cache_valid 200 5s and add_header Cache-Control "private, max-age=5" always caused stale responses for all /admin GET requests. Since nginx overrides backend Cache-Control headers, this was solved client-side with _t=Date.now() cache-busting query parameters only after CRUD actions on Teams and Users.
  3. Fix the issue with clicking Edit on the freshly-swapped card, which caused htmx:targetError in the browser console and the edit modal never opened.

🔁 Reproduction Steps

Users Page

Scenario 1:

  1. Go to http://localhost:8080/admin
  2. Navigate to the Users page
  3. Create, Edit, Delete User(s)
  4. Observe that a new / updated / deleted user is not updated on the page. The page has to be reloaded to see the change.

Scenario 2:

  1. Go to http://localhost:8080/admin
  2. Navigate to the Users page
  3. Deactivate or Activate a user
  4. Hit the Edit button to modify the user
  5. Observe that the edit modal is not displayed, and the error is logged in the browser console

Teams Page

  1. Go to http://localhost:8080/admin
  2. Navigate to the Teams page
  3. Create, Edit, Activate / Deactivate, Delete Team(s)
  4. Add / Remove members to / from Teams
  5. Observe that a new / updated / deleted teams or updated members are not updated on the page. The page has to be reloaded to see the change.

🐞 Root Cause

CRUD operations on Users and Teams are cached behind the nginx 5s cache time. So when the operations are executed on the admin UI, the changes are not reflected on the UI. The whole page must be reloaded to see them.

After clicking Activate or Deactivate on a user card, the card is replaced via hx-swap="outerHTML" using HTML generated server-side by _render_user_card_html(). The Edit button produced by that function was missing three HTMX attributes present in the Jinja template (users_partial.html). Clicking Edit on the freshly-swapped card caused htmx:targetError in the browser console and the edit modal never opened.

💡 Fix Description

mcpgateway/admin.py

  • _render_user_card_html() — added hx-on::before-request, hx-swap, and hx-on::config-request to the Edit button f-string to match users_partial.html exactly
  • admin_get_user_edit() — added Cache-Control: no-cache, no-store, must-revalidate / Pragma: no-cache / Expires: 0 response headers to prevent nginx from serving stale edit-form HTML
  • admin_get_team_edit() — same no-cache headers as above
  • admin_delete_user() — added HX-Trigger: adminUserAction response header so the users list refreshes automatically after deletion
  • admin_create_team() — added HX-Trigger: adminTeamAction response header so the teams list refreshes automatically after team creation

mcpgateway/static/admin.js

  • handleAdminTeamAction() — added params.set("_t", Date.now()) cache-busting timestamp to the teams-list refresh URL

mcpgateway/templates/admin.html

  • editTeamSafe() — replaced string concatenation URL with a template literal including ?_t=${Date.now()} cache-busting param
  • loadTeamMembersView() — same cache-busting param added to the team members modal load URL

mcpgateway/templates/users_partial.html

  • Add hx-on::config-request to dynamically append _t on the user edit button's hx-get request

Add unit tests to cover changes in admin.py and admin.js files

🧪 Verification

Check Command Status
Lint suite make lint
Unit tests make test
Coverage ≥ 80 % make coverage
Manual regression no longer fails steps / screenshots

📐 MCP Compliance (if relevant)

  • Matches current MCP spec
  • No breaking change to MCP clients

✅ Checklist

  • Code formatted (make black isort pre-commit)
  • No secrets/credentials committed

@crivetimihai crivetimihai added bug Something isn't working ui User Interface SHOULD P2: Important but not vital; high-value items that are not crucial for the immediate release labels Feb 28, 2026
@crivetimihai crivetimihai added this to the Release 1.0.0-RC2 milestone Feb 28, 2026
@crivetimihai
Copy link
Copy Markdown
Member

Thanks @marekdano. Excellent root cause analysis and comprehensive fix. The three-layer approach (HX-Trigger headers, no-cache headers, and Edit button HTMX attributes) correctly addresses each caching layer. Test coverage is thorough — both Python and JS tests. Looks good.

@marekdano marekdano requested a review from gcgoncalves March 2, 2026 10:58
@marekdano marekdano force-pushed the teams-users-pages-not-updated-after-crud branch from 871e8d5 to e8e6d1d Compare March 9, 2026 11:09
@marekdano marekdano requested a review from gcgoncalves March 10, 2026 11:39
Copy link
Copy Markdown
Collaborator

@gcgoncalves gcgoncalves left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you considered adding the HX-Trigger header to team edit/update as well?

Marek Dano added 3 commits April 2, 2026 16:46
…eload

Signed-off-by: Marek Dano <Marek.Dano@ibm.com>
Signed-off-by: Marek Dano <Marek.Dano@ibm.com>
Signed-off-by: Marek Dano <Marek.Dano@ibm.com>
@marekdano marekdano force-pushed the teams-users-pages-not-updated-after-crud branch from 6ef34cb to 6a48e6d Compare April 2, 2026 15:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working SHOULD P2: Important but not vital; high-value items that are not crucial for the immediate release ui User Interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: Teams - Team visibility updates are not reflected until the page is refreshed

3 participants