Fix issue 6105 (#6156)

* fix(ui): teams & user page layout fixes
Fixed - filters not added for User profile page
Fix issue for longer text
Fix all the teams not showing up

* update team selectable

* revert getUserSuggestions function

* fix elipsis issue

* fix lint issue

* address comments

openmetadata-ui/src/main/resources/ui/src/axiosAPIs/miscAPI.ts

@@ -143,6 +143,20 @@ export const getUserSuggestions: Function = (
 
   return APIClient.get(`/search/suggest`, { params });
 };
+
+export const getTeamsByQuery = async (params: {
+  q: string;
+  from?: number;
+  size?: number;
+  isJoinable?: boolean;
+}) => {
+  const response = await APIClient.get(`/search/query`, {
+    params: { index: SearchIndex.TEAM, ...params },
+  });
+
+  return response.data;
+};
+
 export const getTagSuggestions: Function = (
   term: string
 ): Promise<AxiosResponse> => {

openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx

@@ -18,6 +18,7 @@ import { Link } from 'react-router-dom';
 import { EntityReference } from '../../generated/type/entityReference';
 import { getEntityName } from '../../utils/CommonUtils';
 import { getEntityIcon, getEntityLink } from '../../utils/TableUtils';
+import Ellipses from '../common/Ellipses/Ellipses';
 import { leftPanelAntCardStyle } from '../containers/PageLayout';
 interface Prop {
   entityList: Array<FormattedTableData>;
@@ -113,7 +114,9 @@ export const EntityListWithAntd: FunctionComponent<AntdEntityListProp> = ({
                       className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
                       title={getEntityName(item as unknown as EntityReference)}
                       type="text">
-                      {getEntityName(item as unknown as EntityReference)}
+                      <Ellipses className="tw-w-48 tw-text-left">
+                        {getEntityName(item as unknown as EntityReference)}
+                      </Ellipses>
                     </Button>
                   </Link>
                 </div>

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx

@@ -547,7 +547,7 @@ const TeamDetails = ({
           </div>
         ) : (
           <div className="tw-flex tw-group" data-testid="team-heading">
-            <Ellipses tooltip className="tw-w-120" rows={1}>
+            <Ellipses tooltip rows={1}>
               {heading}
             </Ellipses>
             {isActionAllowed() && (

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

@@ -96,18 +96,19 @@ const TeamsAndUsers = ({
       <>
         <Card
           data-testid="data-summary-container"
+          size="small"
           style={leftPanelAntCardStyle}
           title={
             <div
               className="tw-flex tw-justify-between tw-items-center"
               data-testid="add-team-container">
-              <p className="tw-heading tw-my-2">Teams</p>
+              <p className="tw-heading tw-mb-0">Teams</p>
               {hasAccess && (
                 <NonAdminAction
                   position="bottom"
                   title={TITLE_FOR_NON_ADMIN_ACTION}>
                   <Button
-                    className="tw-h-7 tw-px-2"
+                    className="tw-px-2"
                     data-testid="add-team-button"
                     size="small"
                     theme="primary"
@@ -156,16 +157,17 @@ const TeamsAndUsers = ({
         {hasAccess && (
           <Card
             data-testid="data-summary-container"
+            size="small"
             style={{ ...leftPanelAntCardStyle, marginTop: '10px' }}
             title={
               <div className="tw-flex tw-justify-between tw-items-center">
-                <p className="tw-heading tw-heading tw-my-2">All Users</p>
+                <p className="tw-heading tw-mb-0">All Users</p>
                 {hasAccess && (
                   <NonAdminAction
                     position="bottom"
                     title={TITLE_FOR_NON_ADMIN_ACTION}>
                     <Button
-                      className="tw-h-7 tw-px-2"
+                      className="tw-px-2"
                       data-testid="add-user-button"
                       size="small"
                       theme="primary"

openmetadata-ui/src/main/resources/ui/src/components/TeamsSelectable/TeamsSelectable.tsx

@@ -14,8 +14,7 @@
 import { SelectableOption } from 'Models';
 import React, { useState } from 'react';
 import AsyncSelect from 'react-select/async';
-import { getSuggestedTeams } from '../../axiosAPIs/miscAPI';
-import { getTeams } from '../../axiosAPIs/teamsAPI';
+import { getSuggestedTeams, getTeamsByQuery } from '../../axiosAPIs/miscAPI';
 import { PAGE_SIZE } from '../../constants/constants';
 import { Team } from '../../generated/entity/teams/team';
 import { EntityReference } from '../../generated/type/entityReference';
@@ -29,9 +28,15 @@ interface CustomOption extends SelectableOption {
 
 interface Props {
   onSelectionChange: (teams: string[]) => void;
+  filterJoinable?: boolean;
+  placeholder?: string;
 }
 
-const TeamsSelectable = ({ onSelectionChange }: Props) => {
+const TeamsSelectable = ({
+  onSelectionChange,
+  filterJoinable,
+  placeholder = 'Start typing the name of team...',
+}: Props) => {
   const [teamSearchText, setTeamSearchText] = useState<string>('');
 
   const handleSelectionChange = (selectedOptions: SelectableOption[]) => {
@@ -39,12 +44,14 @@ const TeamsSelectable = ({ onSelectionChange }: Props) => {
   };
 
   const getOptions = (teams: Team[]) => {
-    return teams
-      .filter((team) => team.isJoinable)
-      .map((team) => ({
-        label: getEntityName(team as EntityReference),
-        value: team.id,
-      }));
+    const filteredTeams = filterJoinable
+      ? teams.filter((team) => team.isJoinable)
+      : teams;
+
+    return filteredTeams.map((team) => ({
+      label: getEntityName(team as EntityReference),
+      value: team.id,
+    }));
   };
 
   const loadOptions = (text: string) => {
@@ -57,8 +64,14 @@ const TeamsSelectable = ({ onSelectionChange }: Props) => {
           resolve(getOptions(teams));
         });
       } else {
-        getTeams('', PAGE_SIZE).then((res) => {
-          const teams: Team[] = res.data.data || [];
+        getTeamsByQuery({
+          q: '*',
+          from: 0,
+          size: PAGE_SIZE,
+          isJoinable: filterJoinable,
+        }).then((res) => {
+          const teams: Team[] =
+            res.hits.hits.map((t: { _source: Team }) => t._source) || [];
           resolve(getOptions(teams));
         });
       }
@@ -79,7 +92,7 @@ const TeamsSelectable = ({ onSelectionChange }: Props) => {
       isOptionDisabled={(option) => !!(option as CustomOption).isDisabled}
       loadOptions={loadOptions}
       maxMenuHeight={200}
-      placeholder="Teams..."
+      placeholder={placeholder}
       styles={reactSingleSelectCustomStyle}
       onChange={(value) => handleSelectionChange(value as SelectableOption[])}
       onInputChange={(newText) => {

openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.component.tsx

@@ -141,7 +141,7 @@ const UserPage = () => {
           setIsFeedLoading(false);
         });
     },
-    [taskStatus]
+    [taskStatus, userData]
   );
 
   const handleFeedFetchFromFeedList = useCallback(

openmetadata-ui/src/main/resources/ui/src/pages/signup/index.tsx

@@ -220,7 +220,10 @@ const Signup = () => {
                     <label className="tw-block tw-text-body tw-text-grey-body tw-mb-2">
                       Select teams
                     </label>
-                    <TeamsSelectable onSelectionChange={setSelectedTeams} />
+                    <TeamsSelectable
+                      filterJoinable
+                      onSelectionChange={setSelectedTeams}
+                    />
 
                     {countTeams === 0 ? (
                       <div

openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx

@@ -407,6 +407,7 @@ const TagsPage = () => {
     return (
       <Card
         data-testid="data-summary-container"
+        size="small"
         style={leftPanelAntCardStyle}
         title={
           <div className="tw-flex tw-justify-between tw-items-center">
@@ -419,7 +420,7 @@ const TagsPage = () => {
               position="bottom"
               title={TITLE_FOR_NON_ADMIN_ACTION}>
               <Button
-                className={classNames('tw-h-7 tw-px-2 tw-my-2', {
+                className={classNames('tw-px-2 ', {
                   'tw-opacity-40': !isAdminUser && !isAuthDisabled,
                 })}
                 data-testid="add-category"