Fixed issue with timeline in html-report after dep bump #32

Ant design at it again.

Signed-off-by: Dave Shanley <[email protected]>

html-report/ui/src/components/navigation/Navigation.tsx

@@ -2,20 +2,19 @@
 // SPDX-License-Identifier: MIT
 
 import {NavState, ReportState, useNavStore, useReportStore} from "@/model/store";
-import {Drawer, Timeline} from "antd";
+import {Drawer, Timeline, TimelineItemProps} from "antd";
 import React, {useEffect} from "react";
-import {FileAddOutlined} from "@ant-design/icons";
+import {ClockCircleOutlined, FileAddOutlined, WarningFilled} from "@ant-design/icons";
 import {ReportItem} from "@/model/report";
 import {ChangeChart} from "@/components/charts/ChangeChart";
-import {TimelineChange} from "@/components/navigation/TimelineChange";
+import {TimelineChangeItem} from "./TimelineChangeItem";
 import './Navigation.css';
 
 export function Navigation() {
     const selectedReportItem = useReportStore((report: ReportState) => report.selectedReportItem);
     const navOpen = useNavStore((state: NavState) => state.navOpen)
     const closeNav = useNavStore((state: NavState) => state.closeNav)
     const report = useReportStore((report: ReportState) => report.report);
-    const selectedIndex = useReportStore((report: ReportState) => report.selectedReportIndex);
     const highlightedIndex = useReportStore((report: ReportState) => report.highlightedReportIndex);
 
     useEffect(() => {
@@ -26,7 +25,7 @@ export function Navigation() {
         }
     }, [selectedReportItem])
 
-    if(!report) {
+    if (!report) {
         return null;
     }
 
@@ -43,6 +42,47 @@ export function Navigation() {
         size = 'default';
     }
 
+    // 04/27/23: Had to re-write this slightly because ant design went and did some crazy stuff with their
+    // timeline component and screwed me up. A warning to everyone who ever takes a dependency
+    // on a tool that is not their own.
+    let items: TimelineItemProps[] = []
+    report.reportItems.map((item: ReportItem) => {
+        const n = (
+            <TimelineChangeItem
+                time={item.statistics.commit.date}
+                totalChanges={item.statistics.total}
+                breakingChanges={item.statistics.totalBreaking}
+                addedChanges={item.statistics.added}
+                removedChanges={item.statistics.removed}
+                modifiedChanges={item.statistics.modified}
+                reverseIndex={reverseIndex}
+                index={index}
+            />
+        )
+
+        index++
+        if (reverseIndex !== 0) {
+            reverseIndex--
+            let icon: JSX.Element
+            let color: string
+            icon = <ClockCircleOutlined/>
+            color = 'var(--primary-color)'
+            if (item.statistics.totalBreaking > 0) {
+                icon = (<WarningFilled/>)
+                color = 'var(--error-color)'
+            }
+            let timelineItemProps: TimelineItemProps = {
+                dot: icon,
+                color: color,
+                className: 'timeline-change-item',
+                children: n
+            }
+            items.push(timelineItemProps)
+        } else {
+            return null;
+        }
+    })
+
     return (
         <Drawer
             title="Select change"
@@ -68,22 +108,11 @@ export function Navigation() {
             <div className='timeline-container'>
                 <ChangeChart selectedIndex={highlightedIndex}/>
                 <hr/>
-                <Timeline pending={<span className='nav-doc-created'>Earliest Original: {creationDate.toLocaleString()}</span>}
-                          pendingDot={<FileAddOutlined/>}
-                          className='navigation-timeline'>
-                    {report.reportItems.map((item: ReportItem) => {
-                        const n = (
-                            <TimelineChange reportItem={item} index={index} reverseIndex={reverseIndex} key={index}
-                                            totalChanges={report.reportItems.length}/>
-                        )
-                        index++
-                        if (reverseIndex !== 0) {
-                            reverseIndex--
-                            return n;
-                        } else {
-                            return null;
-                        }
-                    })}
+                <Timeline
+                    pending={<span className='nav-doc-created'>Earliest Original: {creationDate.toLocaleString()}</span>}
+                    pendingDot={<FileAddOutlined/>}
+                    className='navigation-timeline'
+                    items={items}>
                 </Timeline>
             </div>
         </Drawer>