Merge pull request #143 from CSCfi/CSCFC4EMSCR-395

convert version history to use generic table component

mscr-ui/src/common/components/version-history/index.tsx

@@ -1,48 +1,31 @@
-import TableContainer from '@mui/material/TableContainer';
-import Table from '@mui/material/Table';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import TableCell from '@mui/material/TableCell';
-import TableBody from '@mui/material/TableBody';
-import { useTranslation } from 'next-i18next';
-import { ContentRevision } from '@app/common/interfaces/content-revision.interface';
+import {useTranslation} from 'next-i18next';
+import {ContentRevision} from '@app/common/interfaces/content-revision.interface';
 import FormattedDate from 'yti-common-ui/components/formatted-date';
+import GenericTable from "@app/common/components/generic-table";
+import {VersionHistoryContainer} from "@app/common/components/version-history/version-history.styles";
 
 export default function VersionHistory({
-  revisions,
-}: {
+                                         revisions,
+                                       }: {
   revisions: ContentRevision[];
 }) {
-  const { t } = useTranslation('common');
+  const {t} = useTranslation('common');
   const headers = [
     t('metadata.version-label'),
     t('metadata.pid'),
     t('metadata.created'),
     t('metadata.state'),
   ];
+
+  const revisionsFormatted = revisions.map((revision) => ({
+    versionLabel: revision.versionLabel,
+    pid: revision.pid,
+    created: <FormattedDate date={revision.created}/>,
+    state: revision.state
+  }));
+
   return (
-    <TableContainer>
-      <Table aria-label={t('metadata.versions')}>
-        <TableHead>
-          <TableRow>
-            {headers.map((header) => (
-              <TableCell key={header}>{header}</TableCell>
-            ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {revisions.map((revision) => (
-            <TableRow key={revision.versionLabel}>
-              <TableCell>{revision.versionLabel}</TableCell>
-              <TableCell>{revision.pid}</TableCell>
-              <TableCell>
-                <FormattedDate date={revision.created} />
-              </TableCell>
-              <TableCell>{revision.state}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <><VersionHistoryContainer><GenericTable items={revisionsFormatted} headings={headers}
+                                             caption={t('metadata.versions')}></GenericTable></VersionHistoryContainer></>
   );
 }

mscr-ui/src/common/components/version-history/version-history.styles.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const VersionHistoryContainer = styled.div`
+  color: ${(props) => props.theme.suomifi.colors.blackBase};
+  margin: 0.5rem;
+  h2 {
+    color: #6b6b6b;
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+`;