From 8a1c2fecd34482d865db1dffff0d968b23182fea Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Tue, 10 Dec 2024 10:53:59 +0000
Subject: [PATCH] Show coloured squares next to collaborator names (#22406)

* Change font to content-primary

* Add user colour blocks to comments/track changes

* Format

GitOrigin-RevId: a9186e9c7c95dfe134bee2f756245275cfa9ea24
---
 .../components/review-panel-change-user.tsx   |  8 +++---
 .../components/review-panel-change.tsx        |  4 +--
 .../components/review-panel-entry-user.tsx    | 26 +++++++++++++++++++
 .../components/review-panel-message.tsx       |  6 ++---
 .../review-panel-resolved-message.tsx         |  6 ++---
 .../context/changes-users-context.tsx         |  2 +-
 .../app/editor/review-panel-new.less          | 10 ++++++-
 .../pages/editor/review-panel-new.scss        | 10 ++++++-
 8 files changed, 54 insertions(+), 18 deletions(-)
 create mode 100644 services/web/frontend/js/features/review-panel-new/components/review-panel-entry-user.tsx

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-change-user.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-change-user.tsx
index e27340ad95..32ae1fdc25 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-change-user.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-change-user.tsx
@@ -1,16 +1,16 @@
 import { memo, useMemo } from 'react'
 import { useChangesUsersContext } from '../context/changes-users-context'
-import { buildName } from '../utils/build-name'
 import { Change } from '../../../../../types/change'
+import ReviewPanelEntryUser from './review-panel-entry-user'
 
 export const ReviewPanelChangeUser = memo<{ change: Change }>(({ change }) => {
   const changesUsers = useChangesUsersContext()
   const userId = change.metadata?.user_id
-  const userName = useMemo(
-    () => buildName(userId ? changesUsers?.get(userId) : undefined),
+  const user = useMemo(
+    () => (userId ? changesUsers?.get(userId) : undefined),
     [changesUsers, userId]
   )
 
-  return <span>{userName}</span>
+  return <ReviewPanelEntryUser user={user} />
 })
 ReviewPanelChangeUser.displayName = 'ReviewPanelChangeUser'
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
index 33a7306fe8..b316898eba 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
@@ -95,9 +95,7 @@ export const ReviewPanelChange = memo<{
         >
           <div className="review-panel-entry-header">
             <div>
-              <div className="review-panel-entry-user">
-                <ReviewPanelChangeUser change={change} />
-              </div>
+              <ReviewPanelChangeUser change={change} />
               <div className="review-panel-entry-time">
                 {formatTimeBasedOnYear(change.metadata?.ts)}
               </div>
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-entry-user.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-entry-user.tsx
new file mode 100644
index 0000000000..2c606c3b23
--- /dev/null
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-entry-user.tsx
@@ -0,0 +1,26 @@
+import { memo } from 'react'
+import { buildName } from '../utils/build-name'
+import { ReviewPanelUser } from '../../../../../types/review-panel/review-panel'
+import { ChangesUser } from '../context/changes-users-context'
+import ColorManager from '@/ide/colors/ColorManager'
+
+const ReviewPanelEntryUser = ({
+  user,
+}: {
+  user?: ReviewPanelUser | ChangesUser
+}) => {
+  const userName = buildName(user)
+  const hue = ColorManager.getHueForUserId(user?.id) || 100
+
+  return (
+    <div className="review-panel-entry-user">
+      <span
+        className="review-panel-entry-user-color-badge"
+        style={{ backgroundColor: `hsl(${hue}, 70%, 50%)` }}
+      />
+      {userName}
+    </div>
+  )
+}
+
+export default memo(ReviewPanelEntryUser)
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
index dd4b9712f1..295633a492 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
@@ -8,11 +8,11 @@ import { formatTimeBasedOnYear } from '@/features/utils/format-date'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
 import AutoExpandingTextArea from '@/shared/components/auto-expanding-text-area'
-import { buildName } from '../utils/build-name'
 import ReviewPanelCommentOptions from './review-panel-comment-options'
 import { ExpandableContent } from './review-panel-expandable-content'
 import ReviewPanelDeleteCommentModal from './review-panel-delete-comment-modal'
 import { useUserContext } from '@/shared/context/user-context'
+import ReviewPanelEntryUser from './review-panel-entry-user'
 
 export const ReviewPanelMessage: FC<{
   message: ReviewPanelCommentThreadMessage
@@ -55,9 +55,7 @@ export const ReviewPanelMessage: FC<{
     <div className="review-panel-comment">
       <div className="review-panel-entry-header">
         <div>
-          <div className="review-panel-entry-user">
-            {buildName(message.user)}
-          </div>
+          <ReviewPanelEntryUser user={message.user} />
           <div className="review-panel-entry-time">
             {formatTimeBasedOnYear(message.timestamp)}
           </div>
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-message.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-message.tsx
index 895051a623..6c207f71bc 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-message.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-message.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react'
 import { formatTimeBasedOnYear } from '@/features/utils/format-date'
-import { buildName } from '../utils/build-name'
 import { ReviewPanelResolvedCommentThread } from '../../../../../types/review-panel/comment-thread'
 import { useTranslation } from 'react-i18next'
+import ReviewPanelEntryUser from './review-panel-entry-user'
 
 const ReviewPanelResolvedMessage: FC<{
   thread: ReviewPanelResolvedCommentThread
@@ -13,9 +13,7 @@ const ReviewPanelResolvedMessage: FC<{
     <div className="review-panel-comment">
       <div className="review-panel-entry-header">
         <div>
-          <div className="review-panel-entry-user">
-            {buildName(thread.resolved_by_user)}
-          </div>
+          <ReviewPanelEntryUser user={thread.resolved_by_user} />
           <div className="review-panel-entry-time">
             {formatTimeBasedOnYear(thread.resolved_at)}
           </div>
diff --git a/services/web/frontend/js/features/review-panel-new/context/changes-users-context.tsx b/services/web/frontend/js/features/review-panel-new/context/changes-users-context.tsx
index e755f77aec..780f15d520 100644
--- a/services/web/frontend/js/features/review-panel-new/context/changes-users-context.tsx
+++ b/services/web/frontend/js/features/review-panel-new/context/changes-users-context.tsx
@@ -10,7 +10,7 @@ import { getJSON } from '@/infrastructure/fetch-json'
 import { useProjectContext } from '@/shared/context/project-context'
 import { UserId } from '../../../../../types/user'
 
-type ChangesUser = {
+export type ChangesUser = {
   id: UserId
   email: string
   first_name?: string
diff --git a/services/web/frontend/stylesheets/app/editor/review-panel-new.less b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
index 150d14e55a..57b4549d77 100644
--- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less
+++ b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
@@ -68,7 +68,7 @@
     justify-content: space-between;
 
     .review-panel-entry-user {
-      color: @blue;
+      color: @content-primary;
       font-size: 110%;
     }
 
@@ -101,6 +101,14 @@
     }
   }
 
+  .review-panel-entry-user-color-badge {
+    display: inline-block;
+    width: @spacing-04;
+    height: @spacing-04;
+    margin-right: @spacing-02;
+    border-radius: @border-radius-small;
+  }
+
   .review-panel-change-body {
     display: flex;
     align-items: flex-start;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
index 66e86adb1c..279407c2bb 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
@@ -74,7 +74,7 @@
     margin-bottom: var(--spacing-01);
 
     .review-panel-entry-user {
-      color: var(--bg-info-01);
+      color: $content-primary;
       font-size: 110%;
     }
 
@@ -112,6 +112,14 @@
     }
   }
 
+  .review-panel-entry-user-color-badge {
+    display: inline-block;
+    width: $spacing-04;
+    height: $spacing-04;
+    margin-right: $spacing-02;
+    border-radius: 2px;
+  }
+
   .review-panel-change-body {
     display: flex;
     align-items: flex-start;