Merge pull request #96 from c4dt/playwright

Action Buttons that manipulate a form are only visible to the owner
c4dt · Feb 7, 2024 · 0d353b8 · 0d353b8
2 parents baa48d9 + 2a4116e
commit 0d353b8
Show file tree

Hide file tree

Showing 16 changed files with 163 additions and 63 deletions.
diff --git a/web/frontend/src/components/modal/RedirectToModal.tsx b/web/frontend/src/components/modal/RedirectToModal.tsx
@@ -9,6 +9,7 @@ type RedirectToModalProps = {
   children: string;
   buttonRightText: string;
   navigateDestination?: To | number;
+  needsReload?: boolean;
 };
 
 const RedirectToModal: FC<RedirectToModalProps> = ({
@@ -18,12 +19,17 @@ const RedirectToModal: FC<RedirectToModalProps> = ({
   children,
   buttonRightText,
   navigateDestination,
+  needsReload = false,
 }) => {
   const navigate = useNavigate();
 
   const closeModal = () => {
     if (navigateDestination) {
       navigate(navigateDestination as To);
+      if (needsReload) {
+        // reload the page to update the locally cached permissions
+        window.location.reload();
+      }
     }
     setShowModal(false);
   };

diff --git a/web/frontend/src/pages/form/components/ActionButtons/CancelButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/CancelButton.tsx
@@ -4,14 +4,14 @@ import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OngoingAction, Status } from 'types/form';
 import ActionButton from './ActionButton';
-const SUBJECT_ELECTION = 'election';
-const ACTION_CREATE = 'create';
-const CancelButton = ({ status, handleCancel, ongoingAction }) => {
-  const authCtx = useContext(AuthContext);
+import { isManager } from './utils';
+
+const CancelButton = ({ status, handleCancel, ongoingAction, formID }) => {
+  const { authorization, isLogged } = useContext(AuthContext);
   const { t } = useTranslation();
 
   return (
-    authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) &&
+    isManager(formID, authorization, isLogged) &&
     status === Status.Open && (
       <ActionButton
         handleClick={handleCancel}

diff --git a/web/frontend/src/pages/form/components/ActionButtons/CloseButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/CloseButton.tsx
@@ -4,15 +4,14 @@ import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OngoingAction, Status } from 'types/form';
 import ActionButton from './ActionButton';
+import { isManager } from './utils';
 
-const SUBJECT_ELECTION = 'election';
-const ACTION_CREATE = 'create';
-const CloseButton = ({ status, handleClose, ongoingAction }) => {
-  const authCtx = useContext(AuthContext);
+const CloseButton = ({ status, handleClose, ongoingAction, formID }) => {
+  const { authorization, isLogged } = useContext(AuthContext);
   const { t } = useTranslation();
 
   return (
-    authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) &&
+    isManager(formID, authorization, isLogged) &&
     status === Status.Open && (
       <ActionButton
         handleClick={handleClose}

diff --git a/web/frontend/src/pages/form/components/ActionButtons/CombineButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/CombineButton.tsx
@@ -4,15 +4,14 @@ import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OngoingAction, Status } from 'types/form';
 import ActionButton from './ActionButton';
+import { isManager } from './utils';
 
-const SUBJECT_ELECTION = 'election';
-const ACTION_CREATE = 'create';
-const CombineButton = ({ status, handleCombine, ongoingAction }) => {
-  const authCtx = useContext(AuthContext);
+const CombineButton = ({ status, handleCombine, ongoingAction, formID }) => {
   const { t } = useTranslation();
+  const { authorization, isLogged } = useContext(AuthContext);
 
   return (
-    authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) &&
+    isManager(formID, authorization, isLogged) &&
     status === Status.PubSharesSubmitted && (
       <ActionButton
         handleClick={handleCombine}

diff --git a/web/frontend/src/pages/form/components/ActionButtons/DecryptButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/DecryptButton.tsx
@@ -4,15 +4,14 @@ import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OngoingAction, Status } from 'types/form';
 import ActionButton from './ActionButton';
+import { isManager } from './utils';
 
-const SUBJECT_ELECTION = 'election';
-const ACTION_CREATE = 'create';
-const DecryptButton = ({ status, handleDecrypt, ongoingAction }) => {
-  const authCtx = useContext(AuthContext);
+const DecryptButton = ({ status, handleDecrypt, ongoingAction, formID }) => {
+  const { authorization, isLogged } = useContext(AuthContext);
   const { t } = useTranslation();
 
   return (
-    authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) &&
+    isManager(formID, authorization, isLogged) &&
     status === Status.ShuffledBallots && (
       <ActionButton
         handleClick={handleDecrypt}

diff --git a/web/frontend/src/pages/form/components/ActionButtons/DeleteButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/DeleteButton.tsx
@@ -2,16 +2,14 @@ import { TrashIcon } from '@heroicons/react/outline';
 import { AuthContext } from 'index';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
+import { isManager } from './utils';
 
-const SUBJECT_ELECTION = 'election';
-const ACTION_CREATE = 'create';
-
-const DeleteButton = ({ handleDelete }) => {
-  const authCtx = useContext(AuthContext);
+const DeleteButton = ({ handleDelete, formID }) => {
   const { t } = useTranslation();
+  const { authorization, isLogged } = useContext(AuthContext);
 
   return (
-    authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) && (
+    isManager(formID, authorization, isLogged) && (
       <button onClick={handleDelete}>
         <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-1 mr-2 border border-gray-300 text-sm rounded-full font-medium text-gray-700 hover:text-red-500">
           <TrashIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />

diff --git a/web/frontend/src/pages/form/components/ActionButtons/InitializeButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/InitializeButton.tsx
@@ -4,14 +4,14 @@ import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OngoingAction, Status } from 'types/form';
 import ActionButton from './ActionButton';
-const SUBJECT_ELECTION = 'election';
-const ACTION_CREATE = 'create';
-const InitializeButton = ({ status, handleInitialize, ongoingAction }) => {
-  const authCtx = useContext(AuthContext);
+import { isManager } from './utils';
+
+const InitializeButton = ({ status, handleInitialize, ongoingAction, formID }) => {
+  const { authorization, isLogged } = useContext(AuthContext);
   const { t } = useTranslation();
 
   return (
-    authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) &&
+    isManager(formID, authorization, isLogged) &&
     status === Status.Initial && (
       <ActionButton
         handleClick={handleInitialize}

diff --git a/web/frontend/src/pages/form/components/ActionButtons/OpenButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/OpenButton.tsx
@@ -4,15 +4,14 @@ import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OngoingAction, Status } from 'types/form';
 import ActionButton from './ActionButton';
+import { isManager } from './utils';
 
-const SUBJECT_ELECTION = 'election';
-const ACTION_CREATE = 'create';
-const OpenButton = ({ status, handleOpen, ongoingAction }) => {
-  const authCtx = useContext(AuthContext);
+const OpenButton = ({ status, handleOpen, ongoingAction, formID }) => {
   const { t } = useTranslation();
+  const { authorization, isLogged } = useContext(AuthContext);
 
   return (
-    authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) &&
+    isManager(formID, authorization, isLogged) &&
     status === Status.Setup && (
       <ActionButton
         handleClick={handleOpen}

diff --git a/web/frontend/src/pages/form/components/ActionButtons/SetupButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/SetupButton.tsx
@@ -4,15 +4,14 @@ import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OngoingAction, Status } from 'types/form';
 import ActionButton from './ActionButton';
+import { isManager } from './utils';
 
-const SUBJECT_ELECTION = 'election';
-const ACTION_CREATE = 'create';
-const SetupButton = ({ status, handleSetup, ongoingAction }) => {
-  const authCtx = useContext(AuthContext);
+const SetupButton = ({ status, handleSetup, ongoingAction, formID }) => {
   const { t } = useTranslation();
+  const { authorization, isLogged } = useContext(AuthContext);
 
   return (
-    authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) &&
+    isManager(formID, authorization, isLogged) &&
     status === Status.Initialized && (
       <ActionButton
         handleClick={handleSetup}

diff --git a/web/frontend/src/pages/form/components/ActionButtons/ShuffleButton.tsx b/web/frontend/src/pages/form/components/ActionButtons/ShuffleButton.tsx
@@ -4,15 +4,14 @@ import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OngoingAction, Status } from 'types/form';
 import ActionButton from './ActionButton';
+import { isManager } from './utils';
 
-const SUBJECT_ELECTION = 'election';
-const ACTION_CREATE = 'create';
-const ShuffleButton = ({ status, handleShuffle, ongoingAction }) => {
-  const authCtx = useContext(AuthContext);
+const ShuffleButton = ({ status, handleShuffle, ongoingAction, formID }) => {
   const { t } = useTranslation();
+  const { authorization, isLogged } = useContext(AuthContext);
 
   return (
-    authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) &&
+    isManager(formID, authorization, isLogged) &&
     status === Status.Closed && (
       <ActionButton
         handleClick={handleShuffle}

diff --git a/web/frontend/src/pages/form/components/FormForm.tsx b/web/frontend/src/pages/form/components/FormForm.tsx
@@ -338,7 +338,8 @@ const FormForm: FC<FormFormProps> = () => {
         setShowModal={setShowModal}
         title={t('notification')}
         buttonRightText={t('close')}
-        navigateDestination={navigateDestination}>
+        navigateDestination={navigateDestination}
+        needsReload={true}>
         {textModal}
       </RedirectToModal>
 

diff --git a/web/frontend/src/pages/form/components/utils/useChangeAction.tsx b/web/frontend/src/pages/form/components/utils/useChangeAction.tsx
@@ -488,36 +488,53 @@ const useChangeAction = (
               status={status}
               handleInitialize={handleInitialize}
               ongoingAction={ongoingAction}
+              formID={formID}
             />
-            <DeleteButton handleDelete={handleDelete} />
+            <DeleteButton handleDelete={handleDelete} formID={formID} />
           </>
         );
       case Status.Initialized:
         return (
           <>
-            <SetupButton status={status} handleSetup={handleSetup} ongoingAction={ongoingAction} />
-            <DeleteButton handleDelete={handleDelete} />
+            <SetupButton
+              status={status}
+              handleSetup={handleSetup}
+              ongoingAction={ongoingAction}
+              formID={formID}
+            />
+            <DeleteButton handleDelete={handleDelete} formID={formID} />
           </>
         );
       case Status.Setup:
         return (
           <>
-            <OpenButton status={status} handleOpen={handleOpen} ongoingAction={ongoingAction} />
-            <DeleteButton handleDelete={handleDelete} />
+            <OpenButton
+              status={status}
+              handleOpen={handleOpen}
+              ongoingAction={ongoingAction}
+              formID={formID}
+            />
+            <DeleteButton handleDelete={handleDelete} formID={formID} />
             <AddVotersButton handleAddVoters={handleAddVoters} formID={formID} />
           </>
         );
       case Status.Open:
         return (
           <>
-            <CloseButton status={status} handleClose={handleClose} ongoingAction={ongoingAction} />
+            <CloseButton
+              status={status}
+              handleClose={handleClose}
+              ongoingAction={ongoingAction}
+              formID={formID}
+            />
             <CancelButton
               status={status}
               handleCancel={handleCancel}
               ongoingAction={ongoingAction}
+              formID={formID}
             />
             <VoteButton status={status} formID={formID} />
-            <DeleteButton handleDelete={handleDelete} />
+            <DeleteButton handleDelete={handleDelete} formID={formID} />
             <AddVotersButton handleAddVoters={handleAddVoters} formID={formID} />
           </>
         );
@@ -528,8 +545,9 @@ const useChangeAction = (
               status={status}
               handleShuffle={handleShuffle}
               ongoingAction={ongoingAction}
+              formID={formID}
             />
-            <DeleteButton handleDelete={handleDelete} />
+            <DeleteButton handleDelete={handleDelete} formID={formID} />
           </>
         );
       case Status.ShuffledBallots:
@@ -539,8 +557,9 @@ const useChangeAction = (
               status={status}
               handleDecrypt={handleDecrypt}
               ongoingAction={ongoingAction}
+              formID={formID}
             />
-            <DeleteButton handleDelete={handleDelete} />
+            <DeleteButton handleDelete={handleDelete} formID={formID} />
           </>
         );
       case Status.PubSharesSubmitted:
@@ -550,21 +569,22 @@ const useChangeAction = (
               status={status}
               handleCombine={handleCombine}
               ongoingAction={ongoingAction}
+              formID={formID}
             />
-            <DeleteButton handleDelete={handleDelete} />
+            <DeleteButton handleDelete={handleDelete} formID={formID} />
           </>
         );
       case Status.ResultAvailable:
         return (
           <>
             <ResultButton status={status} formID={formID} />
-            <DeleteButton handleDelete={handleDelete} />
+            <DeleteButton handleDelete={handleDelete} formID={formID} />
           </>
         );
       default:
         return (
           <>
-            <DeleteButton handleDelete={handleDelete} />
+            <DeleteButton handleDelete={handleDelete} formID={formID} />
           </>
         );
     }

diff --git a/web/frontend/tests/formIndex.spec.ts b/web/frontend/tests/formIndex.spec.ts
@@ -3,7 +3,7 @@ import { default as i18n } from 'i18next';
 import { assertHasFooter, assertHasNavBar, initI18n, logIn, setUp, translate } from './shared';
 import { SCIPER_ADMIN, SCIPER_USER, mockPersonalInfo } from './mocks/api';
 import { mockForms } from './mocks/evoting';
-import Forms from './json/formList.json';
+import Forms from './json/formIndex.json';
 import User from './json/api/personal_info/789012.json';
 import Admin from './json/api/personal_info/123456.json';