fix(#13204): after changing the team type action buttons are not disappearing (#13205)

openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.test.tsx

@@ -11,9 +11,9 @@
  *  limitations under the License.
  */
 
-import { findByTestId, render } from '@testing-library/react';
+import { act, findByTestId, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { act } from 'react-test-renderer';
 import EntitySummaryDetails from './EntitySummaryDetails';
 
 const mockData = {
@@ -69,4 +69,34 @@ describe('EntitySummaryDetails Component', () => {
       expect(EntitySummary).toBeInTheDocument();
     });
   });
+
+  it('Edit team type should render the appropriate component', async () => {
+    render(
+      <EntitySummaryDetails data={{ key: 'TeamType', value: 'Department' }} />
+    );
+
+    const editTeamTypeBtn = screen.getByTestId('edit-TeamType-icon');
+
+    await act(async () => {
+      userEvent.click(editTeamTypeBtn);
+    });
+
+    // should show the team type select box and action buttons
+    expect(screen.getByTestId('team-type-select')).toBeInTheDocument();
+
+    const cancelBtn = screen.getByTestId('cancel-btn');
+    const saveBtn = screen.getByTestId('save-btn');
+
+    expect(cancelBtn).toBeInTheDocument();
+    expect(saveBtn).toBeInTheDocument();
+
+    // should hide the team type select box and action buttons after save
+    await act(async () => {
+      userEvent.click(saveBtn);
+    });
+
+    expect(screen.queryByTestId('team-type-select')).toBeNull();
+    expect(screen.queryByTestId('cancel-btn')).toBeNull();
+    expect(screen.queryByTestId('save-btn')).toBeNull();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx

@@ -83,6 +83,11 @@ const EntitySummaryDetails = ({
     setShowTypeSelector(value);
   }, []);
 
+  const handleUpdateTeamType = (type: TeamType) => {
+    updateTeamType?.(type);
+    handleShowTypeSelector(false);
+  };
+
   const ownerDropdown = allowTeamOwner ? (
     <UserTeamSelectableList
       hasPermission={Boolean(updateOwner)}
@@ -335,7 +340,7 @@ const EntitySummaryDetails = ({
                 handleShowTypeSelector={handleShowTypeSelector}
                 showGroupOption={showGroupOption ?? false}
                 teamType={teamType ?? TeamType.Department}
-                updateTeamType={updateTeamType}
+                updateTeamType={handleUpdateTeamType}
               />
             ) : (
               <>

openmetadata-ui/src/main/resources/ui/src/components/common/TeamTypeSelect/TeamTypeSelect.component.tsx

@@ -42,7 +42,11 @@ function TeamTypeSelect({
   const options = useMemo(() => getTeamTypeOptions(showGroupOption), []);
 
   return (
-    <Space align="center" className="team-type-select" size={4}>
+    <Space
+      align="center"
+      className="team-type-select"
+      data-testid="team-type-select"
+      size={4}>
       <Select
         defaultActiveFirstOption
         options={options}
@@ -50,8 +54,16 @@ function TeamTypeSelect({
         onSelect={handleSelect}
       />
       <Space className="edit-team-type-buttons" size={4}>
-        <Button icon={<CloseOutlined />} onClick={handleCancel} />
+        <Button
-        <Button icon={<CheckOutlined />} onClick={handleSubmit} />
+          data-testid="cancel-btn"
+          icon={<CloseOutlined />}
+          onClick={handleCancel}
+        />
+        <Button
+          data-testid="save-btn"
+          icon={<CheckOutlined />}
+          onClick={handleSubmit}
+        />
       </Space>
     </Space>
   );