Render PR activity system type (#188)

web/src/pages/PullRequest/Conversation/Conversation.module.scss

@@ -1,4 +1,4 @@
-.descBox {
+.box {
   background: var(--white) !important;
 
   box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16),

web/src/pages/PullRequest/Conversation/Conversation.module.scss.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 // this is an auto-generated file
 declare const styles: {
-  readonly descBox: string
+  readonly box: string
 }
 export default styles

web/src/pages/PullRequest/Conversation/Conversation.tsx

@@ -1,5 +1,15 @@
 import React, { useMemo, useState } from 'react'
-import { Avatar, Color, Container, FlexExpander, FontVariation, Layout, Text, useToaster } from '@harness/uicore'
+import {
+  Avatar,
+  Color,
+  Container,
+  FlexExpander,
+  FontVariation,
+  Layout,
+  StringSubstitute,
+  Text,
+  useToaster
+} from '@harness/uicore'
 import { useGet, useMutate } from 'restful-react'
 import ReactTimeago from 'react-timeago'
 import type { GitInfoProps } from 'utils/GitUtils'
@@ -87,7 +97,14 @@ export const Conversation: React.FC<ConversationProps> = ({
                 refreshPullRequestMetadata={refreshPullRequestMetadata}
               />
 
-              {Object.entries(commentThreads).map(([threadId, commentItems]) => (
+              {Object.entries(commentThreads).map(([threadId, commentItems]) => {
+                if (commentItems.length === 1 && commentItems[0].payload?.kind === 'system') {
+                  return (
+                    <SystemBox key={threadId} pullRequestMetadata={pullRequestMetadata} commentItems={commentItems} />
+                  )
+                }
+
+                return (
                   <CommentBox
                     key={threadId}
                     fluid
@@ -143,7 +160,8 @@ export const Conversation: React.FC<ConversationProps> = ({
                       return [result, updatedItem]
                     }}
                   />
-              ))}
+                )
+              })}
 
               <CommentBox
                 fluid
@@ -194,7 +212,7 @@ const DescriptionBox: React.FC<ConversationProps> = ({
   const name = pullRequestMetadata.author?.display_name
 
   return (
-    <Container className={css.descBox}>
+    <Container className={css.box}>
       <Layout.Vertical spacing="medium">
         <Container>
           <Layout.Horizontal spacing="small" style={{ alignItems: 'center' }}>
@@ -259,6 +277,33 @@ const DescriptionBox: React.FC<ConversationProps> = ({
   )
 }
 
+interface SystemBoxProps extends Pick<GitInfoProps, 'pullRequestMetadata'> {
+  commentItems: CommentItem<TypesPullReqActivity>[]
+}
+const SystemBox: React.FC<SystemBoxProps> = ({ pullRequestMetadata, commentItems }) => {
+  const { getString } = useStrings()
+
+  if (commentItems[0].payload?.type === 'merge') {
+    return (
+      <Text className={css.box}>
+        <StringSubstitute
+          str={getString('pr.prMergedInfo')}
+          vars={{
+            user: <strong>{pullRequestMetadata.merger?.display_name}</strong>,
+            source: <strong>{pullRequestMetadata.source_branch}</strong>,
+            target: <strong>{pullRequestMetadata.target_branch} </strong>,
+            time: <ReactTimeago date={pullRequestMetadata.merged as number} />
+          }}
+        />
+      </Text>
+    )
+  }
+
+  // eslint-disable-next-line no-console
+  console.warn('Unable to render system type activity', commentItems)
+  return null
+}
+
 const toCommentItem = (activity: TypesPullReqActivity) => ({
   author: activity.author?.display_name as string,
   created: activity.created as number,