From f4ebfbbfc679a0c77933e83b43d5d2be69d52954 Mon Sep 17 00:00:00 2001
From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:30:37 +0530
Subject: [PATCH] fix(ui): hide email if not present in the data (#15927)

---
 .../UserProfileDetails.component.tsx          | 30 +++++++++++--------
 .../UserProfileDetails.test.tsx               | 16 ++++++++++
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx
index 237c8216e50..22586328c89 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx
@@ -223,19 +223,25 @@ const UserProfileDetails = ({
   };
 
   const userEmailRender = useMemo(
-    () => (
-      <Space align="center">
-        <Typography.Text
-          className="text-grey-muted"
-          data-testid="user-email-label">{`${t(
-          'label.email'
-        )} :`}</Typography.Text>
+    () =>
+      userData.email && (
+        <>
+          <Space align="center">
+            <Typography.Text
+              className="text-grey-muted"
+              data-testid="user-email-label">{`${t(
+              'label.email'
+            )} :`}</Typography.Text>
 
-        <Typography.Paragraph className="m-b-0" data-testid="user-email-value">
-          {userData.email}
-        </Typography.Paragraph>
-      </Space>
-    ),
+            <Typography.Paragraph
+              className="m-b-0"
+              data-testid="user-email-value">
+              {userData.email}
+            </Typography.Paragraph>
+          </Space>
+          <Divider type="vertical" />
+        </>
+      ),
     [userData.email]
   );
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.test.tsx
index 1036c315882..1eca8e63a97 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.test.tsx
@@ -263,4 +263,20 @@ describe('Test User Profile Details Component', () => {
       'defaultPersona'
     );
   });
+
+  it('should not render if not present', async () => {
+    render(
+      <UserProfileDetails
+        {...mockPropsData}
+        userData={{ ...USER_DATA, email: '' }}
+      />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+
+    // user email
+    expect(screen.queryByTestId('user-email-label')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('user-email-value')).not.toBeInTheDocument();
+  });
 });