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,53 +52,89 @@ function OwnersFeed({
     };
   }, [feed]);
 
-  const maxVisibleOwners = isForFeedTab
+  const maxVisibleOwners = useMemo(
-    ? MAX_VISIBLE_OWNERS_FOR_FEED_TAB
+    () =>
-    : MAX_VISIBLE_OWNERS_FOR_FEED_CARD;
+      isForFeedTab
+        ? MAX_VISIBLE_OWNERS_FOR_FEED_TAB
+        : MAX_VISIBLE_OWNERS_FOR_FEED_CARD,
+    [isForFeedTab]
+  );
+
+  const getOwnerItems = useCallback(
+    (ownerList: EntityReference[]) => {
+      return ownerList.length <= maxVisibleOwners ? (
+        <Row wrap align="middle">
+          {ownerList.map((owner: EntityReference, index: number) =>
+            owner.type === EntityType.USER ? (
+              <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 ?? ''}
+                    width="24"
+                  />
+                  <Typography.Text className="owner-chip-text">
+                    {owner.displayName}
+                  </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={ownerList}
+          showLabel={false}
+        />
+      );
+    },
+    [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" gutter={[8, 8]}>
+            <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>
+            <Col>{renderUpdatedOwner}</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'
-                        }`}>
-                        <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={updatedOwner}
-                  showLabel={false}
-                />
-              )}
-            </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;
 }