From 4f861fc9cd7f6ffdd42fdfa7a5218c9d203ad3da Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Sun, 15 Sep 2024 22:04:23 +0200
Subject: [PATCH] fix(permissions): show guest avatar when note owner is
 anonymous

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
---
 .../guest-user-avatar.spec.tsx.snap           | 16 +++++++++
 .../__snapshots__/user-avatar.spec.tsx.snap   | 34 +++++++++++++++++++
 .../user-avatar/guest-user-avatar.spec.tsx    | 26 ++++++++++++++
 .../common/user-avatar/guest-user-avatar.tsx  | 21 ++++++++++++
 .../common/user-avatar/user-avatar.spec.tsx   | 12 +++++++
 .../common/user-avatar/user-avatar.tsx        | 26 ++++++++------
 .../permission-owner-info.tsx                 |  3 +-
 7 files changed, 127 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/common/user-avatar/__snapshots__/guest-user-avatar.spec.tsx.snap
 create mode 100644 frontend/src/components/common/user-avatar/guest-user-avatar.spec.tsx
 create mode 100644 frontend/src/components/common/user-avatar/guest-user-avatar.tsx

diff --git a/frontend/src/components/common/user-avatar/__snapshots__/guest-user-avatar.spec.tsx.snap b/frontend/src/components/common/user-avatar/__snapshots__/guest-user-avatar.spec.tsx.snap
new file mode 100644
index 000000000..527579f37
--- /dev/null
+++ b/frontend/src/components/common/user-avatar/__snapshots__/guest-user-avatar.spec.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GuestUserAvatar renders the guest user avatar correctly 1`] = `
+<div>
+  <span
+    class="d-inline-flex align-items-center "
+  >
+    BootstrapIconMock_Person
+    <span
+      class="ms-2 me-1 user-line-name"
+    >
+      common.guestUser
+    </span>
+  </span>
+</div>
+`;
diff --git a/frontend/src/components/common/user-avatar/__snapshots__/user-avatar.spec.tsx.snap b/frontend/src/components/common/user-avatar/__snapshots__/user-avatar.spec.tsx.snap
index ecddb7e72..234e5a785 100644
--- a/frontend/src/components/common/user-avatar/__snapshots__/user-avatar.spec.tsx.snap
+++ b/frontend/src/components/common/user-avatar/__snapshots__/user-avatar.spec.tsx.snap
@@ -105,6 +105,40 @@ exports[`UserAvatar renders the user avatar in size sm 1`] = `
 </div>
 `;
 
+exports[`UserAvatar uses custom photo component if provided 1`] = `
+<div>
+  <span
+    class="d-inline-flex align-items-center "
+  >
+    <div>
+      Custom Photo
+    </div>
+    <span
+      class="ms-2 me-1 user-line-name"
+    >
+      test
+    </span>
+  </span>
+</div>
+`;
+
+exports[`UserAvatar uses custom photo component preferred over photoUrl 1`] = `
+<div>
+  <span
+    class="d-inline-flex align-items-center "
+  >
+    <div>
+      Custom Photo
+    </div>
+    <span
+      class="ms-2 me-1 user-line-name"
+    >
+      test
+    </span>
+  </span>
+</div>
+`;
+
 exports[`UserAvatar uses identicon when empty photoUrl is given 1`] = `
 <div>
   <span
diff --git a/frontend/src/components/common/user-avatar/guest-user-avatar.spec.tsx b/frontend/src/components/common/user-avatar/guest-user-avatar.spec.tsx
new file mode 100644
index 000000000..7f24038ee
--- /dev/null
+++ b/frontend/src/components/common/user-avatar/guest-user-avatar.spec.tsx
@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { mockI18n } from '../../../test-utils/mock-i18n'
+import { render } from '@testing-library/react'
+import { GuestUserAvatar } from './guest-user-avatar'
+
+jest.mock('@dicebear/identicon', () => null)
+jest.mock('@dicebear/core', () => ({
+  createAvatar: jest.fn(() => ({
+    toDataUri: jest.fn(() => 'data:image/x-other,identicon-mock')
+  }))
+}))
+
+describe('GuestUserAvatar', () => {
+  beforeEach(async () => {
+    await mockI18n()
+  })
+
+  it('renders the guest user avatar correctly', () => {
+    const view = render(<GuestUserAvatar />)
+    expect(view.container).toMatchSnapshot()
+  })
+})
diff --git a/frontend/src/components/common/user-avatar/guest-user-avatar.tsx b/frontend/src/components/common/user-avatar/guest-user-avatar.tsx
new file mode 100644
index 000000000..e5a29e52e
--- /dev/null
+++ b/frontend/src/components/common/user-avatar/guest-user-avatar.tsx
@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react'
+import type { UserAvatarProps } from './user-avatar'
+import { UserAvatar } from './user-avatar'
+import { useTranslatedText } from '../../../hooks/common/use-translated-text'
+import { Person as IconPerson } from 'react-bootstrap-icons'
+
+export type GuestUserAvatarProps = Omit<UserAvatarProps, 'displayName' | 'photoUrl' | 'username'>
+
+/**
+ * The avatar component for an anonymous user.
+ * @param props The properties of the guest user avatar ({@link UserAvatarProps})
+ */
+export const GuestUserAvatar: React.FC<GuestUserAvatarProps> = (props) => {
+  const label = useTranslatedText('common.guestUser')
+  return <UserAvatar displayName={label} photoComponent={<IconPerson />} {...props} />
+}
diff --git a/frontend/src/components/common/user-avatar/user-avatar.spec.tsx b/frontend/src/components/common/user-avatar/user-avatar.spec.tsx
index d90b80af4..29c84952e 100644
--- a/frontend/src/components/common/user-avatar/user-avatar.spec.tsx
+++ b/frontend/src/components/common/user-avatar/user-avatar.spec.tsx
@@ -59,4 +59,16 @@ describe('UserAvatar', () => {
     const view = render(<UserAvatar displayName={'test'} photoUrl={''} />)
     expect(view.container).toMatchSnapshot()
   })
