From 5bc73ced2842bdee1cf99f1d8d7ce2bbb788e99b Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 3 Dec 2021 20:57:26 +0530
Subject: [PATCH] Fix #1537 UI : Remove search from service page and reposition
 Add service with different service tabs. (#1538)

* Fix #1537 UI : Remove search from service page and reposition Add service with different service tabs.

* Fixed name overflow issue on user card.
---
 .../resources/ui/src/pages/services/index.tsx | 48 +++++++++----------
 .../resources/ui/src/pages/teams/index.tsx    |  5 +-
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
index a08e63cc5cc..4d1a48102ca 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
@@ -13,7 +13,7 @@
 
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
-import { isNil, isNull, lowerCase } from 'lodash';
+import { isNil, isNull } from 'lodash';
 import { Paging, ServiceCollection, ServiceData, ServiceTypes } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -28,7 +28,6 @@ import { Button } from '../../components/buttons/Button/Button';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
-import Searchbar from '../../components/common/searchbar/Searchbar';
 import PageContainer from '../../components/containers/PageContainer';
 import Loader from '../../components/Loader/Loader';
 import {
@@ -169,17 +168,7 @@ const ServicesPage = () => {
       );
     }
   };
-  const handleSearchAction = (searchValue: string) => {
-    setSearchText(searchValue);
-    const curServ = services[serviceName];
-    const updatedResult = (curServ as unknown as Array<ServiceDataObj>).filter(
-      (serv) =>
-        lowerCase(serv.description)?.includes(lowerCase(searchValue)) ||
-        lowerCase(serv.name)?.includes(lowerCase(searchValue))
-    );
-    setServiceList(updatedResult);
-    setServicesCount({ ...servicesCount, [serviceName]: updatedResult.length });
-  };
+
   const handleAddService = () => {
     setEditData(undefined);
     setIsModalOpen(true);
@@ -480,19 +469,28 @@ const ServicesPage = () => {
                     )}
                   </button>
                 ))}
+                <div className="tw-self-end tw-ml-auto">
+                  {serviceList.length > 0 ? (
+                    <NonAdminAction
+                      position="bottom"
+                      title={TITLE_FOR_NON_ADMIN_ACTION}>
+                      <Button
+                        className={classNames('tw-h-8 tw-rounded tw-mb-2', {
+                          'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+                        })}
+                        data-testid="add-new-user-button"
+                        size="small"
+                        theme="primary"
+                        variant="contained"
+                        onClick={() => handleAddService()}>
+                        Add New Service
+                      </Button>
+                    </NonAdminAction>
+                  ) : null}
+                </div>
               </nav>
             </div>
-            <div className="tw-flex">
-              <div className="tw-w-4/12">
-                {searchText || serviceList.length > 0 ? (
-                  <Searchbar
-                    placeholder={`Search for ${servicesDisplayName[serviceName]}...`}
-                    searchValue={searchText}
-                    typingInterval={100}
-                    onSearch={handleSearchAction}
-                  />
-                ) : null}
-              </div>
+            {/* <div className="tw-flex">
               <div className="tw-w-8/12 tw-flex tw-justify-end">
                 {serviceList.length > 0 ? (
                   <NonAdminAction
@@ -512,7 +510,7 @@ const ServicesPage = () => {
                   </NonAdminAction>
                 ) : null}
               </div>
-            </div>
+            </div> */}
             {serviceList.length ? (
               <div
                 className="tw-grid tw-grid-cols-4 tw-gap-4 tw-mb-4"
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 ebe857adb12..2ecfd1ca158 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,6 +41,7 @@ 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';
@@ -214,7 +215,7 @@ const TeamsPage = () => {
           {currentTeam?.users?.map((user, index) => {
             const User = {
               description: user.displayName || user.name || '',
-              name: user.name || '',
+              name: getNameFromEmail(user.name || '') || '',
               id: user.id,
             };
 
@@ -345,7 +346,7 @@ const TeamsPage = () => {
           description: user.displayName || '',
           id: user.id,
           href: user.href,
-          name: user.name,
+          name: getNameFromEmail(user.name),
           type: 'user',
         };
       });