Implemented view changes.

src/components/Dashboard/Management/AppUpdates/NewAppUpdate.jsx

@@ -1,7 +1,9 @@
 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 FarmControlAppIcon from '../../../Logos/FarmControlAppIcon'
+import EyeIcon from '../../../Icons/EyeIcon'
 
 const { Text, Title } = Typography
 
@@ -9,18 +11,65 @@ 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: 12 } }}>
-        <Flex gap={12}>
+        <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'>
+            <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:{' '}
@@ -31,13 +80,21 @@ const NewAppUpdate = ({ update, onCancel, onUpdate }) => {
                   <Text style={{ margin: 0 }} type='secondary'>
                     Build Number:{' '}
                     <Text>
-                  {update?.buildNumber ? `b${update.buildNumber}` : 'Unknown'}
+                      {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>
@@ -58,7 +115,27 @@ const NewAppUpdate = ({ update, onCancel, onUpdate }) => {
             </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>
+    </>
   )
 }