farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented view changes.

Browse Source
This commit is contained in:
Tom Butcher 2026-06-21 18:11:51 +01:00
parent 478010ea5b
commit a205f1d1ad
1 changed files with 122 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx
View File

@ -1,7 +1,9 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Button, Flex, Typography, Card } from 'antd' import { useState } from 'react'
import { Button, Flex, Typography, Card, Dropdown, Modal, Table } from 'antd'
import TimeDisplay from '../../common/TimeDisplay' import TimeDisplay from '../../common/TimeDisplay'
import FarmControlAppIcon from '../../../Logos/FarmControlAppIcon' import FarmControlAppIcon from '../../../Logos/FarmControlAppIcon'
import EyeIcon from '../../../Icons/EyeIcon'
const { Text, Title } = Typography const { Text, Title } = Typography
@ -9,56 +11,131 @@ const NewAppUpdate = ({ update, onCancel, onUpdate }) => {
const artifacts = Array.isArray(update?.artifacts) ? update.artifacts : [] const artifacts = Array.isArray(update?.artifacts) ? update.artifacts : []
const primaryArtifact = artifacts.find((artifact) => artifact.url) 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 ( return (
<Flex vertical gap='middle'> <>
<Text> <Flex vertical gap='middle'>
A new Farm Control update is available. Would you like to update now? <Text>
</Text> A new Farm Control update is available. Would you like to update now?
<Card styles={{ body: { padding: 12 } }}> </Text>
<Flex gap={12}> <Card styles={{ body: { padding: '12px 18px 12px 12px' } }}>
<FarmControlAppIcon style={{ width: '70px', height: '70px' }} /> <Flex gap={12} style={{ width: '100%' }}>
<Flex vertical gap={2} justify='center'> <FarmControlAppIcon style={{ width: '70px', height: '70px' }} />
<Title level={3} style={{ margin: 0 }}> <Flex vertical gap={2} justify='center' style={{ width: '100%' }}>
{'Farm Control UI'} <Title level={3} style={{ margin: 0 }}>
</Title> {'Farm Control UI'}
<Flex style={{ columnGap: '15px', rowGap: '8px' }}> </Title>
<Text style={{ margin: 0 }} type='secondary'> <Flex
Version:{' '} align='center'
<Text> justify='space-between'
{update?.version ? `v${update.version}` : 'Unknown'} style={{ width: '100%' }}
</Text> >
</Text> <Flex style={{ columnGap: '15px', rowGap: '8px' }}>
<Text style={{ margin: 0 }} type='secondary'> <Text style={{ margin: 0 }} type='secondary'>
Build Number:{' '} Version:{' '}
<Text> <Text>
{update?.buildNumber ? `b${update.buildNumber}` : 'Unknown'} {update?.version ? `v${update.version}` : 'Unknown'}
</Text> </Text>
</Text> </Text>
<Text style={{ margin: 0 }} type='secondary'> <Text style={{ margin: 0 }} type='secondary'>
Branch: <Text>{update?.branch || 'Unknown'}</Text> Build Number:{' '}
</Text> <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>
</Flex> </Flex>
</Flex> </Card>
</Card>
<Flex justify='space-between' gap='small' align='center'> <Flex justify='space-between' gap='small' align='center'>
<Flex gap='small'> <Flex gap='small'>
<Text type='secondary'>Built at:</Text> <Text type='secondary'>Built at:</Text>
<TimeDisplay dateTime={update?.builtAt} /> <TimeDisplay dateTime={update?.builtAt} />
</Flex> </Flex>
<Flex gap='small'> <Flex gap='small'>
<Button onClick={onCancel}>Not Now</Button> <Button onClick={onCancel}>Not Now</Button>
<Button <Button
type='primary' type='primary'
onClick={() => onUpdate(update)} onClick={() => onUpdate(update)}
disabled={!primaryArtifact} disabled={!primaryArtifact}
> >
Update Now Update Now
</Button> </Button>
</Flex>
</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> </Flex>
</Flex> </>
) )
} }