fix(admin-ui): unable to click Agama Flow tab in Auth Server (#2483)

[faisalsiddique4400]

fix(admin-ui): unable to click Agama Flow tab in Auth Server (#2483)

Summary

The Agama Flow tab in the Auth Server module is not clickable, preventing users from accessing the upload section for Agama flows.

Actual Behavior

• The Agama Flow tab is not interactive.
• Users cannot access the Agama Flow upload interface due to the browser rapid navigation and throttling issue

Expected Behavior

• The Agama Flow tab should be fully clickable.
• Users should be able to open the tab and upload Agama flows without errors.

Fix Summary

• Improved navigation handling to prevent rapid repeated navigation calls.
• Applied memoization and optimized component rendering to avoid unnecessary re-renders.
• Ensured smooth tab switching without triggering browser throttling protection.
• Verified that the Agama Flow tab now opens consistently across the project.

Closes

Closes: #2483

Summary by CodeRabbit

• Bug Fixes

  • Improved accessibility for tab controls and preserved accessible tab associations.
  • Better synchronization between tabs and browser URL, including auto-selecting a navigable tab when none matches.
  • More stable tab selection logic to prevent unexpected tab switches.

• Enhancements

  • Navigation is now more reliable and consistent when switching tabs.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaces direct router navigation with navigateToRoute from useAppNavigation in the GluuTabs component, strengthens tab type guards to ensure navigable paths, preserves accessible tab IDs, synchronizes tab selection with the URL, and extracts tab container styling into a tabsContainerSx object.

Changes

Cohort / File(s)

Summary

Tab Navigation Refactor admin-ui/app/routes/Apps/Gluu/GluuTabs.tsx

Replaces useNavigate with navigateToRoute from useAppNavigation. Adds a11yProps helper and preserves tab IDs. Introduces NamedTab/NavigationTab types and stricter isNavigationTab guard (ensures non-empty path). Updates TabItem type, getTabLabel, and handleChange to use refined checks and conditional navigation. Synchronizes URL-driven tab selection via useEffect using the new navigation helper. Extracts inline tab container styles into tabsContainerSx. Updates memoization and effect dependencies accordingly.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Check navigateToRoute call sites and parameter usage for correct behavior.
• Validate isNavigationTab type guard and ensure no edge cases (empty path) slip through.
• Verify useEffect dependencies to avoid re-render loops and ensure URL ↔ tab sync is correct.
• Test the agama flow tab click scenario described in the linked issue.
• Confirm accessibility IDs and a11yProps match TabPanel associations.

Suggested reviewers

• syntrydy
• duttarnab

Poem

🐰
A tab that wandered, lost in view,
I hopped in quick and stitched it through.
With guards and routes now set just right,
Agama clicks dance into light. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly describes the specific bug fix (unable to click Agama Flow tab) and is directly related to the main changes in the changeset.
Linked Issues check	✅ Passed	The changes comprehensively address the linked issue by improving navigation handling, preventing rapid repeated navigation calls, and optimizing component rendering to enable proper tab switching.
Out of Scope Changes check	✅ Passed	All code modifications are directly related to fixing the Agama Flow tab navigation issue through improved navigation logic and component optimization.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch admin-ui-issue-2483

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d8d0e33 and 535c89c.

📒 Files selected for processing (1)

• admin-ui/app/routes/Apps/Gluu/GluuTabs.tsx (7 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2404
File: admin-ui/app/routes/Apps/Gluu/Gluuformfooter.tsx:70-77
Timestamp: 2025-11-03T08:47:33.943Z
Learning: In the admin-ui forms (Gluuformfooter component), the Back button should always navigate to '/home/dashboard' rather than using history-based navigation (navigate(-1)), as clarified by faisalsiddique4400 in PR #2404.

🧬 Code graph analysis (1)

admin-ui/app/routes/Apps/Gluu/GluuTabs.tsx (6)

admin-ui/app/helpers/navigation.ts (1)

• useAppNavigation (66-95)

admin-ui/plugins/admin/components/Webhook/WebhookListPage.js (1)

• useAppNavigation (31-31)

admin-ui/plugins/saml/components/SamlIdentityList.js (1)

• useAppNavigation (59-59)

admin-ui/plugins/saml/components/TrustRelationshipList.js (1)

• useAppNavigation (36-36)

admin-ui/plugins/services/Components/Configuration/SqlListPage.js (1)

• useAppNavigation (76-76)

admin-ui/plugins/services/Components/Configuration/LdapListPage.js (1)

• useAppNavigation (46-46)

🔇 Additional comments (7)

admin-ui/app/routes/Apps/Gluu/GluuTabs.tsx (7)

9-18: LGTM! Clean type definitions.

The type hierarchy is well-structured: NavigationTab extends NamedTab with a required path, and TabItem provides a flexible union type. This improves type safety throughout the component.

---

28-33: LGTM! Accessibility improvement.

The a11yProps helper correctly generates accessibility attributes that match the existing TabPanel associations, following Material-UI best practices.

---

56-65: LGTM! Robust type guard.

The enhanced isNavigationTab guard provides thorough validation, ensuring the path is a non-empty string and properly narrowing the type to NavigationTab. This prevents navigation errors from malformed tab configurations.

---

86-92: LGTM! Clean label extraction.

The getTabLabel callback correctly handles both string and object-based tabs, properly extracting the label for each case.

---

94-105: LGTM! Proper navigation handling.

The handleChange callback correctly uses navigateToRoute with appropriate guards to prevent redundant navigation when the tab path already matches the current pathname. The replace: true option avoids polluting the browser history.

---

128-134: LGTM! Good refactoring.

Extracting the tab container styling into a memoized tabsContainerSx object improves code organization and readability while preventing unnecessary re-renders.

---

5-5: I'll help you verify the import path concern for useLocation in the GluuTabs.tsx file. Let me search the codebase to understand the standard import pattern used across the project.
<function_calls>


#!/bin/bash

Search for useLocation imports to identify the standard pattern

rg -n "import.*useLocation.*from" --type=ts --type=tsx -A 1 -B 1

Also check for other react-router imports to understand the pattern

echo "---"
echo "Checking for react-router and react-router-dom imports:"
rg -n "from\s+['"]react-router" --type=ts --type=tsx | head -20


</function_calls>

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 50bc2b9 and d8d0e33.

📒 Files selected for processing (1)

• admin-ui/app/routes/Apps/Gluu/GluuTabs.tsx (7 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2404
File: admin-ui/app/routes/Apps/Gluu/Gluuformfooter.tsx:70-77
Timestamp: 2025-11-03T08:47:33.943Z
Learning: In the admin-ui forms (Gluuformfooter component), the Back button should always navigate to '/home/dashboard' rather than using history-based navigation (navigate(-1)), as clarified by faisalsiddique4400 in PR #2404.

Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2418
File: admin-ui/plugins/user-management/components/UserForm.tsx:290-297
Timestamp: 2025-11-06T08:23:20.948Z
Learning: In the UserForm component (admin-ui/plugins/user-management/components/UserForm.tsx), the Back button should fall back to '/user/usersmanagement' when browser history is unavailable, not '/home/dashboard', as this keeps users in the user management context. This aligns with the new requirement that users should be redirected to the respective listing screen of the component rather than the dashboard.

📚 Learning: 2025-11-06T08:23:20.948Z

Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2418
File: admin-ui/plugins/user-management/components/UserForm.tsx:290-297
Timestamp: 2025-11-06T08:23:20.948Z
Learning: In the UserForm component (admin-ui/plugins/user-management/components/UserForm.tsx), the Back button should fall back to '/user/usersmanagement' when browser history is unavailable, not '/home/dashboard', as this keeps users in the user management context. This aligns with the new requirement that users should be redirected to the respective listing screen of the component rather than the dashboard.

Applied to files:

• admin-ui/app/routes/Apps/Gluu/GluuTabs.tsx

🧬 Code graph analysis (1)

admin-ui/app/routes/Apps/Gluu/GluuTabs.tsx (1)

admin-ui/app/helpers/navigation.ts (1)

• useAppNavigation (66-95)

🔇 Additional comments (6)

admin-ui/app/routes/Apps/Gluu/GluuTabs.tsx (6)

9-18: LGTM! Type definitions improve type safety.

The new type hierarchy (NamedTab, NavigationTab, TabItem) provides clear distinction between regular tabs and navigation-enabled tabs, which helps prevent the navigation issues described in the PR.

---

28-33: Good addition for accessibility.

The a11yProps helper properly sets up ARIA attributes for keyboard navigation and screen readers.

---

56-65: Enhanced type guard prevents invalid navigation tabs.

The stricter validation ensuring path is a non-empty string likely helps prevent the rapid navigation issue by filtering out malformed tab configurations.

---

94-105: Key fix: prevents redundant navigation calls.

The check tab.path !== path.pathname (line 99) prevents navigating to the same path multiple times, which directly addresses the browser throttling issue mentioned in the PR. This is the core fix for the non-clickable tab problem.

---

128-134: Good refactor: memoized styles reduce re-renders.

Extracting and memoizing tabsContainerSx prevents unnecessary object recreation and contributes to smoother rendering, which helps avoid triggering browser throttling.

---

138-166: URL-driven navigation synchronization works correctly.

The effect properly handles URL changes (e.g., browser back button) and ensures the tab state stays synchronized with the current path. The checks at lines 151 and 162 prevent unnecessary navigation calls.

[sonarqubecloud]

Quality Gate passed for 'Gluu Admin UI'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud