fix(ui) Fix group membership inconsistencies on group page (#12704)

Author: chriscollins3456

datahub-web-react/src/app/entityV2/group/GroupInfoHeaderSection.tsx

@@ -43,13 +43,13 @@ export const GroupInfoHeaderSection = ({
     isExternalGroup,
     groupName,
 }: Props) => {
-    const groupMemberRelationshipsCount = groupMemberRelationships?.count || 0;
+    const groupMemberRelationshipsTotal = groupMemberRelationships?.total || 0;
     return (
         <GroupHeader>
             <Tooltip title={groupName}>
                 <GroupName level={3}>{groupName}</GroupName>
             </Tooltip>
-            {groupMemberRelationshipsCount > 0 && <MemberCount>{groupMemberRelationships?.count} members</MemberCount>}
+            {groupMemberRelationshipsTotal > 0 && <MemberCount>{groupMemberRelationshipsTotal} members</MemberCount>}
             {isExternalGroup && (
                 <Tooltip
                     title={`Membership for this group cannot be edited in DataHub as it originates from ${externalGroupType}.`}

datahub-web-react/src/app/entityV2/group/GroupMembersSidebarSectionContent.tsx

@@ -1,41 +1,52 @@
 import React, { useState } from 'react';
 import { Typography } from 'antd';
-import { CorpUser, EntityRelationship } from '../../../types.generated';
+import { useRouteMatch } from 'react-router-dom';
+import { useHistory } from 'react-router';
+import { CorpUser, EntityRelationshipsResult } from '../../../types.generated';
 import { useEntityRegistry } from '../../useEntityRegistry';
-import { TagsSection } from '../shared/SidebarStyledComponents';
+import { ShowMoreButton, TagsSection } from '../shared/SidebarStyledComponents';
 import { ShowMoreSection } from '../shared/sidebarSection/ShowMoreSection';
 import { GroupMemberLink } from './GroupMemberLink';
+import { TabType } from './types';
 
 type Props = {
-    relationships: Array<EntityRelationship>;
+    groupMemberRelationships: EntityRelationshipsResult;
 };
-const DEFAULT_MAX_ENTITIES_TO_SHOW = 4;
+const DEFAULT_MAX_ENTITIES_TO_SHOW = 5;
 
-export default function GroupMembersSidebarSectionContent({ relationships }: Props) {
+export default function GroupMembersSidebarSectionContent({ groupMemberRelationships }: Props) {
+    const history = useHistory();
+    const { url } = useRouteMatch();
     const [entityCount, setEntityCount] = useState(DEFAULT_MAX_ENTITIES_TO_SHOW);
 
     const entityRegistry = useEntityRegistry();
-    const relationshipsCount = relationships?.length || 0;
+    const relationshipsTotal = groupMemberRelationships?.total || 0;
+    const relationshipsAvailableCount = groupMemberRelationships.relationships?.length || 0;
     return (
         <>
             <TagsSection>
-                {relationships.length === 0 && (
+                {relationshipsTotal === 0 && (
                     <Typography.Paragraph type="secondary">No members yet.</Typography.Paragraph>
                 )}
-                {relationships.length > 0 &&
-                    relationships.map((item, index) => {
+                {relationshipsTotal > 0 &&
+                    groupMemberRelationships.relationships.map((item, index) => {
                         const user = item.entity as CorpUser;
                         return index < entityCount && <GroupMemberLink user={user} entityRegistry={entityRegistry} />;
                     })}
             </TagsSection>
-            {relationshipsCount > entityCount && (
+            {relationshipsAvailableCount > entityCount && (
                 <ShowMoreSection
-                    totalCount={relationshipsCount}
+                    totalCount={relationshipsAvailableCount}
                     entityCount={entityCount}
                     setEntityCount={setEntityCount}
                     showMaxEntity={DEFAULT_MAX_ENTITIES_TO_SHOW}
                 />
             )}
+            {relationshipsTotal > relationshipsAvailableCount && entityCount >= relationshipsAvailableCount && (
+                <ShowMoreButton onClick={() => history.replace(`${url}/${TabType.Members.toLocaleLowerCase()}`)}>
+                    View all members
+                </ShowMoreButton>
+            )}
         </>
     );
 }

datahub-web-react/src/app/entityV2/group/GroupProfile.tsx

@@ -26,14 +26,10 @@ import EntitySidebarContext from '../../sharedV2/EntitySidebarContext';
 import SidebarCollapsibleHeader from '../shared/containers/profile/sidebar/SidebarCollapsibleHeader';
 import { EntitySidebarTabs } from '../shared/containers/profile/sidebar/EntitySidebarTabs';
 import { REDESIGN_COLORS } from '../shared/constants';
+import { TabType } from './types';
 
 const messageStyle = { marginTop: '10%' };
 
-export enum TabType {
-    Assets = 'Owner Of',
-    Members = 'Members',
-}
-
 const ENABLED_TAB_TYPES = [TabType.Assets, TabType.Members];
 
 const MEMBER_PAGE_SIZE = 15;
@@ -119,7 +115,7 @@ export default function GroupProfile({ urn }: Props) {
             },
             {
                 name: TabType.Members,
-                path: TabType.Members.toLocaleLowerCase(),
+                path: TabType.Members.toLocaleLowerCase(), // do not remove toLocaleLowerCase as we link to this tab elsewhere
                 content: (
                     <GroupMembers
                         urn={urn}

datahub-web-react/src/app/entityV2/group/GroupSidebarMembersSection.tsx

@@ -12,9 +12,8 @@ export const GroupSidebarMembersSection = ({ groupMemberRelationships }: Props)
         <SidebarSection
             title="Members"
             count={groupMemberRelationships?.total || undefined}
-            content={
-                <GroupMembersSideBarSectionContent relationships={groupMemberRelationships?.relationships || []} />
-            }
+            showFullCount
+            content={<GroupMembersSideBarSectionContent groupMemberRelationships={groupMemberRelationships} />}
         />
     );
 };

datahub-web-react/src/app/entityV2/group/types.ts

@@ -0,0 +1,4 @@
+export enum TabType {
+    Assets = 'Owner Of',
+    Members = 'Members',
+}

datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/SidebarSection.tsx

@@ -78,6 +78,7 @@ type Props = {
     collapsedContent?: React.ReactNode;
     collapsible?: boolean;
     expandedByDefault?: boolean;
+    showFullCount?: boolean;
 };
 
 export const SidebarSection = ({
@@ -88,6 +89,7 @@ export const SidebarSection = ({
     collapsedContent,
     collapsible = true,
     expandedByDefault = true,
+    showFullCount,
 }: Props) => {
     return (
         <StyledCollapse
@@ -102,7 +104,11 @@ export const SidebarSection = ({
                     <>
                         <SectionHeader collapsible={collapsible}>
                             <Title ellipsis={{ tooltip: true }}>{title}</Title>
-                            {count > 0 && <CountStyle> {count > 10 ? '10+' : count}</CountStyle>}
+                            {count > 0 && (
+                                <CountStyle>
+                                    {showFullCount ? <>{count}</> : <>{count > 10 ? '10+' : count}</>}
+                                </CountStyle>
+                            )}
                         </SectionHeader>
                         {collapsedContent}
                     </>