149 lines
4.2 KiB
JavaScript
149 lines
4.2 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { useState } from 'react'
|
|
import { Button, Flex, Typography, Card, Dropdown, Modal, Table } from 'antd'
|
|
import TimeDisplay from '../../common/TimeDisplay'
|
|
import FarmControlAppIcon from '../../../Logos/FarmControlAppIcon'
|
|
import EyeIcon from '../../../Icons/EyeIcon'
|
|
|
|
const { Text, Title } = Typography
|
|
|
|
const NewAppUpdate = ({ update, onCancel, onUpdate }) => {
|
|
const artifacts = Array.isArray(update?.artifacts) ? update.artifacts : []
|
|
const primaryArtifact = artifacts.find((artifact) => artifact.url)
|
|
|
|
const [changesMenuOpen, setChangesMenuOpen] = useState(false)
|
|
|
|
const columns = [
|
|
{
|
|
title: 'Date',
|
|
dataIndex: 'date',
|
|
key: 'date',
|
|
width: 290,
|
|
render: (text, record) => {
|
|
return <TimeDisplay dateTime={record.date} showSince={true} />
|
|
}
|
|
},
|
|
{
|
|
title: 'Author',
|
|
dataIndex: 'author',
|
|
key: 'author',
|
|
width: 180
|
|
},
|
|
{
|
|
title: 'Message',
|
|
dataIndex: 'message',
|
|
key: 'message',
|
|
width: 500
|
|
}
|
|
]
|
|
|
|
const actionsMenu = {
|
|
items: [
|
|
{
|
|
label: 'View Changes',
|
|
key: 'viewChanges',
|
|
icon: <EyeIcon />
|
|
}
|
|
],
|
|
onClick: ({ key }) => {
|
|
if (key === 'viewChanges') {
|
|
setChangesMenuOpen(true)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Flex vertical gap='middle'>
|
|
<Text>
|
|
A new Farm Control update is available. Would you like to update now?
|
|
</Text>
|
|
<Card styles={{ body: { padding: '12px 18px 12px 12px' } }}>
|
|
<Flex gap={12} style={{ width: '100%' }}>
|
|
<FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
|
|
<Flex vertical gap={2} justify='center' style={{ width: '100%' }}>
|
|
<Title level={3} style={{ margin: 0 }}>
|
|
{'Farm Control UI'}
|
|
</Title>
|
|
<Flex
|
|
align='center'
|
|
justify='space-between'
|
|
style={{ width: '100%' }}
|
|
>
|
|
<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>
|
|
<Dropdown menu={actionsMenu}>
|
|
<Button size='small' type='text'>
|
|
Actions
|
|
</Button>
|
|
</Dropdown>
|
|
</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>
|
|
|
|
<Modal
|
|
open={changesMenuOpen}
|
|
onCancel={() => setChangesMenuOpen(false)}
|
|
footer={null}
|
|
title='View Changes'
|
|
width={1200}
|
|
>
|
|
<div style={{ marginTop: '20px' }}>
|
|
<Table
|
|
dataSource={update?.changes}
|
|
columns={columns}
|
|
scroll={{ x: 1100 }}
|
|
bordered={true}
|
|
pagination={false}
|
|
className='child-table'
|
|
/>
|
|
</div>
|
|
</Modal>
|
|
</Flex>
|
|
</>
|
|
)
|
|
}
|
|
|
|
NewAppUpdate.propTypes = {
|
|
update: PropTypes.object,
|
|
onCancel: PropTypes.func.isRequired,
|
|
onUpdate: PropTypes.func.isRequired
|
|
}
|
|
|
|
export default NewAppUpdate
|