feat: [code-517]: fix branch copy icon (#184)

web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.tsx

@@ -13,7 +13,7 @@ interface CodeCommentStatusSelectProps extends Pick<GitInfoProps, 'repoMetadata'
   commentItems: CommentItem<TypesPullReqActivity>[]
   onCommentUpdate: () => void
 
-  refetchActivities: () => void
+  refetchActivities?: () => void
 }
 
 export const CodeCommentStatusSelect: React.FC<CodeCommentStatusSelectProps> = ({
@@ -77,7 +77,9 @@ export const CodeCommentStatusSelect: React.FC<CodeCommentStatusSelectProps> = (
                 commentItems[0].payload.resolved = Date.now()
               }
             }
-            refetchActivities()
+            if (refetchActivities) {
+              refetchActivities()
+            }
           })
           .catch(_exception => {
             showError(getErrorMessage(_exception), 0, getString('pr.failedToUpdateCommentStatus'))

web/src/components/GitRefLink/GitRefLink.module.scss

@@ -7,3 +7,32 @@
   font-weight: 600;
   padding: 2px 6px !important;
 }
+
+.copyContainer {
+  background-color: var(--primary-1) !important;
+  color: var(--primary-7) !important;
+  border-radius: 4px !important;
+  --button-height: unset !important;
+  --text-color: unset !important;
+  padding: unset !important ;
+  --padding-right: 2px !important;
+  padding-left: 4px !important;
+  min-width: unset !important;
+  padding-bottom: 1px !important;
+}
+
+.linkText {
+  color: var(--primary-7) !important;
+}
+
+.link {
+  background-color: var(--primary-1) !important;
+  color: var(--primary-7) !important;
+  border-radius: 4px;
+  line-height: 20px;
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  padding: 2px 6px !important;
+  width: fit-content !important;
+  padding-bottom: 3px !important;
+}

web/src/components/GitRefLink/GitRefLink.module.scss.d.ts

@@ -2,5 +2,7 @@
 // this is an auto-generated file
 declare const styles: {
   readonly link: string
+  readonly copyContainer: string
+  readonly linkText: string
 }
 export default styles

web/src/components/GitRefLink/GitRefLink.tsx

@@ -1,9 +1,34 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import { Color, Layout } from '@harness/uicore'
+import { CopyButton } from 'components/CopyButton/CopyButton'
+import { useStrings } from 'framework/strings'
+import { CodeIcon } from 'utils/GitUtils'
 import css from './GitRefLink.module.scss'
 
-export const GitRefLink: React.FC<{ text: string; url: string }> = ({ text, url }) => (
-  <Link to={url} className={css.link}>
-    {text}
-  </Link>
-)
+export const GitRefLink: React.FC<{ text: string; url: string; showCopy: boolean }> = ({
+  text,
+  url,
+  showCopy = true
+}) => {
+  const { getString } = useStrings()
+
+  return (
+    <Layout.Horizontal className={css.link} inline>
+      <Link className={css.linkText} to={url}>
+        {text}
+      </Link>
+      {showCopy ? (
+        <CopyButton
+          className={css.copyContainer}
+          content={text}
+          tooltip={getString('copyBranch')}
+          icon={CodeIcon.Copy}
+          color={Color.PRIMARY_7}
+          iconProps={{ size: 14, color: Color.PRIMARY_7 }}
+          background={Color.PRIMARY_1}
+        />
+      ) : null}
+    </Layout.Horizontal>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { noop } from 'lodash-es'
+// import { noop } from 'lodash-es'
 import React from 'react'
 import {
   Container,
@@ -12,8 +12,8 @@ import {
   IconName,
   useToaster
 } from '@harness/uicore'
-import { OptionsMenuButton } from 'components/OptionsMenuButton/OptionsMenuButton'
 import { useMutate } from 'restful-react'
+import { OptionsMenuButton } from 'components/OptionsMenuButton/OptionsMenuButton'
 import { useStrings } from 'framework/strings'
 import type { TypesPullReq, TypesRepository } from 'services/code'
 import { getErrorMessage } from 'utils/Utils'

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

@@ -18,3 +18,30 @@
     align-items: center;
   }
 }
+
+.copyContainer {
+  background-color: var(--primary-1) !important;
+  color: var(--primary-7) !important;
+  border-radius: 4px !important;
+  --button-height: unset !important;
+  --text-color: unset !important;
+  padding: unset !important ;
+  --padding-right: 2px !important;
+  padding-left: 8px !important;
+  min-width: unset !important;
+}
+
+.linkText {
+  color: var(--primary-7) !important;
+}
+
+.link {
+  background-color: var(--primary-1) !important;
+  color: var(--primary-7) !important;
+  border-radius: 4px;
+  line-height: 20px;
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  padding: 2px 6px !important;
+  width: fit-content !important;
+}

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

@@ -5,5 +5,8 @@ declare const styles: {
   readonly metaline: string
   readonly time: string
   readonly layout: string
+  readonly copyContainer: string
+  readonly linkText: string
+  readonly link: string
 }
 export default styles

web/src/pages/PullRequest/PullRequestMetaLine.tsx

@@ -2,14 +2,13 @@ import React from 'react'
 import { Container, Text, Layout, StringSubstitute } from '@harness/uicore'
 import cx from 'classnames'
 import ReactTimeago from 'react-timeago'
-import { CodeIcon, type GitInfoProps } from 'utils/GitUtils'
+import type { GitInfoProps } from 'utils/GitUtils'
 import { useAppContext } from 'AppContext'
 import { useStrings } from 'framework/strings'
 import type { TypesPullReq } from 'services/code'
 import { PullRequestStateLabel } from 'components/PullRequestStateLabel/PullRequestStateLabel'
 import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
 import { GitRefLink } from 'components/GitRefLink/GitRefLink'
-import { CopyButton } from 'components/CopyButton/CopyButton'
 import css from './PullRequestMetaLine.module.scss'
 
 export const PullRequestMetaLine: React.FC<TypesPullReq & Pick<GitInfoProps, 'repoMetadata'>> = ({
@@ -32,12 +31,14 @@ export const PullRequestMetaLine: React.FC<TypesPullReq & Pick<GitInfoProps, 're
       <GitRefLink
         text={target_branch as string}
         url={routes.toCODERepository({ repoPath: repoMetadata.path as string, gitRef: target_branch })}
+        showCopy
       />
     ),
     source: (
       <GitRefLink
         text={source_branch as string}
         url={routes.toCODERepository({ repoPath: repoMetadata.path as string, gitRef: source_branch })}
+        showCopy
       />
     )
   }
@@ -48,15 +49,6 @@ export const PullRequestMetaLine: React.FC<TypesPullReq & Pick<GitInfoProps, 're
         <PullRequestStateLabel data={{ is_draft, state }} />
         <Text className={css.metaline}>
           <StringSubstitute str={getString('pr.metaLine')} vars={vars} />
-          {source_branch ? (
-            <CopyButton
-              content={source_branch}
-              tooltip={getString('copyBranch')}
-              icon={CodeIcon.Copy}
-              iconProps={{ size: 14 }}
-              padding={{ bottom: 'xsmall' }}
-            />
-          ) : null}
         </Text>
 
         <PipeSeparator height={9} />

web/src/pages/PullRequests/PullRequests.tsx

@@ -145,6 +145,7 @@ export default function PullRequests() {
                               repoPath: repoMetadata?.path as string,
                               gitRef: row.original.target_branch
                             })}
