From 3bdfd98eb7cbc2eec8383a8bacebc1b993ebadd8 Mon Sep 17 00:00:00 2001
From: Calvin Lee <calvin.lee@harness.io>
Date: Sun, 14 Apr 2024 23:15:58 -0600
Subject: [PATCH] feat: [code-1625]: fix comments from bb

---
 web/src/i18n/strings.en.yaml                  |  6 +-
 .../PullRequestOverviewPanel.tsx              |  4 +-
 .../sections/ChangesSection.tsx               | 98 ++++++++++---------
 .../sections/ChecksSection.tsx                |  2 +-
 .../sections/MergeSection.tsx                 |  6 +-
 5 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 9092611ec..dc8cd3907 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -247,7 +247,7 @@ pr:
   expandFullFile: Expand all
   collapseFullFile: Collapse expanded lines
   ableToMerge: Able to merge.
-  cantBeMerged: This branch has conflicts with the base branch.
+  cantBeMerged: This branch has conflicts with the {{name}} branch.
   cantMerge: Can't be merged. You can still create the pull request.
   failedToCreate: Failed to create Pull Request.
   titlePlaceHolder: Enter the pull request title
@@ -976,7 +976,7 @@ codeOwner:
   changesRequested: '{count} {count|1:change,changes} requested'
   waitToApprove: '{count} pending {count|1:approval,approvals} '
   approvalCompleted: '{count}/{total} approvals completed'
-  pendingLatestApprovals: '{count} approvals pending on latest changes'
+  pendingLatestApprovals: '{count} {count|1:approval,approvals} pending on latest changes'
 approved: Approved
 comingSoon: Coming soon...
 enterANumber: Enter a number
@@ -1023,7 +1023,7 @@ customizeMergeCommitMessage: Customize merge commit message
 mergeStrategy: Merge strategy
 selectMergeStrat: Select merge strategy
 writeDownCommit: Write down commit message here
-prHasNoConflicts: This branch has no conflicts with base branch
+prHasNoConflicts: This branch has no conflicts with {{name}} branch
 checkStatus:
   succeeded: Succeeded in {time}
   failed: Failed in {time}
