Merge branch 'code-comment-spinner' of _OKE5H2PQKOUfzFFDuD4FA/default…

…/CODE/gitness (#7)

web/src/components/CloneButtonTooltip/CloneButtonTooltip.tsx

@@ -1,6 +1,8 @@
-import React, { useEffect, useState } from 'react'
-import { Container, Layout, Button, ButtonVariation, Utils, Text, Color } from '@harness/uicore'
+import React from 'react'
+import { Container, Layout, Text } from '@harness/uicore'
 import { useStrings } from 'framework/strings'
+import { CopyButton } from 'components/CopyButton/CopyButton'
+import { CodeIcon } from 'utils/GitUtils'
 import css from './CloneButtonTooltip.module.scss'
 
 interface CloneButtonTooltipProps {
@@ -9,17 +11,6 @@ interface CloneButtonTooltipProps {
 
 export function CloneButtonTooltip({ httpsURL }: CloneButtonTooltipProps) {
  const { getString } = useStrings()
- const [copied, setCopied] = useState(false)
-
- useEffect(() => {
- let timeoutId: number
- if (copied) {
- timeoutId = window.setTimeout(() => setCopied(false), 2500)
- }
- return () => {
- clearTimeout(timeoutId)
- }
- }, [copied])
 
  return (
  <Container className={css.container} padding="xlarge">
@@ -28,16 +19,7 @@ export function CloneButtonTooltip({ httpsURL }: CloneButtonTooltipProps) {
  <Container>
  <Layout.Horizontal className={css.layout}>
  <Text className={css.url}>{httpsURL}</Text>
- <Button
- id={css.cloneCopyButton}
- variation={ButtonVariation.ICON}
- icon={copied ? 'tick' : 'copy-alt'}
- iconProps={{ size: 14, color: copied ? Color.GREEN_500 : undefined }}
- onClick={() => {
- setCopied(true)
- Utils.copy(httpsURL)
- }}
- />
+ <CopyButton content={httpsURL} id={css.cloneCopyButton} icon={CodeIcon.Copy} iconProps={{ size: 14 }} />
  </Layout.Horizontal>
  </Container>
  </Layout.Vertical>

web/src/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Utils, Color, ButtonProps, ButtonVariation } from '@harness/uicore'
+
+interface CopyButtonProps extends ButtonProps {
+ content: string
+}
+
+export function CopyButton({ content, icon, iconProps, ...props }: CopyButtonProps) {
+ const [copied, setCopied] = useState(false)
+
+ useEffect(() => {
+ let timeoutId: number
+ if (copied) {
+ timeoutId = window.setTimeout(() => setCopied(false), 2500)
+ }
+ return () => {
+ clearTimeout(timeoutId)
+ }
+ }, [copied])
+
+ return (
+ <Button
+ variation={ButtonVariation.ICON}
+ icon={copied ? 'tick' : icon || 'copy-alt'}
+ iconProps={{ color: copied ? Color.GREEN_500 : undefined, ...iconProps }}
+ onClick={() => {
+ setCopied(true)
+ Utils.copy(content)
+ }}
+ {...props}
+ />
+ )
+}

web/src/components/DiffViewer/DiffViewer.module.scss

@@ -157,10 +157,17 @@
  border-top-right-radius: 5px;
 
  .fname {
- font-size: 13px !important;
- font-weight: 600 !important;
- color: var(--grey-900) !important;
  align-self: center;
+
+ a {
+ font-size: 13px !important;
+ font-weight: 600 !important;
+ color: var(--grey-900) !important;
+
+ &:hover {
+ color: var(--primary-7) !important;
+ }
+ }
  }
  }
 

web/src/components/DiffViewer/DiffViewer.tsx

@@ -15,6 +15,7 @@ import {
 } from '@harness/uicore'
 import cx from 'classnames'
 import { Render } from 'react-jsx-match'
+import { Link } from 'react-router-dom'
 import { Diff2HtmlUI } from 'diff2html/lib-esm/ui/js/diff2html-ui'
 import { useStrings } from 'framework/strings'
 import { CodeIcon, GitInfoProps } from 'utils/GitUtils'
@@ -25,6 +26,7 @@ import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
 import { useAppContext } from 'AppContext'
 import type { TypesPullReq, TypesPullReqActivity } from 'services/code'
 import { getErrorMessage } from 'utils/Utils'
+import { CopyButton } from 'components/CopyButton/CopyButton'
 import {
  activitiesToDiffCommentItems,
  activityToCommentItem,
@@ -66,6 +68,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
  pullRequestMetadata,
  onCommentUpdate
 }) => {
+ const { routes } = useAppContext()
  const { getString } = useStrings()
  const [viewed, setViewed] = useState(false)
  const [collapsed, setCollapsed] = useState(false)
@@ -267,10 +270,12 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
 
  const element = commentRowElement.firstElementChild as HTMLTableCellElement
 
- // Note: CommentBox is rendered as an independent React component
+ // Note: 1. CommentBox is rendered as an independent React component
  // everything passed to it must be either values, or refs. If you
  // pass callbacks or states, they won't be updated and might
- // . cause unexpected bugs
+ // cause unexpected bugs
+ // 2. If you use a component inside CommentBox, make sure it follow
+ // the above rules as well (i.e useString as a prop instead of importing)
  ReactDOM.unmountComponentAtNode(element as HTMLDivElement)
  ReactDOM.render(
  <CommentBox
@@ -461,9 +466,16 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
  </Layout.Horizontal>
  </Container>
  <Text inline className={css.fname}>
- {diff.fileTitle}
+ <Link
+ to={routes.toCODERepository({
+ repoPath: repoMetadata.path as string,
+ gitRef: pullRequestMetadata?.source_branch,
+ resourcePath: diff.fileTitle
+ })}>
+ {diff.fileTitle}
+ </Link>
  </Text>
- <Button variation={ButtonVariation.ICON} icon={CodeIcon.Copy} size={ButtonSize.SMALL} />
+ <CopyButton content={diff.fileTitle} icon={CodeIcon.Copy} size={ButtonSize.SMALL} />
  <FlexExpander />
 
  <Render when={!readOnly}>

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

@@ -1,7 +1,7 @@
 .main {
  --bar-height: 60px;
 
- background-color: var(--green-50) !important; // #f6fff2
+ background-color: var(--green-50) !important;
  margin: -24px -24px 0 !important;
  position: sticky;
  top: 0;
@@ -16,10 +16,6 @@
  background-color: var(--red-50) !important;
  }
 
- &.hide {
- visibility: hidden !important;
- }
-
  .layout {
  height: var(--bar-height);
  padding: 0 var(--spacing-xlarge) !important;

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

@@ -4,7 +4,6 @@ declare const styles: {
  readonly main: string
  readonly merged: string
  readonly error: string
- readonly hide: string
  readonly layout: string
  readonly secondaryButton: string
  readonly btn: string

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import {
  Button,
  ButtonVariation,
@@ -17,16 +17,9 @@ import { Case, Else, Match, Render, Truthy } from 'react-jsx-match'
 import { Menu, PopoverPosition, Icon as BIcon } from '@blueprintjs/core'
 import cx from 'classnames'
 import ReactTimeago from 'react-timeago'
-import type {
- EnumMergeMethod,
- OpenapiMergePullReq,
- OpenapiStatePullReqRequest,
- RepoMergeCheck,
- TypesPullReq
-} from 'services/code'
+import type { EnumMergeMethod, OpenapiMergePullReq, OpenapiStatePullReqRequest, TypesPullReq } from 'services/code'
 import { useStrings } from 'framework/strings'
 import { CodeIcon, GitInfoProps, PullRequestFilterOption, PullRequestState } from 'utils/GitUtils'
-import { useShowRequestError } from 'hooks/useShowRequestError'
 import { getErrorMessage } from 'utils/Utils'
 import css from './PullRequestActionsBox.module.scss'
 
@@ -56,15 +49,7 @@ export const PullRequestActionsBox: React.FC<PullRequestActionsBoxProps> = ({
  verb: 'POST',
  path: `/api/v1/repos/${repoMetadata.path}/+/pullreq/${pullRequestMetadata.number}/state`
  })
- const {
- mutate: mergeCheck,
- error: errorMergeCheck,
- loading: loadingMergeCheck
- } = useMutate<RepoMergeCheck>({
- verb: 'POST',
- path: `/api/v1/repos/${repoMetadata.path}/+/merge-check/${pullRequestMetadata.target_branch}..${pullRequestMetadata.source_branch}`
- })
- const [mergeable, setMergable] = useState<boolean | undefined>()
+ const mergeable = pullRequestMetadata.merge_check_status === 'mergeable'
  const isDraft = pullRequestMetadata.is_draft
  const mergeOptions: PRMergeOption[] = [
  {
@@ -91,38 +76,14 @@ export const PullRequestActionsBox: React.FC<PullRequestActionsBoxProps> = ({
  }
  ]
  const [mergeOption, setMergeOption] = useState<PRMergeOption>(mergeOptions[1])
- const [shouldCallMergeCheck, setShouldCallMergeCheck] = useState(
- !isDraft && pullRequestMetadata.state === PullRequestState.OPEN
- )
-
- useShowRequestError(errorMergeCheck)
-
- useEffect(() => {
- if (shouldCallMergeCheck) {
- mergeCheck({})
- .then(response => {
- setMergable(response.mergeable)
- })
- .finally(() => setShouldCallMergeCheck(false))
- }
- }, [isDraft, mergeCheck, pullRequestMetadata, shouldCallMergeCheck])
-
  if (pullRequestMetadata.state === PullRequestFilterOption.MERGED) {
  return <MergeInfo pullRequestMetadata={pullRequestMetadata} />
  }
 
- // console.log(
- // 'variation',
- // mergeOption.method === 'close' || mergeable === false || loadingMergeCheck || shouldCallMergeCheck
- // ? ButtonVariation.TERTIARY
- // : ButtonVariation.PRIMARY
- // )
-
  return (
  <Container
  className={cx(css.main, {
- [css.error]: mergeable === false,
- [css.hide]: loadingMergeCheck || shouldCallMergeCheck
+ [css.error]: mergeable === false
  })}>
  <Layout.Vertical spacing="xlarge">
  <Container>
@@ -139,7 +100,7 @@ export const PullRequestActionsBox: React.FC<PullRequestActionsBoxProps> = ({
  </Text>
 
  <FlexExpander />
- <Render when={loading || loadingState || loadingMergeCheck}>
+ <Render when={loading || loadingState}>
  <Icon name={CodeIcon.InputSpinner} size={16} margin={{ right: 'xsmall' }} />
  </Render>
  <Match expr={isDraft}>
@@ -178,8 +139,7 @@ export const PullRequestActionsBox: React.FC<PullRequestActionsBoxProps> = ({
  inline
  className={cx({
  [css.btnWrapper]: mergeOption.method !== 'close',
- [css.hasError]: mergeable === false,
- [css.hide]: loadingMergeCheck || shouldCallMergeCheck
+ [css.hasError]: mergeable === false
  })}>
  <SplitButton
  text={mergeOption.title}
@@ -188,10 +148,7 @@ export const PullRequestActionsBox: React.FC<PullRequestActionsBoxProps> = ({
  [css.secondaryButton]: mergeOption.method === 'close' || mergeable === false
  })}
  variation={
- mergeOption.method === 'close' ||
- mergeable === false ||
- loadingMergeCheck ||
- shouldCallMergeCheck
+ mergeOption.method === 'close' || mergeable === false
  ? ButtonVariation.TERTIARY
  : ButtonVariation.PRIMARY
  }