feat(gui): Added a user icon for annotations which where added by the current user (#945)

* feat: Added a user icon for annotations which where added by the current user.

* feat: Added a robot icon for annotations which where autogenerated.

* style: apply automatic fixes of linters

* fix(gui): TypeScript error

* style: apply automatic fixes of linters

Co-authored-by: Arsam Islami <[email protected]>
Co-authored-by: Aclrian <[email protected]>
Co-authored-by: Lars Reimann <[email protected]>
Co-authored-by: lars-reimann <[email protected]>

Author: 3 people

api-editor/gui/src/features/annotations/AnnotationView.tsx

@@ -1,6 +1,6 @@
 import { Button, ButtonGroup, Icon, IconButton, Stack, Text as ChakraText, Tooltip } from '@chakra-ui/react';
 import React from 'react';
-import { FaCheck, FaFlag, FaQuestion, FaTimes, FaTrash, FaWrench } from 'react-icons/fa';
+import { FaCheck, FaFlag, FaQuestion, FaRobot, FaTimes, FaTrash, FaUser, FaWrench } from 'react-icons/fa';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
 import {
     removeBoundaryAnnotation,
@@ -35,6 +35,7 @@ import {
     selectRemoveAnnotation,
     selectRenameAnnotation,
     selectTodoAnnotation,
+    selectUsername,
     selectUsernameIsValid,
     selectValueAnnotation,
 } from './annotationSlice';
@@ -332,6 +333,14 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
 
     const authors = annotation.authors ?? [];
     const authorText = createAuthorText(authors);
+    const username = useAppSelector(selectUsername);
+
+    let rightIcon;
+    if (authors.includes(username)) {
+        rightIcon = <FaUser />;
+    } else if (authors.length === 1 && authors[0] === '$autogen$') {
+        rightIcon = <FaRobot />;
+    }
 
     const isReportable = reportable && authors.length === 1 && authors.includes('$autogen$');
 
@@ -375,6 +384,7 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
             <Tooltip label={`${authorText}Click to change.`}>
                 <Button
                     leftIcon={<FaWrench />}
+                    rightIcon={rightIcon}
                     flexGrow={1}
                     borderLeft="none"
                     justifyContent="flex-start"