Add tooltip to user avatar (#2080)

Co-authored-by: Philip Molares <philip.molares@udo.edu
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Philip Molares <philip.molares@udo.edu
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/common/user-avatar/__snapshots__/user-avatar.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`UserAvatar adds additionalClasses props to wrapping span 1`] = `
       class="rounded user-image"
       height="20"
       src="https://example.com/test.png"
-      title="Boaty McBoatFace"
+      title="common.avatarOf"
       width="20"
     />
     <span
@@ -32,7 +32,7 @@ exports[`UserAvatar does not show names if showName prop is false 1`] = `
       class="rounded user-image"
       height="20"
       src="https://example.com/test.png"
-      title="Boaty McBoatFace"
+      title="common.avatarOf"
       width="20"
     />
   </span>
@@ -49,7 +49,7 @@ exports[`UserAvatar renders the user avatar correctly 1`] = `
       class="rounded user-image"
       height="20"
       src="https://example.com/test.png"
-      title="Boaty McBoatFace"
+      title="common.avatarOf"
       width="20"
     />
     <span
@@ -71,7 +71,7 @@ exports[`UserAvatar renders the user avatar in size lg 1`] = `
       class="rounded user-image"
       height="30"
       src="https://example.com/test.png"
-      title="Boaty McBoatFace"
+      title="common.avatarOf"
       width="30"
     />
     <span
@@ -93,7 +93,7 @@ exports[`UserAvatar renders the user avatar in size sm 1`] = `
       class="rounded user-image"
       height="16"
       src="https://example.com/test.png"
-      title="Boaty McBoatFace"
+      title="common.avatarOf"
       width="16"
     />
     <span

src/components/common/user-avatar/default-avatar.png.license

@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+
+SPDX-License-Identifier: CC0-1.0

src/components/common/user-avatar/user-avatar.tsx

@@ -4,11 +4,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ShowIf } from '../show-if/show-if'
 import styles from './user-avatar.module.scss'
 import type { UserInfo } from '../../../api/users/types'
+import defaultAvatar from './default-avatar.png'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import type { OverlayInjectedProps } from 'react-bootstrap/Overlay'
 
 export interface UserAvatarProps {
   size?: 'sm' | 'lg'
@@ -39,19 +42,36 @@ export const UserAvatar: React.FC<UserAvatarProps> = ({ user, size, additionalCl
     }
   }, [size])
 
+  const avatarUrl = useMemo(() => {
+    return user.photo !== '' ? user.photo : defaultAvatar.src
+  }, [user.photo])
+
+  const imgDescription = useMemo(() => t('common.avatarOf', { name: user.displayName }), [t, user])
+
+  const tooltip = useCallback(
+    (props: OverlayInjectedProps) => (
+      <Tooltip id={user.displayName} {...props}>
+        {user.displayName}
+      </Tooltip>
+    ),
+    [user]
+  )
+
   return (
     <span className={'d-inline-flex align-items-center ' + additionalClasses}>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        src={user.photo}
+        src={avatarUrl}
         className={`rounded ${styles['user-image']}`}
-        alt={t('common.avatarOf', { name: user.displayName })}
-        title={user.displayName}
+        alt={imgDescription}
+        title={imgDescription}
         height={imageSize}
         width={imageSize}
       />
       <ShowIf condition={showName}>
+        <OverlayTrigger overlay={tooltip}>
           <span className={`ml-2 mr-1 ${styles['user-line-name']}`}>{user.displayName}</span>
+        </OverlayTrigger>
       </ShowIf>
     </span>
   )