Create item header view

api/ECNQueue.py

@@ -228,8 +228,22 @@ def __parseHeaders(self) -> list:
         message = email.message_from_string(headerString)
 
         headers = []
+        dateHeaders=[
+            "QStatus-Updated-Time",
+            "Status-Updated-Time",
+            "Edited-Time",
+            "QTime-Updated-Time",
+            "Merged-Time",
+            "Time-Updated-Time",
+            "Replied-Time",
+            "Assigned-To-Updated-Time",
+            "QAssigned-To-Updated-Time",
+            "Date",
+            "Sent"
+        ]
+
         for key in message.keys():
-            headers.append({"type": key, "content": message[key]})
+            headers.append({"type": key, "content": self.__getFormattedDate(message[key]) if key in dateHeaders else message[key]})
 
         return headers
 
@@ -1331,4 +1345,4 @@ def loadQueues() -> list:
     for queue in getValidQueues():
         queues.append(Queue(queue))
 
-    return queues
+    return queues

src/components/ItemBodyView/ItemBodyView.js

@@ -13,8 +13,9 @@ export default function ItemBodyView({ item }) {
 
 	const useStyles = makeStyles(() => ({
 		"Timeline-root": {
-			paddingLeft: "0",
-			paddingRight: "0",
+			padding: "0",
+			marginTop: "0",
+			marginBottom: "0",
 		},
 		"TimelineContent-root": {
 			paddingRight: "0",

src/components/ItemHeaderView/ItemHeaderView.js

@@ -0,0 +1,93 @@
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+import { useTable, useFlexLayout, useFilters } from "react-table";
+import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, useTheme, makeStyles } from "@material-ui/core";
+
+export default function ItemHeaderView({ data }) {
+
+	const theme = useTheme();
+	const useStyles = makeStyles({
+		HeaderCell_root: {
+			paddingBottom: theme.spacing(2),
+			borderBottomWidth: 0
+		},
+		ContentCell_root: {
+			wordBreak: "break-word"
+		},
+		bandedRows: {
+            '&:nth-of-type(even)': {
+                backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700],
+			}
+		}
+	});
+	const classes = useStyles();
+
+	const columns = useMemo(() => [
+		{ Header: 'Type', accessor: 'type', Cell: ({ value }) => <b>{value}</b> , width: 1 },
+		{ Header: 'Content', accessor: 'content', width: 2 }
+	], []);
+
+	const defaultColumn = {
+		Filter: ({ column: { Header, setFilter } }) => (
+			<TextField
+				label={Header}
+				onChange={ (event) => setFilter(event.target.value) }
+				type="search"
+				size="small"
+				variant="outlined"
+				color="secondary"
+				fullWidth
+			/>
+		)
+	}
+
+	const tableInstance = useTable({ columns, data, defaultColumn }, useFlexLayout, useFilters);
+	const {
+		getTableProps,
+		getTableBodyProps,
+		headerGroups,
+		rows,
+		prepareRow
+	} = tableInstance;
+
+	return (
+		<TableContainer>
+			<Table {...getTableProps} size="small">
+				<TableHead>
+					{headerGroups.map(headerGroup => (
+						<TableRow {...headerGroup.getHeaderGroupProps()}>
+							{headerGroup.headers.map(column => (
+								<TableCell {...column.getHeaderProps()} classes={{ root: classes.HeaderCell_root }}>
+									{column.render('Filter')}
+								</TableCell>
+							))}
+						</TableRow>
+					))}
+				</TableHead>
+				<TableBody {...getTableBodyProps()}>
+					{rows.map( (row) => {
+						prepareRow(row);
+						return (
+							<TableRow {...row.getRowProps()} classes={{ root: classes.bandedRows }}>
+								{row.cells.map( (cell) => (
+									<TableCell {...cell.getCellProps()} classes={{ root: classes.ContentCell_root }}>
+										{cell.render("Cell")}
+									</TableCell>
+								))}
+							</TableRow>
+						);
+					})}
+				</TableBody>
+			</Table>
+		</TableContainer>
+	);
+};
+
+ItemHeaderView.propTypes = {
+	/** An array of object containing header type and content. */
+	"data": PropTypes.array
+};
+
+ItemHeaderView.defaultProps = {
+	"data": []
+}

src/components/ItemHeaderView/index.js

@@ -0,0 +1 @@
+export { default } from "./ItemHeaderView";

src/components/ItemView/ItemView.js

@@ -1,26 +1,51 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from "prop-types";
-import { Paper, makeStyles, useTheme } from '@material-ui/core';
+import { Paper, AppBar, Tab, makeStyles, useTheme } from '@material-ui/core';
+// Import these tab components from @material-ui/lab instead of @material-ui/core for automatic a11y props
+// See: https://material-ui.com/components/tabs/#experimental-api
+import { TabContext, TabList, TabPanel } from '@material-ui/lab';
 import ItemMetadataView from "../ItemMetadataView/"
 import ItemBodyView from "../ItemBodyView";
+import ItemHeaderView from "../ItemHeaderView";
 
 export default function ItemView({ activeItem }){
+	const [activeTab, setActiveTab] = useState('Conversation');
 
 	const theme = useTheme();
 	const useStyles = makeStyles({
 		"paperPadding": {
 			paddingTop: theme.spacing(1),
 			paddingLeft: theme.spacing(2),
 			paddingRight: theme.spacing(2),
-			border: "none"
+			border: "none",
+		},
+		"tabPanelPadding": {
+			padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`
 		}
 	});
 	const classes = useStyles();
 
-return(
+	const handleTabChange = (event, newValue) => {
+		setActiveTab(newValue);
+	};
+
+	return(
 		<Paper variant="outlined" classes={{root: classes.paperPadding}} square>
 			<ItemMetadataView item={activeItem} />
-			<ItemBodyView item={activeItem} />
+			<TabContext value={activeTab}>
+				<AppBar position="relative" color="default" variant="outlined">
+					<TabList onChange={handleTabChange} variant="fullWidth">
+						<Tab label="Conversation" value="Conversation" />
+						<Tab label="Headers" value="Headers" />
+					</TabList>
+				</AppBar>
+				<TabPanel value="Conversation" classes={{ root: classes.tabPanelPadding }}>
+					<ItemBodyView item={activeItem} />
+				</TabPanel>
+				<TabPanel value="Headers" classes={{ root: classes.tabPanelPadding }}>
+					<ItemHeaderView data={activeItem.headers} />
+				</TabPanel>
+			</TabContext>
 		</Paper>
 	);
 };