farmcontrol-ui/src/components/Dashboard/common/IdDisplay.jsx

// PrinterSelect.js
import PropTypes from 'prop-types'
import { Flex, Typography, Popover } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useMediaQuery } from 'react-responsive'
import CopyButton from './CopyButton'
import ElipsisText from './ElipsisText'
import SpotlightTooltip from './SpotlightTooltip'
import { getModelByName } from '../../../database/ObjectModels'
import { buildActionUrl } from '../../../utils/modelActions'

const { Text, Link } = Typography

const IdDisplay = ({
  id,
  reference = null,
  plainCode = false,
  type,
  showCopy = true,
  longId = true,
  showHyperlink = false,
  showSpotlight = true
}) => {
  const navigate = useNavigate()
  const isMobile = useMediaQuery({ maxWidth: 768 })

  const model = getModelByName(type)
  const prefix = model.prefix

  var hyperlink = null

  const defaultModelActions =
    model.actions?.filter((action) => action.default == true) || []

  if (defaultModelActions.length >= 1) {
    hyperlink = buildActionUrl(model, defaultModelActions[0], id, '', '')
  }

  if (!id) {
    return <Text type='secondary'>n/a</Text>
  }

  id = typeof id === 'string' ? id.toString().toUpperCase() : 'XXXXXX'
  var displayId = prefix + ':' + id
  var copyId = prefix + ':' + id

  if (longId == false || isMobile) {
    displayId = prefix + ':' + id.toString().slice(-6)
  }

  if (reference) {
    displayId = prefix + ':' + reference
  }

  return (
    <Flex
      align={'center'}
      className='iddisplay'
      style={{ minWidth: '0px', width: '100%' }}
    >
      {(() => {
        var textElement = (
          <code
            style={showCopy ? { marginRight: 6, minWidth: '0px' } : undefined}
          >
            {displayId}
          </code>
        )

        if (plainCode == false) {
          textElement = (
            <ElipsisText
              code
              style={showCopy ? { marginRight: 6, minWidth: '0px' } : undefined}
            >
              {displayId}
            </ElipsisText>
          )
        }

        // If hyperlink is enabled
        if (showHyperlink && hyperlink != null) {
          const linkElement = (
            <Link
              onClick={() => navigate(hyperlink)}
              style={{
                minWidth: 0,
                maxWidth: '100%',
                display: 'block',
                ...(showCopy ? { marginRight: 6 } : null)
              }}
            >
              {textElement}
            </Link>
          )

          if (showSpotlight) {
            return (
              <Popover
                content={
                  id && type ? (
                    <SpotlightTooltip query={prefix + ':' + id} type={type} />
                  ) : null
                }
                trigger={['hover', 'click']}
                placement='topLeft'
                arrow={false}
                style={{ padding: 0 }}
              >
                {linkElement}
              </Popover>
            )
          }
          return linkElement
        }

        // If hyperlink is disabled
        if (showSpotlight) {
          return (
            <Popover
              content={
                id && type ? (
                  <SpotlightTooltip query={prefix + ':' + id} type={type} />
                ) : null
              }
              trigger={['hover', 'click']}
              placement='topLeft'
              arrow={false}
            >
              {textElement}
            </Popover>
          )
        }
        return textElement
      })()}

      {showCopy && (
        <CopyButton
          text={copyId}
          tooltip='Copy ID'
          style={{ marginLeft: 0 }}
          iconStyle={{ fontSize: '14px' }}
        />
      )}
    </Flex>
  )
}

IdDisplay.propTypes = {
  id: PropTypes.string,
  type: PropTypes.string,
  reference: PropTypes.string,
  showCopy: PropTypes.bool,
  longId: PropTypes.bool,
  showHyperlink: PropTypes.bool,
  plainCode: PropTypes.bool,
  showSpotlight: PropTypes.bool
}

export default IdDisplay