[Bugfix] add participant count to participant list and Composite people pane (#2911)

* add strings to component

* add participant count to composites

* Change files

* Duplicate change files for beta release

* build API files

* update stable api

* Update packages/react-composites CallWithChatComposite browser test snapshots

* update title creation

* fix cc

* add test for large participant count

* Update embed html bundle snapshots

* Update packages/react-composites ChatComposite browser test snapshots

* remove test.only

* create large participant count test

* fix lint

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update embed html bundle snapshots

* Update packages/react-composites CallComposite browser test snapshots

* fix test participant counts

* fix lint

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* hide counter if count undefined

* remove async useEffect

* fix lint

* fix API files

* build API files

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites ChatComposite browser test snapshots

* Update embed html bundle snapshots

* Update packages/react-composites CallComposite browser test snapshots

* fix stable API

* fix comments

* fix bad name

* fix missing docs

* update string behavior for subtitle

* Update packages/react-composites CallWithChatComposite browser test snapshots

---------

Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: dmceachernmsft

change-beta/@azure-communication-react-a46131ef-6f25-489a-aa25-18a513a464e7.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce total participant counts to participant list and people pane in composites",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-a46131ef-6f25-489a-aa25-18a513a464e7.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce total participant counts to participant list and people pane in composites",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/calling-component-bindings/review/beta/calling-component-bindings.api.md

@@ -271,6 +271,7 @@ export const microphoneButtonSelector: MicrophoneButtonSelector;
 export type ParticipantListSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
 };
 
 // @public

packages/calling-component-bindings/review/stable/calling-component-bindings.api.md

@@ -196,6 +196,7 @@ export const microphoneButtonSelector: MicrophoneButtonSelector;
 export type ParticipantListSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
 };
 
 // @public

packages/calling-component-bindings/src/participantListSelector.ts

