fix(ui): owner search issue and show total count on load (#5932)

openmetadata-ui/src/main/resources/ui/src/components/ManageTab/ManageTab.component.tsx

@@ -180,13 +180,11 @@ const ManageTab: FunctionComponent<ManageProps> = ({
   const getOwnerSuggestion = useCallback(
     (qSearchText = '') => {
       setIsUserLoading(true);
+      setListOwners([]);
       suggestFormattedUsersAndTeams(qSearchText)
         .then((res) => {
           const { users, teams } = res;
-          setListOwners(getOwnerList(users, teams));
+          setListOwners(getOwnerList(users, teams, true));
-        })
-        .catch(() => {
-          setListOwners([]);
         })
         .finally(() => {
           setIsUserLoading(false);

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerWidget/OwnerWidget.tsx

@@ -12,15 +12,20 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { isUndefined, lowerCase } from 'lodash';
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
+import { getTeams } from '../../../axiosAPIs/teamsAPI';
+import { getUsers } from '../../../axiosAPIs/userAPI';
 import { ADMIN_ONLY_ACCESSIBLE_SECTION } from '../../../enums/common.enum';
 import { Operation } from '../../../generated/entity/policies/policy';
 import { EntityReference } from '../../../generated/type/entityReference';
 import { useAuth } from '../../../hooks/authHooks';
+import jsonData from '../../../jsons/en';
 import { hasEditAccess } from '../../../utils/CommonUtils';
 import { getTitleCase } from '../../../utils/EntityUtils';
+import { showErrorToast } from '../../../utils/ToastUtils';
 import { isCurrentUserAdmin } from '../../../utils/UserDataUtils';
 import { Button } from '../../buttons/Button/Button';
 import DropDownList from '../../dropdown/DropDownList';
@@ -78,11 +83,50 @@ const OwnerWidget = ({
   handleSearchOwnerDropdown,
 }: OwnerWidgetProps) => {
   const { userPermissions, isAdminUser } = useAuth();
-
+  const [totalUsersCount, setTotalUsersCount] = useState<number>(0);
+  const [totalTeamsCount, setTotalTeamsCount] = useState<number>(0);
   const getOwnerGroup = () => {
     return allowTeamOwner ? ['Teams', 'Users'] : ['Users'];
   };
 
+  const fetchTeamsAndUsersCount = () => {
+    getUsers('', 0)
+      .then((res) => {
+        if (res.data) {
+          setTotalUsersCount(res.data.paging.total);
+        } else {
+          throw jsonData['api-error-messages']['unexpected-server-response'];
+        }
+      })
+      .catch((err: AxiosError) => {
+        showErrorToast(
+          err,
+          jsonData['api-error-messages']['unexpected-server-response']
+        );
+        setTotalTeamsCount(0);
+      });
+
+    getTeams('', 0)
+      .then((res) => {
+        if (res.data) {
+          setTotalTeamsCount(res.data.paging.total);
+        } else {
+          throw jsonData['api-error-messages']['unexpected-server-response'];
+        }
+      })
+      .catch((err: AxiosError) => {
+        showErrorToast(
+          err,
+          jsonData['api-error-messages']['unexpected-server-response']
+        );
+        setTotalTeamsCount(0);
+      });
+  };
+
+  useEffect(() => {
+    fetchTeamsAndUsersCount();
+  }, []);
+
   const getOwnerUpdateLoader = () => {
     switch (statusOwner) {
       case 'waiting':
@@ -128,6 +172,16 @@ const OwnerWidget = ({
       ? 'The owner of the team can manage the team by adding or removing users. Add or update Team ownership here'
       : `Add or update ${getTitleCase(entityType)} ownership here`;
 
+  const handleTotalCountForGroup = (groupName: string) => {
+    if (lowerCase(groupName) === 'users') {
+      return totalUsersCount;
+    } else if (lowerCase(groupName) === 'teams') {
+      return totalTeamsCount;
+    } else {
+      return 0;
+    }
+  };
+
   return (
     <Fragment>
       <div className="tw-mt-1 tw-bg-white">
@@ -177,6 +231,7 @@ const OwnerWidget = ({
                   showEmptyList
                   controlledSearchStr={ownerSearchText}
                   dropDownList={listOwners}
+                  getTotalCountForGroup={handleTotalCountForGroup}
                   groupType="tab"
                   isLoading={isListLoading}
                   listGroups={getOwnerGroup()}

openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx

@@ -36,6 +36,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
   domPosition,
   className = '',
   widthClass = 'tw-w-52',
+  getTotalCountForGroup,
 }: DropDownListProp) => {
   const { height: windowHeight } = useWindowDimensions();
   const isMounted = useRef<boolean>(false);
@@ -89,6 +90,17 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
     });
   };
 
+  const getGroupCount = (groupName?: string): number => {
+    let count = 0;
+    if (controlledSearchStr === '' && getTotalCountForGroup && groupName) {
+      count = getTotalCountForGroup(groupName);
+    } else {
+      count = getSearchedListByGroup(groupName)?.length;
+    }
+
+    return count;
+  };
+
   const getDropDownElement = (item: DropDownListItem, index: number) => {
     return (
       <div
@@ -278,7 +290,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
                         onClick={() => setActiveTab(index + 1)}>
                         {grp}
                         {getCountBadge(
-                          getSearchedListByGroup(grp).length,
+                          getGroupCount(grp),
                           '',
                           activeTab === index + 1
                         )}

openmetadata-ui/src/main/resources/ui/src/components/dropdown/types.ts

@@ -59,6 +59,7 @@ export type DropDownListProp = {
   domPosition?: DOMRect;
   isLoading?: boolean;
   widthClass?: string;
+  getTotalCountForGroup?: (groupName: string) => number;
 };
 
 export type DropDownProp = {

openmetadata-ui/src/main/resources/ui/src/utils/ManageUtils.ts

@@ -16,9 +16,16 @@ import AppState from '../AppState';
 import { EntityReference } from '../generated/type/entityUsage';
 import { getEntityName } from './CommonUtils';
 
+/**
+ * @param listUsers - List of users
+ * @param listTeams - List of teams
+ * @param excludeCurrentUser - Wether to exclude current user to be on list. Needed when calls from searching
+ * @returns List of user or team
+ */
 export const getOwnerList = (
   listUsers?: FormattedUsersData[],
-  listTeams?: FormattedTeamsData[]
+  listTeams?: FormattedTeamsData[],
+  excludeCurrentUser?: boolean
 ) => {
   const userDetails = AppState.getCurrentUserDetails();
 
@@ -47,17 +54,21 @@ export const getOwnerList = (
     }));
 
     return [
-      {
+      ...(!excludeCurrentUser
-        name: getEntityName(userDetails as unknown as EntityReference),
+        ? [
-        value: userDetails.id,
+            {
-        group: 'Users',
+              name: getEntityName(userDetails as unknown as EntityReference),
-        type: 'user',
+              value: userDetails.id,
-      },
+              group: 'Users',
+              type: 'user',
+            },
+          ]
+        : []),
       ...users,
       ...teams,
     ];
   } else {
-    return userDetails
+    return userDetails && !excludeCurrentUser
       ? [
           {
             name: getEntityName(userDetails as unknown as EntityReference),