fix(issues): Don't show break if people section doesn't exist (#79701)

this pr updates the sidebar so that it doesn't show a break if the
people section isn't there

static/app/views/issueDetails/streamline/peopleSection.spec.tsx

@@ -1,4 +1,3 @@
-import {GroupFixture} from 'sentry-fixture/group';
 import {TeamFixture} from 'sentry-fixture/team';
 import {UserFixture} from 'sentry-fixture/user';
 
@@ -8,45 +7,38 @@ import type {TeamParticipant, UserParticipant} from 'sentry/types/group';
 import PeopleSection from 'sentry/views/issueDetails/streamline/peopleSection';
 
 describe('PeopleSection', () => {
-  const group = GroupFixture();
+  const teams: TeamParticipant[] = [{...TeamFixture(), type: 'team'}];
+  const users: UserParticipant[] = [
+    {
+      ...UserFixture({
+        id: '2',
+        name: 'John Smith',
+        email: '[email protected]',
+      }),
+      type: 'user',
+    },
+    {
+      ...UserFixture({
+        id: '3',
+        name: 'Sohn Jmith',
+        email: '[email protected]',
+      }),
+      type: 'user',
+    },
+  ];
 
   it('displays participants and viewers', async () => {
-    const teams: TeamParticipant[] = [{...TeamFixture(), type: 'team'}];
-    const users: UserParticipant[] = [
-      {
-        ...UserFixture({
-          id: '2',
-          name: 'John Smith',
-          email: '[email protected]',
-        }),
-        type: 'user',
-      },
-      {
-        ...UserFixture({
-          id: '3',
-          name: 'Sohn Jmith',
-          email: '[email protected]',
-        }),
-        type: 'user',
-      },
-    ];
-
-    const participantGroup = {
-      ...group,
-      participants: [...teams, ...users],
-      seenBy: users,
-    };
-
-    render(<PeopleSection group={participantGroup} />);
+    render(
+      <PeopleSection teamParticipants={teams} userParticipants={users} viewers={users} />
+    );
 
     expect(await screen.findByText('participating')).toBeInTheDocument();
     expect(await screen.findByText('viewed')).toBeInTheDocument();
   });
 
-  it('does not display anything if there are no participants or viewers', () => {
-    render(<PeopleSection group={group} />);
+  it('does not display particiapnts if there are none', () => {
+    render(<PeopleSection teamParticipants={[]} userParticipants={[]} viewers={users} />);
 
     expect(screen.queryByText('participating')).not.toBeInTheDocument();
-    expect(screen.queryByText('viewed')).not.toBeInTheDocument();
   });
 });

static/app/views/issueDetails/streamline/peopleSection.tsx

@@ -1,34 +1,23 @@
-import {useMemo} from 'react';
-
 import {Flex} from 'sentry/components/container/flex';
 import ParticipantList from 'sentry/components/group/streamlinedParticipantList';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Group, TeamParticipant, UserParticipant} from 'sentry/types/group';
-import {useUser} from 'sentry/utils/useUser';
+import type {TeamParticipant, UserParticipant} from 'sentry/types/group';
+import type {User} from 'sentry/types/user';
 import {SidebarSectionTitle} from 'sentry/views/issueDetails/streamline/sidebar';
 
-export default function PeopleSection({group}: {group: Group}) {
-  const activeUser = useUser();
-  const {userParticipants, teamParticipants, viewers} = useMemo(() => {
-    return {
-      userParticipants: group.participants.filter(
-        (p): p is UserParticipant => p.type === 'user'
-      ),
-      teamParticipants: group.participants.filter(
-        (p): p is TeamParticipant => p.type === 'team'
-      ),
-      viewers: group.seenBy.filter(user => activeUser.id !== user.id),
-    };
-  }, [group, activeUser.id]);
-
-  const hasParticipants = group.participants.length > 0;
+export default function PeopleSection({
+  userParticipants,
+  teamParticipants,
+  viewers,
+}: {
+  teamParticipants: TeamParticipant[];
+  userParticipants: UserParticipant[];
+  viewers: User[];
+}) {
+  const hasParticipants = userParticipants.length > 0 || teamParticipants.length > 0;
   const hasViewers = viewers.length > 0;
 
-  if (!hasParticipants && !hasViewers) {
-    return null;
-  }
-
   return (
     <div>
       <SidebarSectionTitle>{t('People')}</SidebarSectionTitle>

static/app/views/issueDetails/streamline/sidebar.tsx

@@ -1,12 +1,14 @@
+import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {StreamlinedExternalIssueList} from 'sentry/components/group/externalIssuesList/streamlinedExternalIssueList';
 import * as SidebarSection from 'sentry/components/sidebarSection';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
-import type {Group} from 'sentry/types/group';
+import type {Group, TeamParticipant, UserParticipant} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
+import {useUser} from 'sentry/utils/useUser';
 import StreamlinedActivitySection from 'sentry/views/issueDetails/streamline/activitySection';
 import FirstLastSeenSection from 'sentry/views/issueDetails/streamline/firstLastSeenSection';
 import PeopleSection from 'sentry/views/issueDetails/streamline/peopleSection';
@@ -20,6 +22,22 @@ type Props = {
 };
 
 export default function StreamlinedSidebar({group, event, project}: Props) {
+  const activeUser = useUser();
+
+  const {userParticipants, teamParticipants, viewers} = useMemo(() => {
+    return {
+      userParticipants: group.participants.filter(
+        (p): p is UserParticipant => p.type === 'user'
+      ),
+      teamParticipants: group.participants.filter(
+        (p): p is TeamParticipant => p.type === 'team'
+      ),
+      viewers: group.seenBy.filter(user => activeUser.id !== user.id),
+    };
+  }, [group, activeUser.id]);
+
+  const showPeopleSection = group.participants.length > 0 || viewers.length > 0;
+
   return (
     <div>
       <FirstLastSeenSection group={group} />
@@ -31,8 +49,16 @@ export default function StreamlinedSidebar({group, event, project}: Props) {
         </ErrorBoundary>
       )}
       <StreamlinedActivitySection group={group} />
-      <StyledBreak />
-      <PeopleSection group={group} />
+      {showPeopleSection && (
+        <Fragment>
+          <StyledBreak />
+          <PeopleSection
+            userParticipants={userParticipants}
+            teamParticipants={teamParticipants}
+            viewers={viewers}
+          />
+        </Fragment>
+      )}
       <StyledBreak />
       <SimilarIssuesSidebarSection />
       <StyledBreak />