Merge pull request #1438 from ArendPeter/sandcastle/issue-1436

Remove WizardExtra (#1405)

Author: ArendPeter

package-lock.json

@@ -5,17 +5,18 @@ import {
     useRef,
     useState,
 } from 'react';
-import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material'
+import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close';
 import { PrimaryButton, SecondaryButton } from './styles';
 import { useSubstitutedTranslation } from './util';
 // Built from this example buth with MUI dialogs: https://akashhamirwasia.com/blog/building-expressive-confirm-dialog-api-in-react/
 // Uses a context provider to allow any component to access a confirm dialog component using the useConfirm hook
-// Example: 
+// Example:
 // import useConfirm from '../../ConfirmationDialogProvider';
 // const confirm = useConfirm()
 // const confirmed = await confirm(
 //      {
-//          title: 'Confirm This Action', 
+//          title: 'Confirm This Action',
 //          message: "Are you sure you want to do this?"
 //      })
 
@@ -24,26 +25,27 @@ interface ConfirmData {
     message: string
     cancel?: string
     submit?: string
+    dismissable?: boolean
 }
 
-type confirmContext = (data: ConfirmData) => Promise<boolean>
+type confirmContext = (data: ConfirmData) => Promise<boolean | null>
 
 const ConfirmDialog = createContext<confirmContext>(null);
 
 export function ConfirmDialogProvider({ children }:  { children: React.ReactNode }) {
-    const [state, setState] = useState({ isOpen: false, title: '', message: '', submit: null, cancel: null});
+    const [state, setState] = useState({ isOpen: false, title: '', message: '', submit: null, cancel: null, dismissable: false });
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const fn = useRef((choice: boolean) => {  });
+    const fn = useRef((choice: boolean | null) => {  });
 
     const {t} = useSubstitutedTranslation();
 
     const confirm = useCallback(
         (data: ConfirmData) => {
-            return new Promise((resolve: (value: boolean) => void) => {
-                setState({ ...state, ...data, isOpen: true });
+            return new Promise((resolve: (value: boolean | null) => void) => {
+                setState({ ...state, ...data, isOpen: true, dismissable: data.dismissable ?? false });
                 fn.current = (choice) => {
                     resolve(choice);
-                    setState({ isOpen: false, title: '', message: '', submit: null, cancel: null });
+                    setState({ isOpen: false, title: '', message: '', submit: null, cancel: null, dismissable: false });
                 };
             });
         },
@@ -56,8 +58,20 @@ export function ConfirmDialogProvider({ children }:  { children: React.ReactNode
             <Dialog
                 open={state.isOpen}
                 fullWidth
+                onClose={state.dismissable ? () => fn.current(null) : undefined}
             >
-                <DialogTitle>{state.title}</DialogTitle>
+                <DialogTitle>
+                    {state.title}
+                    {state.dismissable && (
+                        <IconButton
+                            aria-label={t('keyword.close')}
+                            onClick={() => fn.current(null)}
+                            sx={{ position: 'absolute', right: 8, top: 8 }}
+                        >
+                            <CloseIcon />
+                        </IconButton>
+                    )}
+                </DialogTitle>
                 <DialogContent>
                     <DialogContentText>{state.message}</DialogContentText>
                 </DialogContent>

packages/frontend/src/components/ConfirmationDialogProvider.tsx

@@ -343,7 +343,7 @@ const TitleAndDescription = ({setErrors, errors, editedRace, applyRaceUpdate, op
 
         <Box>
             <UtilityButton onClick={() => setShowDescription(d => !d)}>
-                {showDescription? '-' : '+'} Description (Optional)
+                {showDescription? '-' : '+'} {t('race_form.description_title')}
             </UtilityButton>
             {showDescription && <>
                 <TextField

packages/frontend/src/components/ElectionForm/Races/RaceForm.tsx

@@ -1,27 +1,25 @@
 import { useState, useMemo } from 'react';
 import { useNavigate } from "react-router";
-import { PrimaryButton } from '../../styles.js';
-import { Box, Breakpoint, Paper, Typography, useMediaQuery } from '@mui/material';
+import { PrimaryButton, UtilityButton } from '../../styles.js';
+import { Box, Paper, TextField, Typography } from '@mui/material';
 import { usePostElection } from '~/hooks/useAPI';
 import { setCookie, useCookie } from '~/hooks/useCookie';
 import { NewElection } from '@equal-vote/star-vote-shared/domain_model/Election';
 import { setVoterAuthenticationMode } from '@equal-vote/star-vote-shared/domain_model/VoterAuthenticationMode';
 import { makeUniqueIDSync, makeID, ID_PREFIXES, ID_LENGTHS } from '@equal-vote/star-vote-shared/utils/makeID';
 
-import { hashString, scrollToElement, StringObject, TransitionBox, useSubstitutedTranslation } from '../../util.js';
+import { hashString, TransitionBox, useSubstitutedTranslation } from '../../util.js';
 import useAuthSession from '../../AuthSessionContextProvider.js';
 import RaceForm from '../Races/RaceForm.js';
 import useConfirm from '../../ConfirmationDialogProvider.js';
-import WizardExtra from './WizardExtra.js';
-import { ElectionContextProvider } from '../../ElectionContextProvider.js';
+import useElection, { ElectionContextProvider } from '../../ElectionContextProvider.js';
 import WizardBasics from './WizardBasics.js';
-import { useTheme } from '@mui/material';
 
 export const makeDefaultElection = () => {
     const ids = [];
     for(let i = 0; i < 1; i++){
         ids.push(makeUniqueIDSync(
-            ID_PREFIXES.CANDIDATE, 
+            ID_PREFIXES.CANDIDATE,
             ID_LENGTHS.CANDIDATE,
             (id: string) => ids.includes(id)
         ));
@@ -34,7 +32,7 @@ export const makeDefaultElection = () => {
         owner_id: '0',
         is_public: false,
         ballot_source: 'live_election',
-        races: [ {   
+        races: [ {
             title: '',
             race_id: '0',
             num_winners: undefined,
@@ -46,7 +44,7 @@ export const makeDefaultElection = () => {
             precincts: undefined,
         } ],
         settings: {
-            voter_access: undefined, // the wizard is responsible for setting this one
+            voter_access: undefined, // onCustomize is responsible for setting this
             voter_authentication: {
                 voter_id: true,
             },
@@ -60,13 +58,55 @@ export const makeDefaultElection = () => {
     } as NewElection
 };
 
+const MultiRaceTitleSection = ({ onCustomize }: { onCustomize: (election: NewElection) => Promise<void> }) => {
+    const { election, updateElection, t } = useElection();
+    const [showDescription, setShowDescription] = useState(false);
+
+    return (
+        <Box sx={{ textAlign: 'left', pl: 1 }}>
+            <Typography variant='h6'>{t('election_details.title')}</Typography>
+            <TextField
+                required
+                label={t('election_details.title')}
+                value={election.title}
+                fullWidth
+                sx={{ mt: 1, mb: 1, boxShadow: 2 }}
+                onChange={(e) => updateElection(el => { el.title = e.target.value })}
+                slotProps={{ htmlInput: { 'aria-label': 'Title' } }}
+            />
+            <UtilityButton onClick={() => setShowDescription(d => !d)}>
+                {showDescription ? '-' : '+'} {t('wizard.description_title')}
+            </UtilityButton>
+            {showDescription && (
+                <TextField
+                    multiline
+                    fullWidth
+                    label="Description"
+                    value={election.description ?? ''}
+                    minRows={3}
+                    sx={{ mt: 1, mb: 1, boxShadow: 2 }}
+                    onChange={(e) => updateElection(el => { el.description = e.target.value })}
+                />
+            )}
+            <Typography sx={{ mt: 1 }}>{t('wizard.add_races_later')}</Typography>
+            <Box sx={{ mt: 3, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', gap: 1 }}>
+                <PrimaryButton
+                    disabled={!election.title.trim()}
+                    onClick={() => onCustomize(election)}
+                >
+                    Next
+                </PrimaryButton>
+            </Box>
+        </Box>
+    );
+};
+
 const Wizard = () => {
     const authSession = useAuthSession();
     const defaultTempId = useMemo(() => makeID(ID_PREFIXES.VOTER, ID_LENGTHS.VOTER), []);
     const [tempID] = useCookie('temp_id', defaultTempId);
     const navigate = useNavigate()
-    const [page, setPage] = useState(0);
-    const { isPending, makeRequest: postElection } = usePostElection()
+    const { makeRequest: postElection } = usePostElection()
     const [election, setElection] = useState<NewElection>(makeDefaultElection())
     const [multiRace, setMultiRace] = useState(undefined);
 
@@ -97,15 +137,13 @@ const Wizard = () => {
         navigate(`/${newElection.election.election_id}${subPage}`)
     }
 
-    const theme = useTheme(); 
-
-    const width: StringObject = {xs: '300px', sm: '500px'};
-    const getWidth = () => {
-        const keys: Breakpoint[] = ['sm', 'xs']; // biggest to smallest, must match width keys
-        // NOTE: I'm precomputing ups so that we don't get an error for variable number of hooks
-        const ups = keys.map(key => useMediaQuery(theme.breakpoints.up(key), {noSsr: true}));
-        return Number(width[keys.find((_, i) => ups[i])].replace('px', ''));
-    }
+    const onCustomize = async (electionToSubmit: NewElection) => {
+        const finalElection = {
+            ...electionToSubmit,
+            settings: setVoterAuthenticationMode(electionToSubmit.settings, 'open_unique_cookie'),
+        };
+        await onAddElection(finalElection, '/admin/build_ballot');
+    };
 
     const onNext = async (editedRace) => {
         const updatedElection = {
@@ -114,23 +152,25 @@ const Wizard = () => {
             title: editedRace.title,
             description: editedRace.description,
         }
-        const confirmed = await confirm(t('wizard.publish_confirm'));
+        const confirmed = await confirm({...t('wizard.publish_confirm'), dismissable: true});
+        if (confirmed === null) {
+            return; // dialog dismissed — stay on wizard with inputs intact
+        }
         if (confirmed) {
             onAddElection({...updatedElection, owner_id: null, state: 'finalized', settings: setVoterAuthenticationMode(updatedElection.settings, 'open_unique_cookie')}, '/')
-        }else{
-            scrollToElement(document.querySelector('.wizard'));
-            setElection(updatedElection)
-            setPage(1);
+        } else {
+            await onCustomize(updatedElection);
         }
     }
 
+    const width = {xs: '300px', sm: '500px'};
+
     const pageSX = {
         display: 'flex',
         gap: 0,
         width: width,
         flexDirection: 'column',
         textAlign: 'center',
-        //backgroundColor: //'lightShade.main',
         padding: 3,
         borderRadius: '20px',
         minWidth: {xs: '0px', md: '400px'},
@@ -142,32 +182,17 @@ const Wizard = () => {
 
     return <ElectionContextProvider id={undefined} localElection={election} setLocalElection={setElection}>
         <Paper className='wizard' elevation={5} sx={{
-            //maxWidth: '613px',
             width: width,
             margin: 'auto',
             overflow: 'clip',
         }}>
-            <Box
-                sx={{
-                    position: 'relative',
-                    width: `${getWidth()*2}px`,
-                    left: `-${page*getWidth()}px`,
-                    transition: 'left 1s',
-                    display: 'flex',
-                    flexDirection: 'row',
-                }}
-            >
-                <Box sx={pageSX}>
-                    <Typography variant='h5' sx={{ color: 'lightShade.contrastText' }}>{t('wizard.title')}</Typography>
-                    <WizardBasics multiRace={multiRace} setMultiRace={setMultiRace}/>
-                    <Box sx={{position: 'relative'}}>
-                        <TransitionBox absolute enabled={multiRace === true} sx={{textAlign: 'left', pl: 1}}>
-                            {t('wizard.add_races_later')}
-                            <Box sx={{ mt: 3, display: "flex", flexDirection: "row", justifyContent: "flex-end", gap: 1 }}>
-                                <PrimaryButton onClick={() => setPage(1)}>Next</PrimaryButton>
-                            </Box>
-                        </TransitionBox>
-                    </Box>
+            <Box sx={pageSX}>
+                <Typography variant='h5' color={'lightShade.contrastText'}>{t('wizard.title')}</Typography>
+                <WizardBasics multiRace={multiRace} setMultiRace={setMultiRace}/>
+                <Box sx={{ position: 'relative' }}>
+                    <TransitionBox absolute enabled={multiRace === true}>
+                        <MultiRaceTitleSection onCustomize={onCustomize} />
+                    </TransitionBox>
                     <TransitionBox enabled={multiRace === false}>
                         <RaceForm
                             raceIndex={0}
@@ -176,9 +201,6 @@ const Wizard = () => {
                         />
                     </TransitionBox>
                 </Box>
-                <Box sx={{...pageSX, textAlign: 'left'}}>
-                    <WizardExtra onBack={() => setPage(pg => pg-1)} multiRace={multiRace} onAddElection={onAddElection}/>
-                </Box>
             </Box>
         </Paper>
     </ElectionContextProvider>