Save reservation

web/src/components/SubscriptionSettingsDialog.js

@@ -6,30 +6,48 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import {Autocomplete, Checkbox, FormControlLabel, useMediaQuery} from "@mui/material";
+import {Checkbox, FormControl, FormControlLabel, Select, useMediaQuery} from "@mui/material";
 import theme from "./theme";
-import api from "../app/Api";
-import {topicUrl, validTopic, validUrl} from "../app/utils";
-import userManager from "../app/UserManager";
 import subscriptionManager from "../app/SubscriptionManager";
-import poller from "../app/Poller";
 import DialogFooter from "./DialogFooter";
 import {useTranslation} from "react-i18next";
 import accountApi, {UnauthorizedError} from "../app/AccountApi";
 import session from "../app/Session";
 import routes from "./routes";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import LockIcon from "@mui/icons-material/Lock";
+import ListItemText from "@mui/material/ListItemText";
+import {Public, PublicOff} from "@mui/icons-material";
 
 const SubscriptionSettingsDialog = (props) => {
     const { t } = useTranslation();
     const subscription = props.subscription;
+    const [reserveTopicVisible, setReserveTopicVisible] = useState(!!subscription.reservation);
+    const [everyone, setEveryone] = useState(subscription.reservation?.everyone || "deny-all");
     const [displayName, setDisplayName] = useState(subscription.displayName ?? "");
     const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
     const handleSave = async () => {
+        // Apply locally
         await subscriptionManager.setDisplayName(subscription.id, displayName);
+
+        // Apply remotely
         if (session.exists() && subscription.remoteId) {
             try {
+                // Display name
                 console.log(`[SubscriptionSettingsDialog] Updating subscription display name to ${displayName}`);
                 await accountApi.updateSubscription(subscription.remoteId, { display_name: displayName });
+
+                // Reservation
+                if (reserveTopicVisible) {
+                    await accountApi.upsertAccess(subscription.topic, everyone);
+                } else if (!reserveTopicVisible && subscription.reservation) { // Was removed
+                    await accountApi.deleteAccess(subscription.topic);
+                }
+
+                // Sync account
+                await accountApi.sync();
             } catch (e) {
                 console.log(`[SubscriptionSettingsDialog] Error updating subscription`, e);
                 if ((e instanceof UnauthorizedError)) {
@@ -39,6 +57,7 @@ const SubscriptionSettingsDialog = (props) => {
         }
         props.onClose();
     }
+
     return (
         <Dialog open={props.open} onClose={props.onClose} fullScreen={fullScreen}>
             <DialogTitle>{t("subscription_settings_dialog_title")}</DialogTitle>
@@ -61,6 +80,56 @@ const SubscriptionSettingsDialog = (props) => {
                         "aria-label": t("subscription_settings_dialog_display_name_placeholder")
                     }}
                 />
+
+                <FormControlLabel
+                    fullWidth
+                    variant="standard"
+                    sx={{pt: 1}}
+                    control={
+                        <Checkbox
+                            checked={reserveTopicVisible}
+                            onChange={(ev) => setReserveTopicVisible(ev.target.checked)}
+                            inputProps={{
+                                "aria-label": t("xxxxxxxxxxxxxxxxxx")
+                            }}
+                        />
+                    }
+                    label={t("Reserve topic and configure custom access:")}
+                />
+                {reserveTopicVisible &&
+                    <FormControl variant="standard">
+                        <Select
+                            value={everyone}
+                            onChange={(ev) => setEveryone(ev.target.value)}
+                            aria-label={t("prefs_reservations_dialog_access_label")}
+                            sx={{
+                                "& .MuiSelect-select": {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    paddingTop: "4px",
+                                    paddingBottom: "4px",
+                                }
+                            }}
+                        >
+                            <MenuItem value="deny-all">
+                                <ListItemIcon><LockIcon/></ListItemIcon>
+                                <ListItemText primary={t("prefs_reservations_table_everyone_deny_all")}/>
+                            </MenuItem>
+                            <MenuItem value="read-only">
+                                <ListItemIcon><PublicOff/></ListItemIcon>
+                                <ListItemText primary={t("prefs_reservations_table_everyone_read_only")}/>
+                            </MenuItem>
+                            <MenuItem value="write-only">
+                                <ListItemIcon><PublicOff/></ListItemIcon>
+                                <ListItemText primary={t("prefs_reservations_table_everyone_write_only")}/>
+                            </MenuItem>
+                            <MenuItem value="read-write">
+                                <ListItemIcon><Public/></ListItemIcon>
+                                <ListItemText primary={t("prefs_reservations_table_everyone_read_write")}/>
+                            </MenuItem>
+                        </Select>
+                    </FormControl>
+                }
             </DialogContent>
             <DialogFooter>
                 <Button onClick={props.onClose}>{t("subscription_settings_button_cancel")}</Button>