ISSUE : fix teams page breaking issue (#17268)

* fix teams page breaking issue

* minor changes

* unpushed file

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

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

@@ -15,7 +15,7 @@ import { uuid } from './common';
 
 export const createTeam = async (page: Page, isPublic?: boolean) => {
   const teamData = {
-    name: `pwteam-${uuid()}`,
+    name: `pw%team-${uuid()}`,
     displayName: `PW ${uuid()}`,
     email: `pwteam${uuid()}@example.com`,
     description: 'This is a PW team',

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/TeamsHeaderSection/TeamsInfo.component.tsx

@@ -207,7 +207,6 @@ const TeamsInfo = ({
                   className="toolbar-button align-middle"
                   component={EditIcon}
                   data-testid="edit-email"
-                  style={{ fontSize: '16px' }}
                   onClick={(e) => {
                     // Used to stop click propagation event to parent TeamDetailV1 collapsible panel
                     e.stopPropagation();
@@ -252,21 +251,18 @@ const TeamsInfo = ({
 
             {hasEditPermission && (
               <Tooltip
-                title={t('label.edit-entity', {
+                title={
-                  entity: t('label.team-type'),
+                  isGroupType
-                })}>
+                    ? t('message.group-team-type-change-message')
+                    : t('label.edit-entity', {
+                        entity: t('label.team-type'),
+                      })
+                }>
                 <Icon
-                  className={classNames('vertical-middle m-l-xs', {
+                  className={classNames('align-middle m-l-xss', {
-                    'opacity-50': isGroupType,
+                    'opacity-30': isGroupType,
                   })}
                   data-testid="edit-team-type-icon"
-                  title={
-                    isGroupType
-                      ? t('message.group-team-type-change-message')
-                      : t('label.edit-entity', {
-                          entity: t('label.team-type'),
-                        })
-                  }
                   onClick={(e) => {
                     // Used to stop click propagation event to parent TeamDetailV1 collapsible panel
                     e.stopPropagation();

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

@@ -49,7 +49,6 @@ import { getUsers } from '../../../../../rest/userAPI';
 import { formatUsersResponse } from '../../../../../utils/APIUtils';
 import { getEntityName } from '../../../../../utils/EntityUtils';
 import { getSettingsPathWithFqn } from '../../../../../utils/RouterUtils';
-import { getDecodedFqn } from '../../../../../utils/StringsUtils';
 import { commonUserDetailColumns } from '../../../../../utils/Users.util';
 import ManageButton from '../../../../common/EntityPageInfos/ManageButton/ManageButton';
 import ErrorPlaceHolder from '../../../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
@@ -99,7 +98,7 @@ export const UserTab = ({
     getUsers({
       fields: `${TabSpecificField.TEAMS},${TabSpecificField.ROLES}`,
       limit: pageSize,
-      team: getDecodedFqn(team),
+      team,
       ...paging,
     })
       .then((res) => {

openmetadata-ui/src/main/resources/ui/src/pages/TeamsPage/TeamsPage.test.tsx

@@ -68,10 +68,6 @@ jest.mock('../../utils/ToastUtils', () => ({
   showErrorToast: jest.fn(),
 }));
 
-jest.mock('../../utils/StringsUtils', () => ({
-  getDecodedFqn: jest.fn(),
-}));
-
 jest.mock('../../utils/RouterUtils', () => ({
   getTeamsWithFqnPath: jest.fn(),
 }));

openmetadata-ui/src/main/resources/ui/src/pages/TeamsPage/TeamsPage.tsx

@@ -48,7 +48,6 @@ import { updateUserDetail } from '../../rest/userAPI';
 import { getEntityReferenceFromEntity } from '../../utils/EntityUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
 import { getTeamsWithFqnPath } from '../../utils/RouterUtils';
-import { getDecodedFqn } from '../../utils/StringsUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import AddTeamForm from './AddTeamForm';
 
@@ -112,7 +111,7 @@ const TeamsPage = () => {
   const fetchAllTeamsBasicDetails = async (parentTeam?: string) => {
     try {
       const { data } = await getTeams({
-        parentTeam: getDecodedFqn(parentTeam ?? '') ?? 'organization',
+        parentTeam: parentTeam ?? 'organization',
         include: Include.All,
       });
 
@@ -138,7 +137,7 @@ const TeamsPage = () => {
 
     try {
       const { data } = await getTeams({
-        parentTeam: getDecodedFqn(parentTeam ?? '') ?? 'organization',
+        parentTeam: parentTeam ?? 'organization',
         include: Include.All,
         fields: [
           TabSpecificField.USER_COUNT,

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -413,6 +413,9 @@ a[href].link-text-grey,
 .opacity-0 {
   opacity: 0;
 }
+.opacity-30 {
+  opacity: 0.3;
+}
 .opacity-50 {
   opacity: 0.5;
 }