try to add comment option to revoke button

website/src/components/SequenceDetailsPage/RevokeButton.tsx

@@ -1,12 +1,12 @@
-import { type FC } from 'react';
+import { type FC, useState } from 'react';
+import { confirmAlert } from 'react-confirm-alert';
 import { toast } from 'react-toastify';
 
 import { routes } from '../../routes/routes';
 import { backendClientHooks } from '../../services/serviceHooks';
 import type { ClientConfig } from '../../types/runtimeConfig';
 import { createAuthorizationHeader } from '../../utils/createAuthorizationHeader';
 import { stringifyMaybeAxiosError } from '../../utils/stringifyMaybeAxiosError';
-import { displayConfirmationDialog } from '../ConfirmationDialog';
 import { withQueryProvider } from '../common/withQueryProvider';
 
 type RevokeSequenceEntryProps = {
@@ -42,15 +42,15 @@ const InnerRevokeButton: FC<RevokeSequenceEntryProps> = ({
         },
     );
 
-    const handleRevokeSequenceEntry = () => {
-        useRevokeSequenceEntries.mutate({ accessions: [accessionVersion], revocationComments: 'website revocation' });
+    const handleRevokeSequenceEntry = (inputValue: string) => {
+        useRevokeSequenceEntries.mutate({ accessions: [accessionVersion], revocationComments: inputValue });
     };
 
     return (
         <button
             className='btn btn-sm  bg-red-400'
             onClick={() =>
-                displayConfirmationDialog({
+                displayRevocationDialog({
                     dialogText: 'Are you sure you want to create a revocation for this sequence?',
                     onConfirmation: handleRevokeSequenceEntry,
                 })
@@ -61,6 +61,77 @@ const InnerRevokeButton: FC<RevokeSequenceEntryProps> = ({
     );
 };
 
+interface DisplayRevocationProps {
+    dialogText: string;
+    onConfirmation: (inputValue: string) => void;
+}
+
+export const displayRevocationDialog = ({ dialogText, onConfirmation }: DisplayRevocationProps) => {
+    confirmAlert({
+        closeOnClickOutside: true,
+
+        customUI: ({ onClose }) => (
+            <RevocationDialog
+                dialogText={dialogText}
+                onConfirmation={async (inputValue) => {
+                    await onConfirmation(inputValue);
+                    onClose();
+                }}
+                onClose={onClose}
+            />
+        ),
+    });
+};
+
+interface RevocationDialogProps {
+    dialogText: string;
+    onConfirmation: (inputValue: string) => void;
+    onClose: () => void;
+}
+
+export const RevocationDialog: React.FC<RevocationDialogProps> = ({ dialogText, onConfirmation, onClose }) => {
+    const [inputValue, setInputValue] = useState('');
+
+    return (
+        <div className='modal-box'>
+            <form method='dialog'>
+                <button className='btn btn-sm btn-circle btn-ghost absolute right-2 top-2' onClick={onClose}>
+                    ✕
+                </button>
+            </form>
+
+            <h3 className='font-bold text-lg'>{dialogText}</h3>
+
+            <input
+                type='text'
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                placeholder='Enter reason for revocation'
+                className='input-class mt-4'
+            />
+
+            <div className='flex justify-end gap-4 mt-4'>
+                <form method='dialog'>
+                    <button className='btn loculusColor text-white hover:bg-primary-700' onClick={onClose}>
+                        Cancel
+                    </button>
+                </form>
+                <form method='dialog'>
+                    <button
+                        className='btn loculusColor text-white hover:bg-primary-700'
+                        onClick={(e) => {
+                            e.preventDefault();
+                            onConfirmation(inputValue);
+                        }}
+                    >
+                        Confirm
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+};
+
 export const RevokeButton = withQueryProvider(InnerRevokeButton);
 
 function getRevokeSequenceEntryErrorMessage(error: unknown) {