From e6f11489204d9221b87691d3fb8131a84f69734e Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Thu, 20 Jan 2022 13:17:42 +0530
Subject: [PATCH] Fix: Fixing UI issue #2184 #2101 (#2302)

---
 .../ui/src/components/UserList/UserList.tsx   | 49 ++++++++++++-------
 .../ui/src/components/nav-bar/NavBar.tsx      |  8 +--
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx
index b2c339e4194..292f966550e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx
@@ -20,6 +20,7 @@ import { UserType } from '../../enums/user.enum';
 import { Team } from '../../generated/entity/teams/team';
 import { User } from '../../generated/entity/teams/user';
 import { getCountBadge } from '../../utils/CommonUtils';
+import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
 import Searchbar from '../common/searchbar/Searchbar';
 import UserDetailsModal from '../Modals/UserDetailsModal/UserDetailsModal';
 import UserDataCard from '../UserDataCard/UserDataCard';
@@ -311,25 +312,35 @@ const UserList: FunctionComponent<Props> = ({
   };
 
   return (
-    <PageLayout leftPanel={getLeftPanel()}>
-      {!isLoading ? (
-        <>
-          {getTabs()}
-          {currentTab === 1 && getUserCards(UserType.ISUSER)}
-          {currentTab === 2 && getUserCards(UserType.ISADMIN)}
-          {currentTab === 3 && getUserCards(UserType.ISBOT)}
-          {!isUndefined(selectedUser) && (
-            <UserDetailsModal
-              header="User Details"
-              userData={selectedUser}
-              onCancel={() => setSelectedUser(undefined)}
-              onSave={handleSave}
-            />
-          )}
-        </>
-      ) : (
-        <Loader />
-      )}
+    <PageLayout leftPanel={allUsers.length > 0 && getLeftPanel()}>
+      <>
+        {!isLoading ? (
+          <>
+            {allUsers.length === 0 ? (
+              <ErrorPlaceHolder>
+                <p className="w-text-lg tw-text-center">No Users Added.</p>
+              </ErrorPlaceHolder>
+            ) : (
+              <>
+                {getTabs()}
+                {currentTab === 1 && getUserCards(UserType.ISUSER)}
+                {currentTab === 2 && getUserCards(UserType.ISADMIN)}
+                {currentTab === 3 && getUserCards(UserType.ISBOT)}
+                {!isUndefined(selectedUser) && (
+                  <UserDetailsModal
+                    header="User Details"
+                    userData={selectedUser}
+                    onCancel={() => setSelectedUser(undefined)}
+                    onSave={handleSave}
+                  />
+                )}
+              </>
+            )}
+          </>
+        ) : (
+          <Loader />
+        )}
+      </>
     </PageLayout>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
index 851b791e1ac..7df1e0ab68d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
@@ -55,7 +55,7 @@ const NavBar = ({
       <div className="tw-h-16 tw-py-3 tw-border-b-2 tw-border-separator">
         <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap tw-px-6 centered-layout">
           <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap">
-            <NavLink id="openmetadata_logo" to="/">
+            <NavLink className="tw-flex-shrink-0" id="openmetadata_logo" to="/">
               <SVGIcons alt="OpenMetadata Logo" icon={Icons.LOGO} width="90" />
             </NavLink>
             <div className="tw-ml-5">
@@ -121,7 +121,7 @@ const NavBar = ({
           </div>
           <div className="tw-flex tw-ml-auto tw-pl-36">
             <button
-              className="tw-nav focus:tw-no-underline hover:tw-underline"
+              className="tw-nav focus:tw-no-underline hover:tw-underline tw-flex-shrink-0"
               data-testid="whatsnew-modal"
               onClick={() => handleFeatureModal(true)}>
               <PopOver
@@ -137,7 +137,7 @@ const NavBar = ({
               </PopOver>
             </button>
             <button
-              className="tw-nav focus:tw-no-underline hover:tw-underline"
+              className="tw-nav focus:tw-no-underline hover:tw-underline tw-flex-shrink-0"
               data-testid="tour">
               <PopOver
                 position="bottom"
@@ -153,7 +153,7 @@ const NavBar = ({
                 </Link>
               </PopOver>
             </button>
-            <div>
+            <div className="tw-flex-shrink-0">
               <DropDown
                 dropDownList={supportDropdown}
                 icon={