ui: feedback 1.0.1 part 2 (#11482)

* ui: feedback 1.0.1 part 2

* miner fix

* fixed code smell bug

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, noop, toString } from 'lodash';
-import { isEmpty, isEqual, 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 (
+    <Space>
+      <SVGIcons icon={Icons.TEAMS_GREY} />
+      <Typography.Text>{getEntityName(props)}</Typography.Text>
+    </Space>
+  );
+};
+
 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<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) {
@@ -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({
+        setCount((pre) => ({ ...pre, team: data.hits.total.value }));
-          total: data.hits.total.value,
-          after: toString(afterPage + 1),
-        });
 
         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
+  const fetchCount = async () => {
-  useEffect(() => {
+    if (popupVisible) {
-    if (popupVisible && isEqual(userPaging, pagingObject)) {
+      if (owner?.type === EntityType.USER) {
-      getUserCount();
+        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 = ({
     </Popover>
   );
 };
-
-export const TeamListItemRenderer = (props: EntityReference) => {
-  return (
-    <Space>
-      <SVGIcons icon={Icons.TEAMS_GREY} />
-      <Typography.Text>{getEntityName(props)}</Typography.Text>
-    </Space>
-  );
-};

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<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
@@ -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}>
+      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>
   );
 };