Skip to content

Commit

Permalink
Update At and Browser Details Modal scenarios to align with #436
Browse files Browse the repository at this point in the history
  • Loading branch information
@howard-e
howard-e committed Jun 29, 2022
1 parent b2b5a77 commit d730468
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 123 deletions.
4 changes: 2 additions & 2 deletions client/components/ManageTestQueue/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -717,7 +717,7 @@ const ManageTestQueue = ({
onChange={onAtChange}
>
<option value={''} disabled>
--
Select an Assistive Technology
</option>
{ats.map(item => (
<option
Expand All @@ -739,7 +739,7 @@ const ManageTestQueue = ({
onChange={onBrowserChange}
>
<option value={''} disabled>
--
Select a Browser
</option>
{browsers.map(item => (
<option
Expand Down
17 changes: 9 additions & 8 deletions client/components/TestRun/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,14 +297,15 @@ const TestRun = () => {
item => item.id === currentTestBrowserVersionId
);

if (!currentTest.testResult && !pageReadyRef.current && isSignedIn)
(async () =>
await createTestResultForRenderer(
currentTest.id,
currentTestAtVersionId,
currentTestBrowserVersionId
))();
else pageReadyRef.current = true;
if (!currentTest.testResult && !pageReadyRef.current && isSignedIn) {
// Do nothing
// (async () =>
// await createTestResultForRenderer(
// currentTest.id,
// currentTestAtVersionId,
// currentTestBrowserVersionId
// ))();
} else pageReadyRef.current = true;

const gitHubIssueLinkWithTitleAndBody = createGitHubIssueWithTitleAndBody({
test: currentTest,
Expand Down
220 changes: 108 additions & 112 deletions client/components/common/AtAndBrowserDetailsModal/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ const ModalSubtitleStyle = styled.h2`
padding: 0;
`;

const Required = styled.span`
color: #ce1b4c;
:after {
content: '*';
}
`;

const AtAndBrowserDetailsModal = ({
show = false,
isAdmin = false,
Expand All @@ -36,7 +44,6 @@ const AtAndBrowserDetailsModal = ({
atVersions = [],
browserName = '',
browserVersion = '',
browserVersions = [],
patternName = '', // admin related prop
testerName = '', // admin related prop
handleAction = () => {},
Expand All @@ -45,23 +52,16 @@ const AtAndBrowserDetailsModal = ({
// Detect UA information
const { uaBrowser, uaMajor, uaMinor, uaPatch } = useDetectUa();
const updatedAtVersionDropdownRef = useRef();
const adminFreeTextBrowserVersionRef = useRef();
const updatedBrowserVersionTextRef = useRef();

const [isFirstLoad, setIsFirstLoad] = useState(true);
const [updatedAtVersion, setUpdatedAtVersion] = useState(
'Select a Version'
);
const [updatedBrowserVersion, setUpdatedBrowserVersion] = useState('');
const [freeTextBrowserVersion, setFreeTextBrowserVersion] = useState('');
const [updatedBrowserVersions, setUpdatedBrowserVersions] = useState(
browserVersions
);

const [isAtVersionError, setIsAtVersionError] = useState(false);
const [
isAdminFreeTextBrowserVersionError,
setIsAdminFreeTextBrowserVersionError
] = useState(false);
const [isBrowserVersionError, setIsBrowserVersionError] = useState(false);

const [
forceBrowserVersionUpdateMessage,
Expand All @@ -78,92 +78,92 @@ const AtAndBrowserDetailsModal = ({
setUpdatedAtVersion(atVersion);
setUpdatedBrowserVersion(browserVersion);
}
if (uaMajor === '0') {
setUpdatedBrowserVersion('');
updatedBrowserVersionTextRef.current.focus();
}

if (uaMajor === '0') setUpdatedBrowserVersion('Not detected');

// needs to check if browser version exists in browserVersions
let matchingBrowserVersion = browserVersions.find(item =>
item.includes(`${uaMajor}.${uaMinor}.${uaPatch}`)
);

if (
!matchingBrowserVersion &&
const foundBrowserVersion =
uaBrowser === browserName &&
uaMajor &&
uaMajor !== '0'
) {
matchingBrowserVersion = `${uaMajor}.${uaMinor}.${uaPatch}`;
setUpdatedBrowserVersions([
matchingBrowserVersion,
...updatedBrowserVersions
]);
}
uaMajor !== '0' &&
`${uaMajor}.${uaMinor}.${uaPatch}`;

if (
// don't force browserVersion update with admin (unless first run)
(!isAdmin || (isAdmin && firstLoad)) &&
// check that saved browserVersion is the same as detected
!browserVersion.includes(`${uaMajor}.${uaMinor}.${uaPatch}`) &&
uaBrowser === browserName &&
matchingBrowserVersion
foundBrowserVersion
) {
setForceBrowserVersionUpdateMessage(true);
setUpdatedBrowserVersion(matchingBrowserVersion);
setUpdatedBrowserVersion(foundBrowserVersion);
}
}, [uaBrowser, uaMajor, uaMinor, uaPatch]);

useEffect(() => {
// check to support Tester Scenario 5
if (!updatedBrowserVersion.includes(`${uaMajor}.${uaMinor}.${uaPatch}`))
if (
uaMajor !== '0' &&
!updatedBrowserVersion.includes(`${uaMajor}.${uaMinor}.${uaPatch}`)
)
setBrowserVersionMismatchMessage(true);
else setBrowserVersionMismatchMessage(!isAdmin && false);
}, [updatedBrowserVersion, uaMajor, uaMinor, uaPatch]);

useEffect(() => {
const forceFocusOnBrowserVersion =
!isFirstLoad && !isAdmin && forceBrowserVersionUpdateMessage;

if (forceFocusOnBrowserVersion)
updatedBrowserVersionTextRef.current.focus();
}, [forceBrowserVersionUpdateMessage]);

const handleAtVersionChange = e => {
const value = e.target.value;
setUpdatedAtVersion(value);
setIsAtVersionError(false);
};

const handleBrowserVersionChange = (e, setFreeTextBrowserVersion) => {
const handleBrowserVersionChange = e => {
const value = e.target.value;

if (setFreeTextBrowserVersion) setFreeTextBrowserVersion(value);
else setUpdatedBrowserVersion(value);
setUpdatedBrowserVersion(value);

// remove message once browser has been changed
!isAdmin && setForceBrowserVersionUpdateMessage(false);
setIsAdminFreeTextBrowserVersionError(false);
setIsBrowserVersionError(false);
};

const onSubmit = () => {
// Passed action prop should account for AtVersion & BrowserVersion
const updatedAtVersionError = updatedAtVersion === 'Select a Version';
const adminBrowserVersionTextError = isAdmin && !updatedBrowserVersion;
const isBrowserVersionTextError = !updatedBrowserVersion;

if (updatedAtVersionError || adminBrowserVersionTextError) {
if (updatedAtVersionError || isBrowserVersionTextError) {
setIsAtVersionError(updatedAtVersionError);
updatedAtVersionDropdownRef.current.focus();

setIsAdminFreeTextBrowserVersionError(adminBrowserVersionTextError);
setIsBrowserVersionError(isBrowserVersionTextError);
if (!updatedAtVersionError)
adminFreeTextBrowserVersionRef.current.focus();
updatedBrowserVersionTextRef.current.focus();
return;
}

handleAction(
updatedAtVersion,
uaMajor === '0' && !isAdmin
? freeTextBrowserVersion
: updatedBrowserVersion
);
handleAction(updatedAtVersion, updatedBrowserVersion);
};

// All scenarios here are based on https://github.com/w3c/aria-at-app/issues/406
// All scenarios here are based on
// https://github.com/w3c/aria-at-app/issues/406 &
// https://github.com/w3c/aria-at-app/issues/436
return (
<BasicModal
show={show}
closeButton={false}
closeButton={true}
cancelButton={
updatedAtVersion !== atVersion ||
updatedBrowserVersion !== browserVersion
}
headerSep={false}
title="Assistive Technology and Browser Details"
dialogClassName="modal-60w"
Expand Down Expand Up @@ -224,13 +224,15 @@ const AtAndBrowserDetailsModal = ({
<Form.Group>
<Form.Label>
Assistive Technology Version
<Required aria-hidden />
</Form.Label>
<Form.Control
ref={updatedAtVersionDropdownRef}
as="select"
value={updatedAtVersion}
onChange={handleAtVersionChange}
isInvalid={isAtVersionError}
required
>
{['Select a Version', ...atVersions].map(
item => (
Expand Down Expand Up @@ -264,7 +266,7 @@ const AtAndBrowserDetailsModal = ({
</ModalSubtitleStyle>
</legend>
{/* Tester Scenario 1 */}
{isFirstLoad && (
{isFirstLoad && uaBrowser && uaMajor !== '0' && (
<Alert
variant="primary"
className="at-browser-details-modal-alert"
Expand Down Expand Up @@ -304,8 +306,34 @@ const AtAndBrowserDetailsModal = ({
</span>
</Alert>
)}
{isFirstLoad &&
uaBrowser !== browserName &&
uaMajor !== '0' && (
<Alert
variant="warning"
className="at-browser-details-modal-alert"
>
<FontAwesomeIcon
icon={faExclamationTriangle}
/>
<span>
We have automatically detected you are
using{' '}
<b>
{uaBrowser} {uaMajor}.{uaMinor}.
{uaPatch}
</b>
. This test plan requires{' '}
<b>{browserName}</b>. If you are
recording results on behalf of someone
else, please provide the Browser version
below.
</span>
</Alert>
)}
{/* Tester Scenario 4 */}
{!isAdmin &&
!isFirstLoad &&
uaBrowser !== browserName &&
uaMajor !== '0' && (
<Alert
Expand All @@ -321,8 +349,8 @@ const AtAndBrowserDetailsModal = ({
<b>
{uaBrowser} {uaMajor}.{uaMinor}.
{uaPatch}
</b>{' '}
which is a different browser from the
</b>
, which is a different browser from the
last one you were testing with, which
was{' '}
<b>
Expand Down Expand Up @@ -434,74 +462,42 @@ const AtAndBrowserDetailsModal = ({
</Form.Group>

<Form.Group>
<Form.Label>Browser Version</Form.Label>
{isAdmin ? (
<>
<Form.Control
ref={adminFreeTextBrowserVersionRef}
type="text"
value={updatedBrowserVersion}
onChange={handleBrowserVersionChange}
isInvalid={
isAdminFreeTextBrowserVersionError
}
/>
{isAdminFreeTextBrowserVersionError && (
<Form.Control.Feedback
style={{ display: 'block' }}
type="invalid"
>
Please enter a valid Browser
Version.
</Form.Control.Feedback>
)}
</>
) : (
<Form.Control
as="select"
disabled={uaMajor === '0'}
value={updatedBrowserVersion}
onChange={handleBrowserVersionChange}
<Form.Label>
Browser Version
<Required aria-hidden />
</Form.Label>
<Form.Control
ref={updatedBrowserVersionTextRef}
type="text"
value={updatedBrowserVersion}
onChange={handleBrowserVersionChange}
isInvalid={isBrowserVersionError}
required
/>
{isBrowserVersionError && (
<Form.Control.Feedback
style={{ display: 'block' }}
type="invalid"
>
{(uaMajor === '0'
? [
'Not detected',
...updatedBrowserVersions
]
: updatedBrowserVersions
).map(item => (
<option
key={`browserVersionKey-${item}`}
value={item}
>
{item}
</option>
))}
</Form.Control>
Please enter a valid Browser Version.
</Form.Control.Feedback>
)}
</Form.Group>

{/* Tester Scenario 7 */}
{uaMajor === '0' && (
<Form.Group className="at-browser-details-full-column">
<Form.Label>Enter Browser Version</Form.Label>
<Form.Control
type="text"
value={freeTextBrowserVersion}
onChange={e =>
handleBrowserVersionChange(
e,
setFreeTextBrowserVersion
)
}
/>
</Form.Group>
)}
</FieldsetRow>
</ModalInnerSectionContainer>
}
actionLabel={'Save and Continue'}
handleAction={onSubmit}
actionLabel={
updatedAtVersion !== atVersion ||
updatedBrowserVersion !== browserVersion
? 'Save and Continue'
: 'Continue'
}
handleAction={
updatedAtVersion !== atVersion ||
updatedBrowserVersion !== browserVersion
? onSubmit
: handleClose
}
handleClose={handleClose}
/>
);
Expand Down
Loading

0 comments on commit d730468

Please sign in to comment.