All files / modules/10-common/components/CopyText CopyText.tsx

92.86% Statements 13/14
92.31% Branches 12/13
66.67% Functions 2/3
92.86% Lines 13/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62              66x 66x 66x 66x 66x 66x                     66x 1160x 1160x 1160x   1x 1x             1160x                                                  
/*
 * Copyright 2022 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import React from 'react'
import { Button, Utils, IconName } from '@wings-software/uicore'
import cx from 'classnames'
import { Classes } from '@blueprintjs/core'
import { String } from 'framework/strings'
import css from './CopyText.module.scss'
 
export interface CopyTextProps {
  children?: React.ReactNode
  iconName?: IconName
  className?: string
  valueClassName?: string
  textToCopy: string
  iconAlwaysVisible?: boolean
}
 
export function CopyText(props: CopyTextProps): React.ReactElement {
  const { iconAlwaysVisible = false } = props
  const [copied, setCopied] = React.useState(false)
  const icon = props.iconName || 'copy-alt'
  function handleClick(): void {
    Utils.copy(props.textToCopy)
    setCopied(true)
  }
 
  function onClosed(): void {
    setCopied(false)
  }
 
  return (
    <div className={cx(css.main, props.className)}>
      <div className={cx(css.text, props.valueClassName)}>{props.children}</div>
      {window.isSecureContext && (
        <Button
          data-testid="copy-btn"
          disabled={!window.isSecureContext}
          data-name={icon}
          icon={copied ? 'execution-success' : icon}
          minimal
          intent="primary"
          small
          className={cx(css.copyIcon, copied && css.successIcon)}
          tooltip={<String className={css.tooltip} stringID={copied ? 'copiedToClipboard' : 'clickToCopy'} />}
          tooltipProps={{
            wrapperTagName: 'div',
            className: iconAlwaysVisible ? cx(css.alwaysVisible, Classes.DARK) : css.btnWrapper,
            onClosed
          }}
          onClick={handleClick}
        />
      )}
    </div>
  )
}