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,63 +97,71 @@ export const Conversation: React.FC<ConversationProps> = ({
                 refreshPullRequestMetadata={refreshPullRequestMetadata}
               />
 
-              {Object.entries(commentThreads).map(([threadId, commentItems]) => (
+              {Object.entries(commentThreads).map(([threadId, commentItems]) => {
-                <CommentBox
+                if (commentItems.length === 1 && commentItems[0].payload?.kind === 'system') {
-                  key={threadId}
+                  return (
-                  fluid
+                    <SystemBox key={threadId} pullRequestMetadata={pullRequestMetadata} commentItems={commentItems} />
-                  getString={getString}
+                  )
-                  commentItems={commentItems}
+                }
-                  currentUserName={currentUser.display_name}
-                  handleAction={async (action, value, commentItem) => {
-                    let result = true
-                    let updatedItem: CommentItem<TypesPullReqActivity> | undefined = undefined
-                    const id = (commentItem as CommentItem<TypesPullReqActivity>)?.payload?.id
 
-                    switch (action) {
+                return (
-                      case CommentAction.DELETE:
+                  <CommentBox
-                        result = false
+                    key={threadId}
-                        await confirmAct({
+                    fluid
-                          message: getString('deleteCommentConfirm'),
+                    getString={getString}
-                          action: async () => {
+                    commentItems={commentItems}
-                            await deleteComment({}, { pathParams: { id } })
+                    currentUserName={currentUser.display_name}
-                              .then(() => {
+                    handleAction={async (action, value, commentItem) => {
-                                result = true
+                      let result = true
-                              })
+                      let updatedItem: CommentItem<TypesPullReqActivity> | undefined = undefined
-                              .catch(exception => {
+                      const id = (commentItem as CommentItem<TypesPullReqActivity>)?.payload?.id
-                                result = false
-                                showError(getErrorMessage(exception), 0, getString('pr.failedToDeleteComment'))
-                              })
-                          }
-                        })
-                        break
 
-                      case CommentAction.REPLY:
+                      switch (action) {
-                        await saveComment({ text: value, parent_id: Number(threadId) })
+                        case CommentAction.DELETE:
-                          .then(newComment => {
+                          result = false
-                            updatedItem = toCommentItem(newComment)
+                          await confirmAct({
+                            message: getString('deleteCommentConfirm'),
+                            action: async () => {
+                              await deleteComment({}, { pathParams: { id } })
+                                .then(() => {
+                                  result = true
+                                })
+                                .catch(exception => {
+                                  result = false
+                                  showError(getErrorMessage(exception), 0, getString('pr.failedToDeleteComment'))
+                                })
+                            }
                           })
-                          .catch(exception => {
+                          break
-                            result = false
-                            showError(getErrorMessage(exception), 0, getString('pr.failedToSaveComment'))
-                          })
-                        break
 
-                      case CommentAction.UPDATE:
+                        case CommentAction.REPLY:
-                        await updateComment({ text: value }, { pathParams: { id } })
+                          await saveComment({ text: value, parent_id: Number(threadId) })
-                          .then(newComment => {
+                            .then(newComment => {
-                            updatedItem = toCommentItem(newComment)
+                              updatedItem = toCommentItem(newComment)
-                          })
+                            })
-                          .catch(exception => {
+                            .catch(exception => {
-                            result = false
+                              result = false
-                            showError(getErrorMessage(exception), 0, getString('pr.failedToSaveComment'))
+                              showError(getErrorMessage(exception), 0, getString('pr.failedToSaveComment'))
-                          })
+                            })
-                        break
+                          break
-                    }
 
-                    return [result, updatedItem]
+                        case CommentAction.UPDATE:
-                  }}
+                          await updateComment({ text: value }, { pathParams: { id } })
-                />
+                            .then(newComment => {
-              ))}
+                              updatedItem = toCommentItem(newComment)
+                            })
+                            .catch(exception => {
+                              result = false
+                              showError(getErrorMessage(exception), 0, getString('pr.failedToSaveComment'))
+                            })
+                          break
+                      }
+
+                      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,