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

openmetadata-ui/src/main/resources/ui/playwright/utils/dragDrop.ts

@@ -37,10 +37,10 @@ export const dragAndDropElement = async (
 };
 
 export const openDragDropDropdown = async (page: Page, name: string) => {
-  const dropdownIcon = page.locator(
-    `[data-row-key=${name}] > .whitespace-nowrap > [data-testid="expand-icon"] > svg`
-  );
-  await dropdownIcon.click();
+  await page
+    .locator(`[data-row-key="${name}"]`)
+    .getByTestId('expand-icon')
+    .click();
 };
 
 export const confirmationDragAndDropTeam = async (

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx

@@ -636,7 +636,13 @@
       );
     }
 
-    return currentTeam.childrenCount === 0 && !searchTerm ? (
+    const showEmptyTeamPlaceholder =
+      isEmpty(searchTerm) &&
+      isEmpty(childTeamList) &&
+      (currentTeam.childrenCount ?? 0) === 0 &&
+      !isTeamBasicDataLoading;
+
+    return showEmptyTeamPlaceholder ? (
       <ErrorPlaceHolder
         className="border-none"
         icon={<AddPlaceHolderIcon className="h-32 w-32" />}
@@ -696,6 +702,7 @@
     entityPermissions.Create,
     isFetchingAllTeamAdvancedDetails,
     isSearchLoading,
+    isTeamBasicDataLoading,
     onTeamExpand,
     handleAddTeamButtonClick,
     handleTeamSearch,
@@ -946,15 +953,10 @@
   const teamsCollapseHeader = useMemo(
     () => (
       <>
-        <Space wrap className="w-full justify-between">
-          <Space
-            align="start"
-            className="w-full flex-col justify-center p-t-xs"
-            size="middle">
-            {!isOrganization && (
-              <TitleBreadcrumb titleLinks={slashedTeamName} />
-            )}
-            <div className="d-flex items-center gap-2">
+        <div className="w-full p-t-xs">
+          {!isOrganization && <TitleBreadcrumb titleLinks={slashedTeamName} />}
+          <div className="d-flex items-center justify-between p-t-xs">
+            <div className="d-flex items-center gap-2 flex-1 w-min-0">
               <Avatar className="teams-profile" size={40}>
                 <IconTeams className="text-primary" width={20} />
               </Avatar>
@@ -965,50 +967,54 @@
                 updateTeamHandler={updateTeamHandler}
               />
 
-              <LearningIcon
-                pageId={LEARNING_PAGE_IDS.TEAMS}
-                title={t('label.team-plural')}
-              />
+              <div className="d-flex flex-1 items-center justify-end w-min-0">
+                <LearningIcon
+                  pageId={LEARNING_PAGE_IDS.TEAMS}
+                  title={t('label.team-plural')}
+                />
+              </div>
             </div>
-          </Space>
 
-          <Space align="center">
-            {teamActionButton}
-            {!isOrganization ? (
-              entityPermissions.EditAll && (
+            <Space align="center">
+              {teamActionButton}
+              {!isOrganization ? (
+                entityPermissions.EditAll && (
+                  <ManageButton
+                    isRecursiveDelete
+                    afterDeleteAction={afterDeleteAction}
+                    allowSoftDelete={!currentTeam.deleted}
+                    canDelete={entityPermissions.EditAll}
+                    displayName={getEntityName(currentTeam)}
+                    entityId={currentTeam.id}
+                    entityName={
+                      currentTeam.fullyQualifiedName ?? currentTeam.name
+                    }
+                    entityType={EntityType.TEAM}
+                    extraDropdownContent={extraDropdownContent}
+                    hardDeleteMessagePostFix={getDeleteMessagePostFix(
+                      currentTeam.fullyQualifiedName ?? currentTeam.name,
+                      t('label.permanently-lowercase')
+                    )}
+                    softDeleteMessagePostFix={getDeleteMessagePostFix(
+                      currentTeam.fullyQualifiedName ?? currentTeam.name,
+                      t('label.soft-lowercase')
+                    )}
+                  />
+                )
+              ) : (
                 <ManageButton
-                  isRecursiveDelete
-                  afterDeleteAction={afterDeleteAction}
-                  allowSoftDelete={!currentTeam.deleted}
-                  canDelete={entityPermissions.EditAll}
+                  canDelete={false}
                   displayName={getEntityName(currentTeam)}
-                  entityId={currentTeam.id}
                   entityName={
                     currentTeam.fullyQualifiedName ?? currentTeam.name
                   }
                   entityType={EntityType.TEAM}
-                  extraDropdownContent={extraDropdownContent}
-                  hardDeleteMessagePostFix={getDeleteMessagePostFix(
-                    currentTeam.fullyQualifiedName ?? currentTeam.name,
-                    t('label.permanently-lowercase')
-                  )}
-                  softDeleteMessagePostFix={getDeleteMessagePostFix(
-                    currentTeam.fullyQualifiedName ?? currentTeam.name,
-                    t('label.soft-lowercase')
-                  )}
+                  extraDropdownContent={[...IMPORT_EXPORT_MENU_ITEM]}
                 />
-              )
-            ) : (
-              <ManageButton
-                canDelete={false}
-                displayName={getEntityName(currentTeam)}
-                entityName={currentTeam.fullyQualifiedName ?? currentTeam.name}
-                entityType={EntityType.TEAM}
-                extraDropdownContent={[...IMPORT_EXPORT_MENU_ITEM]}
-              />
-            )}
-          </Space>
-        </Space>
+              )}
+            </Space>
+          </div>
+        </div>
         <div className="p-t-md ">
           <TeamsInfo
             childTeamsCount={childTeams.length}

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamHierarchy.test.tsx

@@ -12,6 +12,7 @@
  */
 
 import { fireEvent, render, screen } from '@testing-library/react';
+import { forwardRef, type ReactNode } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { MemoryRouter } from 'react-router-dom';
@@ -26,6 +27,8 @@ import TeamHierarchy from './TeamHierarchy';
 const teamHierarchyPropsData: TeamHierarchyProps = {
   data: MOCK_TABLE_DATA,
   currentTeam: MOCK_CURRENT_TEAM,
+  isSearchLoading: false,
+  isTeamBasicDataLoading: false,
   onTeamExpand: jest.fn(),
   isFetchingAllTeamAdvancedDetails: false,
   showDeletedTeam: false,
@@ -38,12 +41,23 @@ const teamHierarchyPropsData: TeamHierarchyProps = {
 
 const mockShowErrorToast = jest.fn();
 
-// mock library imports
-jest.mock('react-router-dom', () => ({
-  Link: jest
-    .fn()
-    .mockImplementation(({ children }) => <a href="#">{children}</a>),
-}));
+jest.mock('react-router-dom', () => {
+  const actual = jest.requireActual('react-router-dom');
+
+  const MockLink = forwardRef<
+    HTMLAnchorElement,
+    { children?: ReactNode; to?: unknown }
+  >(({ children, to: _to, ...props }, ref) => (
+    <a href="#" ref={ref} {...props}>
+      {children}
+    </a>
+  ));
+
+  return {
+    ...actual,
+    Link: MockLink,
+  };
+});
 
 jest.mock('../../../../utils/TeamUtils', () => ({
   getMovedTeamData: jest.fn().mockReturnValue([]),

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamHierarchy.tsx

@@ -20,19 +20,13 @@ import { compare } from 'fast-json-patch';
 import { isEmpty, isUndefined } from 'lodash';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
 import { TABLE_CONSTANTS } from '../../../../constants/Teams.constants';
 import { TabSpecificField } from '../../../../enums/entity.enum';
 import { Team } from '../../../../generated/entity/teams/team';
 import { Include } from '../../../../generated/type/include';
 import { getTeamByName, patchTeamDetail } from '../../../../rest/teamsAPI';
 import { Transi18next } from '../../../../utils/CommonUtils';
-import {
-  getEntityName,
-  highlightSearchText,
-} from '../../../../utils/EntityUtils';
-import { getTeamsWithFqnPath } from '../../../../utils/RouterUtils';
-import { stringToHTML } from '../../../../utils/StringsUtils';
+import { getEntityName } from '../../../../utils/EntityUtils';
 import { descriptionTableObject } from '../../../../utils/TableColumn.util';
 import { getTableExpandableConfig } from '../../../../utils/TableUtils';
 import { isDropRestricted } from '../../../../utils/TeamUtils';
@@ -42,6 +36,7 @@ import FilterTablePlaceHolder from '../../../common/ErrorWithPlaceholder/FilterT
 import Table from '../../../common/Table/Table';
 import { MovedTeamProps, TeamHierarchyProps } from './team.interface';
 import './teams.less';
+import { TeamHierarchyNameCell } from './TeamsHeaderSection/TeamHierarchyNameCell';
 
 const TeamHierarchy: FC<TeamHierarchyProps> = ({
   currentTeam,
@@ -82,17 +77,11 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
       {
         title: t('label.team-plural'),
         dataIndex: 'teams',
-        className: 'whitespace-nowrap',
+        className: 'teams-hierarchy-name-column',
         key: 'teams',
+        width: '32%',
         render: (_, record) => (
-          <Link
-            className="link-hover"
-            data-testid={`team-name-${record.name}`}
-            to={getTeamsWithFqnPath(record.fullyQualifiedName || record.name)}>
-            {stringToHTML(
-              highlightSearchText(getEntityName(record), searchTerm)
-            )}
-          </Link>
+          <TeamHierarchyNameCell record={record} searchTerm={searchTerm} />
         ),
       },
       {
@@ -152,7 +141,7 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
       },
       ...descriptionTableObject<Team>({ width: 300 }),
     ];
-  }, [data, isFetchingAllTeamAdvancedDetails, onTeamExpand, teamAssetCounts]);
+  }, [isFetchingAllTeamAdvancedDetails, searchTerm, t, teamAssetCounts]);
 
   const handleTableHover = useCallback(
     (value: boolean) => setIsTableHovered(value),