Fix #7475 Sandbox - Database Service Update Owner shows only limited users (#7595)

* Fix #7475 Sandbox - Database Service Update Owner shows only limited users

* Fix typescript error

* Fix failing cypress tests

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/EntityDetails.spec.js

@@ -127,8 +127,7 @@ describe('Entity Details Page', () => {
     cy.get(`[data-testid="${value.entity}-tab"]`).should('be.visible').click();
     cy.get(`[data-testid="${value.entity}-tab"]`)
       .should('be.visible')
-      .should('have.class', 'active')
+      .should('have.class', 'active');
-      .click();
 
     interceptURL('GET', '/api/v1/feed*', 'getEntityDetails');
 

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Teams.spec.js

@@ -200,18 +200,23 @@ describe('Teams flow should work properly', () => {
       .type(TEAM_DETAILS.updatedname);
 
     interceptURL('PATCH', 'api/v1/teams/*', 'saveTeamName');
-    interceptURL('GET', '/api/v1/users*', 'updatedTeam');
+    interceptURL(
+      'GET',
+      `api/v1/users?fields=teams,roles&team=${TEAM_DETAILS.name}&limit=15`,
+      'getTeam'
+    );
     //Save the updated display name
     cy.get('[data-testid="saveAssociatedTag"]')
       .should('exist')
       .should('be.visible')
       .click();
-    verifyResponseStatusCode('@saveTeamName', 200);
+
     //Validate the updated display name
-    cy.get('[data-testid="header"]')
+    cy.get('[data-testid="team-heading"]').then(($el) => {
-      .find('.ant-typography')
+      cy.wrap($el).should('have.text', TEAM_DETAILS.updatedname);
-      .should('contain', TEAM_DETAILS.updatedname);
+    });
-    verifyResponseStatusCode('@updatedTeam', 200);
+    verifyResponseStatusCode('@saveTeamName', 200);
+    verifyResponseStatusCode('@getTeam', 200);
 
     //Click on edit description button
     cy.get('[data-testid="edit-description"]').should('be.visible').click();

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

@@ -1,5 +1,5 @@
 import { AxiosError } from 'axios';
-import { debounce, isEqual } from 'lodash';
+import { debounce, isEqual, lowerCase } from 'lodash';
 import { Status } from 'Models';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { default as AppState, default as appState } from '../../../AppState';
@@ -66,6 +66,9 @@ const OwnerWidgetWrapper = ({
     ];
   }, [appState.users, appState.userDetails]);
 
+  const [totalUsersCount, setTotalUsersCount] = useState<number>(0);
+  const [totalTeamsCount, setTotalTeamsCount] = useState<number>(0);
+
   const fetchGroupTypeTeams = async () => {
     try {
       if (listOwners.length === 0) {
@@ -76,6 +79,8 @@ const OwnerWidgetWrapper = ({
           group: 'Teams',
           type: 'team',
         }));
+        // set team count for logged in user
+        setTotalTeamsCount(data.length);
         setListOwners([...updatedData, ...userDetails]);
       }
     } catch (error) {
@@ -90,7 +95,10 @@ const OwnerWidgetWrapper = ({
       setIsUserLoading(true);
       searchFormattedUsersAndTeams(searchQuery, from)
         .then((res) => {
-          const { users, teams } = res;
+          const { users, teams, teamsTotal, usersTotal } = res;
+          // set team and user count for admin user
+          setTotalTeamsCount(teamsTotal ?? 0);
+          setTotalUsersCount(usersTotal ?? 0);
           setListOwners(getOwnerList(users, teams));
         })
         .catch(() => {
@@ -149,6 +157,22 @@ const OwnerWidgetWrapper = ({
     debounceOnSearch(text);
   };
 
+  /**
+   *
+   * @param groupName users|teams
+   * @returns total count for respective group
+   */
+  const handleTotalCountForGroup = (groupName: string) => {
+    if (lowerCase(groupName) === 'users') {
+      // if user is admin return total user count otherwise return 1
+      return isAdminUser ? totalUsersCount : 1;
+    } else if (lowerCase(groupName) === 'teams') {
+      return totalTeamsCount;
+    } else {
+      return 0;
+    }
+  };
+
   useEffect(() => {
     if (visible) {
       if (isAuthDisabled || !isAdminUser) {
@@ -186,8 +210,11 @@ const OwnerWidgetWrapper = ({
 
   return visible ? (
     <DropDownList
+      showEmptyList
       className="edit-owner-dropdown"
+      controlledSearchStr={searchText}
       dropDownList={listOwners}
+      getTotalCountForGroup={handleTotalCountForGroup}
       groupType="tab"
       isLoading={isUserLoading}
       listGroups={getOwnerGroup()}

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

@@ -14,9 +14,11 @@
 import classNames from 'classnames';
 import { isNil, isUndefined, toLower } from 'lodash';
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
+import { SIZE } from '../../enums/common.enum';
 import { useWindowDimensions } from '../../hooks/useWindowDimensions';
 import { getCountBadge } from '../../utils/CommonUtils';
 import { getTopPosition } from '../../utils/DropDownUtils';
+import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
 import { UserTag } from '../common/UserTag/UserTag.component';
 import Loader from '../Loader/Loader';
 import { DropDownListItem, DropDownListProp } from './types';
@@ -76,9 +78,11 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
       <div
         className="tw-text-grey-muted tw-px-4 tw-py-2"
         data-testid="empty-list">
-        <p className={widthClass}>
+        <div className={widthClass}>
+          <ErrorPlaceHolder classes="tw-mt-0" size={SIZE.SMALL}>
             {searchText ? 'No match found' : 'No data available'}
-        </p>
+          </ErrorPlaceHolder>
+        </div>
       </div>
     );
   };

openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts

@@ -259,6 +259,8 @@ declare module 'Models' {
   export type SearchedUsersAndTeams = {
     users: FormattedUsersData[];
     teams: FormattedTeamsData[];
+    usersTotal?: number;
+    teamsTotal?: number;
   };
 
   export type TagOption = {

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

@@ -171,7 +171,15 @@ export const searchFormattedUsersAndTeams = (
             resTeams.status === SettledStatus.FULFILLED
               ? formatTeamsResponse(resTeams.value.data.hits.hits)
               : [];
-          resolve({ users, teams });
+          const usersTotal =
+            resUsers.status === SettledStatus.FULFILLED
+              ? resUsers.value.data.hits.total.value
+              : 0;
+          const teamsTotal =
+            resTeams.status === SettledStatus.FULFILLED
+              ? resTeams.value.data.hits.total.value
+              : 0;
+          resolve({ users, teams, usersTotal, teamsTotal });
         }
       )
       .catch((err: AxiosError) => {