farmcontrol-ui/src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx

import PropTypes from 'prop-types'
import { Button, Flex, Typography, Card } from 'antd'
import TimeDisplay from '../../common/TimeDisplay'
import FarmControlAppIcon from '../../../Logos/FarmControlAppIcon'

const { Text, Title } = Typography

const NewAppUpdate = ({ update, onCancel, onUpdate }) => {
  const artifacts = Array.isArray(update?.artifacts) ? update.artifacts : []
  const primaryArtifact = artifacts.find((artifact) => artifact.url)

  return (
    <Flex vertical gap='middle'>
      <Text>
        A new Farm Control update is available. Would you like to update now?
      </Text>
      <Card styles={{ body: { padding: 12 } }}>
        <Flex gap={12}>
          <FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
          <Flex vertical gap={2} justify='center'>
            <Title level={3} style={{ margin: 0 }}>
              {'Farm Control UI'}
            </Title>
            <Flex style={{ columnGap: '15px', rowGap: '8px' }}>
              <Text style={{ margin: 0 }} type='secondary'>
                Version:{' '}
                <Text>
                  {update?.version ? `v${update.version}` : 'Unknown'}
                </Text>
              </Text>
              <Text style={{ margin: 0 }} type='secondary'>
                Build Number:{' '}
                <Text>
                  {update?.buildNumber ? `b${update.buildNumber}` : 'Unknown'}
                </Text>
              </Text>
              <Text style={{ margin: 0 }} type='secondary'>
                Branch: <Text>{update?.branch || 'Unknown'}</Text>
              </Text>
            </Flex>
          </Flex>
        </Flex>
      </Card>

      <Flex justify='space-between' gap='small' align='center'>
        <Flex gap='small'>
          <Text type='secondary'>Built at:</Text>
          <TimeDisplay dateTime={update?.builtAt} />
        </Flex>
        <Flex gap='small'>
          <Button onClick={onCancel}>Not Now</Button>
          <Button
            type='primary'
            onClick={() => onUpdate(update)}
            disabled={!primaryArtifact}
          >
            Update Now
          </Button>
        </Flex>
      </Flex>
    </Flex>
  )
}

NewAppUpdate.propTypes = {
  update: PropTypes.object,
  onCancel: PropTypes.func.isRequired,
  onUpdate: PropTypes.func.isRequired
}

export default NewAppUpdate