Add jump to date functionality to date headers in timeline v2

[MadLittleMods]

v1 in #7317

---

Add jump to date functionality to date headers in timeline

Relies on this matrix-js-sdk PR to add MSC3030 /timestamp_to_event support: matrix-org/matrix-js-sdk#2072

Fix element-hq/element-web#7677

Part of MSC3030: matrix-org/matrix-spec-proposals#3030

Experimental Synapse implementation added in matrix-org/synapse#9445

Testing strategy

1. Update your Synapse homeserver.yaml to enable the msc3030_enabled experimental feature

   experimental_features:
     msc3030_enabled: true
   

2. Refresh Element so the Element Labs feature shows up
3. Enable the Jump to date Labs feature
4. Check out the timeline for the jump to date headers

Dev notes

Screen recordings:

• Quicktime with
• https://github.com/keycastr/keycastr

---

Combining React callback refs and ref-refs,

• Share ref with multiple ref handlers facebook/react#13029
• https://dev.to/thekashey/merging-refs-41l8
• https://dev.to/thekashey/the-same-useref-but-it-will-callback-8bo
• https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
• https://dev.to/wojciechmatuszewski/mutable-and-immutable-useref-semantics-with-react-typescript-30c9

const attachRef = (input) => {
    this.input = input;

    if (typeof this.props.inputRef === 'function') {
        this.props.inputRef(input);
    } else if(this.props.inputRef) {
        this.props.inputRef.current = input;
    }
}

TODO

• Refactor rest of MenuItems, Add jump to date functionality to date headers in timeline v2 #7339 (comment)
• Clean up PR
• Split out ContextMenu RovingTabIndex refactor to another PR, Refactor ContextMenu to use RovingTabIndex (more consistent keyboard navigation accessibility) #7353
• Separate PR: /jumptodate 2021-12-10, Add /jumptodate slash command #7372
• Separate PR: Sticky date headers so one is always visible to reference and available to use to jump, Redesign: timeline: make date separator stick to bottom of room header element-hq/element-web#7575

---

This PR currently has no changelog labels, so will not be included in changelogs.

A reviewer can add one of: T-Deprecation, T-Enhancement, T-Defect, T-Task to indicate what type of change this is, or add Type: [enhancement/defect/task] to the description and I'll add them for you.

Preview: https://61f2350539af3b54bfe30e9a--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[ShadowJonathan]

Separate PR: Stick date headers so one is always visible to reference and available to use to jump, element-hq/element-web#7575

❤️

[MadLittleMods]

Thanks for the review pass @turt2live 🙂

[turt2live]

lgtm minus component naming

[turt2live]

thanks :)

[MadLittleMods]

Thanks for the review @turt2live 🐇

[turt2live]

@MadLittleMods did this still need design review?

[MadLittleMods]

@turt2live It's using the standard context menu styles so it's probably pretty good to go. The only thing non-standard is the jump to date calendar form area which we can always iterate in another PR if needed. Plus this is also behind a Labs flag so it doesn't really need to be held up by anything.

[t3chguy]

@MadLittleMods this caused all context menus to increase in size so definitely should've had design review

element-hq/element-web#20801

[MadLittleMods]

@t3chguy Thanks for cross-linking. It doesn't seem like we need to rely on design to QA that kind of thing (at least as the only defense). It can be spotted by anyone trying out the branch but we just missed it. Easy regression we can fix up on nightly ⏩ #7684