From e1f98aaf5a0253eda7abac08d9e3892d3aff10a9 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 25 Jan 2024 13:49:56 +0100
Subject: [PATCH] Don't replace auth0 default avatar with our own (#4793)

* Don't replace auth0 default avatar with our own

* use test id of ancestor component

---------

Co-authored-by: Berci Kormendy <korber314@gmail.com>
---
 .../css/liveblocks/react-comments/styles.css  |  1 -
 .../canvas/controls/comment-indicator.tsx     | 13 +++-------
 .../canvas/controls/comment-popup.tsx         | 14 +++--------
 .../inspector/sections/comment-section.tsx    | 10 +++-----
 editor/src/components/user-bar.tsx            |  9 ++-----
 editor/src/core/shared/multiplayer.ts         | 10 --------
 editor/src/utils/multiplayer-wrapper.tsx      | 25 -------------------
 .../src/comments/commenting.spec.tsx          |  2 +-
 8 files changed, 14 insertions(+), 70 deletions(-)

diff --git a/editor/resources/editor/css/liveblocks/react-comments/styles.css b/editor/resources/editor/css/liveblocks/react-comments/styles.css
index 89b413559089..ffcd3fb79e29 100644
--- a/editor/resources/editor/css/liveblocks/react-comments/styles.css
+++ b/editor/resources/editor/css/liveblocks/react-comments/styles.css
@@ -647,7 +647,6 @@
 .lb-comment-avatar {
   inline-size: var(--lb-comment-avatar-size);
   flex: none;
-  visibility: hidden; /* we're rolling our own avatars, for now we just ignore the default LB ones */
 }
 .lb-comment-details-labels {
   gap: calc(0.5 * var(--lb-spacing));
diff --git a/editor/src/components/canvas/controls/comment-indicator.tsx b/editor/src/components/canvas/controls/comment-indicator.tsx
index ce0b5ed6ff5b..69a8fb39f89c 100644
--- a/editor/src/components/canvas/controls/comment-indicator.tsx
+++ b/editor/src/components/canvas/controls/comment-indicator.tsx
@@ -1,9 +1,10 @@
 import type { ThreadData } from '@liveblocks/client'
 import { Comment } from '@liveblocks/react-comments'
+import type { CommentProps } from '@liveblocks/react-comments'
 import { AnimatePresence, motion, useAnimate } from 'framer-motion'
 import type { CSSProperties } from 'react'
 import React from 'react'
-import type { ThreadMetadata } from '../../../../liveblocks.config'
+import type { ThreadMetadata, UserMeta } from '../../../../liveblocks.config'
 import { useEditThreadMetadata, useStorage } from '../../../../liveblocks.config'
 import {
   getCollaboratorById,
@@ -37,7 +38,6 @@ import {
 } from '../../../core/shared/multiplayer'
 import { useMyUserId } from '../../../core/shared/multiplayer-hooks'
 import { optionalMap } from '../../../core/shared/optional-utils'
-import type { CommentWrapperProps } from '../../../utils/multiplayer-wrapper'
 import { MultiplayerWrapper, baseMultiplayerAvatarStyle } from '../../../utils/multiplayer-wrapper'
 import { when } from '../../../utils/react-conditionals'
 import { UtopiaStyles, colorTheme } from '../../../uuiui'
@@ -567,9 +567,10 @@ function useHover() {
 
 type CommentIndicatorWrapper = {
   thread: ThreadData<ThreadMetadata>
+  user: UserMeta | null
   expanded: boolean
   forceDarkMode: boolean
-} & CommentWrapperProps
+} & CommentProps
 
 const CommentIndicatorWrapper = React.memo((props: CommentIndicatorWrapper) => {
   const { thread, expanded, user, forceDarkMode, ...commentProps } = props
@@ -654,9 +655,3 @@ const CommentIndicatorWrapper = React.memo((props: CommentIndicatorWrapper) => {
     </div>
   )
 })
-
-function getCanvasHeight(): number {
-  const canvasDiv = document.getElementById('canvas-root')
-  const canvasHeight = canvasDiv?.clientHeight ?? 0
-  return canvasHeight
-}
diff --git a/editor/src/components/canvas/controls/comment-popup.tsx b/editor/src/components/canvas/controls/comment-popup.tsx
index c452f67846a5..7b8eae72215b 100644
--- a/editor/src/components/canvas/controls/comment-popup.tsx
+++ b/editor/src/components/canvas/controls/comment-popup.tsx
@@ -1,6 +1,6 @@
 import type { CommentData } from '@liveblocks/client'
 import type { ComposerSubmitComment } from '@liveblocks/react-comments'
-import { Composer } from '@liveblocks/react-comments'
+import { Comment, Composer } from '@liveblocks/react-comments'
 import { useAtom } from 'jotai'
 import type { CSSProperties } from 'react'
 import React, { useRef } from 'react'
@@ -22,7 +22,7 @@ import * as EP from '../../../core/shared/element-path'
 import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
 import { create } from '../../../core/shared/property-path'
 import { assertNever } from '../../../core/shared/utils'
-import { CommentWrapper, MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
+import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { when } from '../../../utils/react-conditionals'
 import { Button, FlexRow, Icn, Tooltip, UtopiaStyles, colorTheme } from '../../../uuiui'
 import {
@@ -376,11 +376,9 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
               onScroll={onScroll}
             >
               {thread.comments.map((c) => {
-                const user = getCollaboratorById(collabs, c.userId)
                 return (
-                  <CommentWrapper
+                  <Comment
                     key={c.id}
-                    user={user}
                     comment={c}
                     onCommentDelete={onCommentDelete}
                     style={{ background: colorTheme.bg1.value }}
@@ -546,9 +544,6 @@ ListShadow.displayName = 'ListShadow'
 
 const HeaderComment = React.memo(
   ({ comment, enabled }: { comment: CommentData; enabled: boolean }) => {
-    const collabs = useStorage((storage) => storage.collaborators)
-    const user = getCollaboratorById(collabs, comment.userId)
-
     if (!enabled) {
       return null
     }
@@ -567,8 +562,7 @@ const HeaderComment = React.memo(
           transform: 'scale(1.01)',
         }}
       >
-        <CommentWrapper
-          user={user}
+        <Comment
           comment={comment}
           style={{ background: colorTheme.bg1.value, color: colorTheme.fg1.value }}
         />
diff --git a/editor/src/components/inspector/sections/comment-section.tsx b/editor/src/components/inspector/sections/comment-section.tsx
index d4a8c570a03f..87c86cbe8fe8 100644
--- a/editor/src/components/inspector/sections/comment-section.tsx
+++ b/editor/src/components/inspector/sections/comment-section.tsx
@@ -16,7 +16,7 @@ import {
   switchEditorMode,
 } from '../../editor/actions/action-creators'
 import { EditorModes, isCommentMode, isExistingComment } from '../../editor/editor-modes'
-import { CommentWrapper, MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
+import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { useRemixNavigationContext } from '../../canvas/remix/utopia-remix-root-component'
 import {
   useResolveThread,
@@ -45,6 +45,7 @@ import { CommentRepliesCounter } from '../../canvas/controls/comment-replies-cou
 import type { SelectOption } from '../controls/select-control'
 import { assertNever } from '../../../core/shared/utils'
 import { pluck } from '../../../core/shared/array-utils'
+import { Comment } from '@liveblocks/react-comments'
 
 export type CommentFilterMode = 'all' | 'all-including-resolved' | 'unread-only'
 
@@ -319,12 +320,7 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
           filter: thread.metadata.resolved ? 'grayscale()' : undefined,
         }}
       >
-        <CommentWrapper
-          user={user}
-          comment={comment}
-          showActions={false}
-          style={{ backgroundColor: 'transparent' }}
-        />
+        <Comment comment={comment} showActions={false} style={{ backgroundColor: 'transparent' }} />
         {when(
           remixLocationRouteLabel != null,
           <div
diff --git a/editor/src/components/user-bar.tsx b/editor/src/components/user-bar.tsx
index 2e31ed7d0649..b33eefb5248e 100644
--- a/editor/src/components/user-bar.tsx
+++ b/editor/src/components/user-bar.tsx
@@ -17,7 +17,6 @@ import {
   canFollowTarget,
   excludeMyConnection,
   followTarget,
-  isDefaultAuth0AvatarURL,
   multiplayerColorFromIndex,
   multiplayerInitialsFromName,
   normalizeMultiplayerName,
@@ -344,9 +343,7 @@ export type MultiplayerAvatarProps = {
 }
 
 export const MultiplayerAvatar = React.memo((props: MultiplayerAvatarProps) => {
-  const picture = React.useMemo(() => {
-    return isDefaultAuth0AvatarURL(props.picture ?? null) ? null : props.picture
-  }, [props.picture])
+  const { picture } = props
 
   const tooltipText = <strong>{props.tooltip?.text}</strong>
   const tooltipSubtext =
@@ -447,9 +444,7 @@ interface AvatarPictureProps {
 }
 
 const AvatarPicture = React.memo((props: AvatarPictureProps) => {
-  const url = React.useMemo(() => {
-    return isDefaultAuth0AvatarURL(props.url ?? null) ? null : props.url
-  }, [props.url])
+  const { url } = props
 
   const { initials, size } = props
 
diff --git a/editor/src/core/shared/multiplayer.ts b/editor/src/core/shared/multiplayer.ts
index 260a5e87bb6b..d2efc0c0228d 100644
--- a/editor/src/core/shared/multiplayer.ts
+++ b/editor/src/core/shared/multiplayer.ts
@@ -105,16 +105,6 @@ export function excludeMyConnection(
   })
 }
 
-const reAuth0DefaultAvatarURLEncoded = /https%3A%2F%2Fcdn\.auth0\.com%2Favatars%2F.{2}\.png$/
-const reAuth0DefaultAvatar = /https:\/\/cdn\.auth0\.com\/avatars\/.{2}\.png$/
-
-export function isDefaultAuth0AvatarURL(s: string | null): boolean {
-  return (
-    s != null &&
-    (s.match(reAuth0DefaultAvatarURLEncoded) != null || s.match(reAuth0DefaultAvatar) != null)
-  )
-}
-
 export type FollowTarget = {
   playerId: string
   connectionId: number
diff --git a/editor/src/utils/multiplayer-wrapper.tsx b/editor/src/utils/multiplayer-wrapper.tsx
index 928d7ef1955f..72ec0ee3fca7 100644
--- a/editor/src/utils/multiplayer-wrapper.tsx
+++ b/editor/src/utils/multiplayer-wrapper.tsx
@@ -40,28 +40,3 @@ export const baseMultiplayerAvatarStyle: CSSProperties = {
   width: 25.5, // matching the size of the liveblocks component
   height: 25.5, // matching the size of the liveblocks component
 }
-
-export type CommentWrapperProps = {
-  user: UserMeta | null
-} & CommentProps
-
-export const CommentWrapper = React.memo((props: CommentWrapperProps) => {
-  const { user, ...commentProps } = props
-
-  if (user == null) {
-    return <Comment {...commentProps} />
-  }
-
-  return (
-    <div data-testid='comment-wrapper' style={{ position: 'relative' }}>
-      <MultiplayerAvatar
-        name={multiplayerInitialsFromName(normalizeMultiplayerName(user.name))}
-        color={multiplayerColorFromIndex(null)}
-        style={baseMultiplayerAvatarStyle}
-        picture={user.avatar}
-      />
-      <Comment {...commentProps} />
-    </div>
-  )
-})
-CommentWrapper.displayName = 'CommentWrapper'
diff --git a/puppeteer-tests/src/comments/commenting.spec.tsx b/puppeteer-tests/src/comments/commenting.spec.tsx
index 3a4991c17713..e894d46c43f3 100644
--- a/puppeteer-tests/src/comments/commenting.spec.tsx
+++ b/puppeteer-tests/src/comments/commenting.spec.tsx
@@ -100,7 +100,7 @@ describe('Comments test', () => {
       expect(popupAfterClose).toHaveLength(0)
 
       // Open the comment popup again
-      const comment = await page.waitForSelector('div[data-testid="comment-wrapper"]')
+      const comment = await page.waitForSelector('div[data-testid="comment-indicator-wrapper"]')
       await comment!.click({ offset: { x: 10, y: 10 } })
 
       // Check that the comment popup is open