diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/OwnerFeed/OwnersFeed.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/OwnerFeed/OwnersFeed.tsx index 4f927f3c6cf..0c35a5fb967 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/OwnerFeed/OwnersFeed.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardBody/OwnerFeed/OwnersFeed.tsx @@ -12,19 +12,21 @@ */ import { Col, Row, Typography } from 'antd'; +import classNames from 'classnames'; import { isEmpty } from 'lodash'; -import React, { useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { ReactComponent as AddIcon } from '../../../../../assets/svg/added-icon.svg'; import { ReactComponent as DeletedIcon } from '../../../../../assets/svg/deleted-icon.svg'; - -import { useTranslation } from 'react-i18next'; import { MAX_VISIBLE_OWNERS_FOR_FEED_CARD, MAX_VISIBLE_OWNERS_FOR_FEED_TAB, } from '../../../../../constants/constants'; +import { EntityType } from '../../../../../enums/entity.enum'; import { Owner } from '../../../../../generated/entity/feed/owner'; import { Thread } from '../../../../../generated/entity/feed/thread'; import { EntityReference } from '../../../../../generated/entity/type'; +import { OwnerItem } from '../../../../common/OwnerItem/OwnerItem'; import { OwnerLabel } from '../../../../common/OwnerLabel/OwnerLabel.component'; import UserPopOverCard from '../../../../common/PopOverCard/UserPopOverCard'; import ProfilePicture from '../../../../common/ProfilePicture/ProfilePicture'; @@ -50,53 +52,89 @@ function OwnersFeed({ }; }, [feed]); - const maxVisibleOwners = isForFeedTab - ? MAX_VISIBLE_OWNERS_FOR_FEED_TAB - : MAX_VISIBLE_OWNERS_FOR_FEED_CARD; + const maxVisibleOwners = useMemo( + () => + isForFeedTab + ? MAX_VISIBLE_OWNERS_FOR_FEED_TAB + : MAX_VISIBLE_OWNERS_FOR_FEED_CARD, + [isForFeedTab] + ); + + const getOwnerItems = useCallback( + (ownerList: EntityReference[]) => { + return ownerList.length <= maxVisibleOwners ? ( + + {ownerList.map((owner: EntityReference, index: number) => + owner.type === EntityType.USER ? ( + +
+ + + {owner.displayName} + +
+
+ ) : ( +
+ +
+ ) + )} +
+ ) : ( + + ); + }, + [maxVisibleOwners, showThread] + ); + + const renderUpdatedOwner = useMemo( + () => getOwnerItems(updatedOwner), + [updatedOwner, getOwnerItems] + ); + + const renderPreviousOwner = useMemo( + () => getOwnerItems(previousOwner), + [previousOwner, getOwnerItems] + ); return ( {!isEmpty(updatedOwner) && ( - + {t('label.owner-plural-with-colon')} - - {updatedOwner.length <= maxVisibleOwners ? ( - - {updatedOwner.map((owner: EntityReference) => ( - -
- - - {owner.displayName} - -
-
- ))} -
- ) : ( - - )} - + {renderUpdatedOwner}
)} @@ -104,44 +142,14 @@ function OwnersFeed({ - + {t('label.owner-plural-with-colon')} - - {previousOwner.length <= maxVisibleOwners ? ( - - {previousOwner.map((owner: EntityReference) => ( - -
- - - {owner.displayName} - -
-
- ))} -
- ) : ( - - )} - + {renderPreviousOwner}
)} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less index f198ee24dfc..8bd0459a71c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/activity-feed-tab.less @@ -590,6 +590,10 @@ padding: 4px 8px; margin-right: @margin-xs; border: 1px solid @grey-15; + + .owner-team-icon { + font-size: 24px !important; + } } .owner-chip-text { @@ -597,6 +601,7 @@ font-style: normal; font-weight: 400; line-height: normal; + font-size: 14px !important; margin-left: @margin-xss; }