feat(#11608): show email in teams page (#11642)

* feat(#11608): UI: Show Email in teams page

* update method name

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Teams.spec.js

@@ -33,6 +33,7 @@ const TEAM_DETAILS = {
   userId: 'aaron_johnson0',
   assetname: 'dim_address',
   email: 'team1@gmail.com',
+  updatedEmail: 'updatedemail@gmail.com',
 };
 const hardDeleteTeamName = `team-ct-test-${uuid()}`;
 const HARD_DELETE_TEAM_DETAILS = {
@@ -82,6 +83,35 @@ describe('Teams flow should work properly', () => {
     updateOwner();
   });
 
+  it('Update email of created team', () => {
+    interceptURL('PATCH', '/api/v1/teams/*', 'updateEmail');
+    interceptURL('GET', '/api/v1/teams/name/*', 'getTeam');
+
+    // Clicking on created team
+    cy.get(`[data-row-key="${TEAM_DETAILS.name}"]`)
+      .contains(TEAM_DETAILS.name)
+      .click();
+    verifyResponseStatusCode('@getUserDetails', 200);
+    verifyResponseStatusCode('@getTeam', 200);
+
+    cy.get('[data-testid="edit-email"]').should('be.visible').click();
+    cy.get('[data-testid="email-input"]')
+      .should('be.visible')
+      .clear()
+      .type(TEAM_DETAILS.updatedEmail);
+
+    cy.get('[data-testid="save-edit-email"]').should('be.visible').click();
+
+    verifyResponseStatusCode('@updateEmail', 200);
+
+    cy.reload();
+
+    // check for updated email
+    cy.get('[data-testid="email-value"]')
+      .should('be.visible')
+      .contains(TEAM_DETAILS.updatedEmail);
+  });
+
   it('Add user to created team', () => {
     interceptURL('GET', '/api/v1/users?&isBot=false&limit=15', 'getUsers');
     interceptURL('PATCH', '/api/v1/teams/*', 'updateTeam');

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

@@ -16,6 +16,7 @@ import {
   Button,
   Col,
   Dropdown,
+  Input,
   Modal,
   Row,
   Space,
@@ -205,6 +206,8 @@ const TeamDetailsV1 = ({
     useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
   const [isModalLoading, setIsModalLoading] = useState<boolean>(false);
   const [showActions, setShowActions] = useState<boolean>(false);
+  const [email, setEmail] = useState<string>(currentTeam.email || '');
+  const [isEmailEdit, setIsEmailEdit] = useState<boolean>(false);
 
   const addPolicy = t('label.add-entity', {
     entity: t('label.policy'),
@@ -589,6 +592,18 @@ const TeamDetailsV1 = ({
     }
   };
 
+  const handleUpdateEmail = () => {
+    if (currentTeam) {
+      const updatedData: Team = {
+        ...currentTeam,
+        email,
+      };
+
+      updateTeamHandler(updatedData);
+      setIsEmailEdit(false);
+    }
+  };
+
   const fetchPermissions = async () => {
     setLoading(true);
     try {
@@ -965,7 +980,7 @@ const TeamDetailsV1 = ({
 
   const getTeamHeading = () => {
     return (
-      <div className="tw-heading tw-text-link tw-text-base tw-mb-2">
+      <div className="tw-text-link tw-text-base">
         {isHeadingEditing ? (
           <div className="tw-flex tw-items-center tw-gap-1">
             <input
@@ -1037,6 +1052,66 @@ const TeamDetailsV1 = ({
     );
   };
 
+  const emailElement = (
+    <Space className="m-b-xs">
+      {isEmailEdit ? (
+        <Space>
+          <Input
+            className="w-64"
+            data-testid="email-input"
+            placeholder={t('label.enter-entity', {
+              entity: t('label.email-lowercase'),
+            })}
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <Button
+            className="h-8 p-x-xss"
+            data-testid="cancel-edit-email"
+            size="small"
+            type="primary"
+            onClick={() => setIsEmailEdit(false)}>
+            <CloseOutlined />
+          </Button>
+          <Button
+            className="h-8 p-x-xss"
+            data-testid="save-edit-email"
+            size="small"
+            type="primary"
+            onClick={handleUpdateEmail}>
+            <CheckOutlined />
+          </Button>
+        </Space>
+      ) : (
+        <>
+          <Typography.Text data-testid="email-value">
+            {currentTeam.email ||
+              t('label.no-entity', { entity: t('label.email') })}
+          </Typography.Text>
+          <Tooltip
+            placement="bottomLeft"
+            title={
+              entityPermissions.EditAll
+                ? t('label.edit-entity', {
+                    entity: t('label.email'),
+                  })
+                : t('message.no-permission-for-action')
+            }>
+            <Button
+              data-testid="edit-email"
+              disabled={!entityPermissions.EditAll}
+              icon={<IconEdit height={16} width={16} />}
+              size="small"
+              type="text"
+              onClick={() => setIsEmailEdit(true)}
+            />
+          </Tooltip>
+        </>
+      )}
+    </Space>
+  );
+
   const viewPermission =
     entityPermissions.ViewAll || entityPermissions.ViewBasic;
 
@@ -1109,6 +1184,7 @@ const TeamDetailsV1 = ({
               </Dropdown>
             )}
           </div>
+          {emailElement}
           <Space size={0}>
             {extraInfo.map((info, index) => (
               <Fragment key={uniqueId()}>

openmetadata-ui/src/main/resources/ui/src/styles/components/size.less

@@ -128,6 +128,9 @@
 .w-max-256 {
   max-width: 256px;
 }
+.w-64 {
+  width: 264px;
+}
 
 .w-max-13 {
   max-width: 13rem;