Show article history in a table via GET /article/{sku}/history.

src/components/article/tabs/ArticleHistoryTab.jsx

@@ -0,0 +1,71 @@
+import { Component } from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { StorageManagerContext } from '../../../api/storageManagerContext';
+import { notifyError } from '../../../utils/notify';
+
+function formatDate(iso) {
+  return new Date(iso).toLocaleString('de-DE');
+}
+
+export default class ArticleHistoryTab extends Component {
+  static contextType = StorageManagerContext;
+
+  constructor(props) {
+    super(props);
+    this.state = { history: null };
+  }
+
+  componentDidMount() {
+    void this.context.article
+      .history(this.props.sku)
+      .then((res) => this.setState({ history: res.history }))
+      .catch(notifyError);
+  }
+
+  render() {
+    const { history } = this.state;
+    if (history == null) return null;
+    return (
+      <Table
+        size="small"
+        sx={{
+          '& td': { borderBottom: 'none', bgcolor: 'transparent' },
+          '& th': { bgcolor: 'transparent' },
+        }}
+      >
+        <TableHead>
+          <TableRow>
+            <TableCell
+              sx={{
+                borderBottom: '1px solid rgba(0, 0, 0, 0.35)',
+                width: '1%',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              Datum
+            </TableCell>
+            <TableCell
+              sx={{ borderBottom: '1px solid rgba(0, 0, 0, 0.35)' }}
+            />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {history.map((entry) => (
+            <TableRow key={entry.id}>
+              <TableCell
+                sx={{ verticalAlign: 'top', whiteSpace: 'nowrap', width: '1%' }}
+              >
+                {formatDate(entry.date)}
+              </TableCell>
+              <TableCell sx={{ whiteSpace: 'pre-wrap' }}>{entry.text}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  }
+}