remove edit button from team type group and fix color of button (#17478)

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

@@ -25,19 +25,20 @@ export const navigateToCustomizeLandingPage = async (
 
   await getPersonas;
 
-  // Navigate to the customize landing page
-  await page.click(
-    `[data-testid="persona-details-card-${personaName}"] [data-testid="customize-page-button"]`
-  );
-
-  const getCustomPageDataResponse = await page.waitForResponse(
+  const getCustomPageDataResponse = page.waitForResponse(
     `/api/v1/docStore/name/persona.${encodeURIComponent(
       personaName
     )}.Page.LandingPage`
   );
 
-  //   await getCustomPageDataResponse;
-  expect(getCustomPageDataResponse.status()).toBe(customPageDataResponse);
+  // Navigate to the customize landing page
+  await page.click(
+    `[data-testid="persona-details-card-${personaName}"] [data-testid="customize-page-button"]`
+  );
+
+  expect((await getCustomPageDataResponse).status()).toBe(
+    customPageDataResponse
+  );
 };
 
 export const removeAndCheckWidget = async (

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

@@ -925,7 +925,7 @@ const TeamDetailsV1 = ({
               <IconTeams className="text-primary" width={20} />
             </Avatar>
 
-            <Space direction="vertical" size={3}>
+            <div className="d-flex flex-column gap-1">
               {!isOrganization && (
                 <TitleBreadcrumb titleLinks={slashedTeamName} />
               )}
@@ -935,7 +935,7 @@ const TeamDetailsV1 = ({
                 entityPermissions={entityPermissions}
                 updateTeamHandler={updateTeamHandler}
               />
-            </Space>
+            </div>
           </Space>
 
           <Space align="center">

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

@@ -10,16 +10,17 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import Icon, {
+import {
   CheckOutlined,
   CloseOutlined,
   ExclamationCircleFilled,
 } from '@ant-design/icons';
-import { Button, Col, Input, Space, Tooltip, Typography } from 'antd';
+import { Button, Input, Space, Tooltip, Typography } from 'antd';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as EditIcon } from '../../../../../assets/svg/edit-new.svg';
+import { DE_ACTIVE_COLOR } from '../../../../../constants/constants';
 import { Team } from '../../../../../generated/entity/teams/team';
 import { useAuth } from '../../../../../hooks/authHooks';
 import { useApplicationStore } from '../../../../../hooks/useApplicationStore';
@@ -121,8 +122,8 @@ const TeamsHeadingLabel = ({
           </Space>
         </Space>
       ) : (
-        <Space align="center">
-          <Space align="baseline">
+        <>
+          <>
             {heading ? (
               <Typography.Title
                 className="m-b-0 w-max-200"
@@ -150,12 +151,13 @@ const TeamsHeadingLabel = ({
                       })
                     : t('message.no-permission-for-action')
                 }>
-                <Icon
-                  className="align-middle"
-                  component={EditIcon}
+                <Button
+                  className="p-0 flex-center"
                   data-testid="edit-team-name"
                   disabled={!hasEditDisplayNamePermission}
-                  style={{ fontSize: '16px' }}
+                  icon={<EditIcon color={DE_ACTIVE_COLOR} width="16px" />}
+                  size="small"
+                  type="text"
                   onClick={(e) => {
                     // Used to stop click propagation event to parent TeamDetailV1 collapsible panel
                     e.stopPropagation();
@@ -164,16 +166,16 @@ const TeamsHeadingLabel = ({
                 />
               </Tooltip>
             )}
-          </Space>
+          </>
           {currentTeam.deleted && (
-            <Col className="text-xs">
-              <div className="deleted-badge-button" data-testid="deleted-badge">
-                <ExclamationCircleFilled className="m-r-xss font-medium text-xs" />
-                {t('label.deleted')}
-              </div>
-            </Col>
+            <div
+              className="deleted-badge-button text-xs flex-center"
+              data-testid="deleted-badge">
+              <ExclamationCircleFilled className="m-r-xss" />
+              {t('label.deleted')}
+            </div>
           )}
-        </Space>
+        </>
       ),
     [
       heading,

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

@@ -11,14 +11,16 @@
  *  limitations under the License.
  */
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import Icon from '@ant-design/icons/lib/components/Icon';
 import { Button, Divider, Form, Input, Space, Tooltip, Typography } from 'antd';
-import classNames from 'classnames';
 import { isEmpty, last } from 'lodash';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as EditIcon } from '../../../../../assets/svg/edit-new.svg';
-import { NO_DATA_PLACEHOLDER } from '../../../../../constants/constants';
+import {
+  DE_ACTIVE_COLOR,
+  ICON_DIMENSION,
+  NO_DATA_PLACEHOLDER,
+} from '../../../../../constants/constants';
 import { EMAIL_REG_EX } from '../../../../../constants/regex.constants';
 import { EntityType } from '../../../../../enums/entity.enum';
 import { Team, TeamType } from '../../../../../generated/entity/teams/team';
@@ -196,17 +198,17 @@ const TeamsInfo = ({
             </Typography.Text>
             {hasEditPermission && (
               <Tooltip
-                title={
-                  hasEditPermission
-                    ? t('label.edit-entity', {
-                        entity: t('label.email'),
-                      })
-                    : t('message.no-permission-for-action')
-                }>
-                <Icon
-                  className="toolbar-button align-middle"
-                  component={EditIcon}
+                title={t('label.edit-entity', {
+                  entity: t('label.email'),
+                })}>
+                <Button
+                  className="flex-center p-0"
                   data-testid="edit-email"
+                  icon={
+                    <EditIcon color={DE_ACTIVE_COLOR} {...ICON_DIMENSION} />
+                  }
+                  size="small"
+                  type="text"
                   onClick={(e) => {
                     // Used to stop click propagation event to parent TeamDetailV1 collapsible panel
                     e.stopPropagation();
@@ -249,30 +251,25 @@ const TeamsInfo = ({
               {teamType}
             </Typography.Text>
 
-            {hasEditPermission && (
+            {hasEditPermission && !isGroupType && (
               <Tooltip
-                title={
-                  isGroupType
-                    ? t('message.group-team-type-change-message')
-                    : t('label.edit-entity', {
-                        entity: t('label.team-type'),
-                      })
-                }>
-                <Icon
-                  className={classNames('align-middle m-l-xss', {
-                    'opacity-30': isGroupType,
-                  })}
+                title={t('label.edit-entity', {
+                  entity: t('label.team-type'),
+                })}>
+                <Button
+                  className="flex-center p-0"
                   data-testid="edit-team-type-icon"
+                  icon={
+                    <EditIcon color={DE_ACTIVE_COLOR} {...ICON_DIMENSION} />
+                  }
+                  size="small"
+                  type="text"
                   onClick={(e) => {
                     // Used to stop click propagation event to parent TeamDetailV1 collapsible panel
                     e.stopPropagation();
-                    if (isGroupType) {
-                      return;
-                    }
                     setShowTypeSelector(true);
-                  }}>
-                  <EditIcon />
-                </Icon>
+                  }}
+                />
               </Tooltip>
             )}
           </>

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

@@ -130,6 +130,35 @@ describe('TeamsInfo', () => {
     expect(screen.queryByTestId('email-input')).not.toBeInTheDocument();
   });
 
+  it('should not render edit button if team type is organization', () => {
+    const { queryByTestId } = render(<TeamsInfo {...teamProps} />);
+
+    expect(queryByTestId('edit-team-type-icon')).not.toBeInTheDocument();
+  });
+
+  it('should not render edit button if team type is group & isGroupType is true', () => {
+    const { queryByTestId } = render(
+      <TeamsInfo
+        {...teamProps}
+        isGroupType
+        currentTeam={{ ...mockTeam, teamType: TeamType.Group }}
+      />
+    );
+
+    expect(queryByTestId('edit-team-type-icon')).not.toBeInTheDocument();
+  });
+
+  it('should render edit button if team type is not group and organization', () => {
+    const { queryByTestId } = render(
+      <TeamsInfo
+        {...teamProps}
+        currentTeam={{ ...mockTeam, teamType: TeamType.BusinessUnit }}
+      />
+    );
+
+    expect(queryByTestId('edit-team-type-icon')).toBeInTheDocument();
+  });
+
   it('should not show edit button if user does not have permission', () => {
     (useAuth as jest.Mock).mockReturnValue({ isAdminUser: false });