+                            showCopy={false}
                           />
                           <Text color={Color.GREY_500}>←</Text>
                           <GitRefLink
@@ -153,6 +154,7 @@ export default function PullRequests() {
                               repoPath: repoMetadata?.path as string,
                               gitRef: row.original.source_branch
                             })}
+                            showCopy={false}
                           />
                         </Layout.Horizontal>
                       </Container>

web/src/pages/RepositoryBranches/RepositoryBranchesContent/BranchesContentHeader/BranchesContentHeader.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo, useState } from 'react'
-import { Container, Layout, FlexExpander, DropDown, ButtonVariation } from '@harness/uicore'
+import React, { useState } from 'react'
+import { Container, Layout, FlexExpander, ButtonVariation } from '@harness/uicore'
 import { useStrings } from 'framework/strings'
 import { GitBranchType, CodeIcon, GitInfoProps } from 'utils/GitUtils'
 import { SearchInputWithSpinner } from 'components/SearchInputWithSpinner/SearchInputWithSpinner'

web/src/pages/RepositoryCommits/RepositoryCommits.tsx

@@ -104,7 +104,7 @@ export default function RepositoryCommits() {
           null}
         {(repoMetadata && (!commitRef || pageBrowser.page) && !!commits?.commits?.length && (
           <Container padding="xlarge" className={css.resourceContent}>
-            <Container className={css.contentHeader}>
+            <Container className={css.contentHeader} padding={{ bottom: 'xlarge' }}>
               <Layout.Horizontal spacing="medium">
                 <BranchTagSelect
                   repoMetadata={repoMetadata}