Skip to content

Commit d5c6baf

Browse files
carocao-msftcarocao-msft
authored
Add troubleshooting guide error bar to call composite config screen (#2433)
* add error bar * Change files * pr fix
1 parent f77ff83 commit d5c6baf

11 files changed

Lines changed: 221 additions & 53 deletions

File tree

‎change/@internal-react-components-d1226ee2-d5ac-43b5-bd50-021d08c81673.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Enabled troubleshooting guide error bar to display network error guide/device error guide based on error type ",
4+
"packageName": "@internal/react-components",
5+
"email": "carolinecao@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@internal-react-composites-93739eae-6467-4523-af0e-4afbe6d8c5c9.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Add troubleshooting error bar to call composite config ",
4+
"packageName": "@internal/react-composites",
5+
"email": "carolinecao@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@internal-storybook-129a9fcb-bbc7-4af3-a5bf-d762a10c02d0.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Updated troubleshooting error bar storybook ",
4+
"packageName": "@internal/storybook",
5+
"email": "carolinecao@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1464,10 +1464,12 @@ export interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {
14641464

14651465
// @internal
14661466
export interface _TroubleshootingGuideErrorBarStrings {
1467+
// (undocumented)
1468+
devicePermissionLinkText?: string;
14671469
// (undocumented)
14681470
dismissButtonText?: string;
14691471
// (undocumented)
1470-
linkText?: string;
1472+
networkTroubleshootingLinkText?: string;
14711473
}
14721474

14731475
// @public

‎packages/react-components/review/stable/react-components.api.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1287,10 +1287,12 @@ export interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {
12871287

12881288
// @internal
12891289
export interface _TroubleshootingGuideErrorBarStrings {
1290+
// (undocumented)
1291+
devicePermissionLinkText?: string;
12901292
// (undocumented)
12911293
dismissButtonText?: string;
12921294
// (undocumented)
1293-
linkText?: string;
1295+
networkTroubleshootingLinkText?: string;
12941296
}
12951297

12961298
// @public

‎packages/react-components/src/components/TroubleshootingGuideErrorBar.tsx‎

Lines changed: 59 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ import {
2121
* @internal
2222
*/
2323
export interface _TroubleshootingGuideErrorBarStrings {
24-
linkText?: string;
24+
devicePermissionLinkText?: string;
25+
networkTroubleshootingLinkText?: string;
2526
dismissButtonText?: string;
2627
}
2728

@@ -108,47 +109,70 @@ export const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorB
108109

109110
return (
110111
<Stack data-ui-id="error-bar-stack">
111-
{toShow.map((error) => (
112-
<MessageBar
113-
{...props}
114-
styles={messageBarStyle(theme, messageBarType(error.type))}
115-
key={error.type}
116-
messageBarType={messageBarType(error.type)}
117-
messageBarIconProps={messageBarIconProps(error.type)}
118-
actions={
119-
<MessageBarButton
120-
text={troubleshootingGuideStrings.dismissButtonText}
121-
styles={dismissButtonStyle(theme)}
122-
onClick={() => {
123-
setDismissedErrors(dismissError(dismissedErrors, error));
124-
}}
125-
ariaLabel={strings.dismissButtonAriaLabel}
126-
/>
127-
}
128-
isMultiline={false}
129-
>
130-
{onPermissionsTroubleshootingClick || onNetworkingTroubleshootingClick ? (
131-
<div>
132-
{strings[error.type]}
112+
{toShow.map((error) => {
113+
const devicePermissionErrorBar = (
114+
<div>
115+
{strings[error.type]}{' '}
116+
{onPermissionsTroubleshootingClick && (
133117
<Link
134118
styles={linkStyle(theme)}
135119
onClick={() => {
136-
if (onPermissionsTroubleshootingClick) {
137-
onPermissionsTroubleshootingClick(permissionsState);
138-
} else if (onNetworkingTroubleshootingClick) {
139-
onNetworkingTroubleshootingClick();
140-
}
120+
onPermissionsTroubleshootingClick(permissionsState);
141121
}}
142122
underline
143123
>
144-
<span>{troubleshootingGuideStrings.linkText}</span>
124+
<span>{troubleshootingGuideStrings.devicePermissionLinkText}</span>
145125
</Link>
146-
</div>
147-
) : (
148-
<div>{strings[error.type]} </div>
149-
)}
150-
</MessageBar>
151-
))}
126+
)}
127+
</div>
128+
);
129+
130+
const networkErrorBar = (
131+
<div>
132+
{strings[error.type]}{' '}
133+
{onNetworkingTroubleshootingClick && (
134+
<Link styles={linkStyle(theme)} onClick={onNetworkingTroubleshootingClick} underline>
135+
<span>{troubleshootingGuideStrings.networkTroubleshootingLinkText}</span>
136+
</Link>
137+
)}
138+
</div>
139+
);
140+
141+
return (
142+
<MessageBar
143+
{...props}
144+
styles={messageBarStyle(theme, messageBarType(error.type))}
145+
key={error.type}
146+
messageBarType={messageBarType(error.type)}
147+
messageBarIconProps={messageBarIconProps(error.type)}
148+
actions={
149+
<MessageBarButton
150+
text={troubleshootingGuideStrings.dismissButtonText}
151+
styles={dismissButtonStyle(theme)}
152+
onClick={() => {
153+
setDismissedErrors(dismissError(dismissedErrors, error));
154+
}}
155+
ariaLabel={strings.dismissButtonAriaLabel}
156+
/>
157+
}
158+
isMultiline={false}
159+
>
160+
{showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}
161+
</MessageBar>
162+
);
163+
})}
152164
</Stack>
153165
);
154166
};
167+
168+
const showErrorBar = (
169+
errorType: string,
170+
devicePermissionErrorBar: JSX.Element,
171+
networkErrorBar: JSX.Element
172+
): JSX.Element => {
173+
if (errorType === 'callNetworkQualityLow') {
174+
return networkErrorBar;
175+
} else {
176+
return devicePermissionErrorBar;
177+
}
178+
};

‎packages/react-composites/src/composites/CallComposite/CallComposite.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,10 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
217217
}}
218218
/* @conditional-compile-remove(call-readiness) */
219219
devicePermissions={props.options?.devicePermissions}
220+
/* @conditional-compile-remove(call-readiness) */
221+
onPermissionsTroubleshootingClick={props.options?.onPermissionsTroubleshootingClick}
222+
/* @conditional-compile-remove(call-readiness) */
223+
onNetworkingTroubleShootingClick={props.options?.onNetworkingTroubleShootingClick}
220224
/>
221225
);
222226
break;

