Skip to content

Overhaul `Timeline`

Warren Gifford requested to merge kr/timeline into main

Created by: courier-new

This started out as "replace the Collapsible in the timeline so that the tooltips for the timestamps work again" and turned into "I don't understand half of what this component is doing, let's give it some love." 😄

  • Cleaned up props
    • Timeline.stages now only accepts valid stages (i.e. stages with a date). Consumers should be responsible for filtering.
    • Timeline.withoutPreviousDate became Timeline.showDurations, because a) "previous date" was a weird description for a time distance between two items in the timeline sequence and b) I think positively-framed props ("show this thing") are easier to reason about than negatively-framed props ("don't show this thing")
    • TimelineStage.expanded became TimelineStage.expandedByDefault, to avoid any confusion over who is in control of the collapsible state
  • Restructured component
    • TimelineMeta was a weird abstraction for part of the item label we show for each stage, so now it has become TimelineStage
    • There was a lot of unnecessary <div /> nesting, this has been flattened
  • Refactored Collapsible to use Collapse
  • Cleaned up styles
  • Improved Storybook coverage

Screenshots

Tooltip functionality restored!

Screen Shot 2022-06-16 at 10 55 51 AM

Batch spec execution timeline

Screen Shot 2022-06-16 at 10 55 47 AM

Code intel upload timeline

Screen Shot 2022-06-16 at 10 52 37 AM

Code intel audit log timeline

Screen Shot 2022-06-16 at 10 55 21 AM

Test plan

Validated tooltips are visible again, manually tested timeline in the Batch Changes modal. There isn't Storybook coverage for the other instances of Timeline used across Code Intel, and I don't have Code Intel set up locally, but I was able to inspect some from the app preview and they still looked good!

App preview:

Check out the client app preview documentation to learn more.

Merge request reports

Loading