fix(teams): team header layout, heading truncation, hierarchy overflow, and teams tab empty state

[harsh-vador]

Describe your changes:

This PR improves the Settings → Teams team detail experience: header layout and display-name heading, sub-team table overflow, and a bug where the Teams tab showed an empty state after editing the display name.

Changes

1. Team header row (TeamDetailsV1.tsx)

• Reworked the collapsible header so breadcrumb uses full width and the row with avatar, title, Join team / actions, and Manage sits on one line (justify-between), with a flexible, shrinkable title area (tw:flex-1 tw:min-w-0) so buttons no longer wrap unnecessarily.

2. Team display name heading (TeamsHeadingLabel.component.tsx)

• Replaced Ant Design Typography.Title (with w-max-200) with Typography from @openmetadata/ui-core-components.
• Truncation uses tw:truncate with a wider cap: tw:max-w-1/3 in read-only mode only (not applied while inline editing).
• Empty display name still uses core Typography for consistency.
• Wrapped the heading in Tooltip + overflow container so the full name is available on hover when truncated.

3. Team hierarchy table (TeamHierarchy.tsx + teams.less)

• Removed whitespace-nowrap on the Teams column, set table-layout: fixed, constrained the name column width, and used flex on the expandable first cell so long names ellipsis instead of overlapping the Type column.
• Added Tooltip on the team name link for the full display name on hover.

4. Teams tab empty placeholder (TeamDetailsV1.tsx)

• Fixed incorrect empty state when childrenCount from a PATCH response did not match loaded children (e.g. after saving display name): show the add-team placeholder only when search is empty, childTeamList is empty, childrenCount is 0, and basic team data is not loading (lodash isEmpty for search and list).

Screen.Recording.2026-04-07.at.12.19.30.PM.mov

Fixes #27074

Type of change:

• Bug fix
• Improvement
• New feature
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation

Checklist:

• I have read the CONTRIBUTING document.
• My PR title is Fixes <issue-number>: <short explanation>
• I have commented on my code, particularly in hard-to-understand areas.
• For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	64.52% (59076/91553)	44.01% (30940/70302)	47.34% (9345/19737)

[github-actions]

🟡 Playwright Results — all passed (21 flaky)

✅ 3458 passed · ❌ 0 failed · 🟡 21 flaky · ⏭️ 223 skipped

Shard	Passed	Failed	Flaky	Skipped
🟡 Shard 1	454	0	3	2
🟡 Shard 2	618	0	1	32
🟡 Shard 3	615	0	6	27
🟡 Shard 4	626	0	6	47
✅ Shard 5	587	0	0	67
🟡 Shard 6	558	0	5	48

🟡 21 flaky test(s) (passed on retry)

• Features/DataAssetRulesDisabled.spec.ts › Verify the Dashboard entity item action after rules disabled (shard 1, 1 retry)
• Flow/Tour.spec.ts › Tour should work from welcome screen (shard 1, 1 retry)
• Pages/UserCreationWithPersona.spec.ts › Create user with persona and verify on profile (shard 1, 1 retry)
• Features/BulkEditEntity.spec.ts › Glossary (shard 2, 1 retry)
• Features/IncidentManager.spec.ts › Complete Incident lifecycle with table owner (shard 3, 1 retry)
• Features/Permissions/GlossaryPermissions.spec.ts › Team-based permissions work correctly (shard 3, 1 retry)
• Features/UserProfileOnlineStatus.spec.ts › Should not show online status for inactive users (shard 3, 1 retry)
• Flow/ExploreDiscovery.spec.ts › Should display deleted assets when showDeleted is checked and deleted is not present in queryFilter (shard 3, 1 retry)
• Flow/PersonaDeletionUserProfile.spec.ts › User profile loads correctly before and after persona deletion (shard 3, 1 retry)
• Flow/PersonaFlow.spec.ts › Set default persona for team should work properly (shard 3, 1 retry)
• Pages/Customproperties-part2.spec.ts › entityReferenceList shows item count, scrollable list, no expand toggle (shard 4, 1 retry)
• Pages/DataContracts.spec.ts › Create Data Contract and validate for SearchIndex (shard 4, 1 retry)
• Pages/Domains.spec.ts › Verify domain tags and glossary terms (shard 4, 1 retry)
• Pages/Domains.spec.ts › Rename domain with deeply nested subdomains (3+ levels) verifies FQN propagation (shard 4, 1 retry)
• Pages/Domains.spec.ts › Multiple consecutive domain renames preserve all associations (shard 4, 1 retry)
• Pages/Entity.spec.ts › Delete Dashboard (shard 4, 1 retry)
• Pages/ODCSImportExport.spec.ts › Multi-object ODCS contract - object selector shows all schema objects (shard 6, 1 retry)
• Pages/ProfilerConfigurationPage.spec.ts › Non admin user (shard 6, 1 retry)
• Pages/UserDetails.spec.ts › Admin user can get all the roles hierarchy and edit roles (shard 6, 2 retries)
• Pages/Users.spec.ts › Permissions for table details page for Data Consumer (shard 6, 1 retry)
• VersionPages/ServiceEntityVersionPage.spec.ts › Messaging Service (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

[gitar-bot]

Code Review ✅ Approved 3 resolved / 3 findings

Fixes team header layout, heading truncation, hierarchy overflow, and empty state issues by using Typography's built-in ellipsis+tooltip, removing hardcoded white backgrounds to respect theme settings, and showing tooltips only when text is truncated. Three findings addressed with no remaining issues.

✅ 3 resolved

✅ Quality: Use Typography's built-in ellipsis+tooltip instead of manual Tooltip

📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsHeadingLabel.component.tsx:129-140
The new code wraps the heading in a manual <Tooltip title={heading}> that always shows on hover, even when the text is short and not truncated. The old Ant Design Typography.Title used ellipsis={{ tooltip: true }} to only show the tooltip when text was actually truncated.

The @openmetadata/ui-core-components Typography component supports the same pattern via its ellipsis prop (e.g., ellipsis={{ tooltip: heading }}), which would conditionally show the tooltip only when the text is truncated — matching the previous UX behavior and reducing wrapper nesting.

✅ Quality: Hardcoded background: white ignores theme/dark-mode

📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/teams.less:125-133
The new CSS rules at lines 126 and 132 use background: white instead of a LESS theme variable. If the application ever supports a dark mode or customizable themes, these will remain white and look broken. The existing codebase uses @white or theme variables from variables.less for this purpose.

✅ Edge Case: Tooltip always shown on team name even when not truncated

📄 openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamHierarchy.tsx:101
In TeamHierarchy.tsx, the Tooltip wrapping the team name link always displays displayName on hover, even when the name is short and fully visible (not truncated). This creates unnecessary tooltip noise for most team names. Ant Design's Typography.Text with ellipsis={{ tooltip: true }} only shows the tooltip when text is actually truncated, which is a better UX pattern.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
3 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

[github-actions]

Failed to cherry-pick changes to the 1.12.5 branch.
Please cherry-pick the changes manually.
You can find more details here.