BoxView: Add History Overlay

[vahidbazzaz]

The PR creates a global timeline component and adds a history overlay to the box view.

• create global timeline component
• create history overlay component
• make helper function for preparing box history entry
• add history overlay in the box view
• refactors the shipment history view to use a global timeline

[vahidbazzaz]

2.0 BoxView: History Overlay 2nd Iteration

[codecov]

Codecov Report

Merging #1038 (1fcfd62) into master (d14dc4b) will increase coverage by 0.05%.
Report is 35 commits behind head on master.
The diff coverage is 98.03%.

@@            Coverage Diff             @@
##           master    #1038      +/-   ##
==========================================
+ Coverage   72.79%   72.84%   +0.05%     
==========================================
  Files         284      285       +1     
  Lines        7373     7392      +19     
  Branches     1556     1562       +6     
==========================================
+ Hits         5367     5385      +18     
- Misses       1964     1965       +1     
  Partials       42       42              

Flag	Coverage Δ
backend	96.94% <ø> (ø)
frontend	53.64% <98.03%> (+0.19%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
...t/src/components/HistoryOverlay/HistoryOverlay.tsx	100.00% <100.00%> (ø)
react/src/components/Table/Filter.tsx	65.71% <ø> (ø)
react/src/components/Timeline/Timeline.tsx	100.00% <100.00%> (ø)
.../components/Timeline/components/TimelineBullet.tsx	100.00% <ø> (ø)
...c/components/Timeline/components/TimelineEntry.tsx	100.00% <100.00%> (ø)
react/src/hooks/useLabelIdentifierResolver.ts	90.00% <ø> (ø)
react/src/hooks/useScannedBoxesActions.ts	93.10% <ø> (ø)
react/src/views/Box/BoxView.tsx	65.24% <100.00%> (+2.38%)	⬆️
react/src/views/Box/components/BoxCard.tsx	95.29% <100.00%> (+0.11%)	⬆️
react/src/views/Box/components/BoxDetails.tsx	83.33% <ø> (ø)
... and 6 more

[pylipp]

Functional review

• when more than one history item is there, the button for history overlay shows and can be clicked. The overlay opens as expected, and is scrollable
• please fix the time format (e.g. 11:07 shows as 11:7)
• I found an irregularity: when I go to BoxEdit for a box that has no comment yet, and update e.g. tags there, save and return to BoxView, then the history shows "comments changed from "None" to "" " because None/null is the default in the stock table; but the FE sends "" (empty string) from the form, and then the BE detects and logs this as a change. If you know a simple way to make the FE send null instead of "" with the updateBox mutation, that'd be awesome; otherwise I'll adjust the BE in a separate PR

Leaving code review to @HaGuesto

[HaGuesto]

Functional review

All mentions from @pylipp were fixed.

I found an irregularity: when I go to BoxEdit for a box that has no comment yet, and update e.g. tags there, save and return to BoxView, then the history shows "comments changed from "None" to "" " because None/null is the default in the stock table; but the FE sends "" (empty string) from the form, and then the BE detects and logs this as a change. If you know a simple way to make the FE send null instead of "" with the updateBox mutation, that'd be awesome; otherwise I'll adjust the BE in a separate PR

I saw this problem already and I believe I fixed that behavior here
Probably we should also check BoxCreate (not in this PR though. I will create a ticket for it)

Otherwise, I have two more comments regarding functional review and maybe @aerinsol should decide here:

• The red and the blue does not look like the colors from our brand (Is that the color we want to have? What are they?)
• the points are not centered on the line. Is that wanted?
  

[HaGuesto]

Code review

Thanks for making the timeline component global.

I put in some suggestions where there is room for improvement. In general, I would ask you @Vahid to try to avoid handling undefined cases in the UI components.

But otherwise, I am happy with the code and there is only one must have that I ask you to change before you can merge this PR: Please rename the component TimelineContainer.

All other remarks from me are nice to haves and you can change them if you feel like it.

I'll approve this PR directly and I do not have to review this PR again. @vahidbazzaz you can decide when you want to merge it. I trust you that you will rename the timelineContainer before.