Warn user in WebUI of unsaved changes #911

interface/src/components/index.ts

@@ -6,3 +6,4 @@ export * from './upload';
 export { default as SectionContent } from './SectionContent';
 export { default as ButtonRow } from './ButtonRow';
 export { default as MessageBox } from './MessageBox';
+export { default as BlockNavigation } from './routing/BlockNavigation';

interface/src/components/layout/LayoutAppBar.tsx

@@ -1,12 +1,10 @@
-import { FC, useContext } from 'react';
+import { FC } from 'react';
 
 import { AppBar, Box, IconButton, Toolbar, Typography } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 
 import LayoutAuthMenu from './LayoutAuthMenu';
 
-import { FeaturesContext } from '../../contexts/features';
-
 export const DRAWER_WIDTH = 240;
 
 interface LayoutAppBarProps {
@@ -15,8 +13,6 @@ interface LayoutAppBarProps {
 }
 
 const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => {
-  const { features } = useContext(FeaturesContext);
-
   return (
     <AppBar
       position="fixed"
@@ -41,7 +37,7 @@ const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => {
           {title}
         </Typography>
         <Box flexGrow={1} />
-        {features.security && <LayoutAuthMenu />}
+        <LayoutAuthMenu />
       </Toolbar>
     </AppBar>
   );

interface/src/components/layout/LayoutMenu.tsx

@@ -9,7 +9,6 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import LockIcon from '@mui/icons-material/Lock';
 import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
 
-import { FeaturesContext } from '../../contexts/features';
 import ProjectMenu from '../../project/ProjectMenu';
 
 import LayoutMenuItem from './LayoutMenuItem';
@@ -18,23 +17,20 @@ import { AuthenticatedContext } from '../../contexts/authentication';
 import { useI18nContext } from '../../i18n/i18n-react';
 
 const LayoutMenu: FC = () => {
-  const { features } = useContext(FeaturesContext);
   const authenticatedContext = useContext(AuthenticatedContext);
   const { LL } = useI18nContext();
 
   return (
     <>
-      {features.project && (
-        <List disablePadding component="nav">
-          <ProjectMenu />
-          <Divider />
-        </List>
-      )}
+      <List disablePadding component="nav">
+        <ProjectMenu />
+        <Divider />
+      </List>
       <List disablePadding component="nav">
         <LayoutMenuItem icon={SettingsEthernetIcon} label={LL.NETWORK(0)} to="/network" />
         <LayoutMenuItem icon={SettingsInputAntennaIcon} label={LL.ACCESS_POINT(0)} to="/ap" />
-        {features.ntp && <LayoutMenuItem icon={AccessTimeIcon} label="NTP" to="/ntp" />}
-        {features.mqtt && <LayoutMenuItem icon={DeviceHubIcon} label="MQTT" to="/mqtt" />}
+        <LayoutMenuItem icon={AccessTimeIcon} label="NTP" to="/ntp" />
+        <LayoutMenuItem icon={DeviceHubIcon} label="MQTT" to="/mqtt" />
         <LayoutMenuItem
           icon={LockIcon}
           label={LL.SECURITY(0)}

interface/src/components/routing/BlockNavigation.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import type { Blocker } from '@remix-run/router';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+
+import { useI18nContext } from '../../i18n/i18n-react';
+
+interface BlockNavigationProps {
+  blocker: Blocker;
+}
+
+const BlockNavigation: FC<BlockNavigationProps> = ({ blocker }) => {
+  const { LL } = useI18nContext();
+
+  return (
+    <Dialog open={blocker.state === 'blocked'}>
+      <DialogTitle>{LL.BLOCK_NAVIGATE_1()}</DialogTitle>
+      <DialogContent dividers>{LL.BLOCK_NAVIGATE_2()}</DialogContent>
+      <DialogActions>
+        <Button variant="outlined" onClick={() => blocker.reset?.()} color="secondary">
+          {LL.STAY()}
+        </Button>
+        <Button variant="contained" onClick={() => blocker.proceed?.()} color="primary" autoFocus>
+          {LL.LEAVE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default BlockNavigation;

interface/src/components/routing/RequireUnauthenticated.tsx

@@ -4,13 +4,11 @@ import { Navigate } from 'react-router-dom';
 import * as AuthenticationApi from '../../api/authentication';
 import { AuthenticationContext } from '../../contexts/authentication';
 import { RequiredChildrenProps } from '../../utils';
-import { FeaturesContext } from '../../contexts/features';
 
 const RequireUnauthenticated: FC<RequiredChildrenProps> = ({ children }) => {
-  const { features } = useContext(FeaturesContext);
   const authenticationContext = useContext(AuthenticationContext);
 
-  return authenticationContext.me ? <Navigate to={AuthenticationApi.fetchLoginRedirect(features)} /> : <>{children}</>;
+  return authenticationContext.me ? <Navigate to={AuthenticationApi.fetchLoginRedirect()} /> : <>{children}</>;
 };
 
 export default RequireUnauthenticated;