From 5e828296d80b5527d0ef7a05e6a9cd3166493aa6 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Thu, 9 Dec 2021 19:15:20 +0530
Subject: [PATCH] Fix: display name issue on teams page and other miner issue
 (#1643)

---
 .../EntityInfoDrawer.component.tsx             | 18 ------------------
 .../ui/src/components/app-bar/Appbar.tsx       |  8 ++++----
 .../src/components/dropdown/DropDownList.tsx   |  6 +++++-
 .../resources/ui/src/pages/teams/index.tsx     |  5 ++---
 .../src/main/resources/ui/src/styles/temp.css  |  4 ++--
 .../main/resources/ui/src/styles/x-master.css  |  4 ++--
 6 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.component.tsx
index 4cbe3ea6e06..dd200932e86 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.component.tsx
@@ -15,7 +15,6 @@ import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { getDatabase } from '../../axiosAPIs/databaseAPI';
 import { getPipelineByFqn } from '../../axiosAPIs/pipelineAPI';
 import { getServiceById } from '../../axiosAPIs/serviceAPI';
 import { getTableDetailsByFQN } from '../../axiosAPIs/tableAPI';
@@ -91,25 +90,8 @@ const EntityInfoDrawer = ({
           'columns',
           'usageSummary',
           'tableProfile',
-          'database',
         ])
           .then((res: AxiosResponse) => {
-            getDatabase(res.data.database.id, 'service')
-              .then((resDB: AxiosResponse) => {
-                getServiceById('databaseServices', resDB.data.service?.id).then(
-                  (resService: AxiosResponse) => {
-                    setServiceType(resService.data.serviceType);
-                  }
-                );
-              })
-              .catch((err: AxiosError) => {
-                const msg = err.message;
-                showToast({
-                  variant: 'error',
-                  body:
-                    msg ?? `Error while getting ${selectedNode.name} details`,
-                });
-              });
             setEntityDetail(res.data);
             setIsLoading(false);
           })
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
index 5bfa1bb0a8e..14be62a9a20 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
@@ -163,7 +163,7 @@ const Appbar: React.FC = (): JSX.Element => {
   return (
     <>
       {isAuthenticatedRoute && isSignedIn ? (
-        <div className="tw-h-14 tw-py-2 tw-px-5 tw-border-b-2 tw-border-separator">
+        <div className="tw-h-16 tw-py-3 tw-px-5 tw-border-b-2 tw-border-separator">
           <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap">
             <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap">
               <NavLink id="openmetadata_logo" to="/">
@@ -196,12 +196,12 @@ const Appbar: React.FC = (): JSX.Element => {
               data-testid="appbar-item">
               <SVGIcons
                 alt="icon-search"
-                className="tw-absolute tw-block tw-z-10 tw-w-4 tw-h-4 tw-right-2.5 tw-top-2 tw-leading-8 tw-text-center tw-pointer-events-none"
+                className="tw-absolute tw-block tw-z-10 tw-w-4 tw-h-4 tw-right-2.5 tw-top-2.5 tw-leading-8 tw-text-center tw-pointer-events-none"
                 icon="icon-searchv1"
               />
               <input
                 autoComplete="off"
-                className="tw-relative search-grey tw-rounded tw-border tw-border-main focus:tw-outline-none tw-pl-2 tw-py-1 tw-form-inputs"
+                className="tw-relative search-grey tw-rounded tw-border tw-border-main focus:tw-outline-none tw-pl-2 tw-pt-2 tw-pb-1.5 tw-form-inputs"
                 data-testid="searchBox"
                 id="searchBox"
                 placeholder="Search for Table, Topics, Dashboards and Pipeline"
@@ -253,7 +253,7 @@ const Appbar: React.FC = (): JSX.Element => {
                 onClick={openModal}>
                 <SVGIcons
                   alt="Doc icon"
-                  className="tw-align-middle tw--mt-0.5 tw-mr-1"
+                  className="tw-align-middle tw-mr-1"
                   icon={Icons.WHATS_NEW}
                   width="16"
                 />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
index 70c2affddb6..b9e705b784c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
@@ -173,7 +173,11 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
                       key={index}
                       onClick={() => setActiveTab(index + 1)}>
                       {grp}
-                      {getCountBadge(getSearchedListByGroup(grp).length)}
+                      {getCountBadge(
+                        getSearchedListByGroup(grp).length,
+                        '',
+                        activeTab === index + 1
+                      )}
                     </button>
                   );
                 })}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
index 9808abd0a4f..2a99c8f5238 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
@@ -41,7 +41,6 @@ import { Team } from '../../generated/entity/teams/team';
 import { User } from '../../generated/entity/teams/user';
 import { useAuth } from '../../hooks/authHooks';
 import { UserTeam } from '../../interface/team.interface';
-import { getNameFromEmail } from '../../utils/AuthProvider.util';
 import { getCountBadge } from '../../utils/CommonUtils';
 import SVGIcons from '../../utils/SvgUtils';
 import AddUsersModal from './AddUsersModal';
@@ -215,7 +214,7 @@ const TeamsPage = () => {
           {currentTeam?.users?.map((user, index) => {
             const User = {
               description: user.displayName || user.name || '',
-              name: getNameFromEmail(user.name || '') || '',
+              name: user.name || '',
               id: user.id,
             };
 
@@ -346,7 +345,7 @@ const TeamsPage = () => {
           description: user.displayName || '',
           id: user.id,
           href: user.href,
-          name: getNameFromEmail(user.name),
+          name: user.name || '',
           type: 'user',
         };
       });
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
index 8e56b1878d1..aa7fee74953 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
@@ -392,9 +392,9 @@
 /* side-panel */
 .side-panel {
   position: fixed;
-  top: 56px;
+  top: 64px;
   width: 275px;
-  height: calc(100vh - 56px);
+  height: calc(100vh - 70px);
   padding: 15px;
   background-color: #fff;
   /* border-right: 1px solid #d1cfc7; */
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
index 2dfd356b644..83fbe8e5d96 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
@@ -281,7 +281,7 @@ a:focus {
   flex-wrap: nowrap;
   align-content: flex-start;
   position: relative;
-  height: calc(100% - 61px);
+  height: calc(100% - 70px);
   overflow-y: auto;
   padding: 15px 0 0;
   box-shadow: 0 -5px 5px -5px #d1cfc7;
@@ -738,7 +738,7 @@ body .profiler-graph .recharts-active-dot circle {
   flex-wrap: nowrap;
   align-content: flex-start;
   position: relative;
-  height: calc(100% - 61px);
+  height: calc(100% - 70px);
   overflow-y: hidden;
 }