diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx index f4e68616298..21636baa7ff 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx @@ -65,7 +65,6 @@ import { } from '../../interface/teamsAndUsers.interface'; import AddAttributeModal from '../../pages/RolesPage/AddAttributeModal/AddAttributeModal'; import { - commonUserDetailColumns, getEntityName, getTierFromEntityInfo, hasEditAccess, @@ -100,6 +99,7 @@ import { OperationPermission, ResourceEntity, } from '../PermissionProvider/PermissionProvider.interface'; +import { commonUserDetailColumns } from '../Users/Users.util'; import ListEntities from './RolesAndPoliciesList'; import { getTabs, searchTeam } from './TeamDetailsV1.utils'; import TeamHierarchy from './TeamHierarchy'; @@ -263,7 +263,7 @@ const TeamDetailsV1 = ({ const columns: ColumnsType = useMemo(() => { return [ - ...commonUserDetailColumns, + ...commonUserDetailColumns(), { title: t('label.actions'), dataIndex: 'actions', diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx index a37cac07c6a..4868dac6ea0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx @@ -26,10 +26,7 @@ import { User } from '../../generated/entity/teams/user'; import { Paging } from '../../generated/type/paging'; import { useAuth } from '../../hooks/authHooks'; import jsonData from '../../jsons/en'; -import { - commonUserDetailColumns, - getEntityName, -} from '../../utils/CommonUtils'; +import { getEntityName } from '../../utils/CommonUtils'; import SVGIcons, { Icons } from '../../utils/SvgUtils'; import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils'; import DeleteWidgetModal from '../common/DeleteWidget/DeleteWidgetModal'; @@ -37,6 +34,7 @@ import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder' import NextPrevious from '../common/next-previous/NextPrevious'; import Searchbar from '../common/searchbar/Searchbar'; import Loader from '../Loader/Loader'; +import { commonUserDetailColumns } from '../Users/Users.util'; import './usersList.less'; interface UserListV1Props { @@ -117,7 +115,7 @@ const UserListV1: FC = ({ const columns: ColumnsType = useMemo(() => { return [ - ...commonUserDetailColumns, + ...commonUserDetailColumns(), { title: t('label.actions'), dataIndex: 'actions', @@ -261,6 +259,7 @@ const UserListV1: FC = ({ indicator: , }} pagination={false} + rowKey="id" size="small" /> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.util.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.util.tsx index 9c6e402d684..b07a7d3cff0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.util.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.util.tsx @@ -1,6 +1,18 @@ +import { Popover, Space, Tag } from 'antd'; +import { ColumnsType } from 'antd/lib/table'; +import { t } from 'i18next'; +import { isEmpty, isUndefined, uniqueId } from 'lodash'; import React from 'react'; +import { Link } from 'react-router-dom'; +import { getUserPath } from '../../constants/constants'; import { User } from '../../generated/entity/teams/user'; import { EntityReference } from '../../generated/type/entityReference'; +import { getEntityName } from '../../utils/CommonUtils'; +import { LIST_CAP } from '../../utils/PermissionsUtils'; +import { + getRoleWithFqnPath, + getTeamsWithFqnPath, +} from '../../utils/RouterUtils'; import SVGIcons, { Icons } from '../../utils/SvgUtils'; export const userPageFilterList = [ @@ -67,3 +79,115 @@ export const getUserFromEntityReference = (entity: EntityReference): User => { email: '', }; }; + +export const commonUserDetailColumns = (): ColumnsType => [ + { + title: t('label.username'), + dataIndex: 'username', + key: 'username', + render: (_, record) => ( + + {getEntityName(record)} + + ), + }, + { + title: t('label.teams'), + dataIndex: 'teams', + key: 'teams', + render: (_, record) => { + const listLength = record.teams?.length ?? 0; + const hasMore = listLength > LIST_CAP; + + if (isUndefined(record.teams) || isEmpty(record.teams)) { + return <>No Team; + } else { + return ( + + {record.teams.slice(0, LIST_CAP).map((team) => ( + + {getEntityName(team)} + + ))} + {hasMore && ( + + {record.teams.slice(LIST_CAP).map((team) => ( + + {getEntityName(team)} + + ))} + + } + overlayClassName="tw-w-40 tw-text-center" + trigger="click"> + {`+${ + listLength - LIST_CAP + } more`} + + )} + + ); + } + }, + }, + { + title: t('label.roles'), + dataIndex: 'roles', + key: 'roles', + render: (_, record) => { + const listLength = record.roles?.length ?? 0; + const hasMore = listLength > LIST_CAP; + + if (isUndefined(record.roles) || isEmpty(record.roles)) { + return <>No Role; + } else { + return ( + + {record.roles.slice(0, LIST_CAP).map((role) => ( + + {getEntityName(role)} + + ))} + {hasMore && ( + + {record.roles.slice(LIST_CAP).map((role) => ( + + {getEntityName(role)} + + ))} + + } + overlayClassName="tw-w-40 tw-text-center" + trigger="click"> + {`+${ + listLength - LIST_CAP + } more`} + + )} + + ); + } + }, + }, +]; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx index aa8cc0d61b4..af817163b9f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx @@ -12,8 +12,7 @@ */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Popover, Space, Tag, Typography } from 'antd'; -import { ColumnsType } from 'antd/lib/table'; +import { Typography } from 'antd'; import { AxiosError } from 'axios'; import classNames from 'classnames'; import { t } from 'i18next'; @@ -25,7 +24,6 @@ import { isString, isUndefined, toNumber, - uniqueId, } from 'lodash'; import { CurrentState, @@ -39,7 +37,6 @@ import { } from 'Models'; import React from 'react'; import { Trans } from 'react-i18next'; -import { Link } from 'react-router-dom'; import { reactLocalStorage } from 'reactjs-localstorage'; import AppState from '../AppState'; import { getFeedCount } from '../axiosAPIs/feedsAPI'; @@ -87,8 +84,6 @@ import { ServicesType } from '../interface/service.interface'; import jsonData from '../jsons/en'; import { getEntityFeedLink, getTitleCase } from './EntityUtils'; import Fqn from './Fqn'; -import { LIST_CAP } from './PermissionsUtils'; -import { getRoleWithFqnPath, getTeamsWithFqnPath } from './RouterUtils'; import { serviceTypeLogo } from './ServiceUtils'; import { getTierFromSearchTableTags } from './TableUtils'; import { TASK_ENTITIES } from './TasksUtils'; @@ -751,118 +746,6 @@ export const getHostNameFromURL = (url: string) => { } }; -export const commonUserDetailColumns: ColumnsType = [ - { - title: t('label.username'), - dataIndex: 'username', - key: 'username', - render: (_, record) => ( - - {getEntityName(record)} - - ), - }, - { - title: t('label.teams'), - dataIndex: 'teams', - key: 'teams', - render: (_, record) => { - const listLength = record.teams?.length ?? 0; - const hasMore = listLength > LIST_CAP; - - if (isUndefined(record.teams) || isEmpty(record.teams)) { - return <>No Team; - } else { - return ( - - {record.teams.slice(0, LIST_CAP).map((team) => ( - - {getEntityName(team)} - - ))} - {hasMore && ( - - {record.teams.slice(LIST_CAP).map((team) => ( - - {getEntityName(team)} - - ))} - - } - overlayClassName="tw-w-40 tw-text-center" - trigger="click"> - {`+${ - listLength - LIST_CAP - } more`} - - )} - - ); - } - }, - }, - { - title: t('label.roles'), - dataIndex: 'roles', - key: 'roles', - render: (_, record) => { - const listLength = record.roles?.length ?? 0; - const hasMore = listLength > LIST_CAP; - - if (isUndefined(record.roles) || isEmpty(record.roles)) { - return <>No Role; - } else { - return ( - - {record.roles.slice(0, LIST_CAP).map((role) => ( - - {getEntityName(role)} - - ))} - {hasMore && ( - - {record.roles.slice(LIST_CAP).map((role) => ( - - {getEntityName(role)} - - ))} - - } - overlayClassName="tw-w-40 tw-text-center" - trigger="click"> - {`+${ - listLength - LIST_CAP - } more`} - - )} - - ); - } - }, - }, -]; - export const getOwnerValue = (owner: EntityReference) => { switch (owner?.type) { case 'team':