Disabled import/export menu for demo mode

src/frontend/src/config/index.ts

@@ -7,3 +7,5 @@ export const AUTH_CHECK_INTERVAL = import.meta.env.VITE_APP_AUTH_CHECK_INTERVAL
   : 60000;
 
 export const MSW_ENABLED = import.meta.env.VITE_APP_MSW_ENABLED === 'true';
+
+export const DEMO_MODE_ENABLED = import.meta.env.VITE_APP_DEMO_MODE_ENABLED === 'true';

src/frontend/src/features/pages/components/ExportPagesMenuItem.tsx

@@ -6,13 +6,15 @@ import ExportDialog from './ExportDialog';
 type ExportPagesMenuItemProps = {
   format: ExportFormat;
   icon: React.ReactElement;
+  isDisabled: boolean;
   onMenuClose: () => void;
 };
 
 const ExportPagesMenuItem: React.FC<React.PropsWithChildren<ExportPagesMenuItemProps>> = ({
   children,
   format,
   icon,
+  isDisabled,
   onMenuClose,
 }) => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -29,7 +31,7 @@ const ExportPagesMenuItem: React.FC<React.PropsWithChildren<ExportPagesMenuItemP
   return (
     <React.Fragment>
       <ExportDialog format={format} isOpen={isDialogOpen} onClose={handleDialogClose} />
-      <MenuItem onClick={handleExport}>
+      <MenuItem disabled={isDisabled} onClick={handleExport}>
         <ListItemIcon>{icon}</ListItemIcon>
         <ListItemText>{children}</ListItemText>
       </MenuItem>

src/frontend/src/features/pages/components/ImportPagesMenuItem.tsx

@@ -5,11 +5,13 @@ import { ConfirmationDialog } from 'src/components';
 import { useImport } from '../hooks/useImport';
 
 type ImportPagesMenuItemProps = {
+  isDisabled: boolean;
   onMenuClose: () => void;
 };
 
 const ImportPagesMenuItem: React.FC<React.PropsWithChildren<ImportPagesMenuItemProps>> = ({
   children,
+  isDisabled,
   onMenuClose,
 }) => {
   const [importFile, setImportFile] = useState<File>();
@@ -35,7 +37,7 @@ const ImportPagesMenuItem: React.FC<React.PropsWithChildren<ImportPagesMenuItemP
 
   return (
     <React.Fragment>
-      <MenuItem onClick={onMenuClose}>
+      <MenuItem disabled={isDisabled} onClick={onMenuClose}>
         <Box
           component="label"
           display="inherit"

src/frontend/src/features/pages/components/ShowMoreTableOptions.tsx

@@ -3,6 +3,7 @@ import DataObjectIcon from '@mui/icons-material/DataObject';
 import ShowMoreIcon from '@mui/icons-material/MoreVert';
 import { Divider, IconButton, Menu } from '@mui/material';
 import React from 'react';
+import { DEMO_MODE_ENABLED } from 'src/config';
 import ExportPagesMenuItem from './ExportPagesMenuItem';
 import ImportPagesMenuItem from './ImportPagesMenuItem';
 
@@ -53,12 +54,20 @@ const ShowMoreTableOptions: React.FC = () => {
           },
         }}
       >
-        <ImportPagesMenuItem onMenuClose={handleMenuClose}>Import from JSON</ImportPagesMenuItem>
+        <ImportPagesMenuItem isDisabled={DEMO_MODE_ENABLED} onMenuClose={handleMenuClose}>
+          Import from JSON
+        </ImportPagesMenuItem>
         <Divider />
-        <ExportPagesMenuItem format="json" icon={<DataObjectIcon />} onMenuClose={handleMenuClose}>
+        <ExportPagesMenuItem
+          isDisabled={DEMO_MODE_ENABLED}
+          format="json"
+          icon={<DataObjectIcon />}
+          onMenuClose={handleMenuClose}
+        >
           Export to JSON
         </ExportPagesMenuItem>
         <ExportPagesMenuItem
+          isDisabled={DEMO_MODE_ENABLED}
           format="google docs"
           icon={<AddToDriveIcon />}
           onMenuClose={handleMenuClose}

src/frontend/src/vite-env.d.ts

@@ -7,4 +7,5 @@ interface ImportMeta {
 interface ImportMetaEnv {
   readonly VITE_APP_MSW_ENABLED: string;
   readonly VITE_APP_AUTH_CHECK_INTERVAL: string;
+  readonly VITE_APP_DEMO_MODE_ENABLED: string;
 }