@@ -17,6 +17,7 @@ import { memoizedConvertAllremoteParticipants } from './utils/participantListSel
 /* @conditional-compile-remove(rooms) */
 import { memoizedConvertAllremoteParticipantsBeta } from './utils/participantListSelectorUtils';
 import { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';
+import { getParticipantCount } from './baseSelectors';
 import { isPhoneNumberIdentifier } from '@azure/communication-common';
 /* @conditional-compile-remove(communication-common-beta-v3) */
 import { isMicrosoftBotIdentifier } from '@azure/communication-common';
@@ -92,6 +93,7 @@ export type ParticipantListSelector = (
 ) => {
   participants: CallParticipantListParticipant[];
   myUserId: string;
+  totalParticipantCount?: number;
 };
 
 /**
@@ -100,16 +102,18 @@ export type ParticipantListSelector = (
  * @public
  */
 export const participantListSelector: ParticipantListSelector = createSelector(
-  [getIdentifier, getDisplayName, getRemoteParticipants, getIsScreenSharingOn, getIsMuted],
+  [getIdentifier, getDisplayName, getRemoteParticipants, getIsScreenSharingOn, getIsMuted, getParticipantCount],
   (
     userId,
     displayName,
     remoteParticipants,
     isScreenSharingOn,
-    isMuted
+    isMuted,
+    partitipantCount
   ): {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
   } => {
     const participants = remoteParticipants
       ? convertRemoteParticipantsToParticipantListParticipants(
@@ -125,9 +129,13 @@ export const participantListSelector: ParticipantListSelector = createSelector(
       // Local participant can never remove themselves.
       isRemovable: false
     });
+    /* @conditional-compile-remove(total-participant-count) */
+    const totalParticipantCount = partitipantCount;
     return {
       participants: participants,
-      myUserId: userId
+      myUserId: userId,
+      /* @conditional-compile-remove(total-participant-count) */
+      totalParticipantCount: totalParticipantCount
     };
   }
 );

packages/communication-react/review/beta/communication-react.api.md

@@ -1861,6 +1861,7 @@ export interface ComponentStrings {
     MicrophoneSitePermissionsDeniedSafari: SitePermissionsStrings;
     MicrophoneSitePermissionsRequest: SitePermissionsStrings;
     participantItem: ParticipantItemStrings;
+    ParticipantList: ParticipantListStrings;
     participantsButton: ParticipantsButtonStrings;
     screenShareButton: ScreenShareButtonStrings;
     sendBox: SendBoxStrings;
@@ -3196,15 +3197,23 @@ export type ParticipantListProps = {
     onParticipantClick?: (participant?: ParticipantListParticipant) => void;
     styles?: ParticipantListStyles;
     showParticipantOverflowTooltip?: boolean;
+    totalParticipantCount?: number;
+    strings?: ParticipantListStrings;
     participantAriaLabelledBy?: string;
 };
 
 // @public
 export type ParticipantListSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
 };
 
+// @beta
+export interface ParticipantListStrings {
+    overflowParticipantCount?: string;
+}
+
 // @public
 export interface ParticipantListStyles extends BaseCustomStyles {
     participantItemStyles?: ParticipantListItemStyles;

packages/communication-react/review/stable/communication-react.api.md

@@ -2216,6 +2216,7 @@ export type ParticipantListProps = {
 export type ParticipantListSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
     participants: CallParticipantListParticipant[];
     myUserId: string;
+    totalParticipantCount?: number;
 };
 
 // @public

packages/communication-react/src/index.ts

@@ -151,6 +151,9 @@ export type {
   MicrophoneSitePermissionsProps
 } from '../../react-components/src';
 
+/* @conditional-compile-remove(total-participant-count) */
+export type { ParticipantListStrings } from '../../react-components/src';
+
 /* @conditional-compile-remove(mention) */
 export type {
   MentionOptions,

packages/react-components/review/beta/react-components.api.md

@@ -618,6 +618,7 @@ export interface ComponentStrings {
     MicrophoneSitePermissionsDeniedSafari: SitePermissionsStrings;
     MicrophoneSitePermissionsRequest: SitePermissionsStrings;
     participantItem: ParticipantItemStrings;
+    ParticipantList: ParticipantListStrings;
     participantsButton: ParticipantsButtonStrings;
     screenShareButton: ScreenShareButtonStrings;
     sendBox: SendBoxStrings;
@@ -1618,9 +1619,16 @@ export type ParticipantListProps = {
     onParticipantClick?: (participant?: ParticipantListParticipant) => void;
     styles?: ParticipantListStyles;
     showParticipantOverflowTooltip?: boolean;
+    totalParticipantCount?: number;
+    strings?: ParticipantListStrings;
     participantAriaLabelledBy?: string;
 };
 
+// @beta
+export interface ParticipantListStrings {
+    overflowParticipantCount?: string;
+}
+
 // @public
 export interface ParticipantListStyles extends BaseCustomStyles {
     participantItemStyles?: ParticipantListItemStyles;

packages/react-components/src/components/ParticipantList.tsx

@@ -10,6 +10,8 @@ import {
   PersonaPresence,
   Stack
 } from '@fluentui/react';
+/* @conditional-compile-remove(total-participant-count) */
+import { Text } from '@fluentui/react';
 import React, { useCallback, useMemo } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
@@ -23,6 +25,7 @@ import {
 } from '../types';
 import { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';
 import { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';
+import { _formatString } from '@internal/acs-ui-common';
 
 /**
  * Styles for the {@link ParticipantList} {@link ParticipantItem}.
@@ -44,6 +47,19 @@ export interface ParticipantListStyles extends BaseCustomStyles {
   participantItemStyles?: ParticipantListItemStyles;
 }
 
+/* @conditional-compile-remove(total-participant-count) */
+/**
+ * Strings for the {@link ParticipantList}.
+ *
+ * @beta
+ */
+export interface ParticipantListStrings {
+  /**
+   * String for rendering the count of participants not contained in the displayed participant list
+   */
+  overflowParticipantCount?: string;
+}
+
 /**
  * A callback for providing custom menu items for each participant in {@link ParticipantList}.
  *
@@ -85,6 +101,12 @@ export type ParticipantListProps = {
   styles?: ParticipantListStyles;
   /** Optional value to determine if the tooltip should be shown for participants or not */
   showParticipantOverflowTooltip?: boolean;
+  /* @conditional-compile-remove(total-participant-count) */
+  /** Total number of people in the call. This number can be larger than the remote participant count. */
+  totalParticipantCount?: number;
+  /* @conditional-compile-remove(total-participant-count) */
+  /** Strings for the participant list */
+  strings?: ParticipantListStrings;
   /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */
   participantAriaLabelledBy?: string;
 };
@@ -190,11 +212,17 @@ export const ParticipantList = (props: ParticipantListProps): JSX.Element => {
     onRenderParticipant,
     onFetchParticipantMenuItems,
     showParticipantOverflowTooltip,
+    /* @conditional-compile-remove(total-participant-count) */
+    totalParticipantCount,
+    /* @conditional-compile-remove(total-participant-count) */
+    strings,
     participantAriaLabelledBy
   } = props;
 
   const ids = useIdentifiers();
-  const strings = useLocale().strings.participantItem;
+  const participantItemStrings = useLocale().strings.participantItem;
+  /* @conditional-compile-remove(total-participant-count) */
+  const participantListStrings = useLocale().strings.ParticipantList;
 
   const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {
     return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
@@ -209,7 +237,7 @@ export const ParticipantList = (props: ParticipantListProps): JSX.Element => {
       if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {
         menuItems.push({
           key: 'remove',
-          text: strings.removeButtonLabel,
+          text: participantItemStrings.removeButtonLabel,
           onClick: () => onRemoveParticipant(participant.userId),
           itemProps: {
             styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles
@@ -230,22 +258,27 @@ export const ParticipantList = (props: ParticipantListProps): JSX.Element => {
       onFetchParticipantMenuItems,
       onRemoveParticipant,
       props.styles?.participantItemStyles?.participantSubMenuItemsStyles,
-      strings.removeButtonLabel
+      participantItemStrings.removeButtonLabel
     ]
   );
 
   const participantItemStyles = useMemo(
     () => merge(participantListItemStyle, props.styles?.participantItemStyles),
     [props.styles?.participantItemStyles]
   );
+
+  /* @conditional-compile-remove(total-participant-count) */
+  const overflowParticipantCountString =
+    strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;
+
   return (
     <Stack data-ui-id={ids.participantList} className={mergeStyles(participantListStyle, props.styles?.root)}>
       {displayedParticipants.map((participant: ParticipantListParticipant) =>
         onRenderParticipant
           ? onRenderParticipant(participant)
           : onRenderParticipantDefault(
               participant,
-              strings,
+              participantItemStrings,
               myUserId,
               onRenderAvatar,
               createParticipantMenuItems,
@@ -255,6 +288,17 @@ export const ParticipantList = (props: ParticipantListProps): JSX.Element => {
               participantAriaLabelledBy
             )
       )}
+      {
+        /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&
+          totalParticipantCount &&
+          totalParticipantCount > displayedParticipants.length && (
+            <Text style={{ fontWeight: 400, margin: '0.5rem' }}>
+              {_formatString(overflowParticipantCountString, {
+                overflowCount: `${totalParticipantCount - displayedParticipants.length}`
+              })}
+            </Text>
+          )
+      }
     </Stack>
   );
 };