MINOR: fix the team profile call being made in activity feed (#20750)

* fix the team profile call being made in activity feed

* remove the function call from renderer and useMemo variable instead

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,31 +52,26 @@ function OwnersFeed({
     };
   }, [feed]);
 
-  const maxVisibleOwners = isForFeedTab
+  const maxVisibleOwners = useMemo(
+    () =>
+      isForFeedTab
         ? MAX_VISIBLE_OWNERS_FOR_FEED_TAB
-    : MAX_VISIBLE_OWNERS_FOR_FEED_CARD;
+        : MAX_VISIBLE_OWNERS_FOR_FEED_CARD,
+    [isForFeedTab]
+  );
 
-  return (
+  const getOwnerItems = useCallback(
-    <Row gutter={[8, 8]}>
+    (ownerList: EntityReference[]) => {
-      {!isEmpty(updatedOwner) && (
+      return ownerList.length <= maxVisibleOwners ? (
-        <Col span={24}>
         <Row wrap align="middle">
-            <Row align="middle" gutter={[8, 8]}>
+          {ownerList.map((owner: EntityReference, index: number) =>
-              <AddIcon className="text-success-hover" height={16} width={16} />
+            owner.type === EntityType.USER ? (
-              <Typography.Text className="owners-label">
-                {t('label.owner-plural-with-colon')}
-              </Typography.Text>
-            </Row>
-
-            <Col>
-              {updatedOwner.length <= maxVisibleOwners ? (
-                <Row wrap align="middle">
-                  {updatedOwner.map((owner: EntityReference) => (
               <UserPopOverCard key={owner.id} userName={owner.name ?? ''}>
                 <div
                   className={`owner-chip d-flex items-center ${
                     showThread && 'bg-white'
-                        }`}>
+                  }`}
+                  key={owner.id}>
                   <ProfilePicture
                     displayName={owner.displayName}
                     name={owner.name ?? ''}
@@ -85,18 +82,59 @@ function OwnersFeed({
                   </Typography.Text>
                 </div>
               </UserPopOverCard>
-                  ))}
+            ) : (
+              <div
+                className={classNames('owner-chip', {
+                  'bg-white': showThread,
+                })}
+                key={owner.id}>
+                <OwnerItem
+                  isCompactView
+                  avatarSize={24}
+                  className="owner-chip-text"
+                  index={index}
+                  owner={owner}
+                />
+              </div>
+            )
+          )}
         </Row>
       ) : (
         <OwnerLabel
           avatarSize={24}
           isCompactView={false}
           maxVisibleOwners={maxVisibleOwners}
-                  owners={updatedOwner}
+          owners={ownerList}
           showLabel={false}
         />
-              )}
+      );
-            </Col>
+    },
+    [maxVisibleOwners, showThread]
+  );
+
+  const renderUpdatedOwner = useMemo(
+    () => getOwnerItems(updatedOwner),
+    [updatedOwner, getOwnerItems]
+  );
+
+  const renderPreviousOwner = useMemo(
+    () => getOwnerItems(previousOwner),
+    [previousOwner, getOwnerItems]
+  );
+
+  return (
+    <Row gutter={[8, 8]}>
+      {!isEmpty(updatedOwner) && (
+        <Col span={24}>
+          <Row wrap align="middle">
+            <Row align="middle">
+              <AddIcon className="text-success-hover" height={16} width={16} />
+              <Typography.Text className="owners-label">
+                {t('label.owner-plural-with-colon')}
+              </Typography.Text>
+            </Row>
+
+            <Col>{renderUpdatedOwner}</Col>
           </Row>
         </Col>
       )}
@@ -104,44 +142,14 @@ function OwnersFeed({
         <Col span={24}>
           <Row wrap align="middle">
             <Col>
-              <Row align="middle" gutter={[8, 8]}>
+              <Row align="middle">
                 <DeletedIcon className="text-error" height={14} width={14} />
                 <Typography.Text className="owners-label">
                   {t('label.owner-plural-with-colon')}
                 </Typography.Text>
               </Row>
             </Col>
-            <Col>
+            <Col>{renderPreviousOwner}</Col>
-              {previousOwner.length <= maxVisibleOwners ? (
-                <Row align="middle">
-                  {previousOwner.map((owner: EntityReference) => (
-                    <UserPopOverCard key={owner.id} userName={owner.name ?? ''}>
-                      <div
-                        className={`owner-chip d-flex items-center ${
-                          showThread && 'bg-white'
-                        }`}>
-                        <ProfilePicture
-                          displayName={owner.displayName}
-                          name={owner.name ?? ''}
-                          width="24"
-                        />
-                        <Typography.Text className="owner-chip-text">
-                          {owner.displayName}
-                        </Typography.Text>
-                      </div>
-                    </UserPopOverCard>
-                  ))}
-                </Row>
-              ) : (
-                <OwnerLabel
-                  avatarSize={24}
-                  isCompactView={false}
-                  maxVisibleOwners={maxVisibleOwners}
-                  owners={previousOwner}
-                  showLabel={false}
-                />
-              )}
-            </Col>
           </Row>
         </Col>
       )}

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;
 }