Merge pull request #1235 from revisit-studies/jay/UIfix

Fix UI bugs (screen recording download, reject/undo reject participant buttons)

Author: jaykim1213

src/analysis/individualStudy/ParticipantRejectModal.tsx

@@ -1,5 +1,5 @@
 import {
-  Modal, Text, TextInput, Flex, Button, Alert, Tooltip,
+  Modal, Text, TextInput, Flex, Button, Alert, Tooltip, Group,
 } from '@mantine/core';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import {
@@ -52,6 +52,8 @@ export function ParticipantRejectModal({
   const currentAndSelectedParticipants = useMemo(() => [...selectedParticipants, currentParticipantData].filter((p) => p !== null) as ParticipantData[], [selectedParticipants, currentParticipantData]);
   const rejectedParticipantsCount = useMemo(() => currentAndSelectedParticipants.filter((p) => p.rejected).length, [currentAndSelectedParticipants]);
   const nonRejectedParticipantsCount = useMemo(() => currentAndSelectedParticipants.filter((p) => !p.rejected).length, [currentAndSelectedParticipants]);
+  const rejectParticipantLabel = `Reject Participant${nonRejectedParticipantsCount === 1 ? '' : 's'}`;
+  const undoRejectParticipantLabel = `Undo Reject Participant${rejectedParticipantsCount === 1 ? '' : 's'}`;
 
   const rejectParticipant = useCallback(async (rejectParticipantId: string, reason: string) => {
     if (storageEngine && studyId) {
@@ -106,26 +108,30 @@ export function ParticipantRejectModal({
 
   return (
     <>
-      {rejectedParticipantsCount > 0 && (
-      <Tooltip label="Only admins can undo rejection" disabled={user.isAdmin}>
-        <Button disabled={!user.isAdmin} onClick={() => setModalUndoRejectOpened(true)} color="blue">
-          Undo Reject
-          {!footer ? ` Participants (${rejectedParticipantsCount})` : ''}
-        </Button>
-      </Tooltip>
-      )}
-      {nonRejectedParticipantsCount > 0 && (
-      <Tooltip label="Only admins can reject participants" disabled={user.isAdmin}>
-        <Button disabled={!user.isAdmin} onClick={() => setModalRejectOpened(true)} color="red">
-          Reject
-          {!footer ? ` Participants (${nonRejectedParticipantsCount})` : ''}
-        </Button>
-      </Tooltip>
+      {(rejectedParticipantsCount > 0 || nonRejectedParticipantsCount > 0) && (
+        <Group gap="xs">
+          {rejectedParticipantsCount > 0 && (
+            <Tooltip label="Only admins can undo rejection" disabled={user.isAdmin}>
+              <Button disabled={!user.isAdmin} onClick={() => setModalUndoRejectOpened(true)} color="blue">
+                {footer ? 'Undo Reject' : `${undoRejectParticipantLabel} (${rejectedParticipantsCount})`}
+              </Button>
+            </Tooltip>
+          )}
+          {nonRejectedParticipantsCount > 0 && (
+            <Tooltip label="Only admins can reject participants" disabled={user.isAdmin}>
+              <Button disabled={!user.isAdmin} onClick={() => setModalRejectOpened(true)} color="red">
+                {footer ? 'Reject' : `${rejectParticipantLabel} (${nonRejectedParticipantsCount})`}
+              </Button>
+            </Tooltip>
+          )}
+        </Group>
       )}
       <Modal
         opened={modalRejectOpened}
         onClose={() => setModalRejectOpened(false)}
-        title={nonRejectedParticipantsCount > 0 ? `Reject Participants (${nonRejectedParticipantsCount})` : 'Reject Participant'}
+        title={footer
+          ? rejectParticipantLabel
+          : `${rejectParticipantLabel} (${nonRejectedParticipantsCount})`}
       >
         <Alert
           icon={<IconAlertTriangle size={16} />}
@@ -134,25 +140,28 @@ export function ParticipantRejectModal({
           mb="md"
         >
           {currentAndSelectedParticipants.length > 0 && rejectedParticipantsCount > 0 && (
-          <>
-            {rejectedParticipantsCount}
-            {' '}
-            of your
-            {' '}
-            {currentAndSelectedParticipants.length}
-            {' '}
-            selected participant
-            {currentAndSelectedParticipants.length === 1 ? '' : 's'}
-            {' '}
-            {rejectedParticipantsCount === 1 ? 'has' : 'have'}
-            {' '}
-            already been rejected. Clicking reject participants will now reject the other
-            {' '}
-            {nonRejectedParticipantsCount}
-            .
-            <br />
-            <br />
-          </>
+            <>
+              {rejectedParticipantsCount}
+              {' '}
+              of your
+              {' '}
+              {currentAndSelectedParticipants.length}
+              {' '}
+              selected participant
+              {currentAndSelectedParticipants.length === 1 ? '' : 's'}
+              {' '}
+              {rejectedParticipantsCount === 1 ? 'has' : 'have'}
+              {' '}
+              already been rejected. Clicking reject participant
+              {nonRejectedParticipantsCount === 1 ? '' : 's'}
+              {' '}
+              will now reject
+              {' '}
+              {nonRejectedParticipantsCount === 1 ? 'this participant' : 'these participants'}
+              .
+              <br />
+              <br />
+            </>
           )}
           When participants are rejected, their sequences will be reassigned to other participants.
         </Alert>
@@ -165,19 +174,17 @@ export function ParticipantRejectModal({
             Cancel
           </Button>
           <Button color="red" onClick={handleRejectParticipant}>
-            {currentAndSelectedParticipants.length > 0 ? 'Reject Participants' : 'Reject Participant'}
+            {rejectParticipantLabel}
           </Button>
         </Flex>
       </Modal>
 
       <Modal
         opened={modalUndoRejectOpened}
         onClose={() => setModalUndoRejectOpened(false)}
-        title={(
-          <Text>
-            {`Undo Reject Participants (${currentAndSelectedParticipants.length})`}
-          </Text>
-          )}
+        title={footer
+          ? undoRejectParticipantLabel
+          : `${undoRejectParticipantLabel} (${rejectedParticipantsCount})`}
       >
         <Alert
           icon={<IconAlertTriangle size={16} />}
@@ -188,7 +195,12 @@ export function ParticipantRejectModal({
           When you undo participant rejections, you may end up with unbalanced latin squares. This is because the rejected sequence may have been reassigned.
         </Alert>
         {currentAndSelectedParticipants.length > 0 ? (
-          <Text>Are you sure you want to undo the rejection of these participants?</Text>
+          <Text>
+            Are you sure you want to undo the rejection of
+            {' '}
+            {rejectedParticipantsCount === 1 ? 'this participant' : 'these participants'}
+            ?
+          </Text>
         ) : (
           <>
             <Text>
@@ -206,7 +218,7 @@ export function ParticipantRejectModal({
             Cancel
           </Button>
           <Button color="blue" onClick={handleUndoRejectParticipant}>
-            {currentAndSelectedParticipants.length > 0 ? 'Undo Reject Participants' : 'Undo Reject Participant'}
+            {undoRejectParticipantLabel}
           </Button>
         </Flex>
       </Modal>

src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx

@@ -125,6 +125,7 @@ export function ThinkAloudFooter({
     async function fetchAssetsUrl() {
       if (!storageEngine || !participantId || !currentTrial) {
         setAudioUrl(null);
+        setScreenRecordingUrl(null);
         return;
       }
 
@@ -599,7 +600,7 @@ export function ThinkAloudFooter({
             )}
             {screenRecordingUrl && (
               <Tooltip label="Download screen recording">
-                <ActionIcon variant="filled" size={30} onClick={handleDownloadScreenRecording}>
+                <ActionIcon variant="light" size={30} onClick={handleDownloadScreenRecording}>
                   <IconDeviceDesktopDown />
                 </ActionIcon>
               </Tooltip>