Skip to content

Commit b3eb013

Browse files
dmceachernmsftdmceachernmsft
authored
[Call Readiness] Unsupported browser version UI (#2552)
* add new types and exports * planning comments * add new component to storybook * storybook updates for new component * build API files * update logic to show new component in composite * Change files * Duplicate change files for beta release * Update @azure-communication-react-0c042af8-f59d-4af5-a8ed-26ff9ea334f1.json * Update @azure-communication-react-0c042af8-f59d-4af5-a8ed-26ff9ea334f1.json * fix lint * fix cc issues * refactor to use Child component * update for comments * fix cc issues * fix cc issues * updates per comments * flip storybook default behavior
1 parent f9f9f8c commit b3eb013

26 files changed

Lines changed: 408 additions & 156 deletions

‎change-beta/@azure-communication-react-0c042af8-f59d-4af5-a8ed-26ff9ea334f1.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": "Introduce UI to inform the user that their browser version is out of date.",
4+
"packageName": "@azure/communication-react",
5+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@azure-communication-react-0c042af8-f59d-4af5-a8ed-26ff9ea334f1.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": "Introduce UI to inform the user that their browser version is out of date.",
4+
"packageName": "@azure/communication-react",
5+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1511,6 +1511,7 @@ export interface ComponentStrings {
15111511
sendBox: SendBoxStrings;
15121512
typingIndicator: TypingIndicatorStrings;
15131513
UnsupportedBrowser: UnsupportedBrowserStrings;
1514+
UnsupportedBrowserVersion: UnsupportedBrowserVersionStrings;
15141515
videoGallery: VideoGalleryStrings;
15151516
videoTile: VideoTileStrings;
15161517
}
@@ -1809,7 +1810,7 @@ export const DEFAULT_COMPONENT_ICONS: {
18091810
DomainPermissionMic: JSX.Element;
18101811
DomainPermissionCameraDenied: JSX.Element;
18111812
DomainPermissionMicDenied: JSX.Element;
1812-
UnsupportedBrowserWarning: JSX.Element;
1813+
UnsupportedEnvironmentWarning: JSX.Element;
18131814
BrowserPermissionDeniedError: JSX.Element;
18141815
VideoTilePinned: JSX.Element;
18151816
VideoTileMoreOptions: JSX.Element;
@@ -1902,7 +1903,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
19021903
DomainPermissionMic: JSX.Element;
19031904
DomainPermissionCameraDenied: JSX.Element;
19041905
DomainPermissionMicDenied: JSX.Element;
1905-
UnsupportedBrowserWarning: JSX.Element;
1906+
UnsupportedEnvironmentWarning: JSX.Element;
19061907
BrowserPermissionDeniedError: JSX.Element;
19071908
VideoTilePinned: JSX.Element;
19081909
VideoTileMoreOptions: JSX.Element;
@@ -3078,7 +3079,23 @@ export interface UnsupportedBrowserProps {
30783079

30793080
// @beta
30803081
export interface UnsupportedBrowserStrings {
3081-
moreHelpLink: string;
3082+
moreHelpText: string;
3083+
primaryText: string;
3084+
secondaryText: string;
3085+
}
3086+
3087+
// @beta
3088+
export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps) => JSX.Element;
3089+
3090+
// @beta
3091+
export interface UnsupportedBrowserVersionProps {
3092+
onTroubleshootingClick?: () => void;
3093+
strings: UnsupportedBrowserVersionStrings;
3094+
}
3095+
3096+
// @beta
3097+
export interface UnsupportedBrowserVersionStrings {
3098+
moreHelpText: string;
30823099
primaryText: string;
30833100
secondaryText: string;
30843101
}

‎packages/communication-react/src/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,10 @@ export * from './mergedHooks';
292292
export { UnsupportedBrowser } from '../../react-components/src';
293293
/* @conditional-compile-remove(unsupported-browser) */
294294
export type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from '../../react-components/src';
295+
/* @conditional-compile-remove(unsupported-browser) */
296+
export { UnsupportedBrowserVersion } from '../../react-components/src';
297+
/* @conditional-compile-remove(unsupported-browser) */
298+
export type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from '../../react-components/src';
295299
/* @conditional-compile-remove(call-readiness) */
296300
export { _DevicePermissionDropdown } from '../../react-components/src';
297301
/* @conditional-compile-remove(call-readiness) */

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,7 @@ export interface ComponentStrings {
373373
sendBox: SendBoxStrings;
374374
typingIndicator: TypingIndicatorStrings;
375375
UnsupportedBrowser: UnsupportedBrowserStrings;
376+
UnsupportedBrowserVersion: UnsupportedBrowserVersionStrings;
376377
videoGallery: VideoGalleryStrings;
377378
videoTile: VideoTileStrings;
378379
}
@@ -522,7 +523,7 @@ export const DEFAULT_COMPONENT_ICONS: {
522523
DomainPermissionMic: JSX.Element;
523524
DomainPermissionCameraDenied: JSX.Element;
524525
DomainPermissionMicDenied: JSX.Element;
525-
UnsupportedBrowserWarning: JSX.Element;
526+
UnsupportedEnvironmentWarning: JSX.Element;
526527
BrowserPermissionDeniedError: JSX.Element;
527528
VideoTilePinned: JSX.Element;
528529
VideoTileMoreOptions: JSX.Element;
@@ -1570,7 +1571,23 @@ export interface UnsupportedBrowserProps {
15701571

15711572
// @beta
15721573
export interface UnsupportedBrowserStrings {
1573-
moreHelpLink: string;
1574+
moreHelpText: string;
1575+
primaryText: string;
1576+
secondaryText: string;
1577+
}
1578+
1579+
// @beta
1580+
export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps) => JSX.Element;
1581+
1582+
// @beta
1583+
export interface UnsupportedBrowserVersionProps {
1584+
onTroubleshootingClick?: () => void;
1585+
strings: UnsupportedBrowserVersionStrings;
1586+
}
1587+
1588+
// @beta
1589+
export interface UnsupportedBrowserVersionStrings {
1590+
moreHelpText: string;
15741591
primaryText: string;
15751592
secondaryText: string;
15761593
}

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1324,6 +1324,38 @@ export interface TypingIndicatorStylesProps extends BaseCustomStyles {
13241324
typingUserDisplayName?: IStyle;
13251325
}
13261326

1327+
// @beta
1328+
export const UnsupportedBrowser: (props: UnsupportedBrowserProps) => JSX.Element;
1329+
1330+
// @beta
1331+
export interface UnsupportedBrowserProps {
1332+
onTroubleshootingClick?: () => void;
1333+
strings: UnsupportedBrowserStrings;
1334+
}
1335+
1336+
// @beta
1337+
export interface UnsupportedBrowserStrings {
1338+
moreHelpText: string;
1339+
primaryText: string;
1340+
secondaryText: string;
1341+
}
1342+
1343+
// @beta
1344+
export const UnsupportedBrowserVersion: (props: UnsupportedBrowserVersionProps) => JSX.Element;
1345+
1346+
// @beta
1347+
export interface UnsupportedBrowserVersionProps {
1348+
onTroubleshootingClick?: () => void;
1349+
strings: UnsupportedBrowserVersionStrings;
1350+
}
1351+
1352+
// @beta
1353+
export interface UnsupportedBrowserVersionStrings {
1354+
moreHelpText: string;
1355+
primaryText: string;
1356+
secondaryText: string;
1357+
}
1358+
13271359
// @public
13281360
export type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
13291361

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

Lines changed: 8 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,9 @@
11
// Copyright (c) Microsoft Corporation.
22
// Licensed under the MIT license.
33

4-
/* @conditional-compile-remove(unsupported-browser) */
5-
import { Icon, Link, Stack, Text } from '@fluentui/react';
6-
/* @conditional-compile-remove(unsupported-browser) */
74
import { _pxToRem } from '@internal/acs-ui-common';
85
import React from 'react';
9-
/* @conditional-compile-remove(unsupported-browser) */
10-
import { useLocale } from '../localization';
11-
/* @conditional-compile-remove(unsupported-browser) */
12-
import {
13-
containerStyles,
14-
iconStyles,
15-
linkTextStyles,
16-
mainTextStyles,
17-
secondaryTextStyles
18-
} from './styles/UnsupportedBrowser.styles';
6+
import { UnsupportedEnvironment } from './UnsupportedEnvironment';
197

208
/**
219
* Strings for UnsupportedBrowser component
@@ -27,54 +15,28 @@ export interface UnsupportedBrowserStrings {
2715
primaryText: string;
2816
/** String for the secondary text */
2917
secondaryText: string;
30-
/** String for the help link */
31-
moreHelpLink: string;
18+
/** String to display in the text for the help link */
19+
moreHelpText: string;
3220
}
3321

3422
/**
35-
* props for UnsupportedBrowser UI
23+
* props for {@link UnsupportedBrowser} UI
3624
*
3725
* @beta
3826
*/
3927
export interface UnsupportedBrowserProps {
40-
/** Handler to perform a action when the help link is actioned */
28+
/** Handler to perform an action when the help link is actioned */
4129
onTroubleshootingClick?: () => void;
4230
/** String overrides for the component */
4331
strings: UnsupportedBrowserStrings;
4432
}
4533

46-
/* @conditional-compile-remove(unsupported-browser) */
47-
const UnsupportedBrowserContainer = (props: UnsupportedBrowserProps): JSX.Element => {
48-
const { onTroubleshootingClick, strings } = props;
49-
return (
50-
<Stack styles={containerStyles}>
51-
<Icon styles={iconStyles} iconName="UnsupportedBrowserWarning" data-ui-id="unsupportedBrowserIcon"></Icon>
52-
<Text styles={mainTextStyles}>{strings.primaryText}</Text>
53-
<Text styles={secondaryTextStyles}>{strings.secondaryText}</Text>
54-
{onTroubleshootingClick && (
55-
<Link
56-
styles={linkTextStyles}
57-
onClick={() => {
58-
onTroubleshootingClick();
59-
}}
60-
data-ui-id="unsupportedBrowserLink"
61-
>
62-
{strings.moreHelpLink}
63-
</Link>
64-
)}
65-
</Stack>
66-
);
67-
};
68-
6934
/**
70-
* UI to display to the user that the browser they are using is not supported by calling application.
35+
* UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.
7136
*
7237
* @beta
7338
*/
7439
export const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {
75-
/* @conditional-compile-remove(unsupported-browser) */
76-
const strings = useLocale().strings.UnsupportedBrowser;
77-
/* @conditional-compile-remove(unsupported-browser) */
78-
return <UnsupportedBrowserContainer {...props} strings={strings} />;
79-
return <></>;
40+
const { onTroubleshootingClick, strings } = props;
41+
return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={strings} />;
8042
};

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT license.
3+
4+
import { _pxToRem } from '@internal/acs-ui-common';
5+
import React from 'react';
6+
import { UnsupportedEnvironment } from './UnsupportedEnvironment';
7+
8+
/**
9+
* Strings for UnsupportedBrowser component
10+
*
11+
* @beta
12+
*/
13+
export interface UnsupportedBrowserVersionStrings {
14+
/** String for the primary text */
15+
primaryText: string;
16+
/** String for the secondary text */
17+
secondaryText: string;
18+
/** String to display in the text for the help link */
19+
moreHelpText: string;
20+
}
21+
22+
/**
23+
* props for {@link UnsupportedBrowserVersion} UI
24+
*
25+
* @beta
26+
*/
27+
export interface UnsupportedBrowserVersionProps {
28+
/** Handler to perform an action when the help link is actioned */
29+
onTroubleshootingClick?: () => void;
30+
/** String overrides for the component */
31+
strings: UnsupportedBrowserVersionStrings;
32+
}
33+
34+
/**
35+
* UI to display to the user that the browser version they are using is out of date
36+
* and not supported by Azure Communications Calling service.
37+
*
38+
* @beta
39+
*/
40+
export const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {
41+
const { onTroubleshootingClick, strings } = props;
42+
return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={strings} />;
43+
};

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT license.
3+
4+
/* @conditional-compile-remove(unsupported-browser) */
5+
import { Icon, Link, Stack, Text } from '@fluentui/react';
6+
/* @conditional-compile-remove(unsupported-browser) */
7+
import { _pxToRem } from '@internal/acs-ui-common';
8+
import React from 'react';
9+
/* @conditional-compile-remove(unsupported-browser) */
10+
import {
11+
containerStyles,
12+
iconStyles,
13+
linkTextStyles,
14+
mainTextStyles,
15+
secondaryTextStyles
16+
} from './styles/UnsupportedEnvironment.styles';
17+
18+
/**
19+
* @private
20+
*/
21+
export interface UnsupportedEnvironmentStrings {
22+
/** String for the primary text */
23+
primaryText: string;
24+
/** String for the secondary text */
25+
secondaryText: string;
26+
/** String to display in the text for the help link */
27+
moreHelpText: string;
28+
}
29+
30+
/**
31+
* props for {@link UnsupportedEnvironment} UI
32+
*
33+
* @private
34+
*/
35+
export interface UnsupportedEnvironmentProps {
36+
/** Handler to perform a action when the help link is actioned */
37+
onTroubleshootingClick?: () => void;
38+
/** String overrides for the component */
39+
strings: UnsupportedEnvironmentStrings;
40+
}
41+
42+
/* @conditional-compile-remove(unsupported-browser) */
43+
const UnsupportedEnvironmentContainer = (props: UnsupportedEnvironmentProps): JSX.Element => {
44+
const { onTroubleshootingClick, strings } = props;
45+
return (
46+
<Stack styles={containerStyles}>
47+
<Icon
48+
styles={iconStyles}
49+
iconName="UnsupportedEnvironmentWarning"
50+
data-ui-id="unsupported-environment-icon"
51+
></Icon>
52+
<Text styles={mainTextStyles}>{strings.primaryText}</Text>
53+
<Text styles={secondaryTextStyles}>{strings.secondaryText}</Text>
54+
{onTroubleshootingClick && (
55+
<Link
56+
styles={linkTextStyles}
57+
onClick={() => {
58+
onTroubleshootingClick();
59+
}}
60+
data-ui-id="unsupported-environment-link"
61+
>
62+
{strings.moreHelpText}
63+
</Link>
64+
)}
65+
</Stack>
66+
);
67+
};
68+
69+
/**
70+
* UI to display to the user that the browser they are using is not supported by calling application.
71+
*
72+
* @private
73+
*/
74+
export const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {
75+
/* @conditional-compile-remove(unsupported-browser) */
76+
return <UnsupportedEnvironmentContainer {...props} />;
77+
return <></>;
78+
};

‎packages/react-components/src/components/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,10 +177,11 @@ export { _RemoteVideoTile } from './RemoteVideoTile';
177177
export { _HighContrastAwareIcon } from './HighContrastAwareIcon';
178178
export type { _HighContrastAwareIconProps } from './HighContrastAwareIcon';
179179

180-
/* @conditional-compile-remove(unsupported-browser) */
181180
export { UnsupportedBrowser } from './UnsupportedBrowser';
182-
/* @conditional-compile-remove(unsupported-browser) */
183181
export type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from './UnsupportedBrowser';
182+
export { UnsupportedBrowserVersion } from './UnsupportedBrowserVersion';
183+
export type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from './UnsupportedBrowserVersion';
184+
184185
export { _TroubleshootingGuideErrorBar } from './TroubleshootingGuideErrorBar';
185186
export type {
186187
_TroubleshootingGuideErrorBarStrings,

0 commit comments

Comments
 (0)
⚡