From 99b3ac1c7913cdfe293fb6fa55538ba52ff9acf9 Mon Sep 17 00:00:00 2001 From: Calvin Lee Date: Wed, 12 Jul 2023 05:40:54 +0000 Subject: [PATCH] feat: [code-517]: fix branch copy icon (#184) --- .../CodeCommentStatusSelect.tsx | 6 ++-- .../GitRefLink/GitRefLink.module.scss | 29 +++++++++++++++ .../GitRefLink/GitRefLink.module.scss.d.ts | 2 ++ web/src/components/GitRefLink/GitRefLink.tsx | 35 ++++++++++++++++--- .../PullRequestSideBar/PullRequestSideBar.tsx | 4 +-- .../PullRequestMetaLine.module.scss | 27 ++++++++++++++ .../PullRequestMetaLine.module.scss.d.ts | 3 ++ .../pages/PullRequest/PullRequestMetaLine.tsx | 14 ++------ web/src/pages/PullRequests/PullRequests.tsx | 2 ++ .../BranchesContentHeader.tsx | 4 +-- .../RepositoryCommits/RepositoryCommits.tsx | 2 +- 11 files changed, 105 insertions(+), 23 deletions(-) diff --git a/web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.tsx b/web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.tsx index fd75e0b6a..edd7a95be 100644 --- a/web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.tsx +++ b/web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.tsx @@ -13,7 +13,7 @@ interface CodeCommentStatusSelectProps extends Pick[] onCommentUpdate: () => void - refetchActivities: () => void + refetchActivities?: () => void } export const CodeCommentStatusSelect: React.FC = ({ @@ -77,7 +77,9 @@ export const CodeCommentStatusSelect: React.FC = ( commentItems[0].payload.resolved = Date.now() } } - refetchActivities() + if (refetchActivities) { + refetchActivities() + } }) .catch(_exception => { showError(getErrorMessage(_exception), 0, getString('pr.failedToUpdateCommentStatus')) diff --git a/web/src/components/GitRefLink/GitRefLink.module.scss b/web/src/components/GitRefLink/GitRefLink.module.scss index b9f064994..759b35f4b 100644 --- a/web/src/components/GitRefLink/GitRefLink.module.scss +++ b/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; +} diff --git a/web/src/components/GitRefLink/GitRefLink.module.scss.d.ts b/web/src/components/GitRefLink/GitRefLink.module.scss.d.ts index d5d83e9f0..1be2a1bb4 100644 --- a/web/src/components/GitRefLink/GitRefLink.module.scss.d.ts +++ b/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 diff --git a/web/src/components/GitRefLink/GitRefLink.tsx b/web/src/components/GitRefLink/GitRefLink.tsx index 2d0f4c7ec..4d81db3ba 100644 --- a/web/src/components/GitRefLink/GitRefLink.tsx +++ b/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 }) => ( - - {text} - -) +export const GitRefLink: React.FC<{ text: string; url: string; showCopy: boolean }> = ({ + text, + url, + showCopy = true +}) => { + const { getString } = useStrings() + + return ( + + + {text} + + {showCopy ? ( + + ) : null} + + ) +} diff --git a/web/src/pages/PullRequest/Conversation/PullRequestSideBar/PullRequestSideBar.tsx b/web/src/pages/PullRequest/Conversation/PullRequestSideBar/PullRequestSideBar.tsx index 37339d546..a120032ca 100644 --- a/web/src/pages/PullRequest/Conversation/PullRequestSideBar/PullRequestSideBar.tsx +++ b/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' diff --git a/web/src/pages/PullRequest/PullRequestMetaLine.module.scss b/web/src/pages/PullRequest/PullRequestMetaLine.module.scss index adbb1f79d..177dd020d 100644 --- a/web/src/pages/PullRequest/PullRequestMetaLine.module.scss +++ b/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; +} diff --git a/web/src/pages/PullRequest/PullRequestMetaLine.module.scss.d.ts b/web/src/pages/PullRequest/PullRequestMetaLine.module.scss.d.ts index 3f30b5ffe..349074ad4 100644 --- a/web/src/pages/PullRequest/PullRequestMetaLine.module.scss.d.ts +++ b/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 diff --git a/web/src/pages/PullRequest/PullRequestMetaLine.tsx b/web/src/pages/PullRequest/PullRequestMetaLine.tsx index d435cff9a..97cf71de2 100644 --- a/web/src/pages/PullRequest/PullRequestMetaLine.tsx +++ b/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> = ({ @@ -32,12 +31,14 @@ export const PullRequestMetaLine: React.FC ), source: ( ) } @@ -48,15 +49,6 @@ export const PullRequestMetaLine: React.FC - {source_branch ? ( - - ) : null} diff --git a/web/src/pages/PullRequests/PullRequests.tsx b/web/src/pages/PullRequests/PullRequests.tsx index a3c0c2a09..203181e40 100644 --- a/web/src/pages/PullRequests/PullRequests.tsx +++ b/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} /> ← diff --git a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/BranchesContentHeader/BranchesContentHeader.tsx b/web/src/pages/RepositoryBranches/RepositoryBranchesContent/BranchesContentHeader/BranchesContentHeader.tsx index f0224f3e6..44b3f0dc3 100644 --- a/web/src/pages/RepositoryBranches/RepositoryBranchesContent/BranchesContentHeader/BranchesContentHeader.tsx +++ b/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' diff --git a/web/src/pages/RepositoryCommits/RepositoryCommits.tsx b/web/src/pages/RepositoryCommits/RepositoryCommits.tsx index ffec0d9f4..fcb7ed570 100644 --- a/web/src/pages/RepositoryCommits/RepositoryCommits.tsx +++ b/web/src/pages/RepositoryCommits/RepositoryCommits.tsx @@ -104,7 +104,7 @@ export default function RepositoryCommits() { null} {(repoMetadata && (!commitRef || pageBrowser.page) && !!commits?.commits?.length && ( - +