From 1c44f8c5d357c6e14fa6484ed48efac401f6298d Mon Sep 17 00:00:00 2001
From: Theo Sanderson <theo@sndrsn.co.uk>
Date: Tue, 27 Feb 2024 17:02:41 +0000
Subject: [PATCH] review page tweaks

---
 website/src/components/ConfirmationDialog.tsx |  6 +-
 .../src/components/ReviewPage/ReviewCard.tsx  | 14 +--
 .../src/components/ReviewPage/ReviewPage.tsx  | 86 +++++++++++++++----
 3 files changed, 81 insertions(+), 25 deletions(-)

diff --git a/website/src/components/ConfirmationDialog.tsx b/website/src/components/ConfirmationDialog.tsx
index b5dfd39e0..a0bb9b891 100644
--- a/website/src/components/ConfirmationDialog.tsx
+++ b/website/src/components/ConfirmationDialog.tsx
@@ -9,7 +9,7 @@ type ConfirmationDialogProps = {
 
 type DisplayConfirmationProps = {
     dialogText: string;
-    onConfirmation: () => Promise<void>;
+    onConfirmation: () => Promise<void> | void;
 };
 
 export const ConfirmationDialog: FC<ConfirmationDialogProps> = ({ dialogText, onConfirmation, onClose }) => {
@@ -25,12 +25,12 @@ export const ConfirmationDialog: FC<ConfirmationDialogProps> = ({ dialogText, on
 
             <div className='flex justify-end gap-4 mt-4'>
                 <form method='dialog'>
-                    <button className='btn btn-error' onClick={onClose}>
+                    <button className='btn loculusColor text-white hover:bg-primary-700' onClick={onClose}>
                         Cancel
                     </button>
                 </form>
                 <form method='dialog'>
-                    <button className='btn loculusColor' onClick={onConfirmation}>
+                    <button className='btn loculusColor text-white hover:bg-primary-700' onClick={onConfirmation}>
                         Confirm
                     </button>
                 </form>
diff --git a/website/src/components/ReviewPage/ReviewCard.tsx b/website/src/components/ReviewPage/ReviewCard.tsx
index 2a73e605e..0077d27c7 100644
--- a/website/src/components/ReviewPage/ReviewCard.tsx
+++ b/website/src/components/ReviewPage/ReviewCard.tsx
@@ -18,15 +18,15 @@ import type { ClientConfig } from '../../types/runtimeConfig.ts';
 import { createAuthorizationHeader } from '../../utils/createAuthorizationHeader.ts';
 import { displayMetadataField } from '../../utils/displayMetadataField.ts';
 import { getAccessionVersionString } from '../../utils/extractAccessionVersion.ts';
-import Edit from '~icons/bxs/edit';
-import Trash from '~icons/bxs/trash';
-import Send from '~icons/fa/send';
+import BiTrash from '~icons/bi/trash';
+import ClarityNoteEditLine from '~icons/clarity/note-edit-line';
 import Note from '~icons/fluent/note-24-filled';
 import QuestionMark from '~icons/fluent/tag-question-mark-24-filled';
 import Locked from '~icons/fluent-emoji-high-contrast/locked';
 import Unlocked from '~icons/fluent-emoji-high-contrast/unlocked';
 import EmptyCircle from '~icons/grommet-icons/empty-circle';
 import TickOutline from '~icons/mdi/tick-outline';
+import WpfPaperPlane from '~icons/wpf/paper-plane';
 
 type ReviewCardProps = {
     sequenceEntryStatus: SequenceEntryStatus;
@@ -103,14 +103,14 @@ const ButtonBar: FC<ButtonBarProps> = ({
         } pl-3 inline-block mr-2 mb-2 text-xl`;
 
     return (
-        <div className='flex space-x-2 mb-auto pt-3.5'>
+        <div className='flex space-x-1 mb-auto pt-3.5'>
             <button
                 className={buttonBarClass(sequenceEntryStatus.status !== awaitingApprovalStatus)}
                 onClick={approveAccessionVersion}
                 data-tooltip-id={'approve-tooltip' + sequenceEntryStatus.accession}
                 disabled={sequenceEntryStatus.status !== awaitingApprovalStatus}
             >
-                <Send />
+                <WpfPaperPlane />
             </button>
             <Tooltip
                 id={'approve-tooltip' + sequenceEntryStatus.accession}
@@ -136,7 +136,7 @@ const ButtonBar: FC<ButtonBarProps> = ({
                     sequenceEntryStatus.status !== awaitingApprovalStatus
                 }
             >
-                <Edit />
+                <ClarityNoteEditLine />
             </button>
             <Tooltip
                 id={'edit-tooltip' + sequenceEntryStatus.accession}
@@ -160,7 +160,7 @@ const ButtonBar: FC<ButtonBarProps> = ({
                     sequenceEntryStatus.status !== awaitingApprovalStatus
                 }
             >
-                <Trash />
+                <BiTrash />
             </button>
             <Tooltip
                 id={'delete-tooltip' + sequenceEntryStatus.accession}
diff --git a/website/src/components/ReviewPage/ReviewPage.tsx b/website/src/components/ReviewPage/ReviewPage.tsx
index c1c508d6d..1fbbcd81c 100644
--- a/website/src/components/ReviewPage/ReviewPage.tsx
+++ b/website/src/components/ReviewPage/ReviewPage.tsx
@@ -1,3 +1,4 @@
+import { Menu } from '@headlessui/react';
 import { Pagination } from '@mui/material';
 import { type ChangeEvent, type FC, useState } from 'react';
 
@@ -15,8 +16,14 @@ import {
     type SequenceEntryStatus,
 } from '../../types/backend.ts';
 import { type ClientConfig } from '../../types/runtimeConfig.ts';
+import { displayConfirmationDialog } from '../ConfirmationDialog.tsx';
 import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback.tsx';
 import { withQueryProvider } from '../common/withQueryProvider.tsx';
+import BiTrash from '~icons/bi/trash';
+import IwwaArrowDown from '~icons/iwwa/arrow-down';
+import WpfPaperPlane from '~icons/wpf/paper-plane';
+const menuItemClassName = `group flex rounded-md items-center w-full px-2 py-2 text-sm
+hover:bg-gray-400 bg-gray-500 text-white text-left mb-1`;
 
 type ReviewPageProps = {
     clientConfig: ClientConfig;
@@ -104,28 +111,77 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, accessTo
     );
 
     const bulkActionButtons = (
-        <div className='flex justify-end'>
-            {errorCount > 0 && showErrors && (
-                <button
-                    className='border rounded-md p-1 bg-gray-500 text-white px-2'
-                    onClick={() => {
-                        hooks.deleteSequenceEntries({
-                            scope: deleteProcessedDataWithErrorsScope.value,
-                        });
-                    }}
-                >
-                    Discard {errorCount} sequences with errors
-                </button>
+        <div className='flex justify-end items-center gap-3'>
+            {processedCount + errorCount > 0 && (
+                <Menu as='div' className='relative inline-block text-left'>
+                    <Menu.Button className='border rounded-md p-1 bg-gray-500 text-white px-2'>
+                        <BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
+                        Discard sequences
+                        <IwwaArrowDown className='inline-block ml-1 w-3 h-3 -mt-0.5' />
+                    </Menu.Button>
+                    <Menu.Items className='origin-top-right absolute z-50 bg-white'>
+                        <div className='py-1'>
+                            {errorCount > 0 && showErrors && (
+                                <Menu.Item>
+                                    {({}) => (
+                                        <button
+                                            className={menuItemClassName}
+                                            onClick={() =>
+                                                displayConfirmationDialog({
+                                                    dialogText:
+                                                        'Are you sure you want to discard all sequences with errors?',
+                                                    onConfirmation: () => {
+                                                        hooks.deleteSequenceEntries({
+                                                            scope: deleteProcessedDataWithErrorsScope.value,
+                                                        });
+                                                    },
+                                                })
+                                            }
+                                        >
+                                            <BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
+                                            Discard {errorCount} sequences with errors
+                                        </button>
+                                    )}
+                                </Menu.Item>
+                            )}
+                            <Menu.Item>
+                                {({}) => (
+                                    <button
+                                        className={menuItemClassName}
+                                        onClick={() =>
+                                            displayConfirmationDialog({
+                                                dialogText: `Are you sure you want to discard all ${processedCount + errorCount} processed sequences?`,
+                                                onConfirmation: () => {
+                                                    hooks.deleteSequenceEntries({
+                                                        scope: deleteAllDataScope.value,
+                                                    });
+                                                },
+                                            })
+                                        }
+                                    >
+                                        <BiTrash className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
+                                        Discard all {processedCount + errorCount} processed sequences
+                                    </button>
+                                )}
+                            </Menu.Item>
+                        </div>
+                    </Menu.Items>
+                </Menu>
             )}
             {processedCount > 0 && (
                 <button
-                    className='border rounded-md p-1 bg-gray-500 text-white px-2 ml-2'
+                    className='border rounded-md p-1 bg-gray-500 text-white px-2'
                     onClick={() =>
-                        hooks.approveProcessedData({
-                            scope: approveAllDataScope.value,
+                        displayConfirmationDialog({
+                            dialogText: 'Are you sure you want to release all sequences without errors?',
+                            onConfirmation: () =>
+                                hooks.approveProcessedData({
+                                    scope: approveAllDataScope.value,
+                                }),
                         })
                     }
                 >
+                    <WpfPaperPlane className='inline-block w-4 h-4 -mt-0.5 mr-1.5' />
                     Release {processedCount} sequences without errors
                 </button>
             )}