diff --git a/api-editor/gui/src/features/annotations/AnnotationView.tsx b/api-editor/gui/src/features/annotations/AnnotationView.tsx index 34c497f61..e8d00340d 100644 --- a/api-editor/gui/src/features/annotations/AnnotationView.tsx +++ b/api-editor/gui/src/features/annotations/AnnotationView.tsx @@ -390,22 +390,32 @@ const AnnotationTag: React.FC = function ({ return ( <> - + } aria-label="Delete annotation" colorScheme="red" + borderRadius="var(--chakra-radii-md) 0 0 var(--chakra-radii-md)" disabled={!isValidUsername || isReviewed} onClick={onDelete} /> - + - - - - diff --git a/api-editor/gui/src/features/annotations/CompleteButton.tsx b/api-editor/gui/src/features/annotations/CompleteButton.tsx index d8ad16a90..1ff28b16c 100644 --- a/api-editor/gui/src/features/annotations/CompleteButton.tsx +++ b/api-editor/gui/src/features/annotations/CompleteButton.tsx @@ -1,4 +1,4 @@ -import { Button, Icon } from '@chakra-ui/react'; +import { Button, Icon, Tooltip } from '@chakra-ui/react'; import React from 'react'; import { FaCheck } from 'react-icons/fa'; import { useAppDispatch, useAppSelector } from '../../app/hooks'; @@ -10,22 +10,41 @@ interface CompleteButtonProps { export const CompleteButton: React.FC = function ({ target }) { const dispatch = useAppDispatch(); - const isComplete = useAppSelector(selectComplete(target)); + const completeAnnotation = useAppSelector(selectComplete(target)); const isDisabled = !useAppSelector(selectUsernameIsValid); - if (isComplete) { - return ( - - ); + const completeButton = ( + + ); + + let completeButtonTooltipLabel = ''; + if ((completeAnnotation?.authors?.length ?? 0) > 0) { + completeButtonTooltipLabel += `Marked as complete by ${completeAnnotation!.authors![0]}.`; + } + if (!isDisabled) { + completeButtonTooltipLabel += ` Click to undo.`; + } + + if (completeAnnotation) { + if (completeButtonTooltipLabel) { + return ( + + {completeButton} + + ); + } else { + // eslint-disable-next-line react/jsx-no-useless-fragment + return <>{completeButton}; + } } else { return (