diff --git a/src/components/TableVersionHistory.js b/src/components/TableVersionHistory.js index e878ce446..cf473a59c 100644 --- a/src/components/TableVersionHistory.js +++ b/src/components/TableVersionHistory.js @@ -1,29 +1,29 @@ -import React from "react"; -import Link from "@docusaurus/Link"; -import useBaseUrl from "@docusaurus/useBaseUrl"; -import { useLocation } from "@docusaurus/router"; -import "../css/custom.css"; -import "../css/tables.css"; +import Link from '@docusaurus/Link'; +import { useLocation } from '@docusaurus/router'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import '../css/custom.css'; +import '../css/tables.css'; const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], modifiedBy = [], reviewedBy = [], approvedBy = [] }) => { const rowCount = Math.max(versions.length, dates.length, descriptions.length, modifiedBy.length, reviewedBy.length, approvedBy.length); const location = useLocation(); - const pathname = location?.pathname || ""; + const pathname = location?.pathname || ''; const docMatch = pathname.match(/\/docs\/(.+?)\/v\d+\.\d+\//); - const documentPath = docMatch ? docMatch[1] : ""; + const documentPath = docMatch ? docMatch[1] : ''; // Hard-coded headers, widths, and alignments - const HEADERS = ["Version", "Date", "Description", "Modified By", "Reviewed By", "Approved By"]; - const COL_WIDTHS = ["8%", "13%", "37%", "14%", "14%", "14%"]; - const HEADERS_ALIGN = ["center", "left", "left", "left", "left", "left"]; + const HEADERS = ['Version', 'Date', 'Description', 'Modified By', 'Reviewed By', 'Approved By']; + const COL_WIDTHS = ['8%', '13%', '37%', '14%', '14%', '14%']; + const HEADERS_ALIGN = ['left', 'left', 'left', 'left', 'left', 'left']; + const CELL = { textAlign: 'left', verticalAlign: 'top' }; - const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? ""; + const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? ''; const normalizeVersion = (value) => { - if (!value) return ""; - return value.startsWith("v") ? value : `v${value}`; + if (!value) return ''; + return value.startsWith('v') ? value : `v${value}`; }; const buildVersionHistoryHref = (value) => { - if (!documentPath || !value) return ""; + if (!documentPath || !value) return ''; const version = normalizeVersion(value); return `/docs/${documentPath}/${version}/version-history`; }; @@ -31,101 +31,97 @@ const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], mod return (
- - {/* Column sizing */} - - {COL_WIDTHS.map((w, i) => ( - - ))} - - - - - {HEADERS.map((h, i) => ( - +
- {h} -
+ {/* Column sizing */} + + {COL_WIDTHS.map((w, i) => ( + ))} - - + + + + + {HEADERS.map((h, i) => ( + + ))} + + - - {Array.from({ length: rowCount }).map((_, rowIndex) => { - const v = get(versions, rowIndex); - const d = get(dates, rowIndex); - const ds = get(descriptions, rowIndex); - const m = get(modifiedBy, rowIndex); - const r = get(reviewedBy, rowIndex); - const a = get(approvedBy, rowIndex); - const versionHref = buildVersionHistoryHref(v); + + {Array.from({ length: rowCount }).map((_, rowIndex) => { + const v = get(versions, rowIndex); + const d = get(dates, rowIndex); + const ds = get(descriptions, rowIndex); + const m = get(modifiedBy, rowIndex); + const r = get(reviewedBy, rowIndex); + const a = get(approvedBy, rowIndex); + const versionHref = buildVersionHistoryHref(v); - return ( - - {/* Version (col 0) */} - + return ( + + {/* Version (col 0) */} + - {/* Date (col 1) */} - + {/* Date (col 1) */} + - {/* Description (col 2) */} - + ds + )} + - {/* Modified By (col 3) */} - + {/* Modified By (col 3) */} + - {/* Reviewed By (col 4) */} - + {/* Reviewed By (col 4) */} + - {/* Approved By (col 5) */} - - - ); - })} - -
+ {h} +
- {versionHref ? ( - - {v} - - ) : ( - v - )} -
+ {versionHref ? ( + + {v} + + ) : ( + v + )} + - {d} - + {d} + - {Array.isArray(ds) ? ( - ds.length > 1 ? ( -
    - {ds.map((item, i) => ( -
  • {item}
  • - ))} -
+ {/* Description (col 2) */} +
+ {Array.isArray(ds) ? ( + ds.length > 1 ? ( +
    + {ds.map((item, i) => ( +
  • {item}
  • + ))} +
+ ) : ( + ds[0] || '' + ) ) : ( - ds[0] || "" - ) - ) : ( - ds - )} -
- {m} - + {m} + - {r} - + {r} + - {a} -
+ {/* Approved By (col 5) */} + + {a} + + + ); + })} + +
);