[Bugfix] Device dropdown behavior updated for no devices (#2575)

dmceachernmsft · github-actions[bot] · web-flow · commit fce25f070db9 · 2022-12-12T15:24:38.000-08:00
* update dropdown behavior for no devices

* build stable API files

* remove test.only

* Change files

* Duplicate change files for beta release

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* update strings and revert props spread

* build stable API

* Build beta API files

* add new test for mobile

* update changefiles

* update for comments

* remove test.only

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* change snapshot names

* change screenshot names

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* delete redundant screenshots

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
diff --git a/change-beta/@azure-communication-react-254dcd24-ad35-401b-be39-ae52d3869471.json b/change-beta/@azure-communication-react-254dcd24-ad35-401b-be39-ae52d3869471.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update Composite dropdown behavior to correctly notify the user that they have no devices.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-254dcd24-ad35-401b-be39-ae52d3869471.json b/change/@azure-communication-react-254dcd24-ad35-401b-be39-ae52d3869471.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update Composite dropdown behavior to correctly notify the user that they have no devices.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md
@@ -551,6 +551,9 @@ export interface CallCompositeStrings {
     mutedMessage: string;
     networkReconnectMoreDetails: string;
     networkReconnectTitle: string;
+    noCamerasLabel: string;
+    noMicrophonesLabel: string;
+    noSpeakersLabel: string;
     openDialpadButtonLabel: string;
     openDtmfDialpadLabel: string;
     outboundCallingNoticeString: string;
diff --git a/packages/communication-react/review/stable/communication-react.api.md b/packages/communication-react/review/stable/communication-react.api.md
@@ -424,6 +424,9 @@ export interface CallCompositeStrings {
     mutedMessage: string;
     networkReconnectMoreDetails: string;
     networkReconnectTitle: string;
+    noCamerasLabel: string;
+    noMicrophonesLabel: string;
+    noSpeakersLabel: string;
     participantJoinedNoticeString: string;
     participantLeftNoticeString: string;
     privacyPolicy: string;
diff --git a/packages/react-composites/review/beta/react-composites.api.md b/packages/react-composites/review/beta/react-composites.api.md
@@ -400,6 +400,9 @@ export interface CallCompositeStrings {
     mutedMessage: string;
     networkReconnectMoreDetails: string;
     networkReconnectTitle: string;
+    noCamerasLabel: string;
+    noMicrophonesLabel: string;
+    noSpeakersLabel: string;
     openDialpadButtonLabel: string;
     openDtmfDialpadLabel: string;
     outboundCallingNoticeString: string;
diff --git a/packages/react-composites/review/stable/react-composites.api.md b/packages/react-composites/review/stable/react-composites.api.md
@@ -327,6 +327,9 @@ export interface CallCompositeStrings {
     mutedMessage: string;
     networkReconnectMoreDetails: string;
     networkReconnectTitle: string;
+    noCamerasLabel: string;
+    noMicrophonesLabel: string;
+    noSpeakersLabel: string;
     participantJoinedNoticeString: string;
     participantLeftNoticeString: string;
     privacyPolicy: string;
diff --git a/packages/react-composites/src/composites/CallComposite/Strings.tsx b/packages/react-composites/src/composites/CallComposite/Strings.tsx
@@ -33,10 +33,22 @@ export interface CallCompositeStrings {
    * Label for camera dropdown.
    */
   cameraLabel: string;
+  /**
+   * Label for when there are no cameras present on configuration screen.
+   */
+  noCamerasLabel: string;
   /**
    * Label for sound dropdown.
    */
   soundLabel: string;
+  /**
+   * Label for when no microphones were found on the configuration screen
+   */
+  noMicrophonesLabel: string;
+  /**
+   * Label for when no speakers were found on the configuration screen.
+   */
+  noSpeakersLabel: string;
   /**
    * Error shown when camera access is blocked by the browser.
    */
diff --git a/packages/react-composites/src/composites/CallComposite/components/ConfigurationpageCameraDropdown.tsx b/packages/react-composites/src/composites/CallComposite/components/ConfigurationpageCameraDropdown.tsx
@@ -41,14 +41,14 @@ export const ConfigurationpageCameraDropdown = (props: ConfigurationpageCameraDr
   /* @conditional-compile-remove(call-readiness) */
   const cameraBlockedDropdown = (
     <_DevicePermissionDropdown
+      {...props.dropdownProps}
       styles={dropDownStyles(theme)}
       constrain={{ video: true, audio: false }}
       strings={devicePermissionDropdownStringsCamera}
       icon={
         <CallCompositeIcon iconName="ControlButtonCameraOn" style={{ height: '1.25rem', marginRight: '0.625rem' }} />
       }
       onClick={props.onClickEnableDevicePermission}
-      {...props.dropdownProps}
     />
   );
 
diff --git a/packages/react-composites/src/composites/CallComposite/components/ConfigurationpageMicDropdown.tsx b/packages/react-composites/src/composites/CallComposite/components/ConfigurationpageMicDropdown.tsx
@@ -41,12 +41,12 @@ export const ConfigurationpageMicDropdown = (props: ConfigurationpageMicDropdown
   /* @conditional-compile-remove(call-readiness) */
   const microphoneBlockedDropdown = (
     <_DevicePermissionDropdown
+      {...props.dropdownProps}
       styles={dropDownStyles(theme)}
       constrain={{ video: false, audio: true }}
       strings={devicePermissionDropdownStringsMicrophone}
       icon={<CallCompositeIcon iconName="ControlButtonMicOn" style={{ height: '1.25rem', marginRight: '0.625rem' }} />}
       onClick={props.onClickEnableDevicePermission}
-      {...props.dropdownProps}
     />
   );
 
diff --git a/packages/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.tsx b/packages/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.tsx
@@ -102,6 +102,9 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
   const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;
   const cameraLabel = locale.strings.call.cameraLabel;
   const soundLabel = locale.strings.call.soundLabel;
+  const noSpeakersLabel = locale.strings.call.noSpeakersLabel;
+  const noCameraLabel = locale.strings.call.noCamerasLabel;
+  const noMicLabel = locale.strings.call.noMicrophonesLabel;
 
   const cameraPermissionGranted = props.cameraPermissionGranted;
   const micPermissionGranted = props.microphonePermissionGranted;
@@ -131,14 +134,18 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
   /* @conditional-compile-remove(call-readiness) */
   const dropdownProps = usePropsFor(_DevicePermissionDropdown);
 
+  const hasCameras = props.cameras.length > 0;
+  const hasMicrophones = props.microphones.length > 0;
+  const hasSpeakers = props.speakers.length > 0;
+
   const cameraGrantedDropdown = (
     <Dropdown
       data-ui-id="call-composite-local-camera-settings"
       aria-labelledby={'call-composite-local-camera-settings-label'}
-      placeholder={defaultPlaceHolder}
+      placeholder={hasCameras ? defaultPlaceHolder : noCameraLabel}
       options={cameraPermissionGranted ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }]}
       styles={dropDownStyles(theme)}
-      disabled={!cameraPermissionGranted}
+      disabled={!cameraPermissionGranted || !hasCameras}
       errorMessage={
         props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
           ? undefined
@@ -165,9 +172,9 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
       {roleCanUseMic && (
         <Dropdown
           aria-labelledby={'call-composite-local-sound-settings-label'}
-          placeholder={defaultPlaceHolder}
+          placeholder={hasMicrophones ? defaultPlaceHolder : noMicLabel}
           styles={dropDownStyles(theme)}
-          disabled={!micPermissionGranted}
+          disabled={!micPermissionGranted || !hasMicrophones}
           errorMessage={
             props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
               ? undefined
@@ -238,7 +245,7 @@ export const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element
           />
           <Dropdown
             aria-labelledby={'call-composite-local-sound-settings-label'}
-            placeholder={defaultPlaceHolder}
+            placeholder={hasSpeakers ? defaultPlaceHolder : noSpeakersLabel}
             styles={dropDownStyles(theme)}
             disabled={props.speakers.length === 0}
             options={getDropDownList(props.speakers)}
diff --git a/packages/react-composites/src/composites/CallComposite/components/LocalPreview.tsx b/packages/react-composites/src/composites/CallComposite/components/LocalPreview.tsx
@@ -53,6 +53,14 @@ export const LocalPreview = (props: LocalPreviewProps): JSX.Element => {
     isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
   }, [adapter, isLocalMicrophoneEnabled]);
 
+  const hasNoDevices =
+    devicesButtonProps.cameras.length === 0 &&
+    devicesButtonProps.microphones.length === 0 &&
+    devicesButtonProps.speakers.length === 0;
+
+  const hasCameras = devicesButtonProps.cameras.length > 0;
+  const hasMicrophones = devicesButtonProps.microphones.length > 0;
+
   const theme = useTheme();
   const onRenderPlaceholder = useCallback((): JSX.Element => {
     return (
@@ -103,21 +111,21 @@ export const LocalPreview = (props: LocalPreviewProps): JSX.Element => {
             data-ui-id="call-composite-local-device-settings-microphone-button"
             checked={isLocalMicrophoneEnabled}
             onToggleMicrophone={onToggleMic}
-            disabled={!microphonePermissionGranted}
+            disabled={!microphonePermissionGranted || !hasMicrophones}
             showLabel={true}
           />
           <CameraButton
             data-ui-id="call-composite-local-device-settings-camera-button"
             {...cameraButtonProps}
             showLabel={true}
-            disabled={!cameraPermissionGranted}
+            disabled={!cameraPermissionGranted || !hasCameras}
           />
           {props.showDevicesButton && (
             <DevicesButton
               data-ui-id="call-composite-local-device-settings-options-button"
               {...devicesButtonProps}
               // disable button whilst all other buttons are disabled
-              disabled={!microphonePermissionGranted || !cameraPermissionGranted}
+              disabled={!microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices}
               showLabel={true}
               styles={devicesButtonStyles}
             />
diff --git a/packages/react-composites/src/composites/localization/locales/en-US/strings.json b/packages/react-composites/src/composites/localization/locales/en-US/strings.json
@@ -1,6 +1,7 @@
 {
   "call": {
     "cameraLabel": "Camera",
+    "noCamerasLabel": "No cameras found",
     "cameraPermissionDenied": "Your browser is blocking access to your camera",
     "cameraTurnedOff": "Your camera is turned off",
     "chatButtonLabel": "Chat",
@@ -53,6 +54,8 @@
     "roomNotFoundDetails": "Room ID provided is not valid.",
     "roomNotFoundTitle": "Room not found",
     "soundLabel": "Sound",
+    "noMicrophonesLabel": "No microphones found",
+    "noSpeakersLabel": "No speakers found",
     "startCallButtonLabel": "Start call",
     "openDialpadButtonLabel": "Dial phone number",
     "peoplePaneAddPeopleButtonLabel": "Add People",
diff --git a/packages/react-composites/tests/browser/call/hermetic/ConfigurationPage.test.ts b/packages/react-composites/tests/browser/call/hermetic/ConfigurationPage.test.ts
@@ -3,8 +3,17 @@
 
 import { buildUrlWithMockAdapter, defaultMockCallAdapterState, test } from './fixture';
 import { expect, Page } from '@playwright/test';
-import { dataUiId, stableScreenshot, waitForCallCompositeToLoad, waitForSelector } from '../../common/utils';
+import {
+  dataUiId,
+  isTestProfileDesktop,
+  isTestProfileMobile,
+  stableScreenshot,
+  waitForCallCompositeToLoad,
+  waitForSelector
+} from '../../common/utils';
+import { IDS } from '../../common/constants';
 import type { MockCallAdapterState } from '../../../common';
+import type { DeviceManagerState } from '@internal/calling-stateful-client';
 
 test.describe('Call Composite E2E Configuration Screen Tests', () => {
   test('composite pages load completely', async ({ page, serverUrl }) => {
@@ -32,6 +41,26 @@ test.describe('Call Composite E2E Configuration Screen Tests', () => {
     await waitForCallCompositeToLoad(page);
     expect(await stableScreenshot(page)).toMatchSnapshot('call-configuration-page-with-call-details.png');
   });
+
+  test('Configuration screen desktop should show no devices available', async ({ page, serverUrl }, testInfo) => {
+    test.skip(isTestProfileMobile(testInfo));
+    const state = defaultMockConfigurationPageState();
+    state.devices = deviceManagerWithNoDevicesState();
+    await page.goto(buildUrlWithMockAdapter(serverUrl, state));
+    expect(await stableScreenshot(page)).toMatchSnapshot(`desktop-call-configuration-page-no-devices.png`);
+  });
+
+  test('Configuration screen mobile buttons disabled because no devices', async ({ page, serverUrl }, testInfo) => {
+    test.skip(isTestProfileDesktop(testInfo));
+    const state = defaultMockConfigurationPageState();
+    state.devices = deviceManagerWithNoDevicesState();
+
+    await page.goto(buildUrlWithMockAdapter(serverUrl, state));
+
+    await waitForSelector(page, dataUiId(IDS.configurationScreenDevicesButton));
+
+    expect(await stableScreenshot(page)).toMatchSnapshot(`mobile-call-configuration-page-no-devices.png`);
+  });
 });
 
 function defaultMockConfigurationPageState(): MockCallAdapterState {
@@ -55,3 +84,14 @@ const stubLocalCameraName = async (page: Page): Promise<void> => {
     }
   });
 };
+
+const deviceManagerWithNoDevicesState = (): DeviceManagerState => {
+  return {
+    cameras: [],
+    microphones: [],
+    speakers: [],
+    isSpeakerSelectionAvailable: true,
+    unparentedViews: [],
+    deviceAccess: { audio: true, video: true }
+  };
+};
diff --git a/packages/react-composites/tests/browser/common/constants.ts b/packages/react-composites/tests/browser/common/constants.ts
@@ -31,5 +31,6 @@ export const IDS = {
   callPage: 'call-page',
   unsupportedEnvironmentIcon: 'unsupported-environment-icon',
   unsupportedEnvironmentLink: 'unsupported-environment-link',
-  lobbyScreenTitle: 'lobbyScreenTitle'
+  lobbyScreenTitle: 'lobbyScreenTitle',
+  configurationScreenDevicesButton: 'call-composite-local-device-settings-options-button'
 };
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallReadiness.test.ts-snapshots/call-composite-config-screen-with-call-readiness-opted-out-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallReadiness.test.ts-snapshots/call-composite-config-screen-with-call-readiness-opted-out-Desktop-Chrome-linux.png
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/desktop-call-configuration-page-no-devices-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/desktop-call-configuration-page-no-devices-Desktop-Chrome-linux.png
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/mobile-call-configuration-page-no-devices-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/mobile-call-configuration-page-no-devices-Mobile-Android-Landscape-linux.png
diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/mobile-call-configuration-page-no-devices-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/mobile-call-configuration-page-no-devices-Mobile-Android-Portrait-linux.png
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/desktop-call-configuration-page-no-devices-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/desktop-call-configuration-page-no-devices-Desktop-Chrome-linux.png
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/mobile-call-configuration-page-no-devices-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/mobile-call-configuration-page-no-devices-Mobile-Android-Landscape-linux.png
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/mobile-call-configuration-page-no-devices-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ConfigurationPage.test.ts-snapshots/mobile-call-configuration-page-no-devices-Mobile-Android-Portrait-linux.png
