Fix issue-4575: UI: Add total count of user owned or following data entities in profile page and home page (#4623)

openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx

@@ -46,10 +46,13 @@ const EntityList: FunctionComponent<Prop> = ({
                 )}`}
                 key={index}>
                 <div className="tw-flex">
-                  {getEntityIcon(item.index)}
+                  {getEntityIcon(item.index || item.type || '')}
                   <Link
                     className="tw-font-medium tw-pl-2"
-                    to={getEntityLink(item.index, item.fullyQualifiedName)}>
+                    to={getEntityLink(
+                      item.index || item.type || '',
+                      item.fullyQualifiedName
+                    )}>
                     <button
                       className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline tw-w-52 tw-truncate tw-text-left"
                       title={getEntityName(item as unknown as EntityReference)}>

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx

@@ -53,6 +53,8 @@ const MyData: React.FC<MyDataProps> = ({
   followedData,
   feedData,
   feedFilter,
+  ownedDataCount,
+  followedDataCount,
   feedFilterHandler,
   isFeedLoading,
   postFeedHandler,
@@ -140,7 +142,7 @@ const MyData: React.FC<MyDataProps> = ({
                   data-testid="my-data"
                   to={getLinkByFilter(Ownership.OWNER)}>
                   <span className="link-text tw-font-normal tw-text-xs">
-                    View All
+                    View All <span>({ownedDataCount})</span>
                   </span>
                 </Link>
               ) : null}
@@ -160,7 +162,7 @@ const MyData: React.FC<MyDataProps> = ({
                   data-testid="following-data"
                   to={getLinkByFilter(Ownership.FOLLOWERS)}>
                   <span className="link-text tw-font-normal tw-text-xs">
-                    View All
+                    View All <span>({followedDataCount})</span>
                   </span>
                 </Link>
               ) : null}

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.interface.ts

@@ -26,6 +26,8 @@ export interface MyDataProps {
   countTables: number;
   countTopics: number;
   countDashboards: number;
+  followedDataCount: number;
+  ownedDataCount: number;
   countPipelines: number;
   userDetails?: User;
   ownedData: Array<FormatedTableData>;

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx

@@ -319,6 +319,8 @@ const mockProp = {
   countServices: 0,
   countTables: 10,
   countTopics: 5,
+  followedDataCount: 5,
+  ownedDataCount: 5,
   error: '',
   feedData: formatDataResponse(mockData.data.hits.hits),
   feedFilter: FeedFilter.ALL,

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx

@@ -616,14 +616,15 @@ const Users = ({
         <EntityList
           entityList={userData?.owns as unknown as FormatedTableData[]}
           headerText={
-            <div className="tw-flex tw-justify-between">
+            <div className="tw-flex tw-justify-between tw-items-center">
               My Data
               {userData?.owns?.length ? (
                 <Link
+                  className="tw-ml-1"
                   data-testid="my-data"
                   to={getLinkByFilter(Ownership.OWNER)}>
                   <span className="link-text tw-font-normal tw-text-xs">
-                    View All
+                    View All <span>({userData?.owns?.length})</span>
                   </span>
                 </Link>
               ) : null}
@@ -640,10 +641,11 @@ const Users = ({
               Following
               {userData?.follows?.length ? (
                 <Link
+                  className="tw-ml-1"
                   data-testid="following-data"
                   to={getLinkByFilter(Ownership.FOLLOWERS)}>
                   <span className="link-text tw-font-normal tw-text-xs">
-                    View All
+                    View All <span>({userData?.follows?.length})</span>
                   </span>
                 </Link>
               ) : null}

openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts

@@ -222,6 +222,7 @@ declare module 'Models' {
       name: string[];
     };
     index: string;
+    type?: string;
     database?: string;
     databaseSchema?: string;
     deleted?: boolean;

openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx

@@ -55,6 +55,8 @@ const MyDataPage = () => {
 
   const [ownedData, setOwnedData] = useState<Array<FormatedTableData>>();
   const [followedData, setFollowedData] = useState<Array<FormatedTableData>>();
+  const [ownedDataCount, setOwnedDataCount] = useState(0);
+  const [followedDataCount, setFollowedDataCount] = useState(0);
 
   const [feedFilter, setFeedFilter] = useState<FeedFilter>(FeedFilter.ALL);
   const [entityThread, setEntityThread] = useState<EntityThread[]>([]);
@@ -203,8 +205,10 @@ const MyDataPage = () => {
       .then(([resOwnedEntity, resFollowedEntity]) => {
         if (resOwnedEntity.status === 'fulfilled') {
           setOwnedData(formatDataResponse(resOwnedEntity.value.data.hits.hits));
+          setOwnedDataCount(resOwnedEntity.value.data.hits.total.value);
         }
         if (resFollowedEntity.status === 'fulfilled') {
+          setFollowedDataCount(resFollowedEntity.value.data.hits.total.value);
           setFollowedData(
             formatDataResponse(resFollowedEntity.value.data.hits.hits)
           );
@@ -353,8 +357,10 @@ const MyDataPage = () => {
             feedFilterHandler={feedFilterHandler}
             fetchFeedHandler={getFeedData}
             followedData={followedData || []}
+            followedDataCount={followedDataCount}
             isFeedLoading={isFeedLoading}
             ownedData={ownedData || []}
+            ownedDataCount={ownedDataCount}
             paging={paging}
             postFeedHandler={postFeedHandler}
           />

openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx

@@ -133,8 +133,10 @@ const TourPage = () => {
             }}
             fetchFeedHandler={handleOnClick}
             followedData={[]}
+            followedDataCount={1}
             isFeedLoading={false}
             ownedData={[]}
+            ownedDataCount={1}
             paging={{} as Paging}
             postFeedHandler={handleOnClick}
             userDetails={AppState.userDetails}