‎packages/react-composites/src/composites/CallComposite/components/ConfigurationpageErrorBar.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT license.
3+
import React from 'react';
4+
import {
5+
_DevicePermissionDropdownStrings,
6+
_DevicePermissionDropdown,
7+
_DevicePermissionDropdownProps,
8+
ActiveErrorMessage,
9+
ErrorBarProps,
10+
_TroubleshootingGuideErrorBarStrings,
11+
_TroubleshootingGuideErrorBar,
12+
ErrorBar
13+
} from '@internal/react-components';
14+
import { CallingHandlers } from '@internal/calling-component-bindings';
15+
import { Common } from '@internal/acs-ui-common';
16+
17+
/**
18+
* @private
19+
*/
20+
export interface ConfigurationpageErrorBarProps {
21+
errorBarProps: {
22+
activeErrorMessages: ActiveErrorMessage[];
23+
} & Common<CallingHandlers, ErrorBarProps>;
24+
showTroubleShootingErrorBar?: boolean;
25+
onPermissionsTroubleshootingClick?: (permissionsState: {
26+
camera: PermissionState;
27+
microphone: PermissionState;
28+
}) => void;
29+
onNetworkingTroubleShootingClick?: () => void;
30+
permissionsState?: {
31+
camera: PermissionState;
32+
microphone: PermissionState;
33+
};
34+
}
35+
36+
/**
37+
* @private
38+
*/
39+
export const ConfigurationpageErrorBar = (props: ConfigurationpageErrorBarProps): JSX.Element => {
40+
const {
41+
errorBarProps,
42+
/* @conditional-compile-remove(call-readiness) */
43+
showTroubleShootingErrorBar = false,
44+
/* @conditional-compile-remove(call-readiness) */
45+
onPermissionsTroubleshootingClick,
46+
/* @conditional-compile-remove(call-readiness) */
47+
onNetworkingTroubleShootingClick,
48+
/* @conditional-compile-remove(call-readiness) */
49+
permissionsState
50+
} = props;
51+
52+
/* @conditional-compile-remove(call-readiness) */
53+
const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {
54+
devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
55+
networkTroubleshootingLinkText: 'Troubleshooting Network Connection',
56+
dismissButtonText: 'OK'
57+
};
58+
59+
/* @conditional-compile-remove(call-readiness) */
60+
if (showTroubleShootingErrorBar) {
61+
return (
62+
<_TroubleshootingGuideErrorBar
63+
troubleshootingGuideStrings={permissionTroubleshootingGuideStrings}
64+
onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}
65+
onNetworkingTroubleshootingClick={onNetworkingTroubleShootingClick}
66+
permissionsState={permissionsState}
67+
{...errorBarProps}
68+
/>
69+
);
70+
}
71+
72+
return <ErrorBar {...errorBarProps} />;
73+
};