diff --git a/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/PullRequestOverviewPanel.tsx b/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/PullRequestOverviewPanel.tsx
index 624c9d632..53630cc39 100644
--- a/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/PullRequestOverviewPanel.tsx
+++ b/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/PullRequestOverviewPanel.tsx
@@ -165,7 +165,7 @@ const PullRequestOverviewPanel = (props: PullRequestOverviewPanelProps) => {
 
         <PullRequestPanelSections
           outlets={{
-            [PanelSectionOutletPosition.CHANGES]: (
+            [PanelSectionOutletPosition.CHANGES]: !pullReqMetadata.merged && (
               <ChangesSection
                 pullReqMetadata={pullReqMetadata}
                 repoMetadata={repoMetadata}
@@ -194,7 +194,7 @@ const PullRequestOverviewPanel = (props: PullRequestOverviewPanelProps) => {
             ),
             [PanelSectionOutletPosition.MERGEABILITY]: (
               <Container className={cx(css.sectionContainer, css.borderRadius)}>
-                <MergeSection unchecked={unchecked} mergeable={mergeable} />
+                <MergeSection pullReqMetadata={pullReqMetadata} unchecked={unchecked} mergeable={mergeable} />
               </Container>
             )
           }}
diff --git a/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/ChangesSection.tsx b/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/ChangesSection.tsx
index 9d8c1fa1b..d556a0346 100644
--- a/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/ChangesSection.tsx
+++ b/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/ChangesSection.tsx
@@ -324,10 +324,12 @@ const ChangesSection = (props: ChangesSectionProps) => {
   }
   const viewBtn =
     minApproval > minReqLatestApproval ||
-    (approvedEvaluations && minReqLatestApproval === 0) ||
+    (!isEmpty(approvedEvaluations) && minReqLatestApproval === 0) ||
+    (minApproval > 0 && minReqLatestApproval === undefined) ||
     minReqLatestApproval > 0 ||
     !isEmpty(changeReqEvaluations) ||
-    !isEmpty(codeOwners)
+    !isEmpty(codeOwners) ||
+    false
 
   return (
     <Render when={!loading && status}>
@@ -376,58 +378,60 @@ const ChangesSection = (props: ChangesSectionProps) => {
 
       <Render when={isExpanded}>
         <Container className={css.greyContainer}>
-          {(minApproval > minReqLatestApproval || (approvedEvaluations && minReqLatestApproval === 0)) && (
-            <Container padding={{ left: 'xlarge', right: 'small' }} className={css.borderContainer}>
-              <Layout.Horizontal
-                className={css.paddingContainer}
-                flex={{ justifyContent: 'space-between', alignItems: 'center' }}>
-                {approvedEvaluations && minApproval < approvedEvaluations?.length ? (
-                  <Text
-                    icon="tick-circle"
-                    iconProps={{ size: 16, color: Color.GREEN_700 }}
-                    padding={{
-                      left: 'medium'
-                    }}>
+          {minApproval > minReqLatestApproval ||
+            (!isEmpty(approvedEvaluations) && minReqLatestApproval === 0) ||
+            (minApproval > 0 && minReqLatestApproval === undefined && (
+              <Container padding={{ left: 'xlarge', right: 'small' }} className={css.borderContainer}>
+                <Layout.Horizontal
+                  className={css.paddingContainer}
+                  flex={{ justifyContent: 'space-between', alignItems: 'center' }}>
+                  {approvedEvaluations && minApproval < approvedEvaluations?.length ? (
                     <Text
-                      className={css.sectionSubheader}
+                      icon="tick-circle"
+                      iconProps={{ size: 16, color: Color.GREEN_700 }}
                       padding={{
                         left: 'medium'
                       }}>
-                      {
-                        stringSubstitute(getString('changesSection.changesApprovedByXReviewers'), {
-                          length: approvedEvaluations?.length || '0'
-                        }) as string
-                      }
+                      <Text
+                        className={css.sectionSubheader}
+                        padding={{
+                          left: 'medium'
+                        }}>
+                        {
+                          stringSubstitute(getString('changesSection.changesApprovedByXReviewers'), {
+                            length: approvedEvaluations?.length || '0'
+                          }) as string
+                        }
+                      </Text>
                     </Text>
-                  </Text>
-                ) : (
-                  <Layout.Horizontal>
-                    <Container padding={{ left: 'medium' }}>
-                      <img alt="emptyStatus" width={16} height={16} src={emptyStatus} />
-                    </Container>
+                  ) : (
+                    <Layout.Horizontal>
+                      <Container padding={{ left: 'medium' }}>
+                        <img alt="emptyStatus" width={16} height={16} src={emptyStatus} />
+                      </Container>
 
-                    <Text
-                      className={css.sectionSubheader}
-                      padding={{
-                        left: 'large'
-                      }}>
-                      {
-                        stringSubstitute(getString('codeOwner.approvalCompleted'), {
-                          count: approvedEvaluations?.length || '0',
-                          total: minApproval
-                        }) as string
-                      }
-                    </Text>
-                  </Layout.Horizontal>
-                )}
-                <Container margin={{ bottom: `2px` }} padding={{ right: 'xlarge' }}>
-                  <Container className={css.requiredContainer}>
-                    <Text className={css.requiredText}>{getString('required')}</Text>
+                      <Text
+                        className={css.sectionSubheader}
+                        padding={{
+                          left: 'large'
+                        }}>
+                        {
+                          stringSubstitute(getString('codeOwner.approvalCompleted'), {
+                            count: approvedEvaluations?.length || '0',
+                            total: minApproval
+                          }) as string
+                        }
+                      </Text>
+                    </Layout.Horizontal>
+                  )}
+                  <Container margin={{ bottom: `2px` }} padding={{ right: 'xlarge' }}>
+                    <Container className={css.requiredContainer}>
+                      <Text className={css.requiredText}>{getString('required')}</Text>
+                    </Container>
                   </Container>
-                </Container>
-              </Layout.Horizontal>
-            </Container>
-          )}
+                </Layout.Horizontal>
+              </Container>
+            ))}
           {minReqLatestApproval > 0 && (
             <Container padding={{ left: 'xlarge', right: 'small' }} className={css.borderContainer}>
               <Layout.Horizontal
diff --git a/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/ChecksSection.tsx b/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/ChecksSection.tsx
index 18e14c3c5..f1bb893c6 100644
--- a/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/ChecksSection.tsx
+++ b/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/ChecksSection.tsx
@@ -351,7 +351,7 @@ const StatusCircle = ({
         <CircleSegment
           radius={radius}
           stroke={stroke}
-          color="blue"
+          color="#0092e4"
           strokeDasharray={`${runningPercentage} ${circumference}`}
           offset={-(failedPercentage + pendingPercentage)}
         />
diff --git a/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/MergeSection.tsx b/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/MergeSection.tsx
index 7137a614c..7877c543d 100644
--- a/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/MergeSection.tsx
+++ b/web/src/pages/PullRequest/Conversation/PullRequestOverviewPanel/sections/MergeSection.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Color, FontVariation } from '@harnessio/design-system'
 import { Container, Layout, Text } from '@harnessio/uicore'
 import { Images } from 'images'
+import type { TypesPullReq } from 'services/code'
 import { useStrings } from 'framework/strings'
 import Success from '../../../../../icons/code-success.svg?url'
 import Fail from '../../../../../icons/code-fail.svg?url'
@@ -10,10 +11,11 @@ import css from '../PullRequestOverviewPanel.module.scss'
 interface MergeSectionProps {
   mergeable: boolean
   unchecked: boolean
+  pullReqMetadata: TypesPullReq
 }
 
 const MergeSection = (props: MergeSectionProps) => {
-  const { mergeable, unchecked } = props
+  const { mergeable, unchecked, pullReqMetadata } = props
   const { getString } = useStrings()
 
   return (
@@ -48,7 +50,7 @@ const MergeSection = (props: MergeSectionProps) => {
               color={mergeable ? Color.GREEN_800 : Color.GREY_450}
               font={{ variation: FontVariation.BODY }}
               padding={{ left: 'medium' }}>
-              {getString(mergeable ? 'prHasNoConflicts' : 'pr.cantBeMerged')}
+              {getString(mergeable ? 'prHasNoConflicts' : 'pr.cantBeMerged', { name: pullReqMetadata?.target_branch })}
             </Text>
           </Layout.Vertical>
         )}