From 8607d30b1e5622732cea83de3aad0a58ce1df407 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Tue, 9 May 2023 10:21:46 +0530 Subject: [PATCH] ui: feedback 1.0.1 part 2 (#11482) * ui: feedback 1.0.1 part 2 * miner fix * fixed code smell bug --- .../UserTeamSelectableList.component.tsx | 72 +++++++++++-------- .../src/pages/TasksPage/shared/Assignees.tsx | 63 +++++++++++----- 2 files changed, 91 insertions(+), 44 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx index 29c6ecfcc6f..64cd430db6c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx @@ -13,13 +13,12 @@ import { Button, Popover, Space, Tabs, Tooltip, Typography } from 'antd'; import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg'; import { WILD_CARD_CHAR } from 'constants/char.constants'; -import { PAGE_SIZE_MEDIUM, pagingObject } from 'constants/constants'; +import { PAGE_SIZE_MEDIUM } from 'constants/constants'; import { NO_PERMISSION_FOR_ACTION } from 'constants/HelperTextUtil'; import { EntityType } from 'enums/entity.enum'; import { SearchIndex } from 'enums/search.enum'; import { EntityReference } from 'generated/entity/data/table'; -import { Paging } from 'generated/type/paging'; -import { isEmpty, isEqual, noop, toString } from 'lodash'; +import { isEmpty, noop, toString } from 'lodash'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { searchData } from 'rest/miscAPI'; @@ -35,6 +34,15 @@ import { SelectableList } from '../SelectableList/SelectableList.component'; import './user-team-selectable-list.less'; import { UserSelectDropdownProps } from './UserTeamSelectableList.interface'; +export const TeamListItemRenderer = (props: EntityReference) => { + return ( + + + {getEntityName(props)} + + ); +}; + export const UserTeamSelectableList = ({ hasPermission, owner, @@ -43,9 +51,8 @@ export const UserTeamSelectableList = ({ }: UserSelectDropdownProps) => { const { t } = useTranslation(); const [popupVisible, setPopupVisible] = useState(false); - const [userPaging, setUserPaging] = useState(pagingObject); - const [teamPaging, setTeamPaging] = useState(pagingObject); const [activeTab, setActiveTab] = useState<'teams' | 'users'>('teams'); + const [count, setCount] = useState({ team: 0, user: 0 }); const fetchUserOptions = async (searchText: string, after?: string) => { if (searchText) { @@ -64,7 +71,7 @@ export const UserTeamSelectableList = ({ formatUsersResponse(res.data.hits.hits), EntityType.USER ); - setUserPaging({ total: res.data.hits.total.value }); + setCount((pre) => ({ ...pre, user: res.data.hits.total.value })); return { data, paging: { total: res.data.hits.total.value } }; } catch (error) { @@ -87,7 +94,8 @@ export const UserTeamSelectableList = ({ data, EntityType.USER ); - setUserPaging(paging); + + setCount((pre) => ({ ...pre, user: paging.total })); return { data: filterData, paging }; } catch (error) { @@ -116,7 +124,7 @@ export const UserTeamSelectableList = ({ EntityType.TEAM ); - setTeamPaging({ total: res.data.hits.total.value }); + setCount((pre) => ({ ...pre, team: res.data.hits.total.value })); return { data, @@ -145,10 +153,7 @@ export const UserTeamSelectableList = ({ EntityType.TEAM ); - setTeamPaging({ - total: data.hits.total.value, - after: toString(afterPage + 1), - }); + setCount((pre) => ({ ...pre, team: data.hits.total.value })); return { data: filterData, @@ -189,14 +194,34 @@ export const UserTeamSelectableList = ({ SearchIndex.USER ); - setUserPaging({ total: res.data.hits.total.value }); + setCount((pre) => ({ ...pre, user: res.data.hits.total.value })); + }; + const getTeamCount = async () => { + const res = await searchData( + '', + 1, + 0, + 'teamType:Group', + '', + '', + SearchIndex.TEAM + ); + + setCount((pre) => ({ ...pre, team: res.data.hits.total.value })); }; - // To pre-cache user total count - useEffect(() => { - if (popupVisible && isEqual(userPaging, pagingObject)) { - getUserCount(); + const fetchCount = async () => { + if (popupVisible) { + if (owner?.type === EntityType.USER) { + await getTeamCount(); + } else { + await getUserCount(); + } } + }; + + useEffect(() => { + fetchCount(); }, [popupVisible]); useEffect(() => { @@ -221,7 +246,7 @@ export const UserTeamSelectableList = ({ label: ( <> {t('label.team-plural')}{' '} - {getCountBadge(teamPaging.total, '', activeTab === 'teams')} + {getCountBadge(count.team, '', activeTab === 'teams')} ), key: 'teams', @@ -242,7 +267,7 @@ export const UserTeamSelectableList = ({ label: ( <> {t('label.user-plural')} - {getCountBadge(userPaging.total, '', activeTab === 'users')} + {getCountBadge(count.user, '', activeTab === 'users')} ), key: 'users', @@ -289,12 +314,3 @@ export const UserTeamSelectableList = ({ ); }; - -export const TeamListItemRenderer = (props: EntityReference) => { - return ( - - - {getEntityName(props)} - - ); -}; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx index edc1ec8d378..17b70708b66 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx @@ -11,10 +11,13 @@ * limitations under the License. */ -import { Select } from 'antd'; +import { Select, Space, Typography } from 'antd'; +import { ReactComponent as TeamIcon } from 'assets/svg/teams-grey.svg'; import { UserTag } from 'components/common/UserTag/UserTag.component'; +import { OwnerType } from 'enums/user.enum'; import { t } from 'i18next'; -import React, { FC } from 'react'; +import { groupBy, isUndefined } from 'lodash'; +import React, { FC, useMemo } from 'react'; import { Option } from '../TasksPage.interface'; import './Assignee.less'; @@ -31,18 +34,54 @@ const Assignees: FC = ({ onChange, options, }) => { - const { Option } = Select; - const handleOnChange = (_values: Option[], newOptions: Option | Option[]) => { const newValues = (newOptions as Option[]).map((option) => ({ label: option['data-label'], value: option.value, - type: option['data-usertype'], + type: option.type, })); onChange(newValues as Option[]); }; + const updatedOption = useMemo(() => { + const groupByType = groupBy(options, (d) => d.type); + const groupOptions = []; + if (!isUndefined(groupByType.team)) { + groupOptions.push({ + type: 'group', + label: 'Teams', + value: OwnerType.TEAM, + options: groupByType.team.map((team) => ({ + ...team, + label: ( + + + {team.label} + + ), + })), + }); + } + if (!isUndefined(groupByType.user)) { + groupOptions.push({ + type: 'group', + label: 'Users', + value: OwnerType.USER, + options: groupByType.user.map((user) => ({ + ...user, + label: ( +
+ +
+ ), + })), + }); + } + + return groupOptions; + }, [options]); + return ( + onSearch={onSearch} + /> ); };