‎packages/react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import { usePropsFor } from '../hooks/usePropsFor';
3535
import { useAdapter } from '../adapter/CallAdapterProvider';
3636
/* @conditional-compile-remove(call-readiness) */
3737
import { DevicePermissionRestrictions } from '../CallComposite';
38+
import { ConfigurationpageErrorBar } from '../components/ConfigurationpageErrorBar';
3839

3940
/**
4041
* @private
@@ -44,13 +45,26 @@ export interface ConfigurationPageProps {
4445
startCallHandler(): void;
4546
/* @conditional-compile-remove(call-readiness) */
4647
devicePermissions?: DevicePermissionRestrictions;
48+
/* @conditional-compile-remove(call-readiness) */
49+
onPermissionsTroubleshootingClick?: (permissionsState: {
50+
camera: PermissionState;
51+
microphone: PermissionState;
52+
}) => void;
53+
/* @conditional-compile-remove(call-readiness) */
54+
onNetworkingTroubleShootingClick?: () => void;
4755
}
4856

4957
/**
5058
* @private
5159
*/
5260
export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {
53-
const { startCallHandler, mobileView, /* @conditional-compile-remove(call-readiness) */ devicePermissions } = props;
61+
const {
62+
startCallHandler,
63+
mobileView,
64+
/* @conditional-compile-remove(call-readiness) */ devicePermissions,
65+
/* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,
66+
/* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick
67+
} = props;
5468

5569
const options = useAdaptedSelector(getCallingSelector(DevicesButton));
5670
const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);
@@ -108,10 +122,34 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
108122
/* @conditional-compile-remove(rooms) */
109123
mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;
110124

125+
/* @conditional-compile-remove(call-readiness) */
126+
const permissionsState: {
127+
camera: PermissionState;
128+
microphone: PermissionState;
129+
} = {
130+
camera: cameraPermissionGranted ? 'granted' : 'denied',
131+
microphone: microphonePermissionGranted ? 'granted' : 'denied'
132+
};
133+
/* @conditional-compile-remove(call-readiness) */
134+
const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
135+
111136
return (
112137
<Stack className={mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop}>
113138
<Stack styles={bannerNotificationStyles}>
114-
<ErrorBar {...errorBarProps} />
139+
<ConfigurationpageErrorBar
140+
/* @conditional-compile-remove(call-readiness) */
141+
// show trouble shooting error bar when encountering network error/ permission error
142+
showTroubleShootingErrorBar={
143+
!cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0
144+
}
145+
/* @conditional-compile-remove(call-readiness) */
146+
permissionsState={permissionsState}
147+
/* @conditional-compile-remove(call-readiness) */
148+
onNetworkingTroubleShootingClick={onNetworkingTroubleShootingClick}
149+
/* @conditional-compile-remove(call-readiness) */
150+
onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}
151+
errorBarProps={errorBarProps}
152+
/>
115153
</Stack>
116154
<Stack
117155
grow

‎packages/storybook/stories/INTERNAL/CallReadiness/TroubleshootingGuideErrorBar/TroubleshootingGuideErrorBar.stories.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,9 @@ const TroubleshootingGuideErrorBarStory = (args): JSX.Element => {
3232
microphone: 'granted'
3333
};
3434

35-
const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {
36-
linkText: 'Troubleshooting Camera and Microphone Permissions',
37-
dismissButtonText: 'OK'
38-
};
39-
40-
const networkTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {
41-
linkText: 'Troubleshooting Network Connection',
35+
const troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {
36+
devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
37+
networkTroubleshootingLinkText: 'Troubleshooting Network Connection',
4238
dismissButtonText: 'OK'
4339
};
4440

@@ -54,15 +50,9 @@ const TroubleshootingGuideErrorBarStory = (args): JSX.Element => {
5450
<_TroubleshootingGuideErrorBar
5551
activeErrorMessages={args.errorTypes.map((t) => ({ type: t, timestamp: new Date(Date.now()) }))}
5652
onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}
57-
permissionsState={permissionsState}
58-
troubleshootingGuideStrings={permissionTroubleshootingGuideStrings}
59-
/>
60-
61-
<_TroubleshootingGuideErrorBar
62-
activeErrorMessages={args.errorTypes.map((t) => ({ type: t, timestamp: new Date(Date.now()) }))}
6353
onNetworkingTroubleshootingClick={onNetworkingTroubleshootingClick}
6454
permissionsState={permissionsState}
65-
troubleshootingGuideStrings={networkTroubleshootingGuideStrings}
55+
troubleshootingGuideStrings={troubleshootingGuideStrings}
6656
/>
6757
</div>
6858
);

0 commit comments

Comments
 (0)
⚡