+
+  it('uses custom photo component if provided', () => {
+    const view = render(<UserAvatar displayName={'test'} photoComponent={<div>Custom Photo</div>} />)
+    expect(view.container).toMatchSnapshot()
+  })
+
+  it('uses custom photo component preferred over photoUrl', () => {
+    const view = render(
+      <UserAvatar displayName={'test'} photoComponent={<div>Custom Photo</div>} photoUrl={user.photoUrl} />
+    )
+    expect(view.container).toMatchSnapshot()
+  })
 })
diff --git a/frontend/src/components/common/user-avatar/user-avatar.tsx b/frontend/src/components/common/user-avatar/user-avatar.tsx
index 2447d39c9..182dbb045 100644
--- a/frontend/src/components/common/user-avatar/user-avatar.tsx
+++ b/frontend/src/components/common/user-avatar/user-avatar.tsx
@@ -15,6 +15,7 @@ export interface UserAvatarProps {
   photoUrl?: string
   displayName: string
   username?: string | null
+  photoComponent?: React.ReactNode
 }
 
 /**
@@ -24,6 +25,8 @@ export interface UserAvatarProps {
  * @param size The size in which the user image should be shown.
  * @param additionalClasses Additional CSS classes that will be added to the container.
  * @param showName true when the name should be displayed alongside the image, false otherwise. Defaults to true.
+ * @param username The username to use for generating the fallback avatar image.
+ * @param photoComponent A custom component to use as the user's photo.
  */
 export const UserAvatar: React.FC<UserAvatarProps> = ({
   photoUrl,
@@ -31,7 +34,8 @@ export const UserAvatar: React.FC<UserAvatarProps> = ({
   size,
   additionalClasses = '',
   showName = true,
-  username
+  username,
+  photoComponent
 }) => {
   const imageSize = useMemo(() => {
     switch (size) {
@@ -56,15 +60,17 @@ export const UserAvatar: React.FC<UserAvatarProps> = ({
 
   return (
     <span className={'d-inline-flex align-items-center ' + additionalClasses}>
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={avatarUrl}
-        className={`rounded ${styles['user-image']}`}
-        alt={imgDescription}
-        title={imgDescription}
-        height={imageSize}
-        width={imageSize}
-      />
+      {photoComponent ?? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={avatarUrl}
+          className={`rounded ${styles['user-image']}`}
+          alt={imgDescription}
+          title={imgDescription}
+          height={imageSize}
+          width={imageSize}
+        />
+      )}
       {showName && <span className={`ms-2 me-1 ${styles['user-line-name']}`}>{displayName}</span>}
     </span>
   )
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-info.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-info.tsx
index d738bab88..c078fcc9d 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-info.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-owner-info.tsx
@@ -11,6 +11,7 @@ import type { PermissionDisabledProps } from './permission-disabled.prop'
 import React, { Fragment } from 'react'
 import { Button } from 'react-bootstrap'
 import { Pencil as IconPencil } from 'react-bootstrap-icons'
+import { GuestUserAvatar } from '../../../../../common/user-avatar/guest-user-avatar'
 
 export interface PermissionOwnerInfoProps {
   onEditOwner: () => void
@@ -30,7 +31,7 @@ export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps & Permission
   const buttonTitle = useTranslatedText('editor.modal.permissions.ownerChange.button')
 
   if (!noteOwner) {
-    return null
+    return <GuestUserAvatar />
   }
 
   return (