Skip to content

Commit 126f686

Browse files
apburnesapburnes
authored
Merge pull request #4754 from cloud-gov/confirm-file-storage-dialog-4743
add confirmation dialog for destructive actions #4743
2 parents a9693fb + 8c52cf1 commit 126f686

File tree

3 files changed

+457
-14
lines changed

3 files changed

+457
-14
lines changed

‎frontend/pages/sites/$siteId/storage/index.js

+42-14
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useRef } from 'react';
1+
import React, { useState, useRef, useCallback } from 'react';
22
import { useParams, useSearchParams } from 'react-router-dom';
33
import { useSelector } from 'react-redux';
44
import useFileStorage from '@hooks/useFileStorage';
@@ -10,7 +10,7 @@ import NewFileOrFolder from './NewFileOrFolder';
1010
import FileList from './FileList';
1111
import Pagination from '@shared/Pagination';
1212
import QueryPage from '@shared/layouts/QueryPage';
13-
13+
import Dialog from '@shared/Dialog';
1414
import { currentSite } from '@selectors/site';
1515

1616
function FileStoragePage() {
@@ -80,6 +80,19 @@ function FileStoragePage() {
8080
scrollToTop();
8181
};
8282

83+
const INITIAL_DIALOG_PROPS = {
84+
open: false,
85+
primaryHandler: () => {},
86+
};
87+
const resetModal = useCallback(() => {
88+
setDialogProps(INITIAL_DIALOG_PROPS);
89+
}, []);
90+
91+
const [dialogProps, setDialogProps] = useState({
92+
closeHandler: resetModal,
93+
primaryHandler: () => {},
94+
});
95+
8396
const handlePageChange = (newPage) => {
8497
if (newPage === currentPage) return;
8598
setSearchParams((prev) => {
@@ -135,18 +148,32 @@ function FileStoragePage() {
135148
});
136149
};
137150

138-
const handleDelete = async (item) => {
139-
const isFolder = item.type === 'directory';
140-
const confirmMessage = isFolder
141-
? // eslint-disable-next-line sonarjs/slow-regex
142-
`Are you sure you want to delete the folder "${item.name.replace(/\/+$/, '')}"?
151+
const handleDelete = useCallback(
152+
async (item) => {
153+
const isFolder = item.type === 'directory';
154+
const confirmMessage = isFolder
155+
? // eslint-disable-next-line sonarjs/slow-regex
156+
`Are you sure you want to delete the folder "${item.name.replace(/\/+$/, '')}"?
143157
Please check that it does not contain any files.`
144-
: `Are you sure you want to delete the file "${item.name}"?`;
145-
146-
if (!window.confirm(confirmMessage)) return;
147-
148-
await deleteItem(item);
149-
};
158+
: `Are you sure you want to delete the file "${item.name}"?`;
159+
const deleteHandler = async () => {
160+
await deleteItem(item);
161+
resetModal();
162+
};
163+
setDialogProps({
164+
...dialogProps,
165+
open: true,
166+
header: 'Are you sure?',
167+
message: confirmMessage,
168+
primaryButton: 'Yes, I want to delete',
169+
primaryHandler: deleteHandler,
170+
secondaryButton: 'Cancel',
171+
secondaryHandler: resetModal,
172+
closeHandler: resetModal,
173+
});
174+
},
175+
[deleteItem, resetModal],
176+
);
150177

151178
const handleUpload = async (files) => {
152179
await Promise.all(files.map((file) => uploadFile(path, file)));
@@ -155,6 +182,7 @@ function FileStoragePage() {
155182
const handleCreateFolder = async (folderName) => {
156183
await createFolder(path, folderName);
157184
};
185+
158186
return (
159187
<QueryPage
160188
data={fetchedPublicFiles}
@@ -203,7 +231,7 @@ function FileStoragePage() {
203231
message={createFolderSuccess}
204232
/>
205233
)}
206-
234+
<Dialog {...dialogProps} />
207235
<div className="grid-col-12" ref={scrollTo}>
208236
<LocationBar
209237
path={path}

‎frontend/shared/Dialog.jsx

+189
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
import React, { useEffect, useRef } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
const Dialog = ({
5+
header = 'Are you sure you want to continue?',
6+
message = 'You have unsaved changes that will be lost.',
7+
primaryButton = 'Continue without saving',
8+
secondaryButton = null,
9+
primaryHandler,
10+
secondaryHandler = () => {},
11+
closeHandler = () => {},
12+
children = null,
13+
dismissable = true,
14+
open = false,
15+
}) => {
16+
const dialogRef = useRef(null);
17+
const firstFocusableRef = useRef(null);
18+
const lastFocusedElementRef = useRef(null);
19+
// focus trap for better a11y
20+
useEffect(() => {
21+
if (open) {
22+
lastFocusedElementRef.current = document.activeElement;
23+
dialogRef.current?.focus();
24+
25+
const focusableElements = dialogRef.current?.querySelectorAll(
26+
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
27+
);
28+
29+
if (focusableElements.length > 0) {
30+
firstFocusableRef.current = focusableElements[0];
31+
firstFocusableRef.current.focus();
32+
}
33+
} else {
34+
setTimeout(() => {
35+
lastFocusedElementRef.current?.focus();
36+
}, 10);
37+
}
38+
}, [open]);
39+
40+
// eslint-disable-next-line sonarjs/cognitive-complexity
41+
const handleKeyDown = (e) => {
42+
if (e.key === 'Escape' && dismissable) {
43+
closeHandler();
44+
}
45+
46+
if (e.key === 'Tab') {
47+
e.preventDefault(); // Prevent native tab behavior
48+
49+
const focusableElements = dialogRef.current?.querySelectorAll(
50+
// eslint-disable-next-line max-len
51+
'button, [href]:not(use), input, select, textarea, [tabindex]:not([tabindex="-1"])',
52+
);
53+
54+
// Convert to array & ignore the SVG icon from USWDS that also has href
55+
const focusableArray = Array.from(focusableElements).filter(
56+
(el) => el.tagName !== 'USE', // some browsers are weird about svgs
57+
);
58+
59+
if (focusableArray.length === 0) return;
60+
61+
const firstElement = focusableArray[0];
62+
const lastElement = focusableArray[focusableArray.length - 1];
63+
64+
// Shift+Tab moves backward
65+
if (e.shiftKey && document.activeElement === firstElement) {
66+
lastElement.focus();
67+
return;
68+
}
69+
70+
// Tab moves forward
71+
if (!e.shiftKey && document.activeElement === lastElement) {
72+
firstElement.focus();
73+
return;
74+
}
75+
76+
// Find the currently focused element and move focus
77+
for (let i = 0; i < focusableArray.length; i += 1) {
78+
if (focusableArray[i] === document.activeElement) {
79+
const nextIndex = i + (e.shiftKey ? -1 : 1);
80+
focusableArray[nextIndex]?.focus();
81+
break; // Prevent further looping
82+
}
83+
}
84+
}
85+
};
86+
87+
if (!open) return;
88+
return (
89+
<>
90+
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
91+
<div
92+
className={`usa-modal-wrapper ${open ? 'is-visible' : ''}`}
93+
ref={dialogRef}
94+
role="dialog"
95+
aria-labelledby="modal-heading"
96+
aria-describedby="modal-description"
97+
onKeyDown={handleKeyDown}
98+
tabIndex={-1} // Allow focus
99+
>
100+
{' '}
101+
{/* eslint-disable-next-line max-len */}
102+
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
103+
<div
104+
data-testid="modal-overlay"
105+
className="usa-modal-overlay"
106+
onClick={(e) => {
107+
if (dismissable && e.target === e.currentTarget) {
108+
closeHandler();
109+
}
110+
}}
111+
></div>
112+
<div className="usa-modal">
113+
<div className="usa-modal__content">
114+
<div className="usa-modal__main">
115+
<h2 className="usa-modal__heading" id="modal-heading">
116+
{header}
117+
</h2>
118+
{message && (
119+
<div className="usa-prose">
120+
<p id="modal-description">{message}</p>
121+
</div>
122+
)}
123+
{children}
124+
<div className="usa-modal__footer">
125+
<ul className="usa-button-group">
126+
{primaryButton && (
127+
<li className="usa-button-group__item">
128+
<button
129+
tabIndex="0"
130+
type="button"
131+
className="usa-button"
132+
data-close-modal
133+
onClick={primaryHandler}
134+
>
135+
{primaryButton}
136+
</button>
137+
</li>
138+
)}
139+
{secondaryButton && secondaryHandler && (
140+
<li className="usa-button-group__item">
141+
<button
142+
tabIndex="0"
143+
type="button"
144+
className="usa-button usa-button--unstyled padding-105"
145+
data-close-modal
146+
onClick={secondaryHandler}
147+
>
148+
{secondaryButton}
149+
</button>
150+
</li>
151+
)}
152+
</ul>
153+
</div>
154+
</div>
155+
{dismissable && closeHandler && (
156+
<button
157+
tabIndex="0"
158+
type="button"
159+
className="usa-button usa-modal__close"
160+
aria-label="Close this window"
161+
data-close-modal
162+
onClick={closeHandler}
163+
>
164+
<svg className="usa-icon" aria-hidden="true" focusable="false" role="img">
165+
<use href="/img/sprite.svg#close"></use>
166+
</svg>
167+
</button>
168+
)}
169+
</div>
170+
</div>
171+
</div>
172+
</>
173+
);
174+
};
175+
176+
Dialog.propTypes = {
177+
header: PropTypes.string,
178+
message: PropTypes.string,
179+
primaryButton: PropTypes.string,
180+
secondaryButton: PropTypes.string,
181+
primaryHandler: PropTypes.func.isRequired,
182+
secondaryHandler: PropTypes.func,
183+
closeHandler: PropTypes.func,
184+
children: PropTypes.node,
185+
dismissable: PropTypes.bool,
186+
open: PropTypes.bool,
187+
};
188+
189+
export default Dialog;

0 commit comments

Comments
 (0)