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

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'

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>

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)

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>

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>

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

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;

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;