Fix #8481 (UI): Changed how team assets are shown similar to explore page (#8526)

* Changed how entity details are shown in 'My Data' and 'Following' tabs on user details page

* Changed how team assets are shown similar to explore page

* removed isUndefined as isEmpty will cover that

* - Renamed 'GlossaryTermAssets' interface to 'AssetsDataType' to use it commonly and made the required changes for where it was used
- Code optimisation to reuse repeated code blocks
- Localization changes for 'UserPage'

* - Code optimisation by using common util functions
- Localization changes for 'TeamsPage' and 'TeamDetailsV1'
- Fixed spelling mistakes

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx

@@ -38,6 +38,7 @@ import { reactivateTeam } from '../../axiosAPIs/teamsAPI';
 import {
   getTeamAndUserDetailsPath,
   getUserPath,
+  LIST_SIZE,
   PAGE_SIZE_MEDIUM,
 } from '../../constants/constants';
 import { TEAMS_DOCS } from '../../constants/docs.constants';
@@ -54,13 +55,13 @@ import {
   User,
 } from '../../generated/entity/teams/user';
 import { EntityReference } from '../../generated/type/entityReference';
+import { Paging } from '../../generated/type/paging';
 import { TeamDetailsProp } from '../../interface/teamsAndUsers.interface';
-import jsonData from '../../jsons/en';
 import AddAttributeModal from '../../pages/RolesPage/AddAttributeModal/AddAttributeModal';
-import UserCard from '../../pages/teams/UserCard';
 import {
   commonUserDetailColumns,
   getEntityName,
+  getTierFromEntityInfo,
   hasEditAccess,
 } from '../../utils/CommonUtils';
 import { filterEntityAssets } from '../../utils/EntityUtils';
@@ -83,6 +84,7 @@ import EntitySummaryDetails from '../common/EntitySummaryDetails/EntitySummaryDe
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
 import NextPrevious from '../common/next-previous/NextPrevious';
 import Searchbar from '../common/searchbar/Searchbar';
+import TableDataCard from '../common/table-data-card/TableDataCard';
 import TabsPane from '../common/TabsPane/TabsPane';
 import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../common/title-breadcrumb/title-breadcrumb.interface';
@@ -115,6 +117,7 @@ interface PlaceholderProps {
 }
 
 const TeamDetailsV1 = ({
+  assets,
   hasAccess,
   currentTeam,
   currentTeamUsers,
@@ -139,6 +142,7 @@ const TeamDetailsV1 = ({
   handleAddUser,
   removeUserFromTeam,
   afterDeleteAction,
+  onAssetsPaginate,
 }: TeamDetailsProp) => {
   const { t } = useTranslation();
   const isOrganization = currentTeam.name === TeamType.Organization;
@@ -550,7 +554,9 @@ const TeamDetailsV1 = ({
     } catch (error) {
       showErrorToast(
         error as AxiosError,
-        jsonData['api-error-messages']['fetch-user-permission-error']
+        t('message.entity-fetch-error', {
+          entity: 'User Permissions',
+        })
       );
     } finally {
       setLoading(false);
@@ -801,7 +807,7 @@ const TeamDetailsV1 = ({
    * Check for current team datasets and return the dataset cards
    * @returns - dataset cards
    */
-  const getDatasetCards = () => {
+  const getAssetDetailCards = () => {
     const ownData = filterEntityAssets(currentTeam?.owns || []);
 
     if (ownData.length <= 0) {
@@ -823,26 +829,38 @@ const TeamDetailsV1 = ({
     }
 
     return (
-      <>
-        <div
-          className="tw-grid xxl:tw-grid-cols-4 md:tw-grid-cols-3 tw-gap-4"
-          data-testid="dataset-card">
-          {' '}
-          {ownData.map((dataset, index) => {
-            const Dataset = {
-              displayName: dataset.displayName || dataset.name || '',
-              type: dataset.type,
-              fqn: dataset.fullyQualifiedName || '',
-              id: dataset.id,
-              name: dataset.name,
-            };
-
-            return (
-              <UserCard isDataset isIconVisible item={Dataset} key={index} />
-            );
-          })}
-        </div>
-      </>
+      <div data-testid="table-container">
+        {assets.data.map((entity, index) => (
+          <div className="m-b-sm" key={`${entity.name}${index}`}>
+            <TableDataCard
+              database={entity.database}
+              databaseSchema={entity.databaseSchema}
+              deleted={entity.deleted}
+              description={entity.description}
+              fullyQualifiedName={entity.fullyQualifiedName}
+              id={`tabledatacard${index}`}
+              indexType={entity.index}
+              name={entity.name}
+              owner={entity.owner}
+              service={entity.service}
+              serviceType={entity.serviceType || '--'}
+              tags={entity.tags}
+              tier={getTierFromEntityInfo(entity)}
+              usage={entity.weeklyPercentileRank}
+            />
+          </div>
+        ))}
+        {assets.total > LIST_SIZE && assets.data.length > 0 && (
+          <NextPrevious
+            isNumberBased
+            currentPage={assets.currPage}
+            pageSize={LIST_SIZE}
+            paging={{} as Paging}
+            pagingHandler={onAssetsPaginate}
+            totalCount={assets.total}
+          />
+        )}
+      </div>
     );
   };
 
@@ -1116,7 +1134,7 @@ const TeamDetailsV1 = ({
 
               {currentTab === 2 && getUserCards()}
 
-              {currentTab === 3 && getDatasetCards()}
+              {currentTab === 3 && getAssetDetailCards()}
 
               {currentTab === 4 &&
                 (isEmpty(currentTeam.defaultRoles || []) ? (

openmetadata-ui/src/main/resources/ui/src/interface/teamsAndUsers.interface.ts

@@ -12,7 +12,7 @@
  */
 
 import { Operation } from 'fast-json-patch';
-import { FormErrorData } from 'Models';
+import { AssetsDataType, FormErrorData } from 'Models';
 import { UserType } from '../enums/user.enum';
 import { Team } from '../generated/entity/teams/team';
 import {
@@ -90,6 +90,7 @@ export interface TeamsAndUsersProps {
 export interface TeamDetailsProp {
   currentTeam: Team;
   teams?: Team[];
+  assets: AssetsDataType;
   currentTeamUsers: User[];
   teamUserPagin: Paging;
   currentTeamUserPage: number;
@@ -114,6 +115,7 @@ export interface TeamDetailsProp {
   handleLeaveTeamClick: (id: string, data: Operation[]) => Promise<void>;
   childTeams: Team[];
   showDeletedTeam: boolean;
+  onAssetsPaginate: (page: string | number) => void;
   onShowDeletedTeamChange: (checked: boolean) => void;
   onTeamExpand: (
     loading?: boolean,

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -198,7 +198,6 @@
     "start-date": "Start Date",
     "view-dag": "View Dag",
     "search-team": "Search Team",
-    "end-date": "End Date",
     "show-deleted": "Show deleted",
     "add-bot": "Add Bot",
     "search-for-bots": "Search for bots...",
@@ -233,7 +232,13 @@
     "no-owned-entities": "You have not owned anything yet.",
     "entity-fetch-error": "Error while fetching {{entity}}",
     "feed-post-error": "Error while posting the message!",
-    "unexpected-error": "An unexpected error occurred."
+    "unexpected-error": "An unexpected error occurred.",
+    "entity-creation-error": "Error while creating {{entity}}",
+    "entity-updation-error": "Error while updating {{entity}}",
+    "join-team-success": "Team joined successfully!",
+    "leave-team-success": "Left the team successfully!",
+    "join-team-error": "Error while joining the team!",
+    "leave-team-error": "Error while leaving the team!"
   },
   "server": {
     "unexpected-response": "Unexpected response from server!"

openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx

@@ -13,9 +13,10 @@
 
 import { AxiosError } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
-import { cloneDeep, isUndefined } from 'lodash';
-import { SearchResponse } from 'Models';
+import { cloneDeep, isEmpty, isUndefined } from 'lodash';
+import { AssetsDataType, FormattedTableData, SearchResponse } from 'Models';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
 import AppState from '../../AppState';
 import { useAuthContext } from '../../authentication/auth-provider/AuthProvider';
@@ -38,10 +39,12 @@ import TeamDetailsV1 from '../../components/TeamDetails/TeamDetailsV1';
 import Teams from '../../components/TeamDetails/Teams';
 import {
   INITIAL_PAGING_VALUE,
+  LIST_SIZE,
   PAGE_SIZE_MEDIUM,
   pagingObject,
 } from '../../constants/constants';
 import { NO_PERMISSION_TO_VIEW } from '../../constants/HelperTextUtil';
+import { myDataSearchIndex } from '../../constants/Mydata.constants';
 import { SearchIndex } from '../../enums/search.enum';
 import { CreateTeam, TeamType } from '../../generated/api/teams/createTeam';
 import { EntityReference } from '../../generated/entity/data/table';
@@ -49,8 +52,7 @@ import { Team } from '../../generated/entity/teams/team';
 import { User } from '../../generated/entity/teams/user';
 import { Paging } from '../../generated/type/paging';
 import { useAuth } from '../../hooks/authHooks';
-import jsonData from '../../jsons/en';
-import { formatUsersResponse } from '../../utils/APIUtils';
+import { formatDataResponse, formatUsersResponse } from '../../utils/APIUtils';
 import { getEntityName } from '../../utils/CommonUtils';
 import { DEFAULT_ENTITY_PERMISSION } from '../../utils/PermissionsUtils';
 import { getSettingPath, getTeamsWithFqnPath } from '../../utils/RouterUtils';
@@ -60,6 +62,7 @@ import AddUsersModalV1 from './AddUsersModalV1';
 
 const TeamsPage = () => {
   const history = useHistory();
+  const { t } = useTranslation();
   const { getEntityPermissionByFqn } = usePermissionProvider();
   const { isAdminUser } = useAuth();
   const { isAuthDisabled } = useAuthContext();
@@ -79,6 +82,11 @@ const TeamsPage = () => {
   const [isAddingTeam, setIsAddingTeam] = useState<boolean>(false);
   const [isAddingUsers, setIsAddingUsers] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [assets, setAssets] = useState<AssetsDataType>({
+    data: [],
+    total: 0,
+    currPage: 1,
+  });
 
   const [entityPermissions, setEntityPermissions] =
     useState<OperationPermission>(DEFAULT_ENTITY_PERMISSION);
@@ -156,10 +164,7 @@ const TeamsPage = () => {
         setAllTeam(modifiedTeams);
       }
     } catch (error) {
-      showErrorToast(
-        error as AxiosError,
-        jsonData['api-error-messages']['unexpected-server-response']
-      );
+      showErrorToast(error as AxiosError, t('server.unexpected-response'));
     }
     loading && setIsDataLoading((isDataLoading) => --isDataLoading);
   };
@@ -207,13 +212,10 @@ const TeamsPage = () => {
         getCurrentTeamUsers(data.name);
         setSelectedTeam(data);
       } else {
-        throw jsonData['api-error-messages']['unexpected-server-response'];
+        throw t('server.unexpected-response');
       }
     } catch (error) {
-      showErrorToast(
-        error as AxiosError,
-        jsonData['api-error-messages']['unexpected-server-response']
-      );
+      showErrorToast(error as AxiosError, t('server.unexpected-response'));
     }
     setIsPageLoading(false);
   };
@@ -242,7 +244,9 @@ const TeamsPage = () => {
     } catch (error) {
       showErrorToast(
         error as AxiosError,
-        jsonData['api-error-messages']['create-team-error']
+        t('message.entity-creation-error', {
+          entity: 'Team',
+        })
       );
     } finally {
       setIsLoading(false);
@@ -287,13 +291,15 @@ const TeamsPage = () => {
             }
             resolve();
           } else {
-            throw jsonData['api-error-messages']['unexpected-server-response'];
+            throw t('server.unexpected-response');
           }
         })
         .catch((error: AxiosError) => {
           showErrorToast(
             error,
-            jsonData['api-error-messages']['update-team-error']
+            t('message.entity-updation-error', {
+              entity: 'Team',
+            })
           );
           reject();
         });
@@ -322,16 +328,13 @@ const TeamsPage = () => {
         if (res) {
           AppState.updateUserDetails(res);
           fetchTeamByFqn(selectedTeam.name);
-          showSuccessToast(
-            jsonData['api-success-messages']['join-team-success'],
-            2000
-          );
+          showSuccessToast(t('message.join-team-success'), 2000);
         } else {
-          throw jsonData['api-error-messages']['join-team-error'];
+          throw t('message.join-team-error');
         }
       })
       .catch((err: AxiosError) => {
-        showErrorToast(err, jsonData['api-error-messages']['join-team-error']);
+        showErrorToast(err, t('message.join-team-error'));
         // setIsRightPanelLoading(false);
       });
   };
@@ -345,20 +348,14 @@ const TeamsPage = () => {
           if (res) {
             AppState.updateUserDetails(res);
             fetchTeamByFqn(selectedTeam.name);
-            showSuccessToast(
-              jsonData['api-success-messages']['leave-team-success'],
-              2000
-            );
+            showSuccessToast(t('message.leave-team-success'), 2000);
             resolve();
           } else {
-            throw jsonData['api-error-messages']['leave-team-error'];
+            throw t('message.leave-team-error');
           }
         })
         .catch((err: AxiosError) => {
-          showErrorToast(
-            err,
-            jsonData['api-error-messages']['leave-team-error']
-          );
+          showErrorToast(err, t('message.leave-team-error'));
           // setIsRightPanelLoading(false);
         });
     });
@@ -380,13 +377,15 @@ const TeamsPage = () => {
           if (res) {
             fetchTeamByFqn(res.name);
           } else {
-            throw jsonData['api-error-messages']['unexpected-server-response'];
+            throw t('server.unexpected-response');
           }
         })
         .catch((error: AxiosError) => {
           showErrorToast(
             error,
-            jsonData['api-error-messages']['update-team-error']
+            t('message.entity-updation-error', {
+              entity: 'Team',
+            })
           );
         })
         .finally(() => {
@@ -416,13 +415,15 @@ const TeamsPage = () => {
           if (res) {
             fetchTeamByFqn(res.name);
           } else {
-            throw jsonData['api-error-messages']['unexpected-server-response'];
+            throw t('server.unexpected-response');
           }
         })
         .catch((error: AxiosError) => {
           showErrorToast(
             error,
-            jsonData['api-error-messages']['update-team-error']
+            t('message.entity-updation-error', {
+              entity: 'Team',
+            })
           );
         })
         .finally(() => {
@@ -454,7 +455,7 @@ const TeamsPage = () => {
         if (response) {
           fetchTeamByFqn(response.name);
         } else {
-          throw jsonData['api-error-messages']['unexpected-server-response'];
+          throw t('server.unexpected-response');
         }
       } catch (error) {
         showErrorToast(error as AxiosError);
@@ -474,6 +475,60 @@ const TeamsPage = () => {
     setShowDeletedTeam(checked);
   };
 
+  const fetchAssets = () => {
+    searchData(
+      `owner.id:${selectedTeam.id}`,
+      assets.currPage,
+      LIST_SIZE,
+      ``,
+      '',
+      '',
+      myDataSearchIndex
+    )
+      .then((res: SearchResponse) => {
+        const hits = res?.data?.hits?.hits;
+        if (hits?.length > 0) {
+          const data = formatDataResponse(hits);
+          const total = res.data.hits.total.value;
+          setAssets({
+            data,
+            total,
+            currPage: assets.currPage,
+          });
+        } else {
+          const data = [] as FormattedTableData[];
+          const total = 0;
+          setAssets({
+            data,
+            total,
+            currPage: assets.currPage,
+          });
+        }
+      })
+      .catch((err: AxiosError) => {
+        showErrorToast(
+          err,
+          t('message.entity-fetch-error', {
+            entity: 'Team Assets',
+          })
+        );
+      });
+  };
+
+  const handleAssetsPaginate = (page: string | number) => {
+    setAssets((pre) => ({ ...pre, currPage: page as number }));
+  };
+
+  useEffect(() => {
+    if (!isEmpty(selectedTeam) && !isUndefined(selectedTeam)) {
+      fetchAssets();
+    }
+  }, [selectedTeam]);
+
+  useEffect(() => {
+    fetchAssets();
+  }, [assets.currPage]);
+
   useEffect(() => {
     if (
       (entityPermissions.ViewAll || entityPermissions.ViewBasic) &&
@@ -510,6 +565,7 @@ const TeamsPage = () => {
           ) : (
             <TeamDetailsV1
               afterDeleteAction={afterDeleteAction}
+              assets={assets}
               childTeams={allTeam}
               currentTeam={selectedTeam}
               currentTeamUserPage={currentUserPage}
@@ -530,6 +586,7 @@ const TeamsPage = () => {
               teamUserPaginHandler={userPagingHandler}
               teamUsersSearchText={userSearchValue}
               updateTeamHandler={updateTeamHandler}
+              onAssetsPaginate={handleAssetsPaginate}
               onDescriptionUpdate={onDescriptionUpdate}
               onShowDeletedTeamChange={handleShowDeletedTeam}
               onTeamExpand={fetchAllTeams}