Skip to content

Commit

Permalink
ui: feedback 1.0.1 part 2 (open-metadata#11482)
Browse files Browse the repository at this point in the history 
* ui: feedback 1.0.1 part 2

* miner fix

* fixed code smell bug
  • Loading branch information
@ShaileshParmar11
ShaileshParmar11 authored May 9, 2023
1 parent 9945974 commit 8607d30
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 44 deletions.
72 changes: 44 additions & 28 deletions ...rces/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 (
<Space>
<SVGIcons icon={Icons.TEAMS_GREY} />
<Typography.Text>{getEntityName(props)}</Typography.Text>
</Space>
);
};

export const UserTeamSelectableList = ({
hasPermission,
owner,
Expand All @@ -43,9 +51,8 @@ export const UserTeamSelectableList = ({
}: UserSelectDropdownProps) => {
const { t } = useTranslation();
const [popupVisible, setPopupVisible] = useState(false);
const [userPaging, setUserPaging] = useState<Paging>(pagingObject);
const [teamPaging, setTeamPaging] = useState<Paging>(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) {
Expand All @@ -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) {
Expand All @@ -87,7 +94,8 @@ export const UserTeamSelectableList = ({
data,
EntityType.USER
);
setUserPaging(paging);

setCount((pre) => ({ ...pre, user: paging.total }));

return { data: filterData, paging };
} catch (error) {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
);

// To pre-cache user total count
useEffect(() => {
if (popupVisible && isEqual(userPaging, pagingObject)) {
getUserCount();
setCount((pre) => ({ ...pre, team: res.data.hits.total.value }));
};

const fetchCount = async () => {
if (popupVisible) {
if (owner?.type === EntityType.USER) {
await getTeamCount();
} else {
await getUserCount();
}
}
};

useEffect(() => {
fetchCount();
}, [popupVisible]);

useEffect(() => {
Expand All @@ -221,7 +246,7 @@ export const UserTeamSelectableList = ({
label: (
<>
{t('label.team-plural')}{' '}
{getCountBadge(teamPaging.total, '', activeTab === 'teams')}
{getCountBadge(count.team, '', activeTab === 'teams')}
</>
),
key: 'teams',
Expand All @@ -242,7 +267,7 @@ export const UserTeamSelectableList = ({
label: (
<>
{t('label.user-plural')}
{getCountBadge(userPaging.total, '', activeTab === 'users')}
{getCountBadge(count.user, '', activeTab === 'users')}
</>
),
key: 'users',
Expand Down Expand Up @@ -289,12 +314,3 @@ export const UserTeamSelectableList = ({
</Popover>
);
};

export const TeamListItemRenderer = (props: EntityReference) => {
return (
<Space>
<SVGIcons icon={Icons.TEAMS_GREY} />
<Typography.Text>{getEntityName(props)}</Typography.Text>
</Space>
);
};
63 changes: 47 additions & 16 deletions openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -31,18 +34,54 @@ const Assignees: FC<Props> = ({
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: (
<Space data-testid="assignee-option" key={team.value}>
<TeamIcon height={16} width={16} />
<Typography.Text>{team.label}</Typography.Text>
</Space>
),
})),
});
}
if (!isUndefined(groupByType.user)) {
groupOptions.push({
type: 'group',
label: 'Users',
value: OwnerType.USER,
options: groupByType.user.map((user) => ({
...user,
label: (
<div data-testid="assignee-option">
<UserTag id={user.value} name={user.label} />
</div>
),
})),
});
}

return groupOptions;
}, [options]);

return (
<Select
showSearch
Expand All @@ -52,21 +91,13 @@ const Assignees: FC<Props> = ({
filterOption={false}
mode="multiple"
notFoundContent={null}
options={updatedOption}
placeholder={t('label.select-to-search')}
showArrow={false}
value={assignees.length ? assignees : undefined}
onChange={handleOnChange}
onSearch={onSearch}>
{options.map((option) => (
<Option
data-label={option.label}
data-testid="assignee-option"
data-usertype={option.type}
key={option.value}>
<UserTag id={option.value} name={option.label} />
</Option>
))}
</Select>
onSearch={onSearch}
/>
);
};

Expand Down

0 comments on commit 8607d30

Please sign in to comment.