-
Notifications
You must be signed in to change notification settings - Fork 24
/
NavigationModal.tsx
59 lines (53 loc) · 1.84 KB
/
NavigationModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import { Body } from "@leafygreen-ui/typography";
import {
matchPath,
unstable_useBlocker as useBlocker,
useParams,
} from "react-router-dom";
import { ConfirmationModal } from "components/ConfirmationModal";
import { getProjectSettingsRoute, routes } from "constants/routes";
import { useHasUnsavedTab } from "./Context";
import { getTabTitle } from "./getTabTitle";
export const NavigationModal: React.VFC = () => {
const { hasUnsaved, unsavedTabs } = useHasUnsavedTab();
const { projectIdentifier } = useParams();
const shouldConfirmNavigation = ({ nextLocation }): boolean => {
const isProjectSettingsRoute =
nextLocation &&
!!matchPath(`${routes.projectSettings}/*`, nextLocation.pathname);
if (!isProjectSettingsRoute) {
return hasUnsaved;
}
/* Identify if the user is navigating to a new project's settings via project select dropdown */
const currentProjectRoute = getProjectSettingsRoute(projectIdentifier);
const isNewProjectSettingsRoute = !matchPath(
`${currentProjectRoute}/*`,
nextLocation.pathname
);
if (isNewProjectSettingsRoute) {
return hasUnsaved;
}
return false;
};
const blocker = useBlocker(shouldConfirmNavigation);
return (
blocker.state === "blocked" && (
<ConfirmationModal
buttonText="Leave"
data-cy="navigation-warning-modal"
open
onCancel={() => blocker.reset?.()}
onConfirm={() => blocker.proceed?.()}
title="You have unsaved changes that will be discarded. Are you sure you want to leave?"
variant="danger"
>
<Body>Unsaved changes are present on the following pages:</Body>
<ol data-cy="unsaved-pages">
{unsavedTabs.map((tab) => (
<li key={tab}>{getTabTitle(tab).title}</li>
))}
</ol>
</ConfirmationModal>
